用 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：

1. 在 Eclipse V3.2 中，選擇 Help > Software Updates > Find and Install。
2. 選擇 Search for new features to install。此窗口列出了可以從中下載插件的站點以及 Eclipse 預定義的插件。
3. 單擊 New Remote Site 將 Aptana 添加到此列表中，并使用 URL http://update.aptana.com/3.2 對其進行定義。
4. 從列表中選擇新定義的 Aptana 站點，單擊 Next，然后安裝所有可用功能。完成此窗口安裝基本的 Aptana Editor。
5. 重新啟動 Eclipse。
6. 選擇 Window > Open Perspective > Other，然后從窗口選擇 Aptana。工具欄中將顯示一組新圖標。
7. 單擊主頁圖標。將顯示 Aptana 功能的概覽。
8. 在 Apple iPhone Development 部分中，單擊 Download and Install。
9. 安裝所有功能，然后完成此窗口以用特定于 iPhone 的功能配置 Aptana。
10. 重新啟動 Eclipse。
11. 下載最新版本的 iUi。

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

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

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

iPhone Preview 模式和應用服務器

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

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

如果通過 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 的項目。

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

注意，該演示與本機 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 應用程序

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

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

iDoc UI

針對 iPhone 進行開發時，必須只關注 iPhone。應用程序應當快速地完成特定任務，不應該嘗試包括所有可能的功能。使用 iDoc，用戶必須找到關于 Java 類的基本文檔，例如類名、方法名、方法簽名和注釋。通過指向目標詳細信息頁面的三個導航級別顯示這些信息。

包導航

頂層包

類導航

包內的類、接口、異常和錯誤

類細節導航

類中的描述、字段、構造函數和方法

詳細信息頁面

注釋、簽名和參數

為了使 iDoc 保持整齊并且以任務為目的，需要省略一些傳統 Javadoc 功能。例如，不顯示包描述注釋。由于這些功能通常不包含有用信息（例如，acme.client 包含客戶機代碼），并且有時被同時省略，因此把它們從 iDoc 中移除并簡化接口就顯得十分有意義。

要獲得三個導航級別，請使用邊對邊 (edge-to-edge) 列表。這是在本機 iPhone 應用程序中常用的構造，用于瀏覽聯系人、電子郵件和音樂。邊對邊列表將在 44 像素的等高行中顯示項，并且有助于在大量信息中滾動查找。Apple 的 iPhone 人機接口指南 提供了構造邊對邊列表的規格，包括字體、字體大小和邊框間距。iUi 框架用 CSS 和 JavaScript 語言實現這些規格，允許您創建像本機 iPhone 組件那樣顯示的簡單 HTML 列表。

清單 1 顯示了頁眉，以及 java.applet 和 java.rmi 包的前兩個導航級別。

清單 1. 帶有頁眉和前兩個導航級別的 HTML 文檔

                !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">html xmlns="http://www.w3.org/1999/xhtml">head>title>iDoc/title>meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0;user-scalable=0;"/>style type="text/css" media="screen">@import "iui/iui.css";/style>style type="text/css" media="screen">@import "iDoc.css";/style>script type="application/x-javascript" src="iui/iui.js">/script>/head>body onclick="console.log('Hello', event.target);">div class="toolbar">h1 id="pageTitle">/h1>a id="backButton" class="button" href="#">/a>/div>ul id="home" title="Packages" selected="true">li>a href="#java.applet">java.applet/a>/li>!-- more packages...-->li>a href="#java.rmi">java.rmi/a>/li>/ul>ul id="java.applet" title="java.applet">li class="group">Interfaces/li>li>a href="java.applet.AppletContext.html">AppletContext/a>/li>li>a href="java.applet.AppletStub.html">AppletStub/a>/li>li>a href="java.applet.AudioClip.html">AudioClip/a>/li>li class="group">Classes/li>li>a href="java.applet.Applet.html">Applet/a>/li>li>a href="java.applet.Applet.AccessibleApplet.html">AccessibleApplet/a>/li>/ul>ul id="java.rmi" title="java.rmi">li class="group">Interfaces/li>li>a href="java.rmi.Remote.html">Remote/a>/li>li class="group">Classes/li>li>a href="java.rmi.MarshalledObject.html">MarshalledObject/a>/li>li>a href="java.rmi.Naming.html">Naming/a>/li>li>a href="java.rmi.RMISecurityManager.html">RMISecurityManager/a>/li>li class="group">Exceptions/li>li>a href="java.rmi.AccessException.html">AccessException/a>/li>li>a href="java.rmi.AlreadyBoundException.html">AlreadyBoundException/a>/li>li>a href="java.rmi.ConnectException.html">ConnectException/a>/li>li>a href="java.rmi.ConnectIOException.html">ConnectIOException/a>/li>li>a href="java.rmi.MarshalException.html">MarshalException/a>/li>li>a href="java.rmi.NoSuchObjectException.html">NoSuchObjectException/a>/li>li>a href="java.rmi.NotBoundException.html">NotBoundException/a>/li>li>a href="java.rmi.RemoteException.html">RemoteException/a>/li>li>a href="java.rmi.RMISecurityException.html">RMISecurityException/a>/li>li>a href="java.rmi.ServerError.html">ServerError/a>/li>li>a href="java.rmi.ServerException.html">ServerException/a>/li>li>a href="java.rmi.ServerRuntimeException.html">ServerRuntimeException/a>/li>li>a href="java.rmi.StubNotFoundException.html">StubNotFoundException/a>/li>li>a href="java.rmi.UnexpectedException.html">UnexpectedException/a>/li>li>a href="java.rmi.UnknownHostException.html">UnknownHostException/a>/li>li>a href="java.rmi.UnmarshalException.html">UnmarshalException/a>/li>/ul>

