做j2me應(yīng)用也快1年了， midp提供的那套高級ui實(shí)在讓人很難受，早就想自己弄一套了， 查了一些開源項(xiàng)目，沒有合我這個懶人口味的， 也間或看了一下包括wuhua和其他幾個網(wǎng)友提供一些自行設(shè)計(jì)UI的文章， 總覺的有點(diǎn)復(fù)雜，不適合我這個懶人。

過完年閑著實(shí)在無事，慢慢磨蹭，自己搞了一套完事。

midp 2的高級ui我感覺主要有這些問題。

1. 界面丑陋， 不能進(jìn)行各式字體和背景色的設(shè)置， 不利于創(chuàng)建統(tǒng)一的界面風(fēng)格。

2. Command和choicegroup在不同平臺上實(shí)現(xiàn)差異巨大， 每個平臺都要調(diào)試，寫不同的用戶手冊，很煩，而且command不支持二級菜單。

3. layout基本無用， 原因也是各個手機(jī)平臺的差異，特別是wm上，不同虛擬機(jī)實(shí)現(xiàn)差異巨大。

我們做企業(yè)應(yīng)用，是因?yàn)榭缙脚_的需要而選擇kjava的，但是因?yàn)樯厦娴囊蛩?，往往?dǎo)致做出來的東西，界面和wm 上有c#或c++做的東西差異巨大，引起客戶的強(qiáng)烈不滿。而且某些復(fù)雜的展現(xiàn)，需要用canvas實(shí)現(xiàn)，風(fēng)格也很難和高級ui保持一致（很難為了每個平臺都專門做一套風(fēng)格），很難和客戶解釋。而企業(yè)用戶，一般都不怎么懂技術(shù)，對手機(jī)UI的觀感直接影響到他們對整個應(yīng)用的評價。

我基本的思路是做一套u(yù)i替換掉midp 2.0中的高級ui ，基本的目標(biāo)如下。

1. 部件名詞和基本方法應(yīng)該保持和原來ui的一致，方便代碼移植，比如Textfield 還是叫Textfield，基本參數(shù)也一致。

2. 對部件進(jìn)行適當(dāng)擴(kuò)展和簡化，方便開發(fā)，比如command， 被我拆分成2個部分，一個是左右command，另外一個是完整的菜單（可支持多級菜單），事件處理盡可能的符合傳統(tǒng)桌面系統(tǒng)編寫的習(xí)慣，而不是原來midp中的簡化模型

3. layout方面進(jìn)行簡化， 我覺得手機(jī)界面，最有效的布局方式就是上下順序布局，一行一個對象， 一行需要放多個對象的時候，可以使用分組的概念來進(jìn)行簡化，并可以簡單設(shè)置對象的對齊模式。 特殊情況下也可以重載基類的布局，使用絕對定位的方法繪制元素。原來midp中設(shè)計(jì)的layout概念，因?yàn)椴煌謾C(jī)的巨大差異，實(shí)際基本沒有用處。

4. 統(tǒng)一在基類form里完成各種事件處理和調(diào)度，保證同時對觸摸屏和鍵盤的支持，并對普通開發(fā)用戶屏蔽這些操作。

5. 增加一些常用，但是midp里面沒有的控件，簡化開發(fā)工作量，比如對話框，提示框，進(jìn)度條，電子表格，文檔瀏覽等等。

這樣完成以后的UI對開發(fā)者的開發(fā)難度要低于直接使用用高級ui進(jìn)行開發(fā)，代碼量也有顯著減少，而且大幅度節(jié)約了調(diào)試和移植的時間。 缺點(diǎn)當(dāng)然是內(nèi)存消耗增加，不過對于企業(yè)應(yīng)用一般都可以使用中高檔手機(jī)，所以問題也不大。

另外為了方便對不同用戶定制風(fēng)格，進(jìn)行了修改，實(shí)現(xiàn)了skin的方式，可以使用圖片來設(shè)計(jì)主題。

 

 UI的風(fēng)格是以模仿win ce為核心的， 分為標(biāo)題， 工作區(qū)域， 菜單條區(qū)域三個部分。父類form負(fù)責(zé)處理各種事件，子類需要的時候可以重載工作區(qū)域，實(shí)現(xiàn)自己的特定風(fēng)格顯示。

