用Eclipse開發iPhone Web 應用程序

　　Apple 的 iPhone 平臺為開發人員提供了一個有趣的機會。借助其小型的交互式觸摸屏，iPhone 和 iPod Touch 在很短的時間內迅速吸引了數百萬用戶。但是這種新穎的設計和專利平臺給應用程序開發人員帶來了一系列新的挑戰。在 2008 年 2 月 Apple 發布其軟件開發包 (SDK) 以前，想要在該平臺上進行研究的開發人員必須創建模擬 iPhone 的本機界面外觀的 Web 應用程序。

　　幸運的是，使用一系列新的開源工具可以更輕松地完成這項工作。Aptana 的針對 Eclipse 的 iPhone Development 插件可以生成特定于 iPhone 的項目，并在可旋轉取景器中預覽應用程序。Joe Hewitt 的 iUi、層疊樣式表（Cascading Style Sheets，CSS）和 JavaScript 框架包含模擬本機 iPhone 體驗的部件和頁面集。

　　在本文中，我們使用 Aptana 和 iUi 創建一個新應用程序：針對 iPhone 的簡單 Javadoc 查看器。首先，設計一個在 iPhone 中瀏覽 Javadoc 的用戶界面 (UI)，然后創建用于從任何源代碼生成 Javadoc 頁面的定制 doclet。在此過程中將描述針對 iPhone 的 UI 問題，如何使用這些開源工具簡化開發和調試，以及 iPhone 開發的未來趨勢。

　　工具快速入門

　　首先安裝 Aptana 并下載 iUi：

　　在 Eclipse V3.2 中，選擇 Help > Software Updates > Find and Install。 

　　選擇 Search for new features to install。此窗口列出了可以從中下載插件的站點以及 Eclipse 預定義的插件。 

　　單擊 New Remote Site 將 Aptana 添加到此列表中，并使用 URL http://update.aptana.com/3.2 對其進行定義。 

　　從列表中選擇新定義的 Aptana 站點，單擊 Next，然后安裝所有可用功能。完成此窗口安裝基本的 Aptana Editor。 

　　重新啟動 Eclipse。 

　　選擇 Window > Open Perspective > Other，然后從窗口選擇 Aptana。工具欄中將顯示一組新圖標。 

　　單擊主頁圖標。將顯示 Aptana 功能的概覽。 

　　在 Apple iPhone Development 部分中，單擊 Download and Install。 

　　安裝所有功能，然后完成此窗口以用特定于 iPhone 的功能配置 Aptana。 

　　重新啟動 Eclipse。 

　　下載最新版本的 iUi。 

　　一切就緒之后，請使用 Eclipse 創建一個名為 iDoc 的新 iPhone Project，如圖 1 所示。

圖 1. 創建新 iPhone Project
 

　　圖 2 顯示了生成的項目，其中包含簡單 iPhone 應用程序。

圖 2. 在 Eclipse 中生成的 iPhone Project
 

　　注意由 Aptana 的基本編輯器提供的突出顯示的語法，它支持 HTML、CSS 和 JavaScript。

　　iPhone Preview 模式和應用服務器

　　在文本編輯器的底部，您將看到 Source、iPhone Preview 選項卡，以及系統中安裝的所有瀏覽器（例如，Safari Preview、Firefox Preview）。單擊 iPhone Preview 查看示例應用程序在 iPhone 中的外觀。在瀏覽器外部單擊可以旋轉電話，單擊電話標題欄可以隱藏導航欄。下面顯示了水平顯示的 iPhone Preview 模式。

圖 3. iPhone Preview 模式下的水平視圖
 

　　使用 iPhone Preview 模式可以節省大量時間：可以快速測試新設計想法并重復進行開發而無需離開計算機。當應該在實際的 iPhone 上測試您的應用程序時，Aptana 的內置應用服務器將十分有用。單擊 Eclipse 工具欄中的 Run 圖標啟動服務器。圖 4 顯示了在 Eclipse 中運行的應用服務器。

