J2ME MIDP GUI 開發全解析：高級與低級 UI 實戰指南

一、MIDP GUI 架構概覽

MIDP 用戶界面 API 專為受限設備設計，不基於 AWT/Swing，完全重新定義於 javax.microedition.lcdui 包。核心特點：

• 單屏顯示模型：同一時刻僅顯示一個 Displayable
• 雙層 UI 架構：高級 UI（設備自適應）與 低級 UI（像素級控制）
• 事件驅動模型：通過 CommandListener 處理用戶交互

二、核心類體系詳解

1. Displayable 抽象基類

所有可顯示組件的父類，定義公共行為：

• addCommand(Command) / removeCommand(Command)
• setCommandListener(CommandListener)
• sizeChanged(int w, int h) 回調

2. 高級 UI 分支：Screen 及其子類

3. 低級 UI：Canvas 繪圖畫布

提供像素級繪製控制，核心方法：

• paint(Graphics g)：繪製回調，不可直接調用，需通過 repaint() 觸發
• keyPressed/Released/Repeated(int keyCode)：按鍵事件
• pointerPressed/Dragged/Released(int x, int y)：觸摸/指針事件
• getWidth()/getHeight()：獲取可繪製區域尺寸

4. Graphics 繪圖上下文

封裝 2D 繪圖原語：

• 幾何繪製：drawLine/Rect/Arc/RoundRect、fillRect/Arc/RoundRect/Triangle
• 圖像繪製：drawImage(Image, x, y, anchor)、drawRegion() 區域繪製
• 文本繪製：drawString/Chars()、setFont(Font)、stringWidth() 測量
• 坐標變換：translate(x, y) 平移、getTranslateX/Y() 獲取偏移
• 裁剪區域：setClip(x, y, w, h)、clipRect()

三、完整 MIDlet GUI 實戰：銀行查詢系統

項目結構

MidpGui (MIDlet + CommandListener)
├── Display display
├── Form form (進度條容器)
├── List menu (主菜單)
├── TextBox input (支票號輸入)
├── Gauge gauge (進度指示器)
├── Command: ok, back, exit
└── String currentMenu (狀態機標識)

核心代碼實現

public class MidpGui extends MIDlet implements CommandListener {
    Display display;
    Form form = new Form("Container Form");
    List menu;
    TextBox input;
    Gauge gauge = new Gauge("Processing...", false, 100, 30);
    static final Command okCmd = new Command("OK", Command.OK, 1);
    static final Command backCmd = new Command("Back", Command.BACK, 0);
    static final Command exitCmd = new Command("Exit", Command.STOP, 2);
    String currentMenu;

    public void startApp() {
        display = Display.getDisplay(this);
        menu = new List("Enquiries", Choice.IMPLICIT);
        menu.append("Current Balance", null);
        menu.append("Fixed Deposit", null);
        menu.append("Check Status", null);
        menu.addCommand(exitCmd);
        menu.setCommandListener(this);
        form.append(gauge);
        mainMenu();
    }

    void mainMenu() {
        display.setCurrent(menu);
        currentMenu = "Main";
    }

    public void commandAction(Command c, Displayable d) {
        String label = c.getLabel();
        if ("Exit".equals(label)) {
            try { destroyApp(true); } catch (Exception e) {}
        } else if ("Back".equals(label)) {
            if ("input".equals(currentMenu) || "form".equals(currentMenu)) {
                mainMenu();
            }
        } else {
            if ("OK".equals(label)) {
                showForm();
            } else {
                List current = (List) display.getCurrent();
                switch (current.getSelectedIndex()) {
                    case 0: case 1: showForm(); break;      // Balance, Deposit
                    case 2: showTextBox(); break;             // Check Status
                }
            }
        }
    }

    public void showTextBox() {
        input = new TextBox("Enter Check Number:", "", 20, TextField.ANY);
        input.addCommand(backCmd);
        input.addCommand(okCmd);
        input.setCommandListener(this);
        display.setCurrent(input);
        currentMenu = "input";
    }

    public void showForm() {
        form.addCommand(backCmd);
        form.setCommandListener(this);
        display.setCurrent(form);
        currentMenu = "form";
    }
    // pauseApp/destroyApp 省略...
}

四、關鍵設計模式與最佳實踐

1. 狀態機管理屏幕流轉

使用 currentMenu 字符串標識當前界面狀態，實現清晰的導航邏輯：

Main → (選擇項目) → Form(input) → (Back) → Main
                    ↘ (選擇 Check Status) → TextBox → (OK) → Form → (Back) → Main

2. Command 優先級設計

• Command.BACK (0)：返回鍵，系統自動映射到設備返回鍵
• Command.OK/SCREEN (1)：確認/選單項操作
• Command.STOP/EXIT (2)：退出/停止，最高優先級

3. 高級 UI 自適應優勢

同一份代碼在 Nokia 128×128、Sony 176×220、Motorola 240×320 上自動適配佈局，無需手動計算坐標。

4. 低級 UI 定制場景

• 遊戲主循環渲染
• 自定義圖表/儀表盤
• 特殊動畫效果
• 需要精確像素控制的場景

五、常見陷阱與避坑指南

1. 阻塞 UI 線程：網絡/IO 操作必須在獨立線程執行，否則界面凍結
2. 資源未釋放：destroyApp() 中置空所有組件引用，協助 GC
3. Command 監聽器重複註冊：每個 Displayable 只需 setCommandListener(this) 一次
4. 忽略設備差異：部分設備不支持 Gauge 交互模式，需運行時檢測

掌握 MIDP GUI 的雙層架構與事件模型，靈活選擇高級/低級 UI，是開發優秀 J2ME 應用的基石。

1. 上一篇文章： J2ME paint() 繪圖性能優化六大黃金法則
2. 下一篇文章： J2ME 實用圖形工具類：文本自動換行、半透明渲染與灰度圖生成

J2ME

J2ME 彩色轉灰度算法深度解析與優化

從浮點運算到位移優化：灰度轉換的演進之路 在行動裝置上處理圖

使用 J2ME MMAPI 開發移動多媒體應用（一）：架構解析、DataSource 與 Player、Manager 工廠模式

一、引言：多媒體格式百花齊放，需標準化 API 面對眾多媒體

J2ME GCF 通用連接框架深度解析：接口體系與最佳實踐

前言：GCF 是 J2ME 網絡編程的基石 Generic

J2ME 手機圖片上傳實戰經驗：HttpConnection 分塊編碼陷阱與 Socket 方案

HttpConnection 遇到的分塊編碼問題 用 Htt