J2ME Polish - Development Framework

Hi Readers,

I hope that my previous post help you some how. Please let me know if you want some more updates or article on any specific area. Today I am going to discuss about J2ME Polish Framework. What is the requirement for development frameworks? Features of J2ME Polish etc. So let's start:-

Why we need development frameworks?

To answer this question I am going to share one small example that will help you to have better understanding. We'll create a small app which has login functionality. First I am going to use only Java ME classes without any framework. Let's see:-

We have two options two create this app, one is by using High Level APIs and other is Low Level APIs. High Level APIs have pre-defined classes defined. You need to implement the functionality and you need not to worry about coding any graphics yourself and the application looks like (at least to some degree) native application. However there is limited control of the UI and the UI will look different on different devices.

Low level API requires you to implement everything (how the keys work, how the different UI are drawn on the screen, etc). You have full control of the UI and the app looks the same on all devices (but usually different from the natve application on that phone).

We are going to use High Level APIs in this example. The app code look like this.

/**

  * Called at the start of MIDlet application

  */

protected void startApp() throws MIDletStateChangeException {

    midletDisplay = Display.getDisplay(this);

    ashnaForm = new Form("Ashna MIDlet");

    ashnaForm.append("Please enter your login credentials!");

    ashnaForm.append(userIDTxt);

    ashnaForm.append(pwdTxt);

    ashnaForm.addCommand(exitCommand);

    ashnaForm.addCommand(loginCommand);

    ashnaForm.setCommandListener(this);

    midletDisplay.setCurrent(ashnaForm);

}

/**

  * Called at the exit of MIDlet application

  */

protected void destroyApp(boolean unconditional) throws MIDletStateChangeException {

    if (! unconditional) {

        throw new MIDletStateChangeException();

    }

}

/**

  * Used to handle the commands.

  */

if (command == exitCommand) {

    try {

        destroyApp(false);                

    } catch (MIDletStateChangeException ex) {

        Alert exitAlert = new Alert("Alert", "Do you really want to exit?", null, AlertType.INFO);

        exitAlert.addCommand(yesCommand);

        exitAlert.addCommand(noCommand);

        exitAlert.setCommandListener(this);

        midletDisplay.setCurrent(exitAlert);                

    }            

}

Now, let's see the output for this:-

You can notice that, UI for this app is not that much attractive. To make attractive UI we have so many options such as:-

1. Use J2ME Low Level APIs
2. Use different UI frameworks:-
• J2ME Polish
• LWUIT
• Mobile Distillery’s Celsius

I am using J2ME Polish framework in this article. So before start coding we need to understand J2ME Polish first.

J2ME Polish:-

1. J2ME Polish combines the power of Java Mobile (J2ME) with web-designing tool CSS.
2. Separate the application UI designing from the application’s source code.
3. Develop GUI using High Level APIs like Form, List, TextField etc.
4. Provide additional J2ME Polish Custom Components like TabbedForm, TreeItem and soon.
5. Add #style directives to applications source code for connecting code with the design.
6. We can design and customize application using simple CSS text files.
7. Configure additional GUI options in build.xml script.

J2ME Polish Architecture:-

J2ME Polish architecture based upon three main components, which are:-

• Device Database
• Build Framework
• Client APIs

Device Database is the foundation of J2ME Polish and defined as device.xml. It includes the detailed information for J2ME capable devices – APIs support, Screen resolution, known issues, etc. It is used by build framework and client API to generate the executable for particular device.

Build Framework automate the necessary steps and based on the Ant tool. We can easily integrate it with IDE. The main advantage is that, it's extensible.

Client API has support for great GUI using CSS. It provide support for advance GUI classes such as, Tabbed Form, Tree Item, FilterList etc. In addition to this, it also support animation effects such as, text and screen transition effects.

For every device, the approach followed by J2ME Polish:-

Now I am going to use same example code that I used earlier, but with few additional changes. We have to create a file with name polish.css in the resource folder and need to define all the styles. After that we'll use same styles with pre-processing statements in our code. I'll show you with example:-

/***Style entries in polish.css file***/

titleBackground {

    color: #5F0000;   
}

basicBackground {
   color: #9C0000;
}

menuBackground {
   type: round-rect;
   color: #5f0000;
   border-width: 2;
   border-color: #5f0000;
}

title {
    padding: 2;
    background: titleBackground;
    font-style: bold;
    font-size: medium;
    font-face: system;
    font-color: #ffffff;
    layout: center | expand;
}

menu {
    menubar-color: #5f0000;
    background: menuBackground;
    min-width: 100;
    padding: 1;
    //#if polish.MenuBar.Position != right && polish.MenuBar.Position != invisible
    view-type: slide-up;
    //#endif
    font-style: bold;
    font-size: medium;
    font-face: system;
    font-color: rgb(255, 255, 255);
    layout: left;
    focused-style: menu:hover;
} 

Here I defined few styles, but in same way you can define as per your requirement. Now we'll see how we can use these defined styles in our app and now code look like this:-

/**

  * Called at the start of MIDlet application

  */

protected void startApp() throws MIDletStateChangeException {
        midletDisplay = Display.getDisplay(this);
        //#style form
        ashnaForm = new Form("Ashna");
        //#style headingLabel
        ashnaForm.append("Please enter your login credentials!");
        //#style txtField
         ashnaForm.append(userIDTxt);
        //#style txtField
         ashnaForm.append(pwdTxt);
        //#style loginButton
        ashnaForm.append(loginBtn);
        loginBtn.setDefaultCommand(pressCommand);
        loginBtn.setItemCommandListener(this);
        ashnaForm.addCommand(exitCommand);
        ashnaForm.addCommand(loginCommand);
        ashnaForm.setCommandListener(this);
        midletDisplay.setCurrent(ashnaForm);
 }

/**

  * Used to handle the commands.

  */

if (command == exitCommand) {

    try {

        destroyApp(false);                

    } catch (MIDletStateChangeException ex) {

         //#style infoAlert

        Alert exitAlert = new Alert("Alert", "Do you really want to exit?", null, AlertType.INFO);

        exitAlert.addCommand(yesCommand);

        exitAlert.addCommand(noCommand);

        exitAlert.setCommandListener(this);

        midletDisplay.setCurrent(exitAlert);                

    }            

}

Check the text in blue color in above sample code, in this way you can use pre-defined styles in your app. Now check the output for this app.

So now you can see the difference between the GUI for same app. Same GUI effect we can provide using Low Level APIs also, but over there it's time consuming and for each device we need to port our application. Using J2ME polish you need to just code once and define all the styles after that build framework help you with the device fragmentation.

I hope this article gives you some understanding about J2ME Polish framework. If you have any queries, Please let me know. I'll try my best to answer your queries.