可视 Mobile 设计器定制组件:创建登录屏幕

可视 Mobile 设计器 (Visual Mobile Designer, VMD) 是 NetBeans Mobility 中的图形界面,您可以在该界面中使用拖放式组件设计 Mobile 应用程序。通过 VMD,您可以使用 IDE 提供的组件或您自己设计的组件定义应用程序流和设计 GUI。VMD 包含很多标准用户界面 (User Interface, UI) 组件,您可以使用这些组件创建应用程序,如 "Lists"(列表)、"Alerts"(警报)、"Forms"(表单)、"Images"(图像)。它还包含一些定制组件,用于简化创建较复杂功能的过程,例如 "Wait Screen"(等待屏幕)、"Splash Screens"(闪屏)和 "Table Items"(表项)等。

"Login Screen"(登录屏幕)定制组件提供了一个非常有用的用户界面,其中包含一些标准元素,如 "Username"(用户名)字段、"Password"(口令)字段以及 "Login"(登录)按钮。使用该定制组件,可以创建登录界面以访问受保护的功能,如 GSM 银行。

如果您对 NetBeans Mobility 或 J2EE 不太熟悉,应先阅读 NetBeans Java ME MIDP 快速入门指南,然后再继续学习本教程。

目录

本页上的内容适用于 NetBeans IDE 6.9 及更高版本

要学习本教程,您需要具备下列软件和资源。

软件或资源 要求的版本
带有 Java ME 的 NetBeans Beans 版本 6.9 或更高版本
Java Development Kit (JDK) 版本 6 或版本 7
GlassFish 或 Tomcat 包含在 IDE 的 Java EEAll 安装中

安装并运行样例应用程序

在开始之前,您可能希望查看本教程的最终结果。

本示例介绍了如何在客户端应用程序中使用 "Login Screen"(登录屏幕)定制组件,以及如何使用验证的访问权限将其连接到服务器资源。除了 NetBeans Mobility 项目以外,我们还需要使用 NetBeans Web 项目。要完成本教程,您需要了解如何使用 NetBeans Web 项目,以及如何对 Web 应用服务器(如 GlassFish 或 Tomcat)进行本地或远程访问。

请执行下列步骤以安装 LoginScreenExample 应用程序:

  1. 下载 LoginScreenExample.zip。此下载包含完成的 NetBeans Mobility 项目。
  2. 下载 LoginScreenServletExample.zip。此下载包含完成的 NetBeans Web 项目。
  3. 解压缩这些文件。
  4. 在 IDE 中,选择 "File"(文件)> "Open Project"(打开项目),然后浏览至包含 LoginScreenExample 项目的解压缩文件的文件夹。
  5. 单击 "Open Project"(打开项目)。
  6. 重复上面的步骤 4 和 5 以打开 LoginScreenServletExample 项目。
  7. "Projects"(项目)视图应如下所示:

    打开了 "Login Screen"(登录屏幕)和 "Login Screen"(登录屏幕) Servlet 示例的 "Project"(项目)窗口

  8. 在 "Projects"(项目)窗口中,右键单击 LoginScreenServletExample 项目节点,然后选择 "Run Project"(运行项目)(或按 F6 键)。
  9. 右键单击 LoginScreenExample 项目节点,然后选择 "Run Project"(运行项目)。当应用程序运行时,将会打开一个仿真器窗口,其中显示了在缺省设备仿真器中运行的应用程序。
  10. 在仿真器窗口中,单击 "Launch" 下方的按钮。
    仿真器将显示闪屏组件,然后显示 "Login Screen"(登录屏幕),如下所示:

    显示样例登录屏幕应用程序的 WTK 2.5 仿真器

  • 通过上移和下移光标,您可以在 "Login" 和 "Password" 字段之间导航。
  • 单击中心按钮可允许编辑选定的文本字段。
  • 单击 "Username"(用户名)字段并键入 "john",然后在仿真器中按 "OK"(确定)按钮。
  • 单击 "Password"(口令)字段并键入 "peanuts",然后在仿真器中按 "OK"(确定)按钮。
  • 单击 "Login" 下方的按钮以完成操作。
  • 如果应用程序连接到服务器,则屏幕上将显示 alert1 组件以及 "Login Successful" 消息。

