Creating your first LWUIT MIDlet using a custom theme

This topic aims to help you create your first LWUIT MIDlet using a custom theme. The following list of steps demonstrate how to create a simple HelloWorld MIDlet that displays a Hello World label using a custom theme that you define.

Assumption

This guide assumes that you are already using Nokia Asha SDK 1.2 or older. If not refer to, Nokia Asha overview page

Steps

  1. From the Start menu, select Nokia Asha SDK > Nokia IDE for Java ME (Eclipse) v3.1. The Workspace Launcher dialog appears.

    Figure 1. Selecting the workspace

  2. Click OK to use the default workspace. This launches Nokia IDE for Java ME (Eclipse).

  3. Create a new MIDlet project by selecting File > New > MIDlet Project. The New MIDlet project window appears.

  4. Specify HelloWorldCustomTheme in the Project name field and click Finish.

    Figure 2. Creating a MIDlet project

    The newly created MIDlet project appears on Nokia IDE for Java ME (Eclipse).

    Figure 3. HelloWorldCustomTheme MIDlet project on Nokia IDE for Java ME (Eclipse) v3.1

  5. Right-click on the MIDlet project and select Properties. The Properties dialog for the MIDlet project appears.

  6. In the Properties dialog, click Java Build Path and select the Libraries tab.

  7. Click Add External Jars and add the LWUIT for Nokia library package from this path: <Nokia Asha SDK 1.2 Install Path\Devices\Nokia_Asha_SDK_1_2\plugins\lwuit\lib\asha-sdk\S40-no-themes.jar>. This package contains the Nokia LWUIT libraries required for the MIDlet project.

    Figure 4. Adding LWUIT for Nokia library package from the Libraries tab

  8. Ensure that S40–no-themes.jar is selected in the Order and Export tab and click OK.

    Figure 5. Selecting LWUIT for Nokia library package from the Order and Export tab

  9. Create your custom theme for the MIDlet project using LWUIT Resource Editor.

    1. From the Nokia Hub menu, select LWUIT Resource Editor. The Resource Editor window appears.

      Figure 6. LWUIT Resource Editor window

    2. Click the Add Theme icon as shown below. The New Theme dialog appears

      Figure 7. Add Theme icon

    3. In the New Theme dialog, specify a name for your custom theme in the Name field (for example, HelloWorldLabelTheme) and click OK. The new theme is added to the Themes list.

      Figure 8. New Theme dialog

      Figure 9. The new theme is added to the Themes list

      Note:

      For more information about themes, see LWUIT Themes.

    4. Click Add on the right pane to add some styling for your theme. The Add dialog appears. For example, you can define the label properties of your MIDlet by performing the following steps:

      1. Specify a name for your custom styling in the Component field. For example, Label.

        Figure 10. Adding a Label component

      2. Select the Color tab and clear the Derive Foreground option to set the Foreground color for the Label component. For example, the foreground color of the Label can be set to Red by specifying the value as ff0000 or by clicking the respective button and selecting the color.

        Figure 11. Setting the foreground color for the Label component

      3. Click OK once you are done. The Label component is added to your custom theme.

        Figure 12. Label component visible under the custom theme

    5. Save your custom theme as a resource file (.res) and add it to your MIDlet project by performing the following steps:

      1. From the File menu, select Save As and select the resource path of your MIDlet project. For example, C:\Nokia\NokiaDevEnv\workspace\HelloWorldCustomTheme\res

        Figure 13. Saving the resource file

      2. Specify a name for the resource file (for example, HelloWorldCustomRes.res) in the File name field and click Save. The resource file is added to your MIDlet project.

  10. Press F5 to load the resource file into your MIDlet project. In the Package Explorer view, the resource file appears under HelloWorldCustomTheme > res as shown below.

    Figure 14. Resource file loaded into your MIDlet project

  11. In the Package Explorer view, right-click on HelloWorldCustomTheme > src and select New > Java ME MIDlet. The New Java ME MIDlet window appears.

    Figure 15. Creating a Java ME MIDlet

  12. Specify the following details in the New Java ME MIDlet window and click Finish:

    • Package: A package name for your Java ME MIDlet, for example, com.example.helloworld.

    • Name: A name for your Java ME MIDlet, for example, HelloWorldMIDlet.

    Figure 16. Specifying the Java ME MIDlet details

    The HelloWorldMIDlet.java file is loaded into the workspace.

    Figure 17. HelloWorldMidlet.java is loaded in the workspace

  13. Add import java.io.IOException; after package com.example.helloworld; and the following import statements after import javax.microedition.midlet.MIDletStateChangeException; in HelloWorldMIDlet.java. This includes the LWUIT libraries required for this MIDlet.

    import com.sun.lwuit.Display;
    import com.sun.lwuit.Form;
    import com.sun.lwuit.Label;
    import com.sun.lwuit.plaf.UIManager;
    import com.sun.lwuit.util.Resources;

    Figure 18. Adding LWUIT import statements

  14. Add the implementation (following code) for the startApp() method in HelloWorldMIDlet.java and save your changes. This implementation displays a Hello World label, based on the custom theme you created earlier using LWUIT Resource Editor.

    // Display.init() method must be first called to initialize LWUIT
    		Display.init(this);
    		
    		/* Load your theme*/
    		try {
    			/* Open your .res file*/
    			final Resources res = Resources.open("/HelloWorldCustomRes.res");
    			/* Load theme properties of your theme in .res file*/
    			UIManager.getInstance().setThemeProps(res.getTheme("HelloWorldLabelTheme"));
    		} catch (final IOException exp) {
    			System.out.println("Failed to load HelloWorldCustomRes.res");
    		}
    		
    		/* Create an instance of Form */
    		Form form = new Form();
    		
    		/* Create an instance of Label */ 
    		Label label = new Label("Hello World!!!");
    		/* Set your style UIID on label*/
    		label.setUIID("Label");
    		
    		/* Add label on form */
    		form.addComponent(label);
    		
    		/* Show the form */
    		form.show();

    Figure 19. Updated startApp() method

    Figure 20. Complete HelloWorldMidlet.java source code

  15. Run the MIDlet project by right-clicking on the project and selecting Run As > Emulated Java ME MIDlet.

    Figure 21. Running the MIDlet project

    The MIDlet project output is displayed on the emulator as follows.

    Figure 22. HelloWorld output

Next steps


Last updated 5 March 2014

Back to top

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×