解读 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 两种方式下滚动条、选项、菜单软键等的排列方式。