返回页首

使用 "Login Screen"(登录屏幕)定制组件创建应用程序

现在,您已看到运行中的 "Login Screen"(登录屏幕)组件,接下来让我们从头开始创建此应用程序。在本教程中,我们将仅使用 NetBeans Mobility 包创建 Java ME 客户端。如果您需要了解此应用程序的服务器端的详细信息,请查看 LoginScreenServletExample 项目源代码。要创建 Java ME 客户端应用程序,请执行以下操作:

  1. 创建 LoginScreenExample 项目
  2. 在 LoginScreenExample 项目中添加包和 Visual MIDlet
  3. 在 LoginScreenExample 中添加组件
  4. 在 "Login Screen"(登录屏幕)组件中添加命令
  5. 连接组件以创建应用程序流
  6. 添加其他源代码
  7. 运行项目

创建 LoginScreenExample 项目

  1. 选择 "File"(文件)> "New Project"(新建项目)(Ctrl-Shift-N 组合键)。在 "Categories"(类别)下,选择 "Java ME"。在 "Projects"(项目)下,选择 "Mobile Application"(Mobile 应用程序),然后单击 "Next"(下一步)。
  2. 在 "Project Name"(项目名称)字段中输入 LoginScreenExample。将Project Location(项目位置)更改为系统中的某个目录。我们将此目录称为 $PROJECTHOME
  3. 取消选中 "Create Hello MIDlet"(创建 Hello MIDlet)复选框。单击 "Next"(下一步)。
  4. 将 "Sun Java Wireless Toolkit" 保留为选定的仿真器平台。单击 "Next"(下一步),然后单击 "Finish"(完成)。

    注意:该项目文件夹中包含所有源代码和项目 meta 数据,如项目的 Ant 脚本。应用程序显示在可视 Mobile 设计器的 "Flow"(流)设计窗口中。

在 LoginScreenExample 项目中添加包和 Visual MIDlet

  1. 在 "Project"(项目)窗口中选择 LoginScreenExample 项目,然后选择 "File"(文件)> "New File"(新建文件)(Ctrl-N 组合键)。在 "Categories"(类别)下,选择 "Java"。在 "File Types"(文件类型)下,选择 "Java Package"(Java 包)。单击 "Next"(下一步)。
  2. 在 "Package Name"(包名)字段中输入 loginscreenexample。单击 "Finish"(完成)。
  3. 在 "Project"(项目)窗口中选择 loginscreenexample 包,然后选择 "File"(文件)> "New File"(新建文件)(Ctrl-N 组合键)。在 "Categories"(类别)下,选择 "MIDP"。在 "File Types"(文件类型)下,选择 "Visual MIDlet"。单击 "Next"(下一步)。
  4. 在 "MIDlet Name"(MIDlet 名称)和 "MIDP Class Name"(MIDP 类名)字段中输入 LoginScreenExample。单击 "Finish"(完成)。

