Connecting your J2ME application to the internet – Part Four


In our last tutorial we created a parser but we didn’t use it anywhere in our application. In this tutorial we are going to create the J2ME application and then in the next tutorial which is going to be the final one we will final connect our application to the internet.

You can download the pdf version of this tutorial here

The Steps

Step one

In our second tutorial which you can find here we had created a J2ME project in Netbeans and so we will pick it from there. This is the same project we created our parser in our last project and so the project tree structure should look as follows

Our last project tree structure

Our last project tree structure

Let us create a package to hold our J2ME midlet class which we know is the main class in our J2ME application. I have named my class com.kirui.core. You can any name to your midlet; I have named mine J2MELoginDemo. To create a midlet right click on the package go to New>>Midlet and then give it a name and click finish. My new project tree structure looks as follows

Our new project tree structure

Our new project tree structure

Step two

Now what we need to do is to come up with the interface that will allow a user to provide a username and password which we will then compare with the credentials in the server. We are going to do this logic in the midlet we have just created. I will not explain it line by line but I have attached the code below and commented it as best as I can. A note to LWUIT newbies, I have used the Ushahidi theme for this demo, if you don’t know how to add themes please feel free to ask. At the end of the tutorial you should have an application similar to the screen shot below

The login screen

The login screen

The code that generated this is as shown below

package com.kirui.core;

import com.sun.lwuit.Command;

import com.sun.lwuit.Display;

import com.sun.lwuit.Form;

import com.sun.lwuit.Label;

import com.sun.lwuit.TextArea;

import com.sun.lwuit.TextField;

import com.sun.lwuit.animations.CommonTransitions;

import com.sun.lwuit.events.ActionEvent;

import com.sun.lwuit.events.ActionListener;

import com.sun.lwuit.layouts.FlowLayout;

import com.sun.lwuit.plaf.UIManager;

import com.sun.lwuit.util.Resources;

import java.io.IOException;

import javax.microedition.lcdui.Alert;

import javax.microedition.lcdui.AlertType;

import javax.microedition.midlet.*;

/**

* @author Kirui

*/

public class J2MELoginDemo extends MIDlet implements ActionListener {

Form loginForm;

//the variables below will be used to hold our user details

String username, name, email;

int userid;

Command exitCommand, loginCommand, logoutCommand;

public void startApp() {

//you must always start with this line in this method

Display.init(this);

/**

* let us include our theme. It makes it easier to style our application

* as it defines the general look and feel for the various components

* in our application

* Please read the LWUIT developer guide to learn more about how themes

* are used

*/

try {

Resources res = Resources.open(“/com/kirui/res/Ushahidi.res”);

UIManager.getInstance().setThemeProps(res.getTheme(“Ushahidi”));

} catch (IOException ex) {

ex.printStackTrace();

Alert uiManAlert = new Alert(“UIManager error”, ex.getMessage(), null, AlertType.ERROR);

uiManAlert.setTimeout(50);

}

loginForm = new Form(“Login”);

//play around with this to know what it does

loginForm.setCyclicFocus(false);

//we get the screenwidth so that we can use it to adjust the size of our input fields

final int screenWidth = loginForm.getWidth();

/**

* You can use several layouts depending on the kind of input you

* are displaying to the user. Since ours is pretty simple let us

* use the FlowLayout.

*/

loginForm.setLayout(new FlowLayout());

//create the username label

Label usernameLbl = new Label(“Username:”);

//make sure it covers the entire screen width. this forces the next item to start below it

usernameLbl.setPreferredW(screenWidth);

//add it to our form

loginForm.addComponent(usernameLbl);

//create the input field for the username

final TextField userTxt = new TextField();

userTxt.setUseSoftkeys(false);

userTxt.setPreferredW(screenWidth);

loginForm.addComponent(userTxt);

Label passwordLbl = new Label(“Password:”);

passwordLbl.setPreferredW(screenWidth);

loginForm.addComponent(passwordLbl);

final TextField password = new TextField();

password.setUseSoftkeys(false);

password.setConstraint(TextArea.PASSWORD);

password.setPreferredW(screenWidth);

loginForm.addComponent(password);

//let us add the neccesary commands

exitCommand = new Command(“Exit”);

loginCommand = new Command(“Login”);

loginForm.addCommand(exitCommand);

loginForm.addCommand(loginCommand);

/*

* add command listener to our form so that it can respond to command presses. Check

* public void actionPerformed(ActionEvent ae) to see exactly how we respond to the

* commands

*/

loginForm.addCommandListener(this);

//set some fancy transition effects. do some more R n D to know what more transitions we can achieve

loginForm.setTransitionOutAnimator(CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, false, screenWidth));

//show form

loginForm.show();

}

public void pauseApp() {

}

public void destroyApp(boolean unconditional) {

}

public void actionPerformed(ActionEvent ae) {

if (ae.getCommand() == exitCommand) {

destroyApp(true);

notifyDestroyed();

}

}

}

After the next tutorial I will upload all the code to Git as my blog doesn’t format the code well.

What Next

In our last tutorial we are going to handle to login function. That is it for today, happy coding!

Advertisements

3 thoughts on “Connecting your J2ME application to the internet – Part Four

  1. could please show me how you used the php part, if it includes a where clause in the mysql part, it always gives me an error whenever i run the application.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s