用 Eclipse 開(kāi)發(fā) iPhone Web 應用程序
加入技術(shù)交流群
Apple 的 iPhone 平臺為開(kāi)發(fā)人員提供了一個(gè)有趣的機會(huì )。借助其小型的交互式觸摸屏，iPhone 和 iPod Touch 在很短的時(shí)間內迅速吸引了數百萬(wàn)用戶(hù)。但是這種新穎的設計和專(zhuān)利平臺給應用程序開(kāi)發(fā)人員帶來(lái)了一系列新的挑戰。在 2008 年 2 月 Apple 發(fā)布其軟件開(kāi)發(fā)包 (SDK) 以前，想要在該平臺上進(jìn)行研究的開(kāi)發(fā)人員必須創(chuàng )建模擬 iPhone 的本機界面外觀(guān)的 Web 應用程序。
幸運的是，使用一系列新的開(kāi)源工具可以更輕松地完成這項工作。Aptana 的針對 Eclipse 的 iPhone Development 插件可以生成特定于 iPhone 的項目，并在可旋轉取景器中預覽應用程序。Joe Hewitt 的 iUi、層疊樣式表（Cascading Style Sheets，CSS）和 JavaScript 框架包含模擬本機 iPhone 體驗的部件和頁(yè)面集。
在本文中，我們使用 Aptana 和 iUi 創(chuàng )建一個(gè)新應用程序：針對 iPhone 的簡(jiǎn)單 Javadoc 查看器。首先，設計一個(gè)在 iPhone 中瀏覽 Javadoc 的用戶(hù)界面 (UI)，然后創(chuàng )建用于從任何源代碼生成 Javadoc 頁(yè)面的定制 doclet。在此過(guò)程中將描述針對 iPhone 的 UI 問(wèn)題，如何使用這些開(kāi)源工具簡(jiǎn)化開(kāi)發(fā)和調試，以及 iPhone 開(kāi)發(fā)的未來(lái)趨勢。
首先安裝 Aptana 并下載 iUi：
- 在 Eclipse V3.2 中，選擇 Help > Software Updates > Find and Install。
- 選擇 Search for new features to install。此窗口列出了可以從中下載插件的站點(diǎn)以及 Eclipse 預定義的插件。
- 單擊 New Remote Site 將 Aptana 添加到此列表中，并使用 URL
http://update.aptana.com/3.2對其進(jìn)行定義。 - 從列表中選擇新定義的 Aptana 站點(diǎn)，單擊 Next，然后安裝所有可用功能。完成此窗口安裝基本的 Aptana Editor。
- 重新啟動(dòng) Eclipse。
- 選擇 Window > Open Perspective > Other，然后從窗口選擇 Aptana。工具欄中將顯示一組新圖標。
- 單擊主頁(yè)圖標。將顯示 Aptana 功能的概覽。
- 在 Apple iPhone Development 部分中，單擊 Download and Install。
- 安裝所有功能，然后完成此窗口以用特定于 iPhone 的功能配置 Aptana。
- 重新啟動(dòng) Eclipse。
- 下載最新版本的 iUi。
一切就緒之后，請使用 Eclipse 創(chuàng )建一個(gè)名為 iDoc 的新 iPhone Project，如圖 1 所示。
圖 1. 創(chuàng )建新 iPhone Project
圖 2 顯示了生成的項目，其中包含簡(jiǎn)單 iPhone 應用程序。
圖 2. 在 Eclipse 中生成的 iPhone Project
注意由 Aptana 的基本編輯器提供的突出顯示的語(yǔ)法，它支持 HTML、CSS 和 JavaScript。
在文本編輯器的底部，您將看到 Source、iPhone Preview 選項卡，以及系統中安裝的所有瀏覽器（例如，Safari Preview、Firefox Preview）。單擊 iPhone Preview 查看示例應用程序在 iPhone 中的外觀(guān)。在瀏覽器外部單擊可以旋轉電話(huà)，單擊電話(huà)標題欄可以隱藏導航欄。下面顯示了水平顯示的 iPhone Preview 模式。
圖 3. iPhone Preview 模式下的水平視圖
使用 iPhone Preview 模式可以節省大量時(shí)間：可以快速測試新設計想法并重復進(jìn)行開(kāi)發(fā)而無(wú)需離開(kāi)計算機。當應該在實(shí)際的 iPhone 上測試您的應用程序時(shí)，Aptana 的內置應用服務(wù)器將十分有用。單擊 Eclipse 工具欄中的 Run 圖標啟動(dòng)服務(wù)器。圖 4 顯示了在 Eclipse 中運行的應用服務(wù)器。
圖 4. Aptana 的 iPhone Application Server 托管頁(yè)面并創(chuàng )建帶有 URL 的電子郵件
如果通過(guò) WiFi 連接將 iPhone 連接到本地網(wǎng)絡(luò )，則可以訪(fǎng)問(wèn)服務(wù)器窗口中顯示的 URL。單擊 E-mail this url 并向 iPhone 中的電子郵件帳戶(hù)發(fā)送一條消息，這可以省去一個(gè)步驟。單擊電子郵件中的鏈接，應用程序將在 iPhone 的 Web 瀏覽器中啟動(dòng)。
雖然 Aptana 的啟動(dòng)應用程序包含特定于 iPhone 的 HTML 和 CSS 文件，但是這些文件的功能有限。一種更好的備用解決方案是使用 iUi 框架，此框架擁有一組豐富的自定義部件和 JavaScript 效果，可以精確地模擬本機 iPhone 界面。
解壓縮已下載的 iUi 發(fā)行版 iui-0.13.tar，然后把文件復制到 Eclipse 的 iDoc Project 中。圖 5 顯示了包含 iUi 的項目。
圖 5. 帶有 iUi 框架和示例項目的 iDoc 項目
iUi 的演示 Web 應用程序可以在上面展開(kāi)的 samples 文件夾中找到。其中包括音樂(lè )瀏覽器、劇院清單和類(lèi)似 Digg 的站點(diǎn)。使用 Aptana 的 iPhone Preview 模式，我們可以在 Eclipse 中查看這些組件。圖 6 顯示了劇院清單 Web 應用程序 (samples/theaters/index.html) 的搜索頁(yè)面。
圖 6. iUi 的示例劇院清單 Web 應用程序
注意，該演示與本機 iPhone 的界面外觀(guān)極為相似。使用這些預打包的部件可以快速開(kāi)發(fā) iPhone Web 應用程序。
在本例中，將為 iPhone 創(chuàng )建一個(gè)名為 iDoc 的 Javadoc 查看器。由 Sun Microsystems 的標準 Javadoc 生成器創(chuàng )建的緊密 HTML 文件在臺式機上一切正常，但是在 iPhone 中卻很難導航和讀取。iDoc 將生成 iPhone 支持的 Javadoc ―― 非常適合于在地鐵中瀏覽應用程序編程接口 (API) 或者讓合作的編程團隊中的觀(guān)察員幫助解決困難。
在開(kāi)始設計 iDoc 的 UI 之前，一定要先了解 iPhone 開(kāi)發(fā)與普通 Web 開(kāi)發(fā)的不同之處。圖 7 來(lái)自 Apple 的 iPhone Dev Center（請參閱 參考資料），很好地總結了兩者的不同之處：手指不是鼠標。這樣做得不到桌面應用程序中的像素精度，但是通過(guò)輕敲、輕彈和輕壓將開(kāi)啟一個(gè)豐富的新用戶(hù)交互模型。此外，iPhone 與用戶(hù)一起移動(dòng)并且通常用于有干擾的環(huán)境中，因此應用程序需要能夠快速容易地訪(fǎng)問(wèn)目標信息。
Apple 的 iPhone 人機接口指南（請參閱 參考資料）定義了三種類(lèi)型的 iPhone Web 內容。
- 與 iPhone 中的 Safari 兼容
- 可以正確顯示的任意類(lèi)型的 Web 頁(yè)面，即使頁(yè)面的一部分依賴(lài)于諸如 Adobe Flash 或 Java applet 之類(lèi)的不受支持的插件
- 最適于 iPhone 中的 Safari
- 為 iPhone 正確縮放內容并且不依賴(lài)于不受支持插件的 Web 頁(yè)面
- iPhone 應用程序
- 通過(guò)模擬 iPhone 界面外觀(guān)來(lái)模擬本機應用程序的 Web 頁(yè)面，并且在適當的時(shí)候，與諸如電話(huà)、電子郵件或 Google Maps 之類(lèi)的 iPhone 服務(wù)集成
標準 Javadoc 頁(yè)面屬于第一種類(lèi)型，與 iPhone 中的 Safari 兼容。這些頁(yè)面可以正確顯示，但是要求很好地處理輕壓和輕彈才能找到相關(guān)信息。iDoc 針對的是完整的 iPhone 應用程序。雖然不能與其他服務(wù)集成，但是 iDoc 的接口能夠在 iPhone 中很好地使用。
針對 iPhone 進(jìn)行開(kāi)發(fā)時(shí)，必須只關(guān)注 iPhone。應用程序應當快速地完成特定任務(wù)，不應該嘗試包括所有可能的功能。使用 iDoc，用戶(hù)必須找到關(guān)于 Java 類(lèi)的基本文檔，例如類(lèi)名、方法名、方法簽名和注釋。通過(guò)指向目標詳細信息頁(yè)面的三個(gè)導航級別顯示這些信息。
- 包導航
- 頂層包
- 類(lèi)導航
- 包內的類(lèi)、接口、異常和錯誤
- 類(lèi)細節導航
- 類(lèi)中的描述、字段、構造函數和方法
- 詳細信息頁(yè)面
- 注釋、簽名和參數
為了使 iDoc 保持整齊并且以任務(wù)為目的，需要省略一些傳統 Javadoc 功能。例如，不顯示包描述注釋。由于這些功能通常不包含有用信息（例如，acme.client 包含客戶(hù)機代碼），并且有時(shí)被同時(shí)省略，因此把它們從 iDoc 中移除并簡(jiǎn)化接口就顯得十分有意義。
要獲得三個(gè)導航級別，請使用邊對邊 (edge-to-edge) 列表。這是在本機 iPhone 應用程序中常用的構造，用于瀏覽聯(lián)系人、電子郵件和音樂(lè )。邊對邊列表將在 44 像素的等高行中顯示項，并且有助于在大量信息中滾動(dòng)查找。Apple 的 iPhone 人機接口指南 提供了構造邊對邊列表的規格，包括字體、字體大小和邊框間距。iUi 框架用 CSS 和 JavaScript 語(yǔ)言實(shí)現這些規格，允許您創(chuàng )建像本機 iPhone 組件那樣顯示的簡(jiǎn)單 HTML 列表。
清單 1 顯示了頁(yè)眉，以及 java.applet 和 java.rmi 包的前兩個(gè)導航級別。
清單 1. 帶有頁(yè)眉和前兩個(gè)導航級別的 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 包中導航接口、類(lèi)和異常
對于 iDoc 的目標詳細信息頁(yè)面，使用另一種 iPhone 構造：圓角矩形列表。這些列表對于分組信息十分有用，并且 iPhone 中的設置面板都使用這種列表。使用圓角矩形列表可以分隔方法簽名與參數及異常清單。在 V0.13 中，iUi 只支持將圓角矩形列表用于表單輸入；將其元素用于靜態(tài)文本將生成格式錯誤的塊。 使用定制的 iDoc.css 文件擴展這些 CSS（如清單 2 所示），以添加用于顯示帶有靜態(tài)文本的圓角矩形列表的 textRow 元素。
清單 2. 定制 textRow CSS 擴展以正確顯示靜態(tài)文本
/* 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 的一種構造方法的詳細信息頁(yè)面。
清單 3. 使用 textRow 元素的 HTML 詳細信息頁(yè)面
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 顯示了最終頁(yè)面。
圖 10. java.math.BigDecimal 中的構造函數的詳細視圖
擁有三個(gè)導航級別和目標詳細信息頁(yè)面后，UI 就完成了。iDoc 使用戶(hù)可以專(zhuān)注于具體任務(wù)。借助 iUi 框架和一些定制的 CSS，它看上去很像本機 iPhone 應用程序。
現在已經(jīng)設計了 UI，接下來(lái)需要編寫(xiě)代碼來(lái)生成 HTML 文件。創(chuàng )建一個(gè)插入到 Sun 的 javadoc 命令中的簡(jiǎn)單 doclet。我們的示例將使用標準 java.* 包，但是 iDoc 可以從任何源代碼生成 Javadoc。使用 OpenJDK 源代碼，因為它可以公開(kāi)獲得并且 GNU Public License (GPL) V2 許可證允許我們生成和發(fā)布其 Javadoc。
使用 iDoc，只需迭代包和類(lèi)并調用方法打印上述格式的靜態(tài) HTML 頁(yè)面。清單 4 顯示打印目標詳細信息頁(yè)面的方法。
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() 將處理類(lèi)描述、字段、構造函數和方法的輸出。后兩種類(lèi)型是 ExecutableMemberDoc 的子類(lèi)，因此打印關(guān)于其參數和已拋出異常的附加信息。
Aptana 的 iPhone Preview 模式將幫助調試輸出文件。在每次迭代后，您可以快速單擊該應用程序查找已設計界面中的不一致性。但是，使用 Preview 模式可以掩蓋性能問(wèn)題：現代計算機的運行速度比 iPhone 的 620-MHz ARM 處理器快三至五倍。此外，用戶(hù)經(jīng)常通過(guò)速度慢的蜂窩網(wǎng)絡(luò )下載頁(yè)面，因此必須用實(shí)際 iPhone 運行您的應用程序。
當我在 iPhone 中測試查看 iDoc 時(shí)，我發(fā)現輸出一個(gè)大型 HTML 文件將導致跳幀和性能下降。要解決此問(wèn)題，創(chuàng )建一個(gè)用于導航包名/類(lèi)名的主文件，然后為帶有注釋和方法細節的每個(gè)類(lèi)創(chuàng )建獨立文件（參見(jiàn)清單 5）。雖然此過(guò)程將生成大量文件，但是各個(gè)文件大小都非常小，并且應用程序運行得十分流暢。
清單 5. Doclet 代碼將迭代每個(gè)包，然后為每個(gè)類(lèi)創(chuàng )建文件
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(); |
在經(jīng)過(guò)該性能增強之后，就能運行 iDoc 了。為 OpenJDK 中的 51 個(gè) java.* 和 javax.* 包（表示 1,304 個(gè)類(lèi)）生成 Javadoc，然后把所有內容上傳到 Web 服務(wù)器中。這包括超過(guò) 16 MB 的文件，但是主要導航頁(yè)面只有 112 KB，并且每個(gè)單獨類(lèi)的詳細信息頁(yè)面平均為 13 KB。即使在使用 EDGE 網(wǎng)絡(luò )時(shí)，應用程序也能夠快速響應。如果您已經(jīng)擁有了 iPhone，請訪(fǎng)問(wèn) iDoc 站點(diǎn)（請參閱 參考資料）并嘗試使用，也可以下載 iDoc 來(lái)為您自己的代碼庫生成特定于 iPhone 的 Javadoc。圖 11 顯示了最終的應用程序。
圖 11. 用于 iPhone 的全部 51 個(gè)包的 Javadoc
可能對 iDoc 進(jìn)行的擴展包括支持顯示 Java 5 泛型，以及更智能地捕捉 Javadoc 注釋內的標記來(lái)實(shí)現頁(yè)面之間的鏈接。如果您有興趣添加 iDoc 的功能，則可以下載完整的源代碼.
2007 年 10 月，Steve Jobs 宣稱(chēng) Apple 將于 2008 年 2 月發(fā)布 iPhone SDK。詳細信息很少，因為這是在 2007 年 12 月編寫(xiě)的，但是 SDK 將允許您在不需要使用 Safari 的情況下創(chuàng )建能夠在 iPhone 上本機運行的應用程序。給定 iPhone 底層架構之后，開(kāi)發(fā)平臺很可能是類(lèi)似于 Mac OS X 的 Cocoa 和 Objective-C。Apple 主管人員的最新評論暗示第三方應用程序將需要接受某種類(lèi)型的認證過(guò)程。
通過(guò)在本機運行，需要高級動(dòng)畫(huà)、圖形和網(wǎng)絡(luò )訪(fǎng)問(wèn)的應用程序將從中獲益。不過(guò)，即使在發(fā)布了 SDK 之后，iPhone 的 Web 開(kāi)發(fā)仍會(huì )是一個(gè)吸引人的主題。Web 應用程序很容易創(chuàng )建和部署。諸如 Aptana 和 iUi 之類(lèi)的工具簡(jiǎn)化了開(kāi)發(fā)，并且能夠快速創(chuàng )建 Web 應用程序。正如 iDoc 所展示的，沒(méi)有必要等待 SDK 的發(fā)布：使用現有的工具，您可以創(chuàng )建具有本機界面外觀(guān)的全功能 iPhone Web 應用程序。
評論