在本教程中,我们将介绍使用Codename One构建美观的聊天应用程序的基础知识,该应用程序可在所有移动OS上使用。 我们将涵盖从设计到社交网络登录以及实际聊天行为的所有内容。 本教程适用于手动编码的应用程序,主要是因为GUI生成器教程需要视频,因此搜索较少。
该项目是使用新的Java 8支持创建的,以使代码简单明了。
创建新项目
我们创建一个新的Codename One项目,然后选择新的浅蓝色主题。
单击完成后,我们将有一个新项目,因此我们需要一些文件才能开始。 首先将文件fontello.ttf放在src目录中。 该字体文件包含图像字体图标,我们将使用它们在UI中提供图标。
接下来,您将需要将此图像保存到硬盘驱动器以用于第一种形式。
登录界面
现在,我们将剩下的一切都整理好了,可以双击主题文件来启动设计器。 在设计器中,我们需要单击Images→Quick Add Multi Images
选项,然后选择下载到磁盘的图像 。
当提示您保留默认值Very High
,这将有效创建一个多图像,该图像以多种不同的分辨率存储该图像,并根据手边的设备密度提供适当大小的图像。
现在我们可以创建主窗体,该主窗体是应用程序的入口点,最终将如下所示:
为此,我们选择主要主题,然后单击添加按钮以添加新条目。 然后,我们在顶部区域中输入MainForm
并设计表单:
- 在第一个标签中,我们取消选中“派生”,然后将类型选择为
IMAGE_SCALED_FILL
。 这实际上意味着我们将使用图像作为背景,并在整个屏幕上缩放图像。 我们还确保选择刚刚添加的多图像。 - 在“派生”选项卡中,我们取消选中“
derive
(有点混乱),然后在组合框中选择“Form
”。 这意味着MainForm
样式继承了Form样式的基本设置。
添加另一个名为Padding的UIID,以便我们可以将按钮与表单的侧面/底部隔开:
- 在颜色选项卡中,取消选中“
Derive Transparency
并将其值设置为0。这将使容器不可见。 - 在填充部分中,取消选中“
derive
并为所有条目输入2毫米,除了底部需要8毫米的额外间距之外。 这将使各个部件间隔开,重要的是要使用毫米,否则基于其密度,各种设备上的结果将太不同。
初始码
在代码中,我们打开主要的SocialChat
类,并用以下方法替换start方法:
public void start() {
if(current != null){
current.show();
return;
}
showLoginForm();
}
private void showLoginForm() {
Form loginForm = new Form();
// the blue theme styles the title area normally this is good but in this case we don't want the blue bar at the top
loginForm.getTitleArea().setUIID("Container");
loginForm.setLayout(new BorderLayout());
loginForm.setUIID("MainForm");
Container cnt = new Container(new BoxLayout(BoxLayout.Y_AXIS));
cnt.setUIID("Padding");
Button loginWithGoogle = new Button("Signin with Google");
Button loginWithFacebook = new Button("Signin with Facebook");
cnt.addComponent(loginWithGoogle);
cnt.addComponent(loginWithFacebook);
loginWithGoogle.addActionListener((e) -> {
doLogin(GoogleConnect.getInstance());
});
loginWithFacebook.addActionListener((e) -> {
doLogin(FacebookConnect.getInstance());
});
loginForm.addComponent(BorderLayout.SOUTH, cnt);
loginForm.show();
}
void doLogin(Login lg) {
// TODO...
}
您最终将得到如下所示的内容:
为了使按钮具有正确的颜色,我们需要添加图标,然后再返回给设计师....
自定义按钮
让我们从图标开始,因为我们使用图标字体,这非常简单...只需向主题IconFont
添加新样式的IconFont
。
- 在颜色部分中,单击“
Derive Foreground
然后键入ffffff
将前景设置为白色,然后单击“Derive Transparency
并将其设置为零。 - 在“字体”选项卡中,取消选中“
Derive
标志,然后选择fontello.ttf
字体(确保已下载该字体并将其放置在src目录中,如前所述)。 选择True Type Size
为大。
为了使按钮正常工作,我们需要创建一个图像边框,添加2个新的UIID,分别名为LoginButtonGoogle
和LoginButtonFacebook
。 除了背景颜色外,两者应该相同...
- 在颜色选项卡中,将前景设置为
ffffff
,将透明度设置为0(两种情况下自然都取消选中派生)。 - 在“
Alignment
选项卡中,取消选中“派生”并将Alignment
定义为“Center
。 - 在padding和margin选项卡中,将所有上/下/左/右padding / margin定义为1毫米。
- 在字体选项卡中,将系统字体定义为大字体。
- 在边框部分,单击
Image Border Wizard
按钮。 对于Facebook按钮,在所有颜色字段中输入3B5999,对于Google按钮,在所有颜色字段中输入DD4B39。 将弧的宽度/高度增加到15,然后移至“Cut Image
部分。 输入14作为顶部/底部/左侧和右侧的值,然后按OK。 这将有效地从给定图像中裁剪出9张多幅图像,并在其中形成边框!
整合这些变化
现在,我们只需更改以下几行即可轻松将上述更改集成到代码中:
Button loginWithGoogle = new Button("Signin with Google");
loginWithGoogle.setUIID("LoginButtonGoogle");
Button loginWithFacebook = new Button("Signin with Facebook");
loginWithFacebook.setUIID("LoginButtonFacebook");
Style iconFontStyle = UIManager.getInstance().getComponentStyle("IconFont");
loginWithFacebook.setIcon(FontImage.create(" \ue96c ", iconFontStyle));
loginWithGoogle.setIcon(FontImage.create(" \ue976 ", iconFontStyle));
这些有效地分配了新的UIID并使用图标字体样式中定义的给定字体创建了两个图标!
翻译自: https://www.javacodegeeks.com/2015/07/building-a-chat-app-with-codename-one-part-i.html