解读 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 Form private TabbedPane tabbedPane;//declare a TabbedPane public void startApp() { // init the LWUIT Display Display.init(this); // Setting the application theme is discussed // later in the theme chapter and the resources chapter try { Resources r = Resources.open("/myresources.res"); UIManager.getInstance().setThemeProps(r.getTheme("myresources")); } catch (java.io.IOException e) {} exampleContainer = new Form("Form Title");// Create a Form tabbedPane = new TabbedPane(TabbedPane.TOP);// Create a TabbedPane tabbedPane.addTab("Tab 1", new Label("I am a TabbedPane!"));//Add a Label to the TabbedPane tabbedPane.addTab("Tab 2", new Label("Tab number 2"));//Add a Label to the TabbedPane tabbedPane.addTab("Tab 3", new Label("Tab number 3"));//Add a Label to the TabbedPane tabbedPane.addTab("Tab 4", new Label("Tab number 4"));//Add a Label to the TabbedPane exampleContainer.setLayout(new BorderLayout());//Set LayoutManager exampleContainer.addComponent(BorderLayout.CENTER,tabbedPane);//Add a TabbedPane to the Form content pane exampleContainer.setTransitionOutAnimator(CommonTransitions.createFade(400));//Set Transitions animation of Fade exampleContainer.addCommand(new Command("Run", 2));//Add Command key exampleContainer.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 Form private TextArea textArea;//declare a TextArea public void startApp() { // init the LWUIT Display Display.init(this); // Setting the application theme is discussed // later in the theme chapter and the resources chapter try { Resources r = Resources.open("/myresources.res"); UIManager.getInstance().setThemeProps(r.getTheme("myresources")); } catch (java.io.IOException e) {} exampleContainer = new Form("Form Title");// Create a Form textArea = new TextArea("I'm a TextArea",2,20,TextArea.NUMERIC);// Create a TextArea exampleContainer.setLayout(new FlowLayout());//Set LayoutManager exampleContainer.addComponent(textArea);//Add a TextArea to the Form content pane exampleContainer.setTransitionOutAnimator(CommonTransitions.createFade(400));//Set Transitions animation of Fade exampleContainer.addCommand(new Command("Run", 2));//Add Command key exampleContainer.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 Form private TextField textField;//declare a TextField public void startApp() { // init the LWUIT Display Display.init(this); // Setting the application theme is discussed // later in the theme chapter and the resources chapter try { Resources r = Resources.open("/myresources.res"); UIManager.getInstance().setThemeProps(r.getTheme("myresources")); } catch (java.io.IOException e) {} exampleContainer = new Form("Form Title");// Create a Form textField = new TextField();// Create a TextField exampleContainer.setLayout(new FlowLayout());//Set LayoutManager exampleContainer.addComponent(textField);//Add a TextField to the Form content pane exampleContainer.setTransitionOutAnimator(CommonTransitions.createFade(400));//Set Transitions animation of Fade exampleContainer.addCommand(new Command("Run", 2));//Add Command key exampleContainer.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 Form private com.sun.lwuit.Calendar calendar;//declare a Calendar private Date date;//declare a Date public void startApp() { // init the LWUIT Display Display.init(this); // Setting the application theme is discussed // later in the theme chapter and the resources chapter try { Resources r = Resources.open("/myresources.res"); UIManager.getInstance().setThemeProps(r.getTheme("myresources")); } catch (java.io.IOException e) {} exampleContainer = new Form("Form Title");// Create a Form calendar = new com.sun.lwuit.Calendar();// Create a Calendar calendar.addActionListener(this);//add a listener to the Calendar exampleContainer.setLayout(new BorderLayout());//Set LayoutManager exampleContainer.addComponent(BorderLayout.CENTER,calendar);//Add a Calendar to the Form content pane exampleContainer.setTransitionOutAnimator(CommonTransitions.createFade(400));//Set Transitions animation of Fade exampleContainer.addCommand(new Command("Run", 2));//Add Command key exampleContainer.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 Date java.util.Calendar myCalendar = java.util.Calendar.getInstance();//Get a Calendar instance myCalendar.setTime(date);//set the Calendar time you selected System.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 Display Display.init(this); // Setting the application theme is discussed // later in the theme chapter and the resources chapter try { 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 LayoutManager mainForm.setLayout(new FlowLayout());//Set LayoutManager final Button button = new Button("Old Text");// Create a Button button.setAlignment(Component.CENTER);//Sets the Alignment of the button button.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 Ticker mainForm.addComponent(button);//Add a button to the Form content pane Image image = null;//declare an image for an icon label try { image = Image.createImage("/duke3_1.gif");//create a image } catch (IOException e) {} final Button imageButton = new Button(image);//for a image button imageButton.setAlignment(Component.CENTER);//Sets the Alignment of the button imageButton.startTicker(66, true);start Ticker mainForm.addComponent(imageButton);//Add a button to the Form content pane final Button imageTextButton = new Button(image);//for an image and text button imageTextButton.setText("Image and Text Button");//set the text of the image and text button imageTextButton.setTextPosition(Component.RIGHT);//update the text position imageTextButton.setAlignment(Component.CENTER);//Sets the Alignment of the Button imageTextButton.startTicker(66, true);start Ticker mainForm.addComponent(imageTextButton);//Add a button to the content pane final Button imageTextButton2 = new Button(image);//for an image and text button imageTextButton2.setText("Image and Text Button");//set the text of the image and text button imageTextButton2.setTextPosition(Component.BOTTOM);//update the text position imageTextButton2.setAlignment(Component.CENTER);//Sets the Alignment of the Button imageTextButton2.startTicker(66, true);start Ticker mainForm.addComponent(imageTextButton2);//Add a button to the content pane mainForm.setTransitionOutAnimator(CommonTransitions.createFade(400));//Set Transitions animation of Fade mainForm.addCommand(new Command("Run", 2));//Add Command key mainForm.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 两种方式下滚动条、选项、菜单软键等的排列方式。