結(jié)合代碼和截圖簡單做一下介紹

首先，實(shí)現(xiàn)一個基本的登陸窗體



        setBackGroundImage(ImageBuilder.LOGO_IMG);
        setStartXPosition(getHeight() / 3 + getFontHeight()); //form元素開始繪制的y坐標(biāo)
        setShowHeader(false); //不顯示標(biāo)題
        append(userField);
        append(pwdField);
        append(storePasswd);

        append(new TextLabel("設(shè)置服務(wù)器", TextLabel.LAYOUT_R) {
            public void doAction() {
            
         }
        });
//左邊顯示退出按鈕
        addLeftCommand("退出", new Action() {
            public void action(Item event) {
                        }
        });

代碼和原MIDP 2.0的代碼基本一致，但是對事件模型進(jìn)行了簡化，使用action的模式做處理，節(jié)約了一部分代碼量。和網(wǎng)絡(luò)上某些框架不同的地方，這里一般不需要自己使用絕對坐標(biāo)的方式繪制元素。

form可以設(shè)置背景，顏色，字體和元素的基本對齊方式。



另外對原來的textfield進(jìn)行了一些改進(jìn)， 可以允許設(shè)置行高和提示信息， 比如此處的內(nèi)容字段，即設(shè)置為自動填滿屏幕剩余空間，這樣可以簡化開發(fā)工作。

public  TextField subject = new TextField("主題:", null, 200,
            1);
    public static int MAX_CONTENT_SIZE = 5000;
    public  TextField content = new TextField("內(nèi)容:", null, 0,
            MAX_CONTENT_SIZE, 1); //0表示字段擴(kuò)展到當(dāng)前的剩余屏幕
    



對于常見9宮格菜單，則提供一個基類來擴(kuò)展。



常見列表對象的實(shí)現(xiàn)。



  實(shí)現(xiàn)的UI放棄了list的實(shí)現(xiàn)， 其實(shí)list也是個form，順序增加就可， 此處使用group的概念把一個分割線，一個checkbox和一個Stringitem合并在一起就實(shí)現(xiàn)了list.

                SelectItemGroup ig = new SelectItemGroup(new DocCheckBoxItem(
                        doc), new ContentItem(doc, i + 1), true);
                form.append(ig);

其中的SelectItemGroup 由2個item對象組合而成。

item也可以加入圖片和對齊屬性，實(shí)現(xiàn)這樣圖為混合的列表。





以樹對象實(shí)現(xiàn)的地址薄， 樹對象也是一個group。

更復(fù)雜一點(diǎn)的布局，日程安排也可以用group的概念進(jìn)行組合



使用新UI對原來的高級UI進(jìn)行替換，主要修改部分是事件處理部分，節(jié)約了三分之一以上的代碼，基本達(dá)到了目的。

另外自行實(shí)現(xiàn)了一些常用的復(fù)雜控件。

電子表格

可以用來顯示查詢結(jié)果或者excel文件（需要在后臺轉(zhuǎn)換）。有別于網(wǎng)上可以找到的其他電子表格，比如sun netbean送的那個，這個電子表格控件可以實(shí)現(xiàn)跨行跨列的顯示，并支持滾動顯示。

富文本顯示窗體


可以顯示文本，表格和圖像， 用來展現(xiàn)word或者其他富文本格式

圖片瀏覽控件，用來顯示圖片和轉(zhuǎn)換為圖片的各類文檔


文本瀏覽控件， 用來顯示大數(shù)據(jù)量的文本信息，能自動換行和分頁


對話框， 可以有多種變形，使用回調(diào)的方式執(zhí)行事件，簡化開發(fā)。另外還實(shí)現(xiàn)了比如狀態(tài)條之類的東東。



上次在j2medev貼了沒人回應(yīng)，也沒人給意見， 真是失敗， 不過更失敗的，自己做的這套移動辦公最后無疾而終，木有用戶呀。

基于這套u(yù)i實(shí)現(xiàn)對先前開發(fā)的移動OA界面做了重新開發(fā)，并對office附件處理部分進(jìn)行了優(yōu)化。效果尚可，更多圖片可以參看附件移動OA用戶手冊的截屏。目前在s60系統(tǒng)，moto，uiq和wm5上做過兼容性測試。