| <!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>Visual Mobile Designer Custom Components: Creating Login Screens - NetBeans Java ME Tutorial</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>Visual Mobile Designer Custom Components: Creating Login Screens</H1> | |
| <P>The Visual Mobile Designer (VMD) is a graphical interface within NetBeans Mobility that enables you to design mobile applications using drag and drop components. The VMD allows you to define the application flow and design your GUI using the components supplied by the IDE or components you design yourself. The VMD contains many standard User Interface (UI) components that you can use to create applications such as Lists, Alerts, Forms and Images. It also includes custom components that simplify the creation of more complex features, such as Wait Screens, Splash Screens, Table Items and more. </p> | |
| <p>The Login Screen custom component provides a useful user interface | |
| with standard elements such as Username Field, Password Field and Login | |
| Button. You can use this custom component to create the login interface | |
| for accessing protected features such as GSM banking.</p> | |
| <p>If you are new to NetBeans Mobility or J2EE, you should start with the <A HREF="../../docs/javame/quickstart.html">NetBeans Java ME MIDP Quick Start Guide</A> | |
| before continuing.</p> | |
| <p><b>Contents</b></p> | |
| <img src="../../../images_www/articles/69/netbeans-stamp-69-70-71.png" class="stamp" alt="Content on this page applies to NetBeans IDE 6.9 and later" title="Content on this page applies to NetBeans IDE 6.9 and later" > | |
| <ul class="class"> | |
| <li><a href="#sample-app">Installing and Running the Sample Application</a></li> | |
| <li><a href="#create-app">Creating an application with the Login Screen | |
| Custom Component</a> | |
| <ul> | |
| <LI><A HREF="#create">Creating the | |
| Project</A> | |
| </LI> | |
| <LI><A HREF="#add">Adding Packages and a | |
| Visual MIDlet to the Project</A> | |
| </LI> | |
| <LI><A HREF="#addcomponent">Adding | |
| Components to the Project</A> | |
| </LI> | |
| <LI><A HREF="#addcommands">Adding | |
| Commands to the Login Screen Component</A> | |
| </LI> | |
| <LI><A HREF="#connect">Connecting the | |
| Components to Create an Application Flow</A> | |
| </LI> | |
| <LI><A HREF="#storage">Adding | |
| Additional Source Code</A> | |
| </LI> | |
| <LI><A HREF="#run">Running the Project</A> | |
| </LI> | |
| </ul></li> | |
| <li><a href="#javadoc-loginscreen">Javadoc for the Login Screen Component</a></li> | |
| <li><a href="#see-also">See Also</a></li> | |
| </ul> | |
| <p><b>To follow this tutorial, you need the software and resources listed below.</b></p> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <th class="tblheader" scope="col">Software or Resource</th> | |
| <th class="tblheader" scope="col">Version Required</th> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE with Java ME</a></td> | |
| <td class="tbltd1">Version 6.9 or later</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">Version 6 or version 7</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1">GlassFish or Tomcat </td> | |
| <td class="tbltd1">Included in the <b>Java EE</b> and <b>All</b> installations of the IDE</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <a name="sample-app"></a> | |
| <H2>Installing and Running the Sample Application</H2> | |
| <P>Before we begin you might want to see final result of the tutorial.</P> | |
| <p>This example shows how to use the Login Screen custom component within a | |
| client application and how to connect it to server resources using authenticated access. In addition to the NetBeans Mobility Project we also need to use a NetBeans Web | |
| Project. To complete this tutorial it is necessary to know how to work | |
| with NetBeans Web Projects and to have local or remote access to a web application server like | |
| GlassFish or Tomcat.</p> | |
| <P>Take the following steps to install the <tt>LoginScreenExample</tt> application:</P> | |
| <OL> | |
| <LI>Download <A HREF="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/LoginScreenExample.zip">LoginScreenExample.zip</A>. This download contains the completed NetBeans Mobility project.</LI> | |
| <LI>Download <A HREF="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/LoginScreenServletExample.zip">LoginScreenServletExample.zip</A>. | |
| This download contains the completed NetBeans Web project.</LI> | |
| <LI>Unzip the files.</LI> | |
| <LI>In the IDE, choose <tt>File</tt> > <tt>Open Project</tt> and browse to the folder that contains the unzipped files with the <tt>LoginScreenExample</tt> project.</LI> | |
| <li>Click Open Project.</li> | |
| <li>Repeat steps 4 and 5 above to open the <tt>LoginScreenServletExample</tt> project.</LI> | |
| <LI>The Projects view should look like the following: | |
| <p class="align-center"> | |
| <IMG SRC="../../../images_www/articles/71/mobility/loginscreen/login-project.png" NAME="graphics1" ALT="Project window with Login Screen and Login Screen Servlet example opened" BORDER=1> </p></li> | |
| <LI>In the Projects window, | |
| right-click the project <tt>LoginScreenServletExample</tt> node and choose | |
| Run Project (or press F6 key).</li> | |
| <li>Right-click the | |
| project <tt>LoginScreenExample</tt> node and choose Run Project. As the | |
| application runs, an emulator window opens and displays the | |
| application running in the default device emulator. </LI> | |
| <LI>In the Emulator window, click the button underneath | |
| "Launch".<BR>The emulator displays a Splash Screen | |
| component then Login Screen, as shown: <p class="align-center"><IMG SRC="../../../images_www/articles/71/mobility/loginscreen/login-emulator.png" NAME="graphics3" ALT="WTK 2.5 emulator displaying the sample Login Screen application" BORDER=1> </p></li> | |
| </OL> | |
| <UL> | |
| <LI>Moving the cursor up and down allows you to | |
| navigate between the Login and Password fields. | |
| </LI> | |
| <li>Click on the central button enables the selected text field for editing.</li> | |
| <LI>Click on the Username field and type "john", then press the "OK" button in the emulator. | |
| </LI> | |
| <LI>Click on the Password field and type "peanuts", then press the "OK" button in the emulator. | |
| </LI> | |
| <LI>Click the button underneath "Login" to finish. | |
| </LI> | |
| <LI>If the application connects to the server, you'll | |
| see the <code>alert1</code> component displayed on the screen with a "Login | |
| Successful" message. | |
| </LI> | |
| </UL> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <a name="create-app"></a> | |
| <H2>Creating an Application with the Login Screen | |
| Custom Component</H2> | |
| <P>Now that you have seen the Login Screen component in action, let's | |
| go back to the beginning and create this application from scratch. In this | |
| tutorial we are only going to create a Java ME client using NetBeans | |
| Mobility pack. If you need to learn more about the server side of this | |
| application look at the <code>LoginScreenServletExample</code> project sources. To | |
| create a Java ME client application do the following:</P> | |
| <OL> | |
| <LI><A HREF="#create">Create the | |
| LoginScreenExample project</A> | |
| </LI> | |
| <LI><A HREF="#add">Add Packages and a | |
| visual MIDlet to the LoginScreenExample project</A> | |
| </LI> | |
| <LI><A HREF="#addcomponent">Add | |
| Components to the LoginScreenExample</A> | |
| </LI> | |
| <LI><A HREF="#addcommands">Add | |
| Commands to the Login Screen component</A> | |
| </LI> | |
| <LI><A HREF="#connect">Connect the | |
| Components to create an application flow</A> | |
| </LI> | |
| <LI><A HREF="#storage">Add | |
| additional source code</A> | |
| </LI> | |
| <LI><A HREF="#run">Run the Project</A> | |
| </LI> | |
| </OL> | |
| <H3><A NAME="create"></A>Creating the | |
| LoginScreenExample Project</H3> | |
| <OL> | |
| <LI>Choose <tt>File</tt> > <tt>New Project | |
| (Ctrl-Shift-N)</tt>. Under Categories, select Java ME. Under Projects, | |
| select Mobile Application and click Next. | |
| </LI> | |
| <LI>Enter <CODE>LoginScreenExample</CODE> | |
| in the Project Name field. Change the Project Location to a | |
| directory on your system. Let's refer to this | |
| directory as <code>$PROJECTHOME</code>. | |
| </LI> | |
| <LI>Uncheck the Create Hello MIDlet | |
| checkbox. Click Next. | |
| </LI> | |
| <LI>Leave the Sun Java Wireless Toolkit | |
| as the selected Emulator Platform. Click Next, then Finish. | |
| <p class="notes"><b>Note:</b> The project folder contains all of your | |
| sources and project metadata, such as the project Ant script. The | |
| application is displayed in the Flow Design window of the | |
| Visual Mobile Designer. </p></LI> | |
| </OL> | |
| <H3><A NAME="add"></A>Adding Packages and a Visual | |
| MIDlet to the LoginScreenExample Project</H3> | |
| <OL> | |
| <LI>Choose the <CODE>LoginScreenExample</CODE> | |
| project in the Project Window, then choose <tt>File</tt> > <tt>New File | |
| (Ctrl-N)</tt> . Under Categories, select Java. Under File Types, | |
| select Java Package. Click Next. | |
| </LI> | |
| <LI>Enter <CODE>loginscreenexample</CODE> | |
| in the Package Name field. Click Finish. | |
| </LI> | |
| <LI>Choose the <CODE>loginscreenexample</CODE> | |
| package in the Project window, then choose <tt>File</tt> > <tt>New File | |
| (Ctrl-N)</tt>. Under Categories, select MIDP. Under File Types, select | |
| Visual MIDlet. Click Next. | |
| </LI> | |
| <LI>Enter <CODE>LoginScreenExample</CODE> into MIDlet Name and | |
| MIDP Class Name fields. Click Finish. | |
| </LI> | |
| </OL> | |
| <H3><A NAME="addcomponent"></A>Adding Components to | |
| the LoginScreenExample</H3> | |
| <OL> | |
| <LI>Switch your Visual MIDlet to the | |
| Flow Designer window. Drag the following components from the | |
| Component Palette and drop them in the Flow Designer: | |
| <UL> | |
| <LI>Splash Screen</LI> | |
| <LI>Wait Screen</LI> | |
| <LI>Login Screen</LI> | |
| <LI>Alert (x2)</LI> | |
| </UL></LI> | |
| <LI>Click on splashScreen and, in the Properties Window, change | |
| value of property Text from <tt>null</tt> to the <tt>Login | |
| Screen Example</tt> | |
| </LI> | |
| <LI>Right-click the alert component and choose Rename in the popup menu.</li> | |
| <li>In the Rename dialog box, enter <tt>alertFailure</tt> and click OK.</li> | |
| <li>Repeat steps 3 and 4 for the alert1 component to rename it to <tt>alertSuccess</tt>.</LI> | |
| <LI>Go back to the alertFailure component and, in the Properties | |
| Window, change value of the property String to the <tt>Error</tt>. | |
| </LI> | |
| <LI>Click the waitScreen component and, in the Properties | |
| Window, change value of the property Text to the <tt>Please | |
| Wait...</tt>. </LI> | |
| <li>In the Properties Window of the waitScreen component, click the ellipsis button (<img src="../../../images_www/articles/71/mobility/loginscreen/ellipsis-button.png" border=1 alt="Ellipsis button">) against the Task property.</li> | |
| <li>In the Task dialog box, click Add.<br>The task1 component is added.</li> | |
| <li>Click Go to Source.<br>The Source View displays the <tt>getTask ()</tt> method code.</li> | |
| <li>Click OK to close the Task dialog box.</li> | |
| <li>In the Source View, find section <tt>// write task-execution user code here</tt> and replace it with <tt>login();</tt>. </li> | |
| <li>Press Ctrl+S to save your edits. </li> | |
| </OL> | |
| <H3><A NAME="addcommands"></A>Adding Commands to the | |
| LoginScreenExample</H3> | |
| <OL> | |
| <LI>Open the Flow View.</LI> | |
| <LI>Choose Exit Command from the | |
| Commands section of the Component Palette. Drag and drop it to the <tt>loginScreen</tt> component in the | |
| Flow View. </LI> | |
| </OL> | |
| <H3><A NAME="connect"></A>Connecting Components</H3> | |
| <div> | |
| <p>In the Flow View, click on the <tt>Started</tt> text on the | |
| Mobile Device and drag it to the <tt>splashScreen</tt> component. In the same | |
| manner, connect the components together as shown in the following | |
| graphic.</p> | |
| <p class="align-center"><IMG SRC="../../../images_www/articles/71/mobility/loginscreen/login-flow.png" NAME="graphics4" ALT="Shows the Flow Designer with components conneted by command lines" BORDER=1> | |
| </p> | |
| </div> | |
| <H3><A NAME="storage"></A>Adding Source Code</H3> | |
| <OL> | |
| <LI>In the declaration section of the <tt>LoginScreenExample.java</tt> | |
| source code add the following code: <CODE>private boolean login = | |
| false;</CODE>.</LI> | |
| <LI>At the end of the source code paste following code: <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> | |
| This code is responsible for sending a request with information about | |
| the username and password to the server and receiving an answer if the login | |
| process was successful. You can correct source code imports by pressing Ctrl+Shift+I.</P></LI> | |
| </OL> | |
| <H3><A NAME="run"></A>Running the Project</H3> | |
| <div> | |
| <p>Before running the client application make sure that the server side application is deployed and is running.</p> | |
| <p> To run the mobile | |
| client application select <tt>Run</tt> > <tt>Run Main Project</tt> or press F6 to Run the main project.</p> | |
| </div> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <a name="javadoc-loginscreen"></a> | |
| <H2>Javadoc for the Login Screen Component</H2> | |
| <P>The NetBeans IDE provides API Javadocs for the Login Screen | |
| component, as well as other components you can use in the VMD. To | |
| read the Javadocs for the Login Screen component, complete the steps below:</P> | |
| <OL> | |
| <li>Place the cursor on the <tt>LoginScreen</tt> component in the source code and press Ctr-Shift-Space (or choose <tt>Source</tt> > <tt>Show Documentation</tt>).<br> | |
| The Javadoc for this element displays in a popup window. </li> | |
| <li>Click the Show documentation in external web browser icon (<img src="../../../images_www/articles/71/mobility/loginscreen/show-doc-button.png" alt="Show documentation in external web browser">) in the popup window to view the detailed information about the <tt>LoginScreen</tt> component in your browser.</li> | |
| </OL> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=NetBeans%20Java ME%20Custom%20Component:%20Login%20Screen">Send Feedback on This Tutorial</a><br style="clear:both;" ></div> | |
| <br style="clear:both;" > | |
| <a name="see-also"></a> | |
| <H2>See Also</H2> | |
| <UL> | |
| <li><a href="smscomposer.html">Visual Mobile Designer Custom Components: Creating an SMS Composer Application</a></li> | |
| <li><a href="filebrowser.html">Visual Mobile Designer Custom Components: Creating a Mobile Device File Browser</a></li> | |
| <li><a href="pimbrowser.html">Visual Mobile Designer Custom Components: Creating a Personal Information Manager Application</a></li> | |
| <li><a href="splashscreen.html">Visual Mobile Designer Custom Components: Using Splash Screens in Java ME Applications</a></li> | |
| <li><a href="waitscreen.html">Visual Mobile Designer Custom Components: Creating Wait Screens for Mobile Applications</a></li> | |
| <li><a href="tableitem.html">Visual Mobile Designer Custom Components: Using Table Items in Java ME Applications </a></li> | |
| <li><a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">Reference: Visual Mobile Designer Palette Guide</a></li> | |
| </UL> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| </BODY> | |
| </HTML> |