ComboBox.
A combo box is a list that allows only one selection at a time. When a user clicks the combo box button, a drop-down list of elements allows the user to select a single element. The combo box is driven by the list model and allows all the renderer features of the List as well.
Other components that can display one-of-many choices are groups of radio buttons, check boxes, buttons, and lists. Groups of radio buttons are generally the easiest for users to understand, but combo boxes can be more appropriate when space is limited or more than a few choices are available. Lists are not always attractive, but they are more appropriate than combo boxes when the number of items is large (say, over five).
The following code creates a combo box (a list model that is built from check boxes) and sets it up:
String[] content = { "Red", "Blue", "Green", "Yellow" };
// 1. Creating the combo box
ComboBox comboBox = new ComboBox(content);
// 2. Setting a checkBox renderer
comboBox.setListCellRenderer(new checkBoxRenderer());
// 3. Adding a action listener to catch user clicking // to open the ComboBox
comboBox.addActionListener(myActionListener......);
The following notes correspond to the comments in the code above.
1. This combo box code contains an array of strings, but you could just as easily use labels instead.
ComboBox
2. To put anything else into a combo box or to customize how the items in a combo box look, you need to write a custom renderer.
3. The next line of code (which calls setListCellRender) registers an action listener on the combo box.
The following is a sample of renderer code:
/** * Demonstrates implementation of a renderer derived from a CheckBox */
private static class checkBoxRenderer extends CheckBox implements ListCellRenderer {
/** Creates a new instance of checkBoxRenderer */
public checkBoxRenderer() { super(""); }
// Setting the current check box text and status
public Component getListCellRendererComponent(List list,
Object value,
int index,
boolean isSelected) { setText("" + value); if (isSelected) { setFocus(true); setSelected(true); } else { setFocus(false); setSelected(false); } return this; }
// Returning the list focus component
public Component getListFocusComponent(List list) { setText(""); setFocus(true); setSelected(true); return this; } }
Tabs
Tabs are containers that let the user switch between a group of components that all share the same space by focusing on a tab with a title, an icon, or both. The user chooses which component to view by selecting the tab corresponding to the desired component.
To create a tab pane, instantiate Tabs, create the components you wish it to display, and then add the components to the tabbed pane using the addTab or insertTab methods. Tabs has the ability to remove tabs as well, by calling removeTabAt(int index) at a given position index. A tab is represented by an index corresponding to the position it was added in, where the first tab has an index equal to 0 and the last tab has an index equal to the tab count minus 1.
If the tab count is greater than 0, then there is always a selected index, which by default is initialized to the first tab. If the tab count is 0, then the selected index is -1.
Tabs has four different tab placement orientations. The default tab placement is set to the TOP location. You can change the tab placement to LEFT, RIGHT, TOP or BOTTOM using the setTabPlacement method.
The following code creates a pane with tab placement of bottom, and places a Label in the center of the first (and only) tab.
Tabs tabs = new Tabs(Tabs.TOP);
tabs.addTab("Tab 1", new Label("I am a Tab!"));
tabs.addTab("Tab 2", new Label("Tab number 2")); ...
TextArea
The text area represents text that might be editable using the system native editor (it might occur in a new screen). The native editor is used to enable complex input TextField methods (such as T9) and application internationalization. The following code creates and initializes the text area:
TextArea textArea = new TextArea(5, 20, TextArea.NUMERIC);
textArea.setEditable(false);
The first two arguments to the TextArea constructor are hints as to the number of rows and columns, respectively, that the text area should display. The third one is a constraint that is passed into the native text editor. Valid values can be one of ANY , EMAILADDR , NUMERIC , PHONENUMBER , URL , or DECIMAL . In addition it can be bitwise OR'd with one of PASSWORD , UNEDITABLE , SENSITIVE , NON_PREDICTIVE , INITIAL_CAPS_SENTENCE , INITIAL_CAPS_WORD . For example, ANY | PASSWORD . The default value is ANY . In the above example NUMERIC only allows the user to type numbers.
Text areas are editable by default. The code setEditable(false) makes the text area uneditable. It is still selectable, but the user cannot change the text area's contents directly.
TextField
TextArea doesn't always allow in-place editing on existing devices and doesn't provide "fine grained control" over the input. This allows a text area to be lightweight, and portable for all possible devices. These restrictions sometimes cause a poor user experience because it requires users to go into a different screen for input (since all input is handled natively by the device). From a developer standpoint the native input can be a problem since it doesn't send change events and doesn't provide control over allowed input.
LWUIT provides the TextField component to support direct mobile phone input from within LWUIT. Unlike a TextArea, TextField is completely implemented in LWUIT.
Developers can override almost all of its features to provide deep customization (for example, masked input, localization, and more). TextField inherits the TextArea component and all of its features. It also supports moving to the native text editor.The constructor also accepts several arguments, similar to the TextArea component.TextField also has some limitations:
Creating a text field is trivial:
TextField f = new TextField();
Calendar
The LWUIT calendar component allows users to pick a date using a monthly calendar user interface. Use the calendar component to navigate and pick a date, as shown in the following code:
Calendar cal = new Calendar();
Developers can monitor state changes within the calendar using a data change listener or an action listener.
Tickering
Label (and all its subclasses) includes ticker support. A ticker scrolls the content of a long label across the screen. Ticker ability in labels is usually indicated by displaying three dots "..." after the end of the label. When the label (button, checkbox, etcetera) receives focus, these three dots disappear and the label starts animating like a stock ticker.
A ticker can be started explicitly using a call to startTicker or stopTicker in Label. It can also be prevented by invoking setTickerEnabled(false) . To prevent the three dots from appearing at the end of labels or components that support tickering, use setEndsWith3Points(false) .
Bidi
BiDi refers to bidirectional language support, generally used for right-to-left (RTL) languages. There is plenty of information about RTL languages (Arabic, Hebrew, Syriac, Thaana) on the internet, but as a brief primer here is a minor summary.
Most western languages are written from left to right (LTR), however some languages are normally written from right to left (RTL). Speakers of these languages expect the UI to flow in the opposite direction, otherwise it seems "weird" just like reading this word in RTL would look: "driew" to most English speakers.
The problem posed by RTL languages is known as bi-directional) and not as RTL since the "true" problem isn't the reversal of the writing/UI but rather the mixing of RTL and LTR together. For example, numbers are always written from left to right (just like in English) so in an RTL language the direction is from right to left and once we reach a number or English text embedded in the middle of the sentence (such as a name) the direction switches for a duration and is later restored.
LWUIT supports BiDi with the following components:
A combo box is a list that allows only one selection at a time. When a user clicks the combo box button, a drop-down list of elements allows the user to select a single element. The combo box is driven by the list model and allows all the renderer features of the List as well.
Other components that can display one-of-many choices are groups of radio buttons, check boxes, buttons, and lists. Groups of radio buttons are generally the easiest for users to understand, but combo boxes can be more appropriate when space is limited or more than a few choices are available. Lists are not always attractive, but they are more appropriate than combo boxes when the number of items is large (say, over five).
The following code creates a combo box (a list model that is built from check boxes) and sets it up:
String[] content = { "Red", "Blue", "Green", "Yellow" };
// 1. Creating the combo box
ComboBox comboBox = new ComboBox(content);
// 2. Setting a checkBox renderer
comboBox.setListCellRenderer(new checkBoxRenderer());
// 3. Adding a action listener to catch user clicking // to open the ComboBox
comboBox.addActionListener(myActionListener......);
The following notes correspond to the comments in the code above.
1. This combo box code contains an array of strings, but you could just as easily use labels instead.
ComboBox
2. To put anything else into a combo box or to customize how the items in a combo box look, you need to write a custom renderer.
3. The next line of code (which calls setListCellRender) registers an action listener on the combo box.
The following is a sample of renderer code:
/** * Demonstrates implementation of a renderer derived from a CheckBox */
private static class checkBoxRenderer extends CheckBox implements ListCellRenderer {
/** Creates a new instance of checkBoxRenderer */
public checkBoxRenderer() { super(""); }
// Setting the current check box text and status
public Component getListCellRendererComponent(List list,
Object value,
int index,
boolean isSelected) { setText("" + value); if (isSelected) { setFocus(true); setSelected(true); } else { setFocus(false); setSelected(false); } return this; }
// Returning the list focus component
public Component getListFocusComponent(List list) { setText(""); setFocus(true); setSelected(true); return this; } }
Tabs
Tabs are containers that let the user switch between a group of components that all share the same space by focusing on a tab with a title, an icon, or both. The user chooses which component to view by selecting the tab corresponding to the desired component.
To create a tab pane, instantiate Tabs, create the components you wish it to display, and then add the components to the tabbed pane using the addTab or insertTab methods. Tabs has the ability to remove tabs as well, by calling removeTabAt(int index) at a given position index. A tab is represented by an index corresponding to the position it was added in, where the first tab has an index equal to 0 and the last tab has an index equal to the tab count minus 1.
If the tab count is greater than 0, then there is always a selected index, which by default is initialized to the first tab. If the tab count is 0, then the selected index is -1.
Tabs has four different tab placement orientations. The default tab placement is set to the TOP location. You can change the tab placement to LEFT, RIGHT, TOP or BOTTOM using the setTabPlacement method.
The following code creates a pane with tab placement of bottom, and places a Label in the center of the first (and only) tab.
Tabs tabs = new Tabs(Tabs.TOP);
tabs.addTab("Tab 1", new Label("I am a Tab!"));
tabs.addTab("Tab 2", new Label("Tab number 2")); ...
TextArea
The text area represents text that might be editable using the system native editor (it might occur in a new screen). The native editor is used to enable complex input TextField methods (such as T9) and application internationalization. The following code creates and initializes the text area:
TextArea textArea = new TextArea(5, 20, TextArea.NUMERIC);
textArea.setEditable(false);
The first two arguments to the TextArea constructor are hints as to the number of rows and columns, respectively, that the text area should display. The third one is a constraint that is passed into the native text editor. Valid values can be one of ANY , EMAILADDR , NUMERIC , PHONENUMBER , URL , or DECIMAL . In addition it can be bitwise OR'd with one of PASSWORD , UNEDITABLE , SENSITIVE , NON_PREDICTIVE , INITIAL_CAPS_SENTENCE , INITIAL_CAPS_WORD . For example, ANY | PASSWORD . The default value is ANY . In the above example NUMERIC only allows the user to type numbers.
Text areas are editable by default. The code setEditable(false) makes the text area uneditable. It is still selectable, but the user cannot change the text area's contents directly.
TextField
TextArea doesn't always allow in-place editing on existing devices and doesn't provide "fine grained control" over the input. This allows a text area to be lightweight, and portable for all possible devices. These restrictions sometimes cause a poor user experience because it requires users to go into a different screen for input (since all input is handled natively by the device). From a developer standpoint the native input can be a problem since it doesn't send change events and doesn't provide control over allowed input.
LWUIT provides the TextField component to support direct mobile phone input from within LWUIT. Unlike a TextArea, TextField is completely implemented in LWUIT.
Developers can override almost all of its features to provide deep customization (for example, masked input, localization, and more). TextField inherits the TextArea component and all of its features. It also supports moving to the native text editor.The constructor also accepts several arguments, similar to the TextArea component.TextField also has some limitations:
- Does not support input in foreign locales unless you provide code for foreign input
- Does not support device features, such as T9 input
- Might not correctly detect QWERTY devices
- Does not work on devices with unique keyboards, such as the Perl
Creating a text field is trivial:
TextField f = new TextField();
Calendar
The LWUIT calendar component allows users to pick a date using a monthly calendar user interface. Use the calendar component to navigate and pick a date, as shown in the following code:
Calendar cal = new Calendar();
Developers can monitor state changes within the calendar using a data change listener or an action listener.
Tickering
Label (and all its subclasses) includes ticker support. A ticker scrolls the content of a long label across the screen. Ticker ability in labels is usually indicated by displaying three dots "..." after the end of the label. When the label (button, checkbox, etcetera) receives focus, these three dots disappear and the label starts animating like a stock ticker.
A ticker can be started explicitly using a call to startTicker or stopTicker in Label. It can also be prevented by invoking setTickerEnabled(false) . To prevent the three dots from appearing at the end of labels or components that support tickering, use setEndsWith3Points(false) .
Bidi
BiDi refers to bidirectional language support, generally used for right-to-left (RTL) languages. There is plenty of information about RTL languages (Arabic, Hebrew, Syriac, Thaana) on the internet, but as a brief primer here is a minor summary.
Most western languages are written from left to right (LTR), however some languages are normally written from right to left (RTL). Speakers of these languages expect the UI to flow in the opposite direction, otherwise it seems "weird" just like reading this word in RTL would look: "driew" to most English speakers.
The problem posed by RTL languages is known as bi-directional) and not as RTL since the "true" problem isn't the reversal of the writing/UI but rather the mixing of RTL and LTR together. For example, numbers are always written from left to right (just like in English) so in an RTL language the direction is from right to left and once we reach a number or English text embedded in the middle of the sentence (such as a name) the direction switches for a duration and is later restored.
LWUIT supports BiDi with the following components:
0 comments:
Post a Comment