构建一个代号为I的聊天应用程序

在本教程中，我们将介绍使用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