J2ME 低階 UI 實作 Nokia S60 風格計算機完整原始碼

專案簡介

使用 FullCanvas（Nokia UI API）繪製自訂鍵盤與顯示區，實作四則運算、正負號切換、鍵盤焦點導航。適合學習低階 UI 繪圖、事件處理與遊戲迴圈架構。

架構概覽

• CalcMIDlet：Singleton 管理生命週期，啟動時顯示 CalcCanvas。
• CalcCanvas extends FullCanvas：
  • paint(Graphics) 繪製背景、顯示區、鍵盤圖片、焦點框。
  • keyPressed(int) 處理方向鍵移動焦點、確認鍵觸發運算。
  • 內部狀態機：result 顯示值、firstNum/secondNum 運算元、func 運算子索引、flag 是否輸入第一運算元。

核心程式碼片段

鍵盤配置與座標計算

private char[] keys = {
    '7','8','9','/',
    '4','5','6','*',
    '1','2','3','-',
    '0','?','=','+'
};
private int btnW=37, btnH=28, gapX=2, gapY=2, startX=10, startY=70;

private void setFocusXY(int index) {
    focusX = startX + (index%4)*(btnW+gapX);
    focusY = startY + (index/4)*(btnH+gapY);
}

焦點導航（上下左右循環）

public void keyPressed(int keyCode) {
    switch (keyCode) {
        case KEY_LEFT:  num = (num==0)?15:num-1; break;
        case KEY_RIGHT: num = (num==15)?0:num+1; break;
        case KEY_UP:    num = (num<4)?num+12:num-4; break;
        case KEY_DOWN:  num = (num>11)?num-12:num+4; break;
        case -5: action(); break; // 確認鍵
    }
    repaint();
}

運算邏輯

private void action() {
    char ch = keys[num];
    if (Character.isDigit(ch)) {
        result = result*10 + (ch-'0');
    } else if (ch == '?') { result = -result; } // 負號
    else if (ch == '=' || num%4==3) { // 運算子或等號
        if (flag) {
            secondNum = result;
            switch (func) {
                case 3: result = firstNum/secondNum; break; // /
                case 7: result = firstNum*secondNum; break; // *
                case 11: result = firstNum-secondNum; break; // -
                case 15: result = firstNum+secondNum; break; // +
            }
            if (ch == '=') { firstNum = result; flag = false; }
            else { func = num; firstNum = result; result = 0; }
        } else {
            firstNum = result;
            if (num%4==3) { func = num; flag = true; result = 0; }
        }
    }
}

資源需求

• /calc.png：176×208 像素鍵盤背景圖（含數字與符號圖示），置於 JAR 根目錄。
• Nokia UI API (com.nokia.mid.ui.FullCanvas) 編譯時需引用 nokia_ui.jar。

編譯與部署

1. WTK 專案設定 MIDlet-1: CalcMIDlet, /icon.png, my.calc.CalcMIDlet。
2. 預驗證與混淆（ProGuard）縮減 JAR 體積。
3. 實機測試焦點反應速度與運算正確性（除零、溢位）。

擴展建議

• 加入小數點支援（需處理浮點顯示與定點運算）。
• 支援鍵盤數字鍵直接輸入（getKeyStates() 或 keyPressed 判斷 KEY_NUM0~KEY_NUM9）。
• 儲存歷史紀錄至 RMS。

結語

此計算機範例展示 J2ME 低階 UI 繪圖、焦點管理與狀態機設計的核心技巧，可作為更複雜遊戲或工具介面的起始範本。