Visual Mobile Designer Custom Components: Login Screen

Contributed by Karol Harezlak

The Visual Mobile Designer (VMD) is a graphical interface within the NetBeans Mobility pack 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 Mobility pack, 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.

Content on this page applies to NetBeans IDE 6.0 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.

Application Overview

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. If you are new to NetBeans Mobility or J2EE, you should start with the NetBeans 6.0 Mobility CLDC/MIDP Quick Start Guide and Introduction to Developing Web Applications before continuing.

Installing and Running the Sample Application

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


The following software must be installed on your computer to begin:

Take the following steps to install the LoginScreenExample application:

  1. Download . This download contains project for NetBeans Mobility project.
  2. Download . This download contains NetBeans Web project.
  3. Unzip the file.
  4. In the IDE, open both project by chooseing File > Open Project and browse to the folder that contains the unzipped files with projects.
  5. The Project Window should look like the following:
    Project window with Login Screen and Login Screen Servlet example opened
  6. The Navigator Window for Mobility Project LoginScreenExample should look like the following:
    Project window with Login Screen example opened
  7. In the Projects window, right-click the project LoginScreenServletExample node and choose Run Project (or press F6 key). Make sure that your application server works on the port 8080. Second step is to 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.
  8. 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 sampel Login Screen application

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'd like to learn more about server side of this application look at the LoginScreenServletExample project sources. To create a Java ME client application do the following:

  1. Creating the LoginScreenExample project
  2. Adding packages and a visual MIDlet to the LoginScreenExample project
  3. Adding components to the LoginScreenExample
  4. Adding Commands to the Login Screen component
  5. Connecting the Components to create an application flow
  6. Adding additional source code
  7. Run the Project

Creating the LoginScreenExample Project

  1. Choose File > New Project (Ctrl-Shift-N). Under Categories, select Mobile. Under Projects, select MIDP 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 Target Platform. Click Next, the Finish.
  5. 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 Classes. 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:
  2. Click on splashScreen and, in the Properties Window, change value of property Text from "null" to the "Login Screen Example"
  3. Click on alert component and, in the Properties Window, change value of the property Instance Name to the "alertError". In similar way change property Instance Name of alert1 to the "alertSuccess"
  4. Go back to the alertError component and, in the Properties Window, change value of the property String to the "Error".
  5. Click on to the waitScreen component and, in the Properties Window, change value of the property Text to the "Please Wait...".

Adding Commands to the LoginScreenExample

  1. Open the Flow Designer Window.
  2. Choose Exit Command from the Commands section of the Component Palette. Drag and drop it into Flow Designer Window (loginScreen component).

Connecting Components

  1. In the Flow design window, 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 additional source code

  1. In the declaration section of the source code add the following code: private boolean login = false;.
  2. At the end of the source code paste following code:
  3.  private void login() throws IOException {
       String url = "http://localhost:8080/LoginScreenExample/"
                    + "?username=" + getLoginScreen().getUsername()
                    + "&password=" + getLoginScreen().getPassword();
       //Clean up alertSuccess 
       //Connect to the server
       HttpConnection hc = (HttpConnection);
       if (hc.getResponseCode() == HttpConnection.HTTP_OK) {
            login = true;
       //Closing time...
       //Take action based on login value
       if (login) {
            getAlertSuccess().setString("Login Succesfull");
       } else {
            getAlertSuccess().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.
  1. To run the mobile client application select Run > Run Main Project or press <F6> to Run the main project.

To Learn More about 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:

  1. Choose Help > Javadocs References > org.netbeans.microediton.lcdui The file is opened in a web browser.
  2. Click org.netbeans.microedition.lcdui to see links for the component information.

Send Us Your Feedback

Related Tutorials