FormItem

FormItem is a component that consists of one or two rows, can optionally receive a main icon displayed on the left and a smaller action icon displayed on the right, and it can be used to trigger up to two actions. The single line FormItem can receive only one action. The first line in a two-line FormItem is used for displaying the title and second line is used for displaying the value. The main action can be triggered by tapping either the title or the value of the component, while the secondary action is triggered by tapping the action icon. The value row can be highlighted in red, blue or the default theme color.

The single line FormItem receives one action and can be used as a hyperlink.

Figure 1. FormItem with a single line and a single action with (right) or without (left) an icon

The following snippet constructs a single line FormItem with one action and no main icon:

Display.init(this);
form = new Form("FormItem Demo");

FormItem oneLiner = new FormItem("One line item", false);
oneLiner.setFormItemListener(new FormItemListener() {

    public void notifyFormItemListener(
        FormItem item,
        Component component,
    boolean actionButtonPressed) {
        // perform an action here
    }
});
form.addComponent(oneLiner);

form.show();

In order to add the main icon, we need to slightly change the constructor as follows:

Display.init(this);
form = new Form("FormItem Demo");
Image image = null;

try {
    image = Image.createImage("/icon.png");
} catch (IOException e) {

}

FormItem oneLiner = new FormItem("One line item with icon", image);

oneLiner.setFormItemListener(new FormItemListener() {

    public void notifyFormItemListener(
        FormItem item,
        Component component,
    boolean actionButtonPressed) {
        // perform an action here
    }
});
form.addComponent(oneLiner);
form.show();

The two-line FormItem, in its simplest form, consists of a title and a value.

Figure 2. A FormItem with a title a value and a single action

The following snippet constructs a two-line FormItem with a title, a blue colored value and a single action:

Display.init(this);
form = new Form("FormItem Demo");

FormItem twoLiner = new FormItem("Some Title", "Some value", false);

twoLiner.setFormItemListener(new FormItemListener() {

    public void notifyFormItemListener(
        FormItem item,
        Component component,
    boolean actionButtonPressed) {

        System.out.println("main action");
    }
});
form.addComponent(twoLiner);

form.show();

When adding a main icon to a two-line FormItem, we need to use a different constructor than the constructor used for the two-line FormItem without a main icon.

Figure 3. FormItem with title, value, icon and a single action

The following snippet constructs a single action FormItem with a title, a blue colored value and a main icon:

Display.init(this);
form = new Form("FormItem Demo");
Image image = null;

try {
    image = Image.createImage("/icon.png");
} catch (IOException e) {

}

FormItem twoLiner = new FormItem("Some Title", "Some value", image, false, FormItem.HIGHLIGHT_COLOR_RED);

twoLiner.setFormItemListener(new FormItemListener() {

    public void notifyFormItemListener(
        FormItem item,
        Component component,
    boolean actionButtonPressed) {
        System.out.println("I was tapped");
    }
});
form.addComponent(twoLiner);
form.show();

Two action FormItems require an action icon for the secondary action, that will catch the tap on the icon and will trigger the boolean actionButtonPressed to be returned as true via the notifyFormItemListener call back. The main action is triggered by tapping anywhere else on the FormItem.

Figure 4. Two action FormItem with title, value and an action icon.

The following snippet constructs a two-line FormItem with two actions:

Display.init(this);
form = new Form("FormItem Demo");
Image image = null;

try {
    image = Image.createImage("/action.png");
} catch (IOException e) {

}

FormItem twoLiner = new FormItem("Some Title", "Some value", image, true, FormItem.HIGHLIGHT_COLOR_RED);

twoLiner.setFormItemListener(new FormItemListener() {

    public void notifyFormItemListener(
        FormItem item,
        Component component,
    boolean actionButtonPressed) {
        if (actionButtonPressed) {
            System.out.println("secondary action");
        }
        else {
            System.out.println("main action");
        }

    }
});
form.addComponent(twoLiner);
form.show();

We can also have a main icon in a two action FormItem. It is the developer’s responsibility to provide graphics for the selected and unselected state of the action icon.

Figure 5. A FormItem with a title a colored value, a main icon and two actions. Tapping on the action icon

on the right will trigger the secondary action, while tapping anywhere else will trigger the FormItem’s main action.

The following snippet demonstrates the construction of a FormItem with two actions, a main icon, a title and a colored value:

Display.init(this);
form = new Form("FormItem Demo");
Image image = null;
Image actionUnselected = null;
Image actionSelected = null;

try {
    image = Image.createImage("/icon.png");
    actionUnselected = Image.createImage("/actionNormal.png");
    actionSelected = Image.createImage("/actionPressed.png");
} catch (IOException e) {

}

FormItem twoLiner = new FormItem("Some Title", "Some value", image, actionUnselected, actionSelected, FormItem.HIGHLIGHT_COLOR_RED);

twoLiner.setFormItemListener(new FormItemListener() {

    public void notifyFormItemListener(
        FormItem item,
        Component component,
    boolean actionButtonPressed) {

        if (actionButtonPressed) {
            System.out.println("secondary action");
        }
        else {
            System.out.println("main action");
        }
    }
});
form.addComponent(twoLiner);
form.show();

Last updated 22 July 2013

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.

×