圖 8 顯示了使用邊對邊列表生成的頂層選擇包導航級別。

圖 8. 像導航本機 iPhone 應用程序一樣導航 Javadoc 包

圖 9 顯示了在 iPhone Preview 模式下顯示的最終的 java.rmi 包。

圖 9. 在 java.rmi 包中導航接口、類和異常

對于 iDoc 的目標詳細信息頁面，使用另一種 iPhone 構造：圓角矩形列表。這些列表對于分組信息十分有用，并且 iPhone 中的設置面板都使用這種列表。使用圓角矩形列表可以分隔方法簽名與參數及異常清單。在 V0.13 中，iUi 只支持將圓角矩形列表用于表單輸入；將其元素用于靜態文本將生成格式錯誤的塊。 使用定制的 iDoc.css 文件擴展這些 CSS（如清單 2 所示），以添加用于顯示帶有靜態文本的圓角矩形列表的 textRow 元素。

清單 2. 定制 textRow CSS 擴展以正確顯示靜態文本

                /* Adding a new row CSS style to iUi for displaying blocks of text */.textRow  {position: relative;border-bottom: 1px solid #999999;-webkit-border-radius: 0;text-align: right;}.textRow > p {text-align: left;margin: 5px 8px 5px 10px;padding: 0px 0px 0px 0px;}fieldset > .textRow:last-child {border-bottom: none !important;}

清單 3 顯示了 java.math.BigDecimal 的一種構造方法的詳細信息頁面。

清單 3. 使用 textRow 元素的 HTML 詳細信息頁面

                div id="java.math.BigDecimal(long,java.math.MathContext)" title="BigDecimal"class="panel">fieldset>div class="textRow">p>b>public BigDecimal(long, MathContext)/b>/p>/div>div class="textRow">p>Translates a code>long/code> into acode>BigDecimal/code>, with rounding according to the context settings.The scale of the code>BigDecimal/code>, before any rounding, is zero./p>/div>/fieldset>h2>Parameters/h2>fieldset>div class="textRow">p>b>long val/b>: code>long/code> value to be convertedto code>BigDecimal/code>./p>/div>div class="textRow">p>b>MathContext mc/b>: the context to use./p>/div>/fieldset>h2>Throws/h2>fieldset>div class="textRow">p>b>ArithmeticException/b>: if the result is inexact butthe rounding mode is code>UNNECESSARY/code>./p>/div>/fieldset>/div>

fieldset> 標記內的所有內容都位于圓角矩形內，textRow div> 用于分隔行。帶有 h2> 標記的標題顯示為列表上方的組標簽。圖 10 顯示了最終頁面。

圖 10. java.math.BigDecimal 中的構造函數的詳細視圖

擁有三個導航級別和目標詳細信息頁面后，UI 就完成了。iDoc 使用戶可以專注于具體任務。借助 iUi 框架和一些定制的 CSS，它看上去很像本機 iPhone 應用程序。

開發 iDoc

現在已經設計了 UI，接下來需要編寫代碼來生成 HTML 文件。創建一個插入到 Sun 的 javadoc 命令中的簡單 doclet。我們的示例將使用標準 java.* 包，但是 iDoc 可以從任何源代碼生成 Javadoc。使用 OpenJDK 源代碼，因為它可以公開獲得并且 GNU Public License (GPL) V2 許可證允許我們生成和發布其 Javadoc。

使用 iDoc，只需迭代包和類并調用方法打印上述格式的靜態 HTML 頁面。清單 4 顯示打印目標詳細信息頁面的方法。

清單 4. 輸出詳細信息頁面的 Doclet 代碼

                private void printDetail(PrintStream p, ProgramElementDoc doc, String id, String name) {divHeader(p, id, name, "panel");textHeader(p, null);textRow(p, getSignature(doc));textRow(p, getCommentText(doc.commentText()));textFooter(p);if (doc instanceof ExecutableMemberDoc) {printMethodDetail(p, (ExecutableMemberDoc) doc);}divFooter(p);}private void printMethodDetail(PrintStream p, ExecutableMemberDoc field) {if (field.parameters().length > 0) {textHeader(p, "Parameters");for (int i=0; ifield.paramTags().length; i++) {textRow(p, "b>" + field.parameters()[i].typeName() + " "+ field.paramTags()[i].parameterName()+ "/b>: "+ getCommentText(field.paramTags()[i].parameterComment()));}textFooter(p);}if (field.throwsTags().length > 0) {textHeader(p, "Throws");for (int i=0; ifield.throwsTags().length; i++) {textRow(p, "b>" +  field.throwsTags()[i].exceptionName()+ "/b>: "+ getCommentText(field.throwsTags()[i].exceptionComment()));}textFooter(p);}}

代碼是通用的，這樣 printDetail() 將處理類描述、字段、構造函數和方法的輸出。后兩種類型是 ExecutableMemberDoc 的子類，因此打印關于其參數和已拋出異常的附加信息。

Aptana 的 iPhone Preview 模式將幫助調試輸出文件。在每次迭代后，您可以快速單擊該應用程序查找已設計界面中的不一致性。但是，使用 Preview 模式可以掩蓋性能問題：現代計算機的運行速度比 iPhone 的 620-MHz ARM 處理器快三至五倍。此外，用戶經常通過速度慢的蜂窩網絡下載頁面，因此必須用實際 iPhone 運行您的應用程序。

性能問題

當我在 iPhone 中測試查看 iDoc 時，我發現輸出一個大型 HTML 文件將導致跳幀和性能下降。要解決此問題，創建一個用于導航包名/類名的主文件，然后為帶有注釋和方法細節的每個類創建獨立文件（參見清單 5）。雖然此過程將生成大量文件，但是各個文件大小都非常小，并且應用程序運行得十分流暢。

清單 5. Doclet 代碼將迭代每個包，然后為每個類創建文件

                out = new FileOutputStream(index);p = new PrintStream(out);printHeader(p);PackageDoc[] packages = root.specifiedPackages();Arrays.sort(packages);printPackages(p, packages);for (int i=0; ipackages.length; i++) {printPackageDetail(p, packages[i]);}for (int i=0; ipackages.length; i++) {ClassDoc[] classes = packages[i].allClasses();Arrays.sort(classes);for (int j=0; jclasses.length; j++) {// Creating a separate file for each class.PrintStream p2 = new PrintStream(new FileOutputStream(getFilename(classes[j])));printClassDetail(p2, classes[j]);p2.close();}}printFooter(p);p.close();

運行 iDoc

在經過該性能增強之后，就能運行 iDoc 了。為 OpenJDK 中的 51 個 java.* 和 javax.* 包（表示 1,304 個類）生成 Javadoc，然后把所有內容上傳到 Web 服務器中。這包括超過 16 MB 的文件，但是主要導航頁面只有 112 KB，并且每個單獨類的詳細信息頁面平均為 13 KB。即使在使用 EDGE 網絡時，應用程序也能夠快速響應。如果您已經擁有了 iPhone，請訪問 iDoc 站點（請參閱 參考資料）并嘗試使用，也可以下載 iDoc 來為您自己的代碼庫生成特定于 iPhone 的 Javadoc。圖 11 顯示了最終的應用程序。

圖 11. 用于 iPhone 的全部 51 個包的 Javadoc


可能對 iDoc 進行的擴展包括支持顯示 Java 5 泛型，以及更智能地捕捉 Javadoc 注釋內的標記來實現頁面之間的鏈接。如果您有興趣添加 iDoc 的功能，則可以下載完整的源代碼.

iPhone 開發的前景

2007 年 10 月，Steve Jobs 宣稱 Apple 將于 2008 年 2 月發布 iPhone SDK。詳細信息很少，因為這是在 2007 年 12 月編寫的，但是 SDK 將允許您在不需要使用 Safari 的情況下創建能夠在 iPhone 上本機運行的應用程序。給定 iPhone 底層架構之后，開發平臺很可能是類似于 Mac OS X 的 Cocoa 和 Objective-C。Apple 主管人員的最新評論暗示第三方應用程序將需要接受某種類型的認證過程。

通過在本機運行，需要高級動畫、圖形和網絡訪問的應用程序將從中獲益。不過，即使在發布了 SDK 之后，iPhone 的 Web 開發仍會是一個吸引人的主題。Web 應用程序很容易創建和部署。諸如 Aptana 和 iUi 之類的工具簡化了開發，并且能夠快速創建 Web 應用程序。正如 iDoc 所展示的，沒有必要等待 SDK 的發布：使用現有的工具，您可以創建具有本機界面外觀的全功能 iPhone Web 應用程序。