端到端 Web 服務教學：打造行動版 Dilbert 漫畫閱讀器

本教學示範如何使用 NetBeans IDE 建立一個行動裝置應用程式，透過 Web 服務即時取得每日 Dilbert 漫畫，將 GIF 圖片轉換為行動裝置友善的 PNG 格式，並以視覺化 MIDlet 設計器完成介面佈局與邏輯串聯。

開發環境準備

• JDK 5.0/6.0
• NetBeans IDE 6.0 完整版
• GlassFish / Tomcat 等 Java EE 5 伺服器

第一階段：建立 Web 服務客戶端專案

1. File > New Project > Web > Web Application，專案名 DilbertWebApplication，Java EE 5。
2. 專案右鍵 New > Web Service Client，WSDL URL：
   https://www.esynaps.com/WebServices/DailyDiblert.asmx?WSDL
   ※ 注意：服務名實為 DailyDiblert（拼字錯誤），必須照填才能連線。
3. 套件名 dilbert，完成產生客戶端存根。

第二階段：建立行動應用專案並串接 Web 服務

1. File > New Project > Mobility > MIDP Application，專案名 DilbertViewer，取消 Create Hello MIDlet。
2. 專案右鍵 New > Mobile Client to Web Application：
   選擇 DilbertWebApplication，Servlet 名 DilbertServlet，套件 dilbert。
   勾選 Web Service Client in Web Application → DailyDiblert.asmx → DailyDilbertImage 操作。
   Client Name DilbertViewer，套件 dilbert。

第三階段：視覺化 MIDlet 介面設計

1. 專案右鍵 New > Visual MIDlet，檔名 DilbertVisualMIDlet，套件 dilbert。
從調色盤 (Ctrl+Shift+8) 拖入 Alert、Wait Screen 組件。
2. 建立自訂畫布組件：New > Other > MIDP > MIDP Canvas，類別名 DilbertCanvas，套件 dilbert。
實作 paint() 繪製圖片、keyPressed() 處理方向鍵捲動。
3. 編譯專案 (Build Project)，再透過 Palette Manager > Add to Palette 將 DilbertCanvas 加入調色盤。
4. 拖入 DilbertCanvas 到設計器，右鍵 New/Add > OK Command。
5. 在 Navigator (Ctrl+7) 連接流程：
   Mobile Device Started → Wait Screen → Success → DilbertCanvas → OK → Mobile Device
Wait Screen Failure → Alert

第四階段：整合圖片轉換邏輯

1. 切換到 Source 視圖，修改 getTask() 方法：
   呼叫 DilbertViewer.dailyDilbertImage() 取得位元組陣列，
   Image.createImage(bytes, 0, bytes.length) 建立圖片，
   傳給 DilbertCanvas.setImage()。
2. 開啟 DailyDilbert_Proxy.java，修改 dailyDilbertImage()：
   使用 ImageIO.read() 讀取 GIF，ImageIO.write(..., "png", ...) 輸出 PNG 位元組陣列回傳。

public byte[] dailyDilbertImage() throws RemoteException, Exception {
    try {
        ByteArrayInputStream in = new ByteArrayInputStream(
            getService().getDailyDilbertSoap().dailyDilbertImage());
        BufferedImage image = ImageIO.read(in);
        ByteArrayOutputStream out = new ByteArrayOutputStream();
        ImageIO.write(image, "png", out);
        return out.toByteArray();
    } catch (RemoteException ex) { throw ex; }
    catch (Exception ex) { throw ex; }
}

第五階段：部署與測試

1. DilbertWebApplication 右鍵 Deploy Application 部署至伺服器。
2. DilbertViewer 右鍵 Run 啟動模擬器。
   點擊 Launch → Select，應用程式連線取得最新漫畫並顯示。

結語

本教學完整呈現了：Web 服務客戶端建立、Mobile Client to Web Application 精靈串接、視覺化 MIDlet 設計器介面佈局、自訂 Canvas 組件開發與調色盤整合、伺服器端圖片格式轉換（GIF→PNG）、模擬器實機測試。此流程可快速構建各類行動 Web 服務消費應用。