圖 4. Aptana 的 iPhone Application Server 托管頁面并創建帶有 URL 的電子郵件
 

　　如果通過 WiFi 連接將 iPhone 連接到本地網絡，則可以訪問服務器窗口中顯示的 URL。單擊 E-mail this url 并向 iPhone 中的電子郵件帳戶發送一條消息，這可以省去一個步驟。單擊電子郵件中的鏈接，應用程序將在 iPhone 的 Web 瀏覽器中啟動。

　　iUi 演示：劇院清單 Web 應用程序

　　雖然 Aptana 的啟動應用程序包含特定于 iPhone 的 HTML 和 CSS 文件，但是這些文件的功能有限。一種更好的備用解決方案是使用 iUi 框架，此框架擁有一組豐富的自定義部件和 JavaScript 效果，可以精確地模擬本機 iPhone 界面。

　　解壓縮已下載的 iUi 發行版 iui-0.13.tar，然后把文件復制到 Eclipse 的 iDoc Project 中。圖 5 顯示了包含 iUi 的項目。

圖 5. 帶有 iUi 框架和示例項目的 iDoc 項目
 

　　iUi 的演示 Web 應用程序可以在上面展開的 samples 文件夾中找到。其中包括音樂瀏覽器、劇院清單和類似 Digg 的站點。使用 Aptana 的 iPhone Preview 模式，我們可以在 Eclipse 中查看這些組件。圖 6 顯示了劇院清單 Web 應用程序 (samples/theaters/index.html) 的搜索頁面。

圖 6. iUi 的示例劇院清單 Web 應用程序
 

　　注意，該演示與本機 iPhone 的界面外觀極為相似。使用這些預打包的部件可以快速開發 iPhone Web 應用程序。

　　設計 UI

　　在本例中，將為 iPhone 創建一個名為 iDoc 的 Javadoc 查看器。由 Sun Microsystems 的標準 Javadoc 生成器創建的緊密 HTML 文件在臺式機上一切正常，但是在 iPhone 中卻很難導航和讀取。iDoc 將生成 iPhone 支持的 Javadoc —— 非常適合于在地鐵中瀏覽應用程序編程接口 (API) 或者讓合作的編程團隊中的觀察員幫助解決困難。

　　iPhone 人機接口指南

　　在開始設計 iDoc 的 UI 之前，一定要先了解 iPhone 開發與普通 Web 開發的不同之處。圖 7 來自 Apple 的 iPhone Dev Center（請參閱 參考資料），很好地總結了兩者的不同之處：手指不是鼠標。這樣做得不到桌面應用程序中的像素精度，但是通過輕敲、輕彈和輕壓將開啟一個豐富的新用戶交互模型。此外，iPhone 與用戶一起移動并且通常用于有干擾的環境中，因此應用程序需要能夠快速容易地訪問目標信息。

圖 7. 手指不是鼠標
 

　　Apple 的 iPhone 人機接口指南（請參閱 參考資料）定義了三種類型的 iPhone Web 內容。

　　與 iPhone 中的 Safari 兼容 

　　可以正確顯示的任意類型的 Web 頁面，即使頁面的一部分依賴于諸如 Adobe Flash 或 Java™ applet 之類的不受支持的插件 

　　最適于 iPhone 中的 Safari 

　　為 iPhone 正確縮放內容并且不依賴于不受支持插件的 Web 頁面

　　通過模擬 iPhone 界面外觀來模擬本機應用程序的 Web 頁面，并且在適當的時候，與諸如電話、電子郵件或 Google Maps 之類的 iPhone 服務集成 

　　標準 Javadoc 頁面屬于第一種類型，與 iPhone 中的 Safari 兼容。這些頁面可以正確顯示，但是要求很好地處理輕壓和輕彈才能找到相關信息。iDoc 針對的是完整的 iPhone 應用程序。雖然不能與其他服務集成，但是 iDoc 的接口能夠在 iPhone 中很好地使用。