| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
| <!-- | |
| Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. | |
| --> | |
| <HTML> | |
| <HEAD> | |
| <TITLE>可视 Mobile 设计器定制组件：创建登录屏幕 - NetBeans Java ME 教程</TITLE> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > | |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> | |
| <meta name="author" content="Karol Harelzak"> | |
| </HEAD> | |
| <BODY> | |
| <a name="top"></a> | |
| <H1>可视 Mobile 设计器定制组件：创建登录屏幕</H1> | |
| <P>可视 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"（表项）等。 </p> | |
| <p>"Login Screen"（登录屏幕）定制组件提供了一个非常有用的用户界面，其中包含一些标准元素，如 "Username"（用户名）字段、"Password"（口令）字段以及 "Login"（登录）按钮。使用该定制组件，可以创建登录界面以访问受保护的功能，如 GSM 银行。</p> | |
| <p>如果您对 NetBeans Mobility 或 J2EE 不太熟悉，应先阅读 <A HREF="../../docs/javame/quickstart.html">NetBeans Java ME MIDP 快速入门指南</A>，然后再继续学习本教程。</p> | |
| <!--<p class="notes"><b>注意：</b>如果使用的是 NetBeans IDE 6.8，请参阅<a href="../../68/javame/loginscreen.html">在 NetBeans IDE 6.8 中创建登录屏幕</a>教程。</p>--> | |
| <p><b>目录</b></p> | |
| <img src="../../../images_www/articles/69/netbeans-stamp-69-70-71.png" class="stamp" alt="本页上的内容适用于 NetBeans IDE 6.9 及更高版本" title="本页上的内容适用于 NetBeans IDE 6.9 及更高版本" > | |
| <ul class="class"> | |
| <li><a href="#sample-app">安装并运行样例应用程序</a></li> | |
| <li><a href="#create-app">使用 "Login Screen"（登录屏幕）定制组件创建应用程序</a> | |
| <ul> | |
| <LI><A HREF="#create">创建项目</A> | |
| </LI> | |
| <LI><A HREF="#add">在项目中添加包和 Visual MIDlet</A> | |
| </LI> | |
| <LI><A HREF="#addcomponent">在项目中添加组件</A> | |
| </LI> | |
| <LI><A HREF="#addcommands">在 "Login Screen"（登录屏幕）组件中添加命令</A> | |
| </LI> | |
| <LI><A HREF="#connect">连接组件以创建应用程序流</A> | |
| </LI> | |
| <LI><A HREF="#storage">添加其他源代码</A> | |
| </LI> | |
| <LI><A HREF="#run">运行项目</A> | |
| </LI> | |
| </ul></li> | |
| <li><a href="#javadoc-loginscreen">"Login Screen"（登录屏幕）组件的 Javadoc</a></li> | |
| <li><a href="#see-also">另请参见</a></li> | |
| </ul> | |
| <p><b>要学习本教程，您需要具备下列软件和资源。</b></p> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <th class="tblheader" scope="col">软件或资源</th> | |
| <th class="tblheader" scope="col">要求的版本</th> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">带有 Java ME 的 NetBeans Beans</a></td> | |
| <td class="tbltd1">版本 6.9 或更高版本</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit</a> (JDK)</td> | |
| <td class="tbltd1">版本 6 或版本 7</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1">GlassFish 或 Tomcat </td> | |
| <td class="tbltd1">包含在 IDE 的 <b>Java EE</b> 和 <b>All</b> 安装中</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <a name="sample-app"></a> | |
| <H2>安装并运行样例应用程序</H2> | |
| <P>在开始之前，您可能希望查看本教程的最终结果。</P> | |
| <p>本示例介绍了如何在客户端应用程序中使用 "Login Screen"（登录屏幕）定制组件，以及如何使用验证的访问权限将其连接到服务器资源。除了 NetBeans Mobility 项目以外，我们还需要使用 NetBeans Web 项目。要完成本教程，您需要了解如何使用 NetBeans Web 项目，以及如何对 Web 应用服务器（如 GlassFish 或 Tomcat）进行本地或远程访问。</p> | |
| <P>请执行下列步骤以安装 <tt>LoginScreenExample</tt> 应用程序：</P> | |
| <OL> | |
| <LI>下载 <A HREF="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/LoginScreenExample.zip">LoginScreenExample.zip</A>。此下载包含完成的 NetBeans Mobility 项目。</LI> | |
| <LI>下载 <A HREF="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/LoginScreenServletExample.zip">LoginScreenServletExample.zip</A>。此下载包含完成的 NetBeans Web 项目。</LI> | |
| <LI>解压缩这些文件。</LI> | |
| <LI>在 IDE 中，选择 "File"（文件）> "Open Project"（打开项目），然后浏览至包含 <tt>LoginScreenExample</tt> 项目的解压缩文件的文件夹。<tt></tt><tt></tt></LI> | |
| <li>单击 "Open Project"（打开项目）。</li> | |
| <li>重复上面的步骤 4 和 5 以打开 <tt>LoginScreenServletExample</tt> 项目。</LI> | |
| <LI>"Projects"（项目）视图应如下所示： | |
| <p class="align-center"> | |
| <IMG SRC="../../../images_www/articles/71/mobility/loginscreen/login-project.png" NAME="graphics1" ALT="打开了 "Login Screen"（登录屏幕）和 "Login Screen"（登录屏幕） Servlet 示例的 "Project"（项目）窗口" BORDER=1> </p></li> | |
| <LI>在 "Projects"（项目）窗口中，右键单击 <tt>LoginScreenServletExample</tt> 项目节点，然后选择 "Run Project"（运行项目）（或按 F6 键）。</li> | |
| <li>右键单击 <tt>LoginScreenExample</tt> 项目节点，然后选择 "Run Project"（运行项目）。当应用程序运行时，将会打开一个仿真器窗口，其中显示了在缺省设备仿真器中运行的应用程序。 </LI> | |
| <LI>在仿真器窗口中，单击 "Launch" 下方的按钮。<BR>仿真器将显示闪屏组件，然后显示 "Login Screen"（登录屏幕），如下所示： <p class="align-center"><IMG SRC="../../../images_www/articles/71/mobility/loginscreen/login-emulator.png" NAME="graphics3" ALT="显示样例登录屏幕应用程序的 WTK 2.5 仿真器" BORDER=1> </p></li> | |
| </OL> | |
| <UL> | |
| <LI>通过上移和下移光标，您可以在 "Login" 和 "Password" 字段之间导航。 | |
| </LI> | |
| <li>单击中心按钮可允许编辑选定的文本字段。</li> | |
| <LI>单击 "Username"（用户名）字段并键入 "john"，然后在仿真器中按 "OK"（确定）按钮。 | |
| </LI> | |
| <LI>单击 "Password"（口令）字段并键入 "peanuts"，然后在仿真器中按 "OK"（确定）按钮。 | |
| </LI> | |
| <LI>单击 "Login" 下方的按钮以完成操作。 | |
| </LI> | |
| <LI>如果应用程序连接到服务器，则屏幕上将显示 <code>alert1</code> 组件以及 "Login Successful" 消息。 | |
| </LI> | |
| </UL> | |
| <p class="align-center"><a href="#top">返回页首</a></p> | |
| <a name="create-app"></a> | |
| <H2>使用 "Login Screen"（登录屏幕）定制组件创建应用程序</H2> | |
| <P>现在，您已看到运行中的 "Login Screen"（登录屏幕）组件，接下来让我们从头开始创建此应用程序。在本教程中，我们将仅使用 NetBeans Mobility 包创建 Java ME 客户端。如果您需要了解此应用程序的服务器端的详细信息，请查看 <code>LoginScreenServletExample</code> 项目源代码。要创建 Java ME 客户端应用程序，请执行以下操作：</P> | |
| <OL> | |
| <LI><A HREF="#create">创建 LoginScreenExample 项目</A> | |
| </LI> | |
| <LI><A HREF="#add">在 LoginScreenExample 项目中添加包和 Visual MIDlet</A> | |
| </LI> | |
| <LI><A HREF="#addcomponent">在 LoginScreenExample 中添加组件</A> | |
| </LI> | |
| <LI><A HREF="#addcommands">在 "Login Screen"（登录屏幕）组件中添加命令</A> | |
| </LI> | |
| <LI><A HREF="#connect">连接组件以创建应用程序流</A> | |
| </LI> | |
| <LI><A HREF="#storage">添加其他源代码</A> | |
| </LI> | |
| <LI><A HREF="#run">运行项目</A> | |
| </LI> | |
| </OL> | |
| <H3><A NAME="create">创建 LoginScreenExample 项目</A></H3> | |
| <OL> | |
| <LI>选择 "File"（文件）> "New Project"（新建项目）（Ctrl-Shift-N 组合键）。<tt></tt><tt></tt>在 "Categories"（类别）下，选择 "Java ME"。在 "Projects"（项目）下，选择 "Mobile Application"（Mobile 应用程序），然后单击 "Next"（下一步）。 | |
| </LI> | |
| <LI>在 "Project Name"（项目名称）字段中输入 <CODE>LoginScreenExample</CODE>。将Project Location（项目位置）更改为系统中的某个目录。我们将此目录称为 <code>$PROJECTHOME</code>。 | |
| </LI> | |
| <LI>取消选中 "Create Hello MIDlet"（创建 Hello MIDlet）复选框。单击 "Next"（下一步）。 | |
| </LI> | |
| <LI>将 "Sun Java Wireless Toolkit" 保留为选定的仿真器平台。单击 "Next"（下一步），然后单击 "Finish"（完成）。 | |
| <p class="notes"><b>注意：</b>该项目文件夹中包含所有源代码和项目 meta 数据，如项目的 Ant 脚本。应用程序显示在可视 Mobile 设计器的 "Flow"（流）设计窗口中。 </p></LI> | |
| </OL> | |
| <H3><A NAME="add"></A>在 LoginScreenExample 项目中添加包和 Visual MIDlet</H3> | |
| <OL> | |
| <LI>在 "Project"（项目）窗口中选择 <CODE>LoginScreenExample</CODE> 项目，然后选择 "File"（文件）> "New File"（新建文件）（Ctrl-N 组合键）。<tt></tt><tt></tt>在 "Categories"（类别）下，选择 "Java"。在 "File Types"（文件类型）下，选择 "Java Package"（Java 包）。单击 "Next"（下一步）。 | |
| </LI> | |
| <LI>在 "Package Name"（包名）字段中输入 <CODE>loginscreenexample</CODE>。单击 "Finish"（完成）。 | |
| </LI> | |
| <LI>在 "Project"（项目）窗口中选择 <CODE>loginscreenexample</CODE> 包，然后选择 "File"（文件）> "New File"（新建文件）（Ctrl-N 组合键）。<tt></tt><tt></tt>在 "Categories"（类别）下，选择 "MIDP"。在 "File Types"（文件类型）下，选择 "Visual MIDlet"。单击 "Next"（下一步）。 | |
| </LI> | |
| <LI>在 "MIDlet Name"（MIDlet 名称）和 "MIDP Class Name"（MIDP 类名）字段中输入 <CODE>LoginScreenExample</CODE>。单击 "Finish"（完成）。 | |
| </LI> | |
| </OL> | |
| <H3><A NAME="addcomponent"></A>在 LoginScreenExample 中添加组件</H3> | |
| <OL> | |
| <LI>将 Visual MIDlet 切换至 "Flow"（流）设计器窗口。将以下组件从 "Component Palette"（组件面板）拖放至 "Flow"（流）设计器中： | |
| <UL> | |
| <LI>Splash Screen（闪屏）</LI> | |
| <LI>Wait Screen（等待屏幕）</LI> | |
| <LI>Login Screen（登录屏幕）</LI> | |
| <LI>Alert（警报） (x2)</LI> | |
| </UL></LI> | |
| <LI>单击 splashScreen，然后在 "Properties"（属性）窗口中，将 "Text"（文本）属性值从 <tt>null</tt> 更改为 <tt>Login Screen Example</tt>。 | |
| </LI> | |
| <LI>右键单击警报组件，然后在弹出式菜单中选择 "Rename"（重命名）。</li> | |
| <li>在 "Rename"（重命名）对话框中，输入 <tt>alertFailure</tt>，然后单击 "OK"（确定）。</li> | |
| <li>对于 alert1 组件，重复上面的步骤 3 和 4，将其重命名为 <tt>alertSuccess</tt>。</LI> | |
| <LI>返回到 alertFailure 组件，然后在 "Properties"（属性）窗口中，将 "String"（字符串）属性值更改为 <tt>Error</tt>。 | |
| </LI> | |
| <LI>单击 waitScreen 组件，然后在 "Properties"（属性）窗口中，将 "Text"（文本）属性值更改为 <tt>Please Wait...</tt>。 </LI> | |
| <li>在 waitScreen 组件的 "Properties"（属性）窗口中，单击 "Task"（任务）属性的省略号按钮 (<img src="../../../images_www/articles/71/mobility/loginscreen/ellipsis-button.png" border=1 alt="省略号按钮">)。</li> | |
| <li>在 "Task"（任务）对话框中，单击 "Add"（添加）。<br>此时将添加 task1 组件。</li> | |
| <li>单击 "Go to Source"（转至源）。<br>"Source"（源）视图将显示 <tt>getTask ()</tt> 方法代码。</li> | |
| <li>单击 "OK"（确定）以关闭 "Task"（任务）对话框。</li> | |
| <li>在 "Source"（源）视图中，找到 <tt>// write task-execution user code here</tt> 部分并将其替换为 <tt>login();</tt>。 </li> | |
| <li>按 Ctrl+S 组合键以保存所做的编辑。 </li> | |
| </OL> | |
| <H3><A NAME="addcommands"></A>在 LoginScreenExample 中添加命令</H3> | |
| <OL> | |
| <LI>打开 "Flow"（流）视图。</LI> | |
| <LI>从 "Component Palette"（组件面板）的 "Commands"（命令）类别中选择 "Exit Command"（退出命令）。将其拖放至 "Flow"（流）视图中的 <tt>loginScreen</tt> 组件上。 </LI> | |
| </OL> | |
| <H3><A NAME="connect"></A>连接组件</H3> | |
| <div> | |
| <p>在 "Flow"（流）视图中，单击 "Mobile Device"（移动设备）上的 "Started"（已启动）文本，然后将其拖至 <tt>splashScreen</tt> 组件上。<tt></tt>采用相同的方法，按照下图所示连接各个组件。</p> | |
| <p class="align-center"><IMG SRC="../../../images_www/articles/71/mobility/loginscreen/login-flow.png" NAME="graphics4" ALT="显示包含由命令行连接的组件的 "Flow"（流）设计器" BORDER=1> | |
| </p> | |
| </div> | |
| <H3><A NAME="storage"></A>添加源代码</H3> | |
| <OL> | |
| <LI>在 <tt>LoginScreenExample.java</tt> 源代码的声明部分添加以下代码：<CODE>private boolean login = false;</CODE>。</LI> | |
| <LI>在源代码的末尾，粘贴以下代码： <br> | |
| <PRE> 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; | |
| }</PRE> | |
| <P> | |
| 该代码负责将包含用户名和口令信息的请求发送到服务器，并在成功完成登录过程时接收应答。您可以按 Ctrl+Shift+I 组合键以更正源代码导入。</P></LI> | |
| </OL> | |
| <H3><A NAME="run"></A>运行项目</H3> | |
| <div> | |
| <p>在运行客户端应用程序之前，请确保服务器端应用程序已部署且正在运行。</p> | |
| <p> 要运行 Mobile 客户端应用程序，请选择 "Run"（运行）> "Run Main Project"（运行主项目）或按 F6 键以运行主项目。<tt></tt><tt></tt></p> | |
| </div> | |
| <p class="align-center"><a href="#top">返回页首</a></p> | |
| <a name="javadoc-loginscreen"></a> | |
| <H2>"Login Screen"（登录屏幕）组件的 Javadoc</H2> | |
| <P>NetBeans IDE 提供了 "Login Screen"（登录屏幕）组件以及可在 VMD 中使用的其他组件的 API Javadoc。要阅读 "Login Screen"（登录屏幕）组件的 Javadoc，请完成以下步骤：</P> | |
| <OL> | |
| <li>将光标放在源代码中的 <tt>LoginScreen</tt> 组件上，然后按 Ctr-Shift-空格组合键（或选择 "Source"（源）> "Show Documentation"（显示文档））。<tt></tt><tt></tt><br> | |
| 此时将在弹出式窗口中显示该元素的 Javadoc。 </li> | |
| <li>在弹出式窗口中单击 "Show documentation in external web browser"（在外部 Web 浏览器中显示文档）图标 (<img src="../../../images_www/articles/71/mobility/loginscreen/show-doc-button.png" alt=""Show documentation in external web browser"（在外部 Web 浏览器中显示文档）">)，以便在浏览器中查看有关 <tt>LoginScreen</tt> 组件的详细信息。</li> | |
| </OL> | |
| <p class="align-center"><a href="#top">返回页首</a></p> | |
| <div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=NetBeans%20Java ME%20Custom%20Component:%20Login%20Screen">请将您的反馈发送给我们</a><br style="clear:both;" ></div> | |
| <br style="clear:both;" > | |
| <a name="see-also"></a> | |
| <H2>另请参见</H2> | |
| <UL> | |
| <li><a href="smscomposer.html">可视 Mobile 设计器定制组件：创建 SMS 编写器应用程序</a></li> | |
| <li><a href="filebrowser.html">可视 Mobile 设计器定制组件：创建移动设备文件浏览器</a></li> | |
| <li><a href="pimbrowser.html">可视 Mobile 设计器定制组件：创建个人信息管理器应用程序</a></li> | |
| <li><a href="splashscreen.html">可视 Mobile 设计器定制组件：在 Java ME 应用程序中使用闪屏</a></li> | |
| <li><a href="waitscreen.html">可视 Mobile 设计器定制组件：为 Mobile 应用程序创建等待屏幕</a></li> | |
| <li><a href="tableitem.html">可视 Mobile 设计器定制组件：在 Java ME 应用程序中使用表项</a></li> | |
| <li><a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">参考：可视 Mobile 设计器组件面板指南</a></li> | |
| </UL> | |
| <p class="align-center"><a href="#top">返回页首</a></p> | |
| </BODY> | |
| </HTML> |