解读 LWUIT 之五：LWUIT 控件（下）

解读 LWUIT 之五：LWUIT 控件（下）

LWUIT 开发指南下载
作者写的 Hello TabbedPane、Hello TextArea、Hello TextField、Hello Calendar、Hello Tickering 源代码下载
        本文继上篇博客继续对 LWUIT 常见控件进行介绍。本文主要介绍剩余的几个 LWUIT 常用控件选项卡（TabbedPane）、文本区域（TextArea）、文本框（TextField）、日历（Calendar）、滚动特效（Tickering）、双向语言（Bidi）的使用并附源代码。文章对这几种控件分别进行了说明和比较。
        注：源码编写中关于 .res 的编写这里不再赘述，详细编写步骤请参考作者的前一篇博客《解读 LWUIT 之二：关于 LWUIT 开发指南中的 Hello World》。每个项目的 .res 具体配置请到作者上传源码中的 res 目录下使用 ResourceEdit 查看。

com.sun.lwuit.TabbedPane 控件
        TabbedPane 可以把不同的内容放在不同的页项下面，这些内容只有在用户选择了该页项后才显示出来。系统默认显示第一个页项的内容。HelloTabbedPane 源代码如下：

package com.defonds.lwuit;import com.sun.lwuit.Command;import com.sun.lwuit.Display;import com.sun.lwuit.Form;import com.sun.lwuit.Label;import com.sun.lwuit.TabbedPane;import com.sun.lwuit.animations.CommonTransitions;import com.sun.lwuit.layouts.BorderLayout;import com.sun.lwuit.plaf.UIManager;import com.sun.lwuit.util.Resources;public class HelloMidlet extends javax.microedition.midlet.MIDlet{private Form exampleContainer;// declare a Formprivate TabbedPane tabbedPane;//declare a TabbedPanepublic void startApp() {// init the LWUIT DisplayDisplay.init(this);// Setting the application theme is discussed// later in the theme chapter and the resources chaptertry {Resources r = Resources.open("/myresources.res");UIManager.getInstance().setThemeProps(r.getTheme("myresources"));} catch (java.io.IOException e) {}exampleContainer = new Form("Form Title");// Create a FormtabbedPane = new TabbedPane(TabbedPane.TOP);// Create a TabbedPanetabbedPane.addTab("Tab 1", new Label("I am a TabbedPane!"));//Add a Label to the TabbedPanetabbedPane.addTab("Tab 2", new Label("Tab number 2"));//Add a Label to the TabbedPanetabbedPane.addTab("Tab 3", new Label("Tab number 3"));//Add a Label to the TabbedPanetabbedPane.addTab("Tab 4", new Label("Tab number 4"));//Add a Label to the TabbedPaneexampleContainer.setLayout(new BorderLayout());//Set LayoutManagerexampleContainer.addComponent(BorderLayout.CENTER,tabbedPane);//Add a TabbedPane to the Form content paneexampleContainer.setTransitionOutAnimator(CommonTransitions.createFade(400));//Set Transitions animation of FadeexampleContainer.addCommand(new Command("Run", 2));//Add Command keyexampleContainer.show();//Show it}public void pauseApp() {}public void destroyApp(boolean unconditional) {}} 
        HelloTabbedPane 运行效果图如下：

com.sun.lwuit.TextArea 控件
        TextArea 调用系统本地编辑器使用户可以输入文本。程序员通过对 TextArea 的定义可以限制用户输入的内容，比如只接收数字输入。HelloTextArea 源代码如下：

package com.defonds.lwuit;import com.sun.lwuit.Command;import com.sun.lwuit.Display;import com.sun.lwuit.Form;import com.sun.lwuit.TextArea;import com.sun.lwuit.animations.CommonTransitions;import com.sun.lwuit.layouts.FlowLayout;import com.sun.lwuit.plaf.UIManager;import com.sun.lwuit.util.Resources;public class HelloMidlet extends javax.microedition.midlet.MIDlet{private Form exampleContainer;// declare a Formprivate TextArea textArea;//declare a TextAreapublic void startApp() {// init the LWUIT DisplayDisplay.init(this);// Setting the application theme is discussed// later in the theme chapter and the resources chaptertry {Resources r = Resources.open("/myresources.res");UIManager.getInstance().setThemeProps(r.getTheme("myresources"));} catch (java.io.IOException e) {}exampleContainer = new Form("Form Title");// Create a FormtextArea = new TextArea("I'm a TextArea",2,20,TextArea.NUMERIC);// Create a TextAreaexampleContainer.setLayout(new FlowLayout());//Set LayoutManagerexampleContainer.addComponent(textArea);//Add a TextArea to the Form content paneexampleContainer.setTransitionOutAnimator(CommonTransitions.createFade(400));//Set Transitions animation of FadeexampleContainer.addCommand(new Command("Run", 2));//Add Command keyexampleContainer.show();//Show it}public void pauseApp() {}public void destroyApp(boolean unconditional) {}} 
        HelloTextArea 运行效果图如下：

com.sun.lwuit.TextField 控件
        下面来认识一下 LWUIT 中的一个闪亮的控件——TextField。大多数 JavaME 框架用户编辑文本只能调用系统本地编辑器，用户编辑文本的时候即切换到了另一个画面，就好像另启动了一个程序（事实也是如此），用户体验很是不爽。有没有一种输入控制，可以让用户在当前界面中直接输入？LWUIT 可以做到：使用 TextField。HelloTextField 源代码如下：

package com.defonds.lwuit;import com.sun.lwuit.Command;import com.sun.lwuit.Display;import com.sun.lwuit.Form;import com.sun.lwuit.TextField;import com.sun.lwuit.animations.CommonTransitions;import com.sun.lwuit.layouts.FlowLayout;import com.sun.lwuit.plaf.UIManager;import com.sun.lwuit.util.Resources;public class HelloMidlet extends javax.microedition.midlet.MIDlet{private Form exampleContainer;// declare a Formprivate TextField textField;//declare a TextFieldpublic void startApp() {// init the LWUIT DisplayDisplay.init(this);// Setting the application theme is discussed// later in the theme chapter and the resources chaptertry {Resources r = Resources.open("/myresources.res");UIManager.getInstance().setThemeProps(r.getTheme("myresources"));} catch (java.io.IOException e) {}exampleContainer = new Form("Form Title");// Create a FormtextField = new TextField();// Create a TextFieldexampleContainer.setLayout(new FlowLayout());//Set LayoutManagerexampleContainer.addComponent(textField);//Add a TextField to the Form content paneexampleContainer.setTransitionOutAnimator(CommonTransitions.createFade(400));//Set Transitions animation of FadeexampleContainer.addCommand(new Command("Run", 2));//Add Command keyexampleContainer.show();//Show it}public void pauseApp() {}public void destroyApp(boolean unconditional) {}} 
        HelloTextField 运行效果图如下：

        任何美好的东西都有瑕疵，而看起来很美好的 TextField 的缺陷却是致命的：不支持本地语言输入（即使你的真机提供了对本地语言输入的支持），只能接收英文输入。这一个缺陷让 TextField 的用武之地大大减小。但是 TextField 确是 LWUIT 的闪光点，它证明了 LWUIT 的设计者们处处在考虑用户体验，LWUIT 是一个优秀的框架。

com.sun.lwuit.Calendar 控件
        Calendar 和 JavaME 中的 java.util.Calendar 重名，用时一定要注意。com.sun.lwuit.Calendar 用于 UI，java.util.Calendar 用来日期管理。HelloCalendar 源代码如下：

package com.defonds.lwuit;import java.util.Date;import com.sun.lwuit.Command;import com.sun.lwuit.Display;import com.sun.lwuit.Form;import com.sun.lwuit.animations.CommonTransitions;import com.sun.lwuit.events.ActionEvent;import com.sun.lwuit.events.ActionListener;import com.sun.lwuit.layouts.BorderLayout;import com.sun.lwuit.plaf.UIManager;import com.sun.lwuit.util.Resources;public class HelloMidlet extends javax.microedition.midlet.MIDlet implements ActionListener{private Form exampleContainer;// declare a Formprivate com.sun.lwuit.Calendar calendar;//declare a Calendarprivate Date date;//declare a Datepublic void startApp() {// init the LWUIT DisplayDisplay.init(this);// Setting the application theme is discussed// later in the theme chapter and the resources chaptertry {Resources r = Resources.open("/myresources.res");UIManager.getInstance().setThemeProps(r.getTheme("myresources"));} catch (java.io.IOException e) {}exampleContainer = new Form("Form Title");// Create a Formcalendar = new com.sun.lwuit.Calendar();// Create a Calendarcalendar.addActionListener(this);//add a listener to the Calendar exampleContainer.setLayout(new BorderLayout());//Set LayoutManagerexampleContainer.addComponent(BorderLayout.CENTER,calendar);//Add a Calendar to the Form content paneexampleContainer.setTransitionOutAnimator(CommonTransitions.createFade(400));//Set Transitions animation of FadeexampleContainer.addCommand(new Command("Run", 2));//Add Command keyexampleContainer.show();//Show it}public void pauseApp() {}public void destroyApp(boolean unconditional) {}//implements the method of ActionListener public void actionPerformed(ActionEvent evt) {date = new Date(calendar.getSelectedDay());//Create a Datejava.util.Calendar myCalendar = java.util.Calendar.getInstance();//Get a Calendar instancemyCalendar.setTime(date);//set the Calendar time you selectedSystem.out.println("The date you selected is:" + myCalendar.get(java.util.Calendar.YEAR) + "-" + (myCalendar.get(java.util.Calendar.MONTH) + 1) + "-" + myCalendar.get(java.util.Calendar.DATE));}} 
        HelloCalendar 运行效果图如下：

Tickering 滚动特效
        Tickering 设置 Label 内容滚动效果。Label.startTicker(long delay, boolean rightToLeft); 方法中 delay 设置滚动速率（delay 越大，滚动地越慢），rightToLeft 可以设置滚动方向。HelloTickering 源代码如下：

package com.defonds.lwuit;import java.io.IOException;import com.sun.lwuit.Button;import com.sun.lwuit.Command;import com.sun.lwuit.Component;import com.sun.lwuit.Display;import com.sun.lwuit.Form;import com.sun.lwuit.Image;import com.sun.lwuit.animations.CommonTransitions;import com.sun.lwuit.events.ActionEvent;import com.sun.lwuit.events.ActionListener;import com.sun.lwuit.layouts.FlowLayout;import com.sun.lwuit.plaf.UIManager;import com.sun.lwuit.util.Resources;public class HelloMidlet extends javax.microedition.midlet.MIDlet {public void startApp() {// init the LWUIT DisplayDisplay.init(this);// Setting the application theme is discussed// later in the theme chapter and the resources chaptertry {Resources r = Resources.open("/myresources.res");UIManager.getInstance().setThemeProps(r.getTheme(r.getThemeResourceNames()[0]));} catch (java.io.IOException e) {}Form mainForm = new Form("Form Title");// Create a Form//mainForm.setLayout(new BoxLayout(BoxLayout.Y_AXIS));//Set LayoutManagermainForm.setLayout(new FlowLayout());//Set LayoutManagerfinal Button button = new Button("Old Text");// Create a Buttonbutton.setAlignment(Component.CENTER);//Sets the Alignment of the buttonbutton.addActionListener(new ActionListener() {private int i = 0;public void actionPerformed(ActionEvent evt) {this.i++;if(i % 2 == 1){button.setText("New Text");// changes the text on the button,every time the user clicks it}else{button.setText("Old Text");// changes the text on the button,every time the user clicks it}}});button.startTicker(66, true);//start TickermainForm.addComponent(button);//Add a button to the Form content paneImage image = null;//declare an image for an icon labeltry {image = Image.createImage("/duke3_1.gif");//create a image} catch (IOException e) {}final Button imageButton = new Button(image);//for a image buttonimageButton.setAlignment(Component.CENTER);//Sets the Alignment of the buttonimageButton.startTicker(66, true);////start TickermainForm.addComponent(imageButton);//Add a button to the Form content panefinal Button imageTextButton = new Button(image);//for an image and text buttonimageTextButton.setText("Image and Text Button");//set the text of the image and text buttonimageTextButton.setTextPosition(Component.RIGHT);//update the text positionimageTextButton.setAlignment(Component.CENTER);//Sets the Alignment of the ButtonimageTextButton.startTicker(66, true);////start TickermainForm.addComponent(imageTextButton);//Add a button to the content panefinal Button imageTextButton2 = new Button(image);//for an image and text buttonimageTextButton2.setText("Image and Text Button");//set the text of the image and text buttonimageTextButton2.setTextPosition(Component.BOTTOM);//update the text positionimageTextButton2.setAlignment(Component.CENTER);//Sets the Alignment of the ButtonimageTextButton2.startTicker(66, true);////start TickermainForm.addComponent(imageTextButton2);//Add a button to the content panemainForm.setTransitionOutAnimator(CommonTransitions.createFade(400));//Set Transitions animation of FademainForm.addCommand(new Command("Run", 2));//Add Command keymainForm.show();//Show it}public void pauseApp() {}public void destroyApp(boolean unconditional) {}} 
        HelloTickering 运行效果图如下：

Bidi 双向语言
        Bidi 即 bidirectional，设计的本意提供双向语言支持，因为西方语言是从左到右写（LTR），而有些语言则是从右到左（RTL）。这是一个阅读/书写习惯。程序中如果想支持 RTL，只需要在 MIDlet 的 startApp 方法中加上 UIManager.getInstance().getLookAndFeel().setRTL(true); 句即可。下面是 LTR 和 RTL 两种效果图的比较。
        LTR 的 ComboBox 效果图：

        RTL 的 ComboBox 效果图：

        注意比较 LTR 和 RTL 两种方式下滚动条、选项、菜单软键等的排列方式。