Tutorial 2 : XML / CSS Interface Design

Requirement

Please read the Tutorial 1 first.

Advanced Interface design with XML and stylesheets

In this second part of the tutorial, we suggest improving the user interface with a XML/CSS approach. Note that we use this approach because it is more user-friendly but you can get exactly the same results with the Java approach.

The goal of this section is to provide a title, a content and an exit key to our J2ME application.

Download this tutorial step.

Create a resources folder

Switch on the files view and follow the next screens to create a res folder at in your project. This manipulation permit to separate the java source from resource files.

Now mark this new folder as a source folder. Open the project properties, select the Libraries and resources section and click on the Add folder button. Brownse to your project directory and select the new res folder.

First, create the XML and CSS resource files

In your project resource folder ("res" by default), create helloworld.xml and helloworld.css.

note: to improve organize your projects, fill free to create xml and css subfolders to host those files.

Edit the XML document

Open the helloworld.xml file and add the following content:

<screen title="helloworld">
    <container style="layout:inlinelayout(false,fill); align:center">
        <text text="Hello World!" />
        <picture src="logo_community.png" />
    </container>
</screen>

It will produce a screen with a title bar filled with the text "helloworld". The content of this screen is a container with 2 elements: our "Hello World!" text and a picture.

note: the directory "/res/img" is in the default path for an image.

initDesktopContent() method

Edit initDesktopContent() method in your HelloWorld midlet class to load interface from the XML file:

public void initDesktopContent(Desktop desktop) {
    // Load the content from the XML file with Kuix.loadScreen static method
    Screen screen = Kuix.loadScreen("helloworld.xml", null);

    // Set the application current screen  
    screen.setCurrent();
}

Instead of creating the widgets in the canvas in Java source code, we load the content of the XML resource file. This file is parsed by an integrated XML parser that instanciate the widgets for you. Compared to the previous implementation, performances are somewhat reduce by the string parsing time.

note: a parser component has been implemented with Kutil since several embedded Java virtual machines does not include SAX parser.

If you start the midlet again, you should get something like the following screen:

Customize the appearance of the midlet with a CSS

Open helloworld.css and change the default styles:

text {
    align: center;
    font-style: normal;
    color: #f19300;
}
screenTopbar text {
    color: white;
    padding: 1 2 1 2;
}
screenTopbar {
    font-style: bold;
    bg-color: #cccccc;
    border: 0 0 1 0;
    border-color: #f19300;
}
desktop {
    bg-color: #444447;
}

This stylesheet uses a CSS structure but its syntax has been adapted to fit the needs of mobile applications.

note: the padding is expressed in pixel only (as the margin and the border). The values are respectively TOP, RIGHT, BOTTOM and LEFT.

note 2: the desktop widget is a special Kuix widget. The desktop's instance is created by Kuix on startup and is the root of the widgets tree. Only a screen could be added as a child of the desktop.

Load styles on startup

To load your CSS stylesheet, you can use the initDesktopStyles() on your midlet. This mandatory method, is automaticaly called by the KuixMidlet on startup before the initDesktopContent() one.

Add the following line to initDesktopStyles():

public void initDesktopStyles() {
    // Load the stylesheet from the CSS-like file with Kuix.loadCss static method
    //  note: a stylesheet is not associated with a screen but with the midlet
    //  note 2 : by default '/css/' folder is use to find the 'helloworld.css' file
    Kuix.loadCss("helloworld.css");
}

Add a menu to the midlet

We will now, add a menu to our midlet. Like any other widget, you can add a menu to your midlet very quickly. Edit the XML file and add the following code in the screen tag.

<screen title="helloworld">

    [...]

    <screenFirstMenu>Exit</screenFirstMenu>
    <screenSecondMenu>
            more...
        <menuPopup>
            <menuItem>
                About
            </menuItem>
            <menuItem>
                Exit
            </menuItem>
            </menuPopup>
    </screenSecondMenu> 
</screen>

This code adds a bottomBar and 2 menus to the midlet. By default, menus are binded to the softkeys: on the left softkey, we add a single element menu with "Exit" label (screenFirstMenu tag in the XML file). On the second softkey, we add a Popup Menu (screenSecondMenu tag) that contains 2 items ("Exit" and "About").

note: Kuix handles by default the navigation across the focusable widgets displayed on the screen (as menu items, buttons, textfields, etc.).

Customize the menu appearance

Actually, if you start the midlet without setting any additional style, you may not recognize the menu bar. Let's set before, some additionnal lines in the stylesheet.

screenBottombar {
    bg-color: #77787a;
    border: 1 0 0 0;
    border-color: #f19300;
    padding: 2 2 1 2;
}
screenBottombar text {
    color: white;
}
menuPopup {
    bg-color: #444447;
    border: 1;
    border-color: #838386;
    padding: 1;
}
menuItem {
    padding: 1 6 1 6;
    margin: 1 0 0 0;
    border: 1;
    border-color: #77787a;
}
menuItem:hover {
    border-color: #f19300;
}

Add the previous code to your CSS file. The first block assigns a style to the bottom bar that is implicitely created when you add a menu: this space is reserved for the menu(s). The second section override the text color inside the bottom bar. The Popup Menu is shown on the right softkey and contains the Menu Items. If you do not set a menuItem:hover property, you will not be able to identify which item is currently selected in you Popup Menu.

Start the midlet

Your menu is ready, but not very useful since we did not set any action on it. Next section will teach you how to add user actions (exit and about) to your application.

---

Go forward, handle user actions : Tutorial 3.