J2ME GUI实战之二 ----------LWUIT实现手机九宫图

 本文来自：http://blog.youkuaiyun.com/hellogv/ ，转载必须注明出处！
 本文的源代码，已放到 http://download.youkuaiyun.com/user/hellogv 供大家下载！

首先，想让大家看看九宫图实现之后的界面：


本文所用的代码，是来自LWUIT所提供的Sample例子，但是对例子做出以下修改：
1.设计自主的res资源文件
2.把builde.xml里面的<target name="post-compile"> 。。。。。</target> 删除
3.把所用的res文件放到一个名为res的文件夹，并与源代码放在一起
4.把ResourceBuilder.jar也删除，util文件夹里的ResourceBuilder.jar绝对不能删，是用于设计res文件

针对以上4点，说明一下为什么这么做：
原Sample例子的res文件，是使用util文件夹里的ResourceEdit.exe设计，而且还在builde.xml中使用 ResourceBuilder.jar再重新生成一次res文件并与源文件组合，这显然有点冗余，因为直接用 ResourceEdit.exe设计的res文件放到源文件目录里即可。也许Sample作者直接使用ANT编译或者是其他IDE要求，本文所用的IDE为netbeans。

OK，接下来就是源代码修改了，Sample源代码可是写得很长很长，要看也得花不少时间，但是，我保证大家看完后一定领略到JAVA大牛的编程功力之深！！！为了方便以后使用，所以我把Sample中实现九宫图和一些小操作的代码保留，其他都去掉了，请JAVA大牛切勿见笑哈。
以下给出关键代码:

