1.1.2 Events and ThreadingFor increased compatibility, the Lightweight UI Toolkit library completely handles and
encapsulates UI threading. It has a single main thread referred to as the "EDT"
(inspired by the Event Dispatch Thread in Swing and AWT). All events and paint calls
are dispatched using this thread. This guarantees that event and paint calls are
serialized and do not risk causing a threading issue. It also enables portability for
profiles that might have minor threading model inconsistencies. See the Display class
(com.sun.lwuit.Display in the API documentation) for further details about
integrating with the EDT and serializing calls on it.
2. Using Lightweight UI Toolkit WidgetsThis chapter introduces the LWUIT widgets and provides sample code for several
components.
2.1 ComponentA Component is an object having a graphical representation that can be displayed on
the screen and can interact with the user. The buttons, check boxes, and radio buttons
in a typical graphical UI are all examples of a component. Component is the base class.
All the widgets in the Lightweight UI Toolkit library use the composite pattern in a
manner similar to the AWT Container and Component relationship.
2.2 ContainerA Container is a composite pattern with a Component object. It enables nesting and
arranging multiple components using a pluggable layout manager architecture.
Containers can be nested one within the other to form elaborate UIs. Components
added to a container are tracked in a list. The order of the list defines the components'
front-to-back stacking order within the container. If you do not specify an index when
you add a component to a container, it is added to the end of the list (and hence to the
bottom of the stacking order).
2.3 FormForm is a top-level component that serves as the root for the UI library. This Container
handles the title and menus and allows content to be placed between them. By default
the form's central content (the content pane) is scrollable. Form contains Title bar,
MenuBar and a ContentPane. Invocations of Form's addComponent method are
delegated to the content pane’s addComponent. The same applies to most composite
related methods (e.g. setLayout, getComponent and so forth).
The following code demonstrates creation and setup of a form.
Example 2–1 Form Setup and Creation;// 1. Create a FormForm mainForm = new Form("Form Title");// 2. Set LayoutManagermainForm.setLayout(new BorderLayout());// 3. Add a Label to the center of Form content panemainForm.addComponent(BorderLayout.CENTER, new Label(“Hello World”));// 4. Set Transitions animation of FademainForm.setTransitionOutAnimator(CommonTransitions.createFade(400));// 5. Add Command keymainForm.addCommand(new Command("Run", 2));// 6. Show itmainForm.show();Create and Set Up a Form Label2-2 Lightweight UI ToolkitThe following notes correspond to the comments in Example 2–1.
1. The first line of code creates a form using a constructor that lets you set the form
title. The other frequently used form constructor is the no-argument constructor.
2. Next the code specifies the layout manager of the form. Layout managers are
discussed later in this guide.
3. The next bit of code adds a label to the form content pane. Adding components to
a Form (which is a Container) is done with addComponent(Component cmp) or
addComponent(Object constraints, Component cmp), where
constraints are the locations in the layout manager, BorderLayout.
4. A Transition is the movement effect action that occurs when switching between
forms. See the Transitions and Animation chapter.
5. Form has menus to emulate the device soft keys, for example. To set such a menu
bar item, command, use the addCommand(Command cmd) method. The
Commands are placed in the order they are added. If the Form has one Command
it is placed on the right. If the Form has two Commands the first one added is
placed on the left and the second one is placed on the right. If the Form has more
than two Commands the first one stays on the left and a Menu is added with all
the remaining Commands.
6. The show method displays the current form on the screen.
encapsulates UI threading. It has a single main thread referred to as the "EDT"
(inspired by the Event Dispatch Thread in Swing and AWT). All events and paint calls
are dispatched using this thread. This guarantees that event and paint calls are
serialized and do not risk causing a threading issue. It also enables portability for
profiles that might have minor threading model inconsistencies. See the Display class
(com.sun.lwuit.Display in the API documentation) for further details about
integrating with the EDT and serializing calls on it.
2. Using Lightweight UI Toolkit WidgetsThis chapter introduces the LWUIT widgets and provides sample code for several
components.
2.1 ComponentA Component is an object having a graphical representation that can be displayed on
the screen and can interact with the user. The buttons, check boxes, and radio buttons
in a typical graphical UI are all examples of a component. Component is the base class.
All the widgets in the Lightweight UI Toolkit library use the composite pattern in a
manner similar to the AWT Container and Component relationship.
2.2 ContainerA Container is a composite pattern with a Component object. It enables nesting and
arranging multiple components using a pluggable layout manager architecture.
Containers can be nested one within the other to form elaborate UIs. Components
added to a container are tracked in a list. The order of the list defines the components'
front-to-back stacking order within the container. If you do not specify an index when
you add a component to a container, it is added to the end of the list (and hence to the
bottom of the stacking order).
2.3 FormForm is a top-level component that serves as the root for the UI library. This Container
handles the title and menus and allows content to be placed between them. By default
the form's central content (the content pane) is scrollable. Form contains Title bar,
MenuBar and a ContentPane. Invocations of Form's addComponent method are
delegated to the content pane’s addComponent. The same applies to most composite
related methods (e.g. setLayout, getComponent and so forth).
The following code demonstrates creation and setup of a form.
Example 2–1 Form Setup and Creation;// 1. Create a FormForm mainForm = new Form("Form Title");// 2. Set LayoutManagermainForm.setLayout(new BorderLayout());// 3. Add a Label to the center of Form content panemainForm.addComponent(BorderLayout.CENTER, new Label(“Hello World”));// 4. Set Transitions animation of FademainForm.setTransitionOutAnimator(CommonTransitions.createFade(400));// 5. Add Command keymainForm.addCommand(new Command("Run", 2));// 6. Show itmainForm.show();Create and Set Up a Form Label2-2 Lightweight UI ToolkitThe following notes correspond to the comments in Example 2–1.
1. The first line of code creates a form using a constructor that lets you set the form
title. The other frequently used form constructor is the no-argument constructor.
2. Next the code specifies the layout manager of the form. Layout managers are
discussed later in this guide.
3. The next bit of code adds a label to the form content pane. Adding components to
a Form (which is a Container) is done with addComponent(Component cmp) or
addComponent(Object constraints, Component cmp), where
constraints are the locations in the layout manager, BorderLayout.
4. A Transition is the movement effect action that occurs when switching between
forms. See the Transitions and Animation chapter.
5. Form has menus to emulate the device soft keys, for example. To set such a menu
bar item, command, use the addCommand(Command cmd) method. The
Commands are placed in the order they are added. If the Form has one Command
it is placed on the right. If the Form has two Commands the first one added is
placed on the left and the second one is placed on the right. If the Form has more
than two Commands the first one stays on the left and a Menu is added with all
the remaining Commands.
6. The show method displays the current form on the screen.
2.4 Create and Set Up a Form Label
The Label widget can display a single line of text and/or an image and align them
using multiple options. If you need to create a component that displays a string, an
image, or both, you should use or extend Label. If the component is interactive and
has a specific state, a Button is the most suitable widget (instead of a label).
To create a Label, use one of the following calls:
Create and Set Up a Form Label
Using Lightweight UI Toolkit Widgets 2-3
Create an image for an icon label:
Image icon = Image.createImage("/images/duke.png");
Label imageLabel = new Label(icon);
Labels can be aligned to one of the following directions: CENTER, LEFT, RIGHT. LEFT
is the default. In addition the text can be aligned relative to the image position. Valid
values are TOP, BOTTOM, LEFT, RIGHT, where the default is RIGHT. To update the
text position use:
setTextPosition(int alignment);2.5 Button
The Button component enables the GUI developer to receive action events when the
user focuses on the component and clicks. In some devices a button might be more
practical and usable than a command option. Button is the base class for several UI
widgets that accept click actions. It has three states: rollover, pressed, and the default
state. It can also have ActionListeners that react when the Button is clicked.
To get the user clicking event, you must implement an ActionListener, which is
notified each time the user clicks the button. The following code snippet creates an
action listener and changes the text on the button, every time the user clicks it.
final Button button = new Button("Old Text");
button.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent evt) {
button.setText("New Text");
}
});
Button extends Label, so you can create three type of buttons: text only, image only or
image and text button.
2.6 RadioButton
RadioButton is a Button that maintains a selection state exclusively within a specific
ButtonGroup. Because RadioButton inherits from Button, radio buttons have all the
usual button characteristics, as discussed in Section 2.5, "Button". For example, you can
specify the image displayed in a radio button. Each time the user clicks a radio button
(even if it was already selected), the button fires an action event, just as in Button.
To create a RadioButton use:
2.7 ButtonGroup
The ButtonGroup component manages the selected and unselected states for a set of
RadioButtons. For the group, the ButtonGroup instance guarantees that only one
button can be selected at a time.
Initially, all RadioButtons in a ButtonGroup are unselected. Each ButtonGroup
maintains the selected index, and can get a specific RadioButton by calling
getRadioButton(int index).
The following code snippet creates a button group made of two RadioButtons.
Label radioButtonsLabel = new Label("RadioButton:");
....
RadioButton rb1 = new RadioButton("First RadioButton in Group 1");
RadioButton rb2 = new RadioButton("Second RadioButton in Group 1");
ButtonGroup group1 = new ButtonGroup();
group1.add(rb1);
group1.add(rb2);
exampleContainer.addComponent(radioButtonsLabel);
exampleContainer.addComponent(rb1);
exampleContainer.addComponent(rb2);
2.8 CheckBox
Check boxes are similar to RadioButtons but their selection model is different, because
they can flip the selection state between selected and unselected modes. A group of
radio buttons, on the other hand, can have only one button selected. Because
CheckBox inherits from Button, check boxes have all the usual button characteristics,
as discussed in Section 2.5, "Button". For example, you can specify the image displayed
in a check box. Each time the user select a check box (even if it was already selected), it
fires an action event, just as in Button.
To create a CheckBox use:
final CheckBox checkBox = new CheckBox(“Check Box”);
This code produces the CheckBox shown in Figure 2–7.
To catch select and unselect events you can try this:
checkBox.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent evt) {
if(checkBox.isSelected()) {
System.out.println("CheckBox got selected");
} else {
System.out.println("CheckBox got unselected");
}
}
});
0 comments:
Post a Comment