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

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

　　在本文中，我們使用 Aptana 和 iUi 創(chuàng)建一個(gè)新應(yīng)用程序：針對(duì) iPhone 的簡(jiǎn)單 Javadoc 查看器。首先，設(shè)計(jì)一個(gè)在 iPhone 中瀏覽 Javadoc 的用戶界面 (UI)，然后創(chuàng)建用于從任何源代碼生成 Javadoc 頁(yè)面的定制 doclet。在此過(guò)程中將描述針對(duì) iPhone 的 UI 問(wèn)題，如何使用這些開(kāi)源工具簡(jiǎn)化開(kāi)發(fā)和調(diào)試，以及 iPhone 開(kāi)發(fā)的未來(lái)趨勢(shì)。

　　工具快速入門

　　首先安裝 Aptana 并下載 iUi：

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

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

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

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

　　重新啟動(dòng) Eclipse。 

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

　　單擊主頁(yè)圖標(biāo)。將顯示 Aptana 功能的概覽。 

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

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

　　重新啟動(dòng) Eclipse。 

　　下載最新版本的 iUi。 

　　一切就緒之后，請(qǐng)使用 Eclipse 創(chuàng)建一個(gè)名為 iDoc 的新 iPhone Project，如圖 1 所示。

圖 1. 創(chuàng)建新 iPhone Project
 

　　圖 2 顯示了生成的項(xiàng)目，其中包含簡(jiǎn)單 iPhone 應(yīng)用程序。

圖 2. 在 Eclipse 中生成的 iPhone Project
 

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

　　iPhone Preview 模式和應(yīng)用服務(wù)器

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

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

　　使用 iPhone Preview 模式可以節(jié)省大量時(shí)間：可以快速測(cè)試新設(shè)計(jì)想法并重復(fù)進(jìn)行開(kāi)發(fā)而無(wú)需離開(kāi)計(jì)算機(jī)。當(dāng)應(yīng)該在實(shí)際的 iPhone 上測(cè)試您的應(yīng)用程序時(shí)，Aptana 的內(nèi)置應(yīng)用服務(wù)器將十分有用。單擊 Eclipse 工具欄中的 Run 圖標(biāo)啟動(dòng)服務(wù)器。圖 4 顯示了在 Eclipse 中運(yùn)行的應(yīng)用服務(wù)器。

圖 4. Aptana 的 iPhone Application Server 托管頁(yè)面并創(chuàng)建帶有 URL 的電子郵件
 

　　如果通過(guò) WiFi 連接將 iPhone 連接到本地網(wǎng)絡(luò)，則可以訪問(wèn)服務(wù)器窗口中顯示的 URL。單擊 E-mail this url 并向 iPhone 中的電子郵件帳戶發(fā)送一條消息，這可以省去一個(gè)步驟。單擊電子郵件中的鏈接，應(yīng)用程序?qū)⒃?iPhone 的 Web 瀏覽器中啟動(dòng)。

　　iUi 演示：劇院清單 Web 應(yīng)用程序

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

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

圖 5. 帶有 iUi 框架和示例項(xiàng)目的 iDoc 項(xiàng)目
 

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

圖 6. iUi 的示例劇院清單 Web 應(yīng)用程序
 

　　注意，該演示與本機(jī) iPhone 的界面外觀極為相似。使用這些預(yù)打包的部件可以快速開(kāi)發(fā) iPhone Web 應(yīng)用程序。

　　設(shè)計(jì) UI

　　在本例中，將為 iPhone 創(chuàng)建一個(gè)名為 iDoc 的 Javadoc 查看器。由 Sun Microsystems 的標(biāo)準(zhǔn) Javadoc 生成器創(chuàng)建的緊密 HTML 文件在臺(tái)式機(jī)上一切正常，但是在 iPhone 中卻很難導(dǎo)航和讀取。iDoc 將生成 iPhone 支持的 Javadoc —— 非常適合于在地鐵中瀏覽應(yīng)用程序編程接口 (API) 或者讓合作的編程團(tuán)隊(duì)中的觀察員幫助解決困難。

　　iPhone 人機(jī)接口指南

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

圖 7. 手指不是鼠標(biāo)
 

　　Apple 的 iPhone 人機(jī)接口指南（請(qǐng)參閱 參考資料）定義了三種類型的 iPhone Web 內(nèi)容。

　　與 iPhone 中的 Safari 兼容 

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

　　最適于 iPhone 中的 Safari 

　　為 iPhone 正確縮放內(nèi)容并且不依賴于不受支持插件的 Web 頁(yè)面

　　通過(guò)模擬 iPhone 界面外觀來(lái)模擬本機(jī)應(yīng)用程序的 Web 頁(yè)面，并且在適當(dāng)?shù)臅r(shí)候，與諸如電話、電子郵件或 Google Maps 之類的 iPhone 服務(wù)集成 

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