corner imagecorner image
IDEPlatformPluginsDocs & SupportCommunityPartners

Visual Mobile Designer Custom Components: Creating Login Screens

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.

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.

If you are new to NetBeans Mobility or J2EE, you should start with the NetBeans Java ME MIDP Quick Start Guide before continuing.

Note: If you are using NetBeans IDE 6.8, refer to the Creating Login Screens in NetBeans IDE 6.8 tutorial.

Contents

Content on this page applies to NetBeans IDE 6.9 and later

To follow this tutorial, you need the software and resources listed below.

Software or Resource Version Required
NetBeans IDE with Java ME Version 6.9 or later
Java Development Kit (JDK) Version 6 or version 7
GlassFish or Tomcat Included in the Java EE and All installations of the IDE

Installing and Running the Sample Application

Before we begin you might want to see final result of the tutorial.

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.

Take the following steps to install the LoginScreenExample application:

  1. Download LoginScreenExample.zip. This download contains the completed NetBeans Mobility project.
  2. Download LoginScreenServletExample.zip. This download contains the completed NetBeans Web project.
  3. Unzip the files.
  4. In the IDE, choose File > Open Project and browse to the folder that contains the unzipped files with the LoginScreenExample project.
  5. Click Open Project.
  6. Repeat steps 4 and 5 above to open the LoginScreenServletExample project.
  7. The Projects view should look like the following:

    Project window with Login Screen and Login Screen Servlet example opened

  8. In the Projects window, right-click the project LoginScreenServletExample node and choose Run Project (or press F6 key).
  9. Right-click the project LoginScreenExample node and choose Run Project. As the application runs, an emulator window opens and displays the application running in the default device emulator.
  10. In the Emulator window, click the button underneath "Launch".
    The emulator displays a Splash Screen component then Login Screen, as shown:

    WTK 2.5 emulator displaying the sample Login Screen application

  • Moving the cursor up and down allows you to navigate between the Login and Password fields.
  • Click on the central button enables the selected text field for editing.
  • Click on the Username field and type "john", then press the "OK" button in the emulator.
  • Click on the Password field and type "peanuts", then press the "OK" button in the emulator.
  • Click the button underneath "Login" to finish.
  • If the application connects to the server, you'll see the alert1 component displayed on the screen with a "Login Successful" message.

top

Creating an Application with the Login Screen Custom Component

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 LoginScreenServletExample project sources. To create a Java ME client application do the following:

  1. Create the LoginScreenExample project
  2. Add Packages and a visual MIDlet to the LoginScreenExample project
  3. Add Components to the LoginScreenExample
  4. Add Commands to the Login Screen component
  5. Connect the Components to create an application flow
  6. Add additional source code
  7. Run the Project

Creating the LoginScreenExample Project

  1. Choose File > New Project (Ctrl-Shift-N). Under Categories, select Java ME. Under Projects, select Mobile Application and click Next.
  2. Enter LoginScreenExample in the Project Name field. Change the Project Location to a directory on your system. Let's refer to this directory as $PROJECTHOME.
  3. Uncheck the Create Hello MIDlet checkbox. Click Next.
  4. Leave the Sun Java Wireless Toolkit as the selected Emulator Platform. Click Next, then Finish.

    Note: 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.

Adding Packages and a Visual MIDlet to the LoginScreenExample Project

  1. Choose the LoginScreenExample project in the Project Window, then choose File > New File (Ctrl-N) . Under Categories, select Java. Under File Types, select Java Package. Click Next.
  2. Enter loginscreenexample in the Package Name field. Click Finish.
  3. Choose the loginscreenexample package in the Project window, then choose File > New File (Ctrl-N). Under Categories, select MIDP. Under File Types, select Visual MIDlet. Click Next.
  4. Enter LoginScreenExample into MIDlet Name and MIDP Class Name fields. Click Finish.

Adding Components to the LoginScreenExample

  1. Switch your Visual MIDlet to the Flow Designer window. Drag the following components from the Component Palette and drop them in the Flow Designer:
    • Splash Screen
    • Wait Screen
    • Login Screen
    • Alert (x2)
  2. Click on splashScreen and, in the Properties Window, change value of property Text from null to the Login Screen Example
  3. Right-click the alert component and choose Rename in the popup menu.
  4. In the Rename dialog box, enter alertFailure and click OK.
  5. Repeat steps 3 and 4 for the alert1 component to rename it to alertSuccess.
  6. Go back to the alertFailure component and, in the Properties Window, change value of the property String to the Error.
  7. Click the waitScreen component and, in the Properties Window, change value of the property Text to the Please Wait....
  8. In the Properties Window of the waitScreen component, click the ellipsis button (Ellipsis button) against the Task property.
  9. In the Task dialog box, click Add.
    The task1 component is added.
  10. Click Go to Source.
    The Source View displays the getTask () method code.
  11. Click OK to close the Task dialog box.
  12. In the Source View, find section // write task-execution user code here and replace it with login();.
  13. Press Ctrl+S to save your edits.

Adding Commands to the LoginScreenExample

  1. Open the Flow View.
  2. Choose Exit Command from the Commands section of the Component Palette. Drag and drop it to the loginScreen component in the Flow View.

Connecting Components

In the Flow View, click on the Started text on the Mobile Device and drag it to the splashScreen component. In the same manner, connect the components together as shown in the following graphic.

Shows the Flow Designer with components conneted by command lines

Adding Source Code

  1. In the declaration section of the LoginScreenExample.java source code add the following code: private boolean login = false;.
  2. At the end of the source code paste following code: 
     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;
 }

    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.

Running the Project

Before running the client application make sure that the server side application is deployed and is running.

To run the mobile client application select Run > Run Main Project or press F6 to Run the main project.

top

Javadoc for the Login Screen Component

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:

  1. Place the cursor on the LoginScreen component in the source code and press Ctr-Shift-Space (or choose Source > Show Documentation).
    The Javadoc for this element displays in a popup window.
  2. Click the Show documentation in external web browser icon (Show documentation in external web browser) in the popup window to view the detailed information about the LoginScreen component in your browser.

top


See Also

top