J2ME 高階 UI 畫面導航實作：List、Form 與 Alert 之間的跳轉

J2ME 高階 UI（javax.microedition.lcdui）提供 List、Form、Alert 等現成元件，透過 Display.setCurrent() 即可實現畫面切換。本文提供一個完整的三層導航範例：主選單 → 功能頁面（含返回鍵）→ Alert 彈窗，展示命令事件分發與畫面生命週期管理。

架構概覽

• MainPage (MIDlet)：啟動入口，建立 List 主選單，處理「OK」進入子頁、「Exit」退出。
• FirstPage (Form)：展示圖片與跑馬燈，提供「Back」返回主選單。
• SecondPage (Form)：含輸入欄與「Alert」按鈕，點擊彈出資訊框 3 秒後自動返回。

完整原始碼

// MainPage.java
package test;
import javax.microedition.lcdui.*;
import javax.microedition.midlet.*;

public class MainPage extends MIDlet implements CommandListener {
    private Display display;
    private List menu;
    private Command cmdExit, cmdOk;
    private Image icon;

    protected void startApp() {
        display = Display.getDisplay(this);
        cmdExit = new Command("Exit", Command.EXIT, 1);
        cmdOk = new Command("OK", Command.OK, 1);
        try { icon = Image.createImage("/Icon.png"); } catch (Exception ignore) {}

        menu = new List("主選單", List.EXCLUSIVE);
        menu.append("FirstPage", icon);
        menu.append("SecondPage", icon);
        menu.addCommand(cmdExit);
        menu.addCommand(cmdOk);
        menu.setCommandListener(this);
        display.setCurrent(menu);
    }

    public void commandAction(Command c, Displayable d) {
        if (c == cmdOk) {
            int idx = menu.getSelectedIndex();
            if (idx == 0) display.setCurrent(new FirstPage(display, menu));
            else if (idx == 1) display.setCurrent(new SecondPage(display, menu));
        } else if (c == cmdExit) {
            destroyApp(false); notifyDestroyed();
        }
    }
    protected void pauseApp() {}
    protected void destroyApp(boolean unconditional) {}
}

// FirstPage.java
package test;
import javax.microedition.lcdui.*;

public class FirstPage extends Form implements CommandListener {
    private Display display;
    private Displayable parent;
    private Command cmdBack;

    public FirstPage(Display display, Displayable parent) {
        super("FirstPage");
        this.display = display; this.parent = parent;
        cmdBack = new Command("Back", Command.BACK, 1);
        try { append(Image.createImage("/Java.png")); } catch (Exception ignore) {}
        setTicker(new Ticker("這是跑馬燈範例，持續滾動顯示..."));
        addCommand(cmdBack);
        setCommandListener(this);
    }
    public void commandAction(Command c, Displayable d) {
        if (c == cmdBack) display.setCurrent(parent);
    }
}

// SecondPage.java
package test;
import javax.microedition.lcdui.*;

public class SecondPage extends Form implements CommandListener {
    private Display display;
    private Displayable parent;
    private Command cmdBack, cmdAlert;

    public SecondPage(Display display, Displayable parent) {
        super("SecondPage");
        this.display = display; this.parent = parent;
        cmdBack = new Command("Back", Command.BACK, 1);
        cmdAlert = new Command("Alert", Command.SCREEN, 1);
        append(new TextField("E-mail", "lulei@163.com", 30, TextField.EMAILADDR));
        addCommand(cmdBack);
        addCommand(cmdAlert);
        setCommandListener(this);
    }
    public void commandAction(Command c, Displayable d) {
        if (c == cmdAlert) {
            Alert info = new Alert("提示", "這是 Alert 範例", null, AlertType.INFO);
            info.setTimeout(3000); // 3 秒後自動返回原畫面
            display.setCurrent(info, this); // 第二參數指定自動返回的畫面
        } else if (c == cmdBack) {
            display.setCurrent(parent);
        }
    }
}

關鍵技巧總結

1. 畫面切換核心： display.setCurrent(nextDisplayable)；若為 Alert 可用雙參數版 setCurrent(alert, nextAfterAlert) 實現自動返回。
2. 命令類型語意： Command.BACK 會自動映射至右軟鍵（部分裝置），Command.OK 映射左軟鍵，Command.SCREEN 為螢幕專用功能鍵。
3. 父畫面引用傳遞： 子頁面建構子接收 Displayable parent，返回時直接 display.setCurrent(parent)，避免重新實例化。
4. 資源釋放： Image.createImage 需在 try-catch 中處理 IOException，避免資源遺漏導致啟動失敗。
5. Ticker 跑馬燈： Form.setTicker() 或 Canvas.setTicker() 即可在標題列顯示滾動文字。

擴充方向

• 引入畫面堆疊管理類別，支援多層「返回」邏輯。
• 整合資料模型（MVC），將 UI 狀態與業務邏輯分離。
• 針對不同螢幕解析度動態調整 Form 佈局（Item 寬度設為 Display.getWidth()）。

此範例涵蓋 J2ME 高階 UI 最核心的導航模式，可直接作為專案骨架擴充。