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.

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 Java ME MIDP Quick Start Guide and Introduction to Developing Web Applications before continuing.

Requirements

For help getting your system set up, please see the installation instructions.

Installing and Running the Sample Application

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

Take the following steps to install the LoginScreenExample application:

Download LoginScreenExample.zip . This download contains the completed NetBeans Mobility project. Download LoginScreenServletExample.zip. This download contains the completed NetBeans Web project. Unzip the file. In the IDE, open both project by choosing File > Open Project and browse to the folder that contains the unzipped files with projects. The Project Window should look like the following:
The Navigator Window for Mobility Project LoginScreenExample should look like the following:
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. In the Emulator window, click the button underneath "Launch."
The emulator displays a Splash Screen component then Login Screen, as shown:

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:

Creating the LoginScreenExample Project

Adding Packages and a Visual MIDlet to the LoginScreenExample Project

Adding Components to the LoginScreenExample

Adding Commands to the LoginScreenExample

Connecting Components

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.

Adding additional source code

 private void login() throws IOException {
   //URL
   String url = "http://localhost:8080/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 {
        getAlertSuccess().setString("Wrong Username or Password");
   }
   login = false;
 }

Running the 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:

Additional NetBeans Java ME Custom Component Tutorials