在 LoginScreenExample 中添加组件

  1. 将 Visual MIDlet 切换至 "Flow"(流)设计器窗口。将以下组件从 "Component Palette"(组件面板)拖放至 "Flow"(流)设计器中:
    • Splash Screen(闪屏)
    • Wait Screen(等待屏幕)
    • Login Screen(登录屏幕)
    • Alert(警报) (x2)
  2. 单击 splashScreen,然后在 "Properties"(属性)窗口中,将 "Text"(文本)属性值从 null 更改为 Login Screen Example
  3. 右键单击警报组件,然后在弹出式菜单中选择 "Rename"(重命名)。
  4. 在 "Rename"(重命名)对话框中,输入 alertFailure,然后单击 "OK"(确定)。
  5. 对于 alert1 组件,重复上面的步骤 3 和 4,将其重命名为 alertSuccess
  6. 返回到 alertFailure 组件,然后在 "Properties"(属性)窗口中,将 "String"(字符串)属性值更改为 Error
  7. 单击 waitScreen 组件,然后在 "Properties"(属性)窗口中,将 "Text"(文本)属性值更改为 Please Wait...
  8. 在 waitScreen 组件的 "Properties"(属性)窗口中,单击 "Task"(任务)属性的省略号按钮 (省略号按钮)。
  9. 在 "Task"(任务)对话框中,单击 "Add"(添加)。
    此时将添加 task1 组件。
  10. 单击 "Go to Source"(转至源)。
    "Source"(源)视图将显示 getTask () 方法代码。
  11. 单击 "OK"(确定)以关闭 "Task"(任务)对话框。
  12. 在 "Source"(源)视图中,找到 // write task-execution user code here 部分并将其替换为 login();
  13. 按 Ctrl+S 组合键以保存所做的编辑。

在 LoginScreenExample 中添加命令

  1. 打开 "Flow"(流)视图。
  2. 从 "Component Palette"(组件面板)的 "Commands"(命令)类别中选择 "Exit Command"(退出命令)。将其拖放至 "Flow"(流)视图中的 loginScreen 组件上。

连接组件

在 "Flow"(流)视图中,单击 "Mobile Device"(移动设备)上的 "Started"(已启动)文本,然后将其拖至 splashScreen 组件上。采用相同的方法,按照下图所示连接各个组件。

显示包含由命令行连接的组件的 "Flow"(流)设计器

添加源代码

  1. LoginScreenExample.java 源代码的声明部分添加以下代码:private boolean login = false;
  2. 在源代码的末尾,粘贴以下代码:
     private void login() throws IOException {
       //URL
       String url = "http://localhost:8084/LoginScreenExample/"
                    + "?username=" + getLoginScreen().getUsername()
                    + "&password=" + getLoginScreen().getPassword();
       //Clean up alertSuccess 
       getAlertSuccess().setString("");
       //Connect to the server
       HttpConnection hc = (HttpConnection) Connector.open(url);
       //Authentication
       if (hc.getResponseCode() == HttpConnection.HTTP_OK) {
            login = true;
       }
       //Closing time...
       hc.close();
       //Take action based on login value
       if (login) {
            getAlertSuccess().setString("Login Succesfull");
       } else {
            getAlertFailure().setString("Wrong Username or Password");
       }
       login = false;
     }

    该代码负责将包含用户名和口令信息的请求发送到服务器,并在成功完成登录过程时接收应答。您可以按 Ctrl+Shift+I 组合键以更正源代码导入。

运行项目

在运行客户端应用程序之前,请确保服务器端应用程序已部署且正在运行。

要运行 Mobile 客户端应用程序,请选择 "Run"(运行)> "Run Main Project"(运行主项目)或按 F6 键以运行主项目。

返回页首

"Login Screen"(登录屏幕)组件的 Javadoc

NetBeans IDE 提供了 "Login Screen"(登录屏幕)组件以及可在 VMD 中使用的其他组件的 API Javadoc。要阅读 "Login Screen"(登录屏幕)组件的 Javadoc,请完成以下步骤:

  1. 将光标放在源代码中的 LoginScreen 组件上,然后按 Ctr-Shift-空格组合键(或选择 "Source"(源)> "Show Documentation"(显示文档))。
    此时将在弹出式窗口中显示该元素的 Javadoc。
  2. 在弹出式窗口中单击 "Show documentation in external web browser"(在外部 Web 浏览器中显示文档)图标 ("Show documentation in external web browser"(在外部 Web 浏览器中显示文档)),以便在浏览器中查看有关 LoginScreen 组件的详细信息。

返回页首


另请参见

返回页首

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo