Adding CategoryBar

CategoryBar is a Series 40 full touch UI element typically used for switching between different views within the same MIDlet. It allows for easy and intuitive navigation between related functionalities. It is visualized as a set of user-selectable elements, each represented by an icon and a text label provided by the MIDlet.

For more information on CategoryBar, see CategoryBar

One of the elements of the CategoryBar is always highlighted. The Back button is always present.

Setting the most suitable dimension for an icon

Use the CategoryBar.getBestImageWidth and CategoryBar.getBestImageHeight methods to get the most suitable dimensions for the current device.

int bestWidth;
int bestHeight;

try {
    bestWidth = CategoryBar.getBestImageWidth(CategoryBar.IMAGE_TYPE_ICON);
    bestHeight = CategoryBar.getBestImageHeight(CategoryBar.IMAGE_TYPE_ICON);
} catch (IllegalArgumentException iae) {
    // Handle IllegalArgumentException 
}

Implement the ElementListener

Implement the ElementListener registered for the CategoryBar.

class MyClass extends Canvas implements ElementListener

By implementing The ElementListener the inherited abstract method ElementListener. notifyElementSelected is called every time the user selects an element from the CategoryBar. Use this method to handle the selection of the icon elements.

public void notifyElementSelected(CategoryBar bar, int selectedIndex) {
		
		switch (selectedIndex) {
        		case 0: //handle selected index
        		case 1: //handle selected index
        		case 2: //handle selected index
        	}
	}

Creating the CategoryBar

There are two ways to create the CategoryBar. You can either define the icons and labels separately or us an IconCommand object to provide the icon and label data.

Creating the CategoryBar with Icons and Labels

Create the images and labels for the CategoryBar.

	Image[] unselectedIcons = {
	                              	Image.createImage(“/unselected_1.png”),
					Image.createImage(“/unselected_2.png”),
                                	Image.createImage(“/unselected_3.png”)
                               };
    	
	Image[] selectedIcons =   {
					Image.createImage(“/selected_1.png”),
					Image.createImage(“/selected_2.png”),
                                	Image.createImage(“/selected_3.png”)
                         	   };
    
	String[] labels = { "Label 1", "Label 2", "Label 3" };

//Create the CategoryBar with unselected, selected images and labels
	categoryBar = new CategoryBar(unselectedIcons, selectedIcons, labels);

Creating the CategoryBar using IconCommands

Create the IconCommands.

IconCommand iconCommands[] = new IconCommand[3];

iconCommands[0] = 
new IconCommand("Label 1",unselectedIcons[0],selectedIcons[0],Command.OK,0);
iconCommands[1] = 
new IconCommand("Label 2",unselectedIcons[1],selectedIcons[1], Command.OK,0);
iconCommands[2] = 
new IconCommand("Label 3",unselectedIcons[2],selectedIcons[2], Command.OK,0);

Create the Categorybar with the IconCommands.

categoryBar = new CategoryBar(iconCommands,false);

Register the ElementListener

Register an ElementListener for the CategoryBar. The ElementListener is notified whenever an element is selected. The following code snippet registers the current class as an ElementListener for the new CategoryBar.

categoryBar.setElementListener(this);

Finally set the CategoryBar visible my calling the method.

categoryBar.setVisibility(true);

    public JavaFTMidlet() {
        try {   // Load icon images
            Image imgHome = Image.createImage("/home.png");
            cmdHome = new IconCommand("Home", imgHome, imgHome, Command.SCREEN, 3);
            Image imgInfo = Image.createImage("/info.png");
            cmdInfo = new IconCommand("Info", imgInfo, imgInfo, Command.SCREEN, 3);
        } catch (IOException ex) { }
        IconCommand[] iconCommands = {cmdHome, cmdInfo};     // Put commands into array
        CategoryBar categoryBar = new CategoryBar(iconCommands, true);
        categoryBar.setVisibility(true);        // Make visible (default: invisible)
        categoryBar.setElementListener(this);   // For notifyElementSelected() callback
    }