1. /*
2.  * Copyright ? 2008 Sun Microsystems, Inc. All rights reserved.
3.  * Use is subject to license terms.
4.  *
5.  */
6. package com.sun.lwuit.uidemo;
8. import com.sun.lwuit.Button;
9. import com.sun.lwuit.animations.CommonTransitions;
10. import com.sun.lwuit.Command;
11. import com.sun.lwuit.Component;
12. import com.sun.lwuit.Dialog;
13. import com.sun.lwuit.Display;
14. import com.sun.lwuit.Form;
15. import com.sun.lwuit.Image;
16. import com.sun.lwuit.Label;
17. import com.sun.lwuit.animations.Transition;
18. import com.sun.lwuit.animations.Transition3D;
19. import com.sun.lwuit.events.ActionEvent;
20. import com.sun.lwuit.events.ActionListener;
21. import com.sun.lwuit.events.FocusListener;
22. import com.sun.lwuit.layouts.GridLayout;
23. import com.sun.lwuit.plaf.Style;
24. import com.sun.lwuit.plaf.UIManager;
25. import com.sun.lwuit.util.Resources;
28. public class UIDemoMIDlet extends javax.microedition.midlet.MIDlet implements ActionListener {
30.     private static final Command exitCommand = new Command("Exit", 1);
32.     private String[] btn_name = new String[]{//九宫图的名称，同时也是图标的名称
33.     "Image 1","Image 2","Image 3","Image 4","Image 5","Image 6","Image 7",
34.     "Image 8","Image 9"
35.     };
36.     private static Transition componentTransitions;
37.     private static Form mainMenu;//主窗体
38.     private int cols;
39.     private int elementWidth;
41.     protected void startApp() {
42.         try {
43.             Display.init(this);
44.             Resources r = Resources.open("/res/resources.res");//读取资源文件
46.             setMainForm(r);
47.         } catch (Throwable ex) {
48.             ex.printStackTrace();
49.             Dialog.show("Exception", ex.getMessage(), "OK", null);//hellogv最爱的提示框弹出方式
50.         }
51.     }
52.     protected void pauseApp() {
53.     }
55.     protected void destroyApp(boolean arg0) {
56.     }
58.     public static void setMenuTransition(Transition in, Transition out) {
59.         mainMenu.setMenuTransitions(in, out);
60.         UIManager.getInstance().getLookAndFeel().setDefaultMenuTransitionIn(in);
61.         UIManager.getInstance().getLookAndFeel().setDefaultMenuTransitionOut(out);
62.     }
64.     public static void setComponentTransition(Transition t) {
65.         componentTransitions = t;
66.         mainMenu.setSmoothScrolling(false);
67.     }
69.     public static Transition getComponentTransition() {
70.         return componentTransitions;
71.     }
73.     public static void backToMainMenu(){
74.                 mainMenu.refreshTheme();
75.                 mainMenu.show();
76.                 // for series 40 devices
77.                 System.gc();
78.                 System.gc();
79.     }
81.     private void setMainForm(Resources r) {
82.         //设置主题
83.         UIManager.getInstance().setThemeProps(r.getTheme("businessTheme"));
84.         mainMenu = new MainScreenForm("LWUIT Demo") ;
85.         int width = Display.getInstance().getDisplayWidth(); //取得全屏的宽度
86.         elementWidth = 0;
88.         //效果，可以实现类似IPhone、S1智能机的Touch Flo的动态窗体切换效果!**********************
89.         mainMenu.setTransitionOutAnimator(CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, false, 500));
90.         mainMenu.setTransitionInAnimator(CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, true, 500));
91.         UIDemoMIDlet.setComponentTransition(Transition3D.createCube(600, false));
92.         //***************************************************************************************************************
94.         Image[] selectedImages = new Image[btn_name.length];//按钮被选中时的图片
95.         Image[] unselectedImages = new Image[btn_name.length];//按钮未被选中的图片
97.         for (int i = 0; i < btn_name.length; i++) {
99.             //---------读取选中时的图片
100.             selectedImages[i] = r.getImage(btn_name[i]);
102.             //--------读取未被选中的图片
103.             unselectedImages[i] = r.getImage(btn_name[i]);
105.             final Button button = new Button(btn_name[i], unselectedImages[i])
106.             {
107.                 public Image getPressedIcon() {
108.                     Image i = getIcon();
109.                     return i.scaled((int) (i.getWidth() * 0.8), (int) (i.getHeight() * 0.8));
110.                 }
111.             };
113.             button.setRolloverIcon(selectedImages[i]);
114.             Style s = button.getStyle();
115.             s.setBorder(null);
116.             s.setBgTransparency(0);
117.             s.setBgSelectionColor(0xffffff);
118.             button.setAlignment(Label.CENTER);
119.             button.setTextPosition(Label.BOTTOM);
120.             mainMenu.addComponent(button);
121.             button.addActionListener(this);
122.             //按钮焦点处理,用于实现按钮特效
123.             button.addFocusListener(new FocusListener() {
124.                 public void focusGained(Component cmp) {//按钮取得焦点时的特效
125.                     if (componentTransitions != null) {
126.                         mainMenu.replace(button, button, componentTransitions);
127.                     }
128.                 }
129.                 public void focusLost(Component cmp) {}//按钮失去焦点时的特效
130.             });
131.             elementWidth = Math.max(button.getPreferredW(), elementWidth);
132.         }
134.         cols = width / elementWidth;
135.         int rows = btn_name.length / cols;
136.         mainMenu.setLayout(new GridLayout(rows, cols));//GridLayout为九宫图的排列方式
137.         mainMenu.addCommand(exitCommand);
139.         mainMenu.setCommandListener(this);
140.         mainMenu.show();
141.     }
143.     /**
144.      * 控件处理函数
145.      */
146.     public void actionPerformed(ActionEvent evt) {
147.         try{//通过异常处理来判断事件来源
148.             Command cmd = evt.getCommand();
149.             if(cmd.getCommandName().equals("Exit"))
150.                     notifyDestroyed();
151.         }catch(Exception e)
152.         {
153.             String sel_button=((Button)(evt.getSource())).getText();//取得所选按钮的名称
154.             if(sel_button.equals("Image 1"))
155.                new AnimationDemo().form.show();
156.             else if(sel_button.equals("Image 2"))
157.                 new PaintingDemo().form.show();
158.             else if(sel_button.equals("Image 3"))
159.                 new LayoutDemo().form.show();
160.         }
161.     }
162. }

好了，本文就介绍到这里，关于J2ME LWUIT的摸索还在继续，希望大家多多支持LWUIT，让它越做越好！