Apple 的 iPhone 平台為開發人員提供了一個有趣的機會借助其小型的交互式觸摸屏iPhone 和 iPod Touch 在很短的時間內迅速吸引了數百萬用戶但是這種新穎的設計和專利平台給應用程序開發人員帶來了一系列新的挑戰想要在該平台上進行研究的開發人員必須創建模擬 iPhone 的本機界面外觀的 Web 應用程序
幸運的是使用一系列新的開源工具可以更輕松地完成這項工作Aptana 的針對 Eclipse 的 iPhone Development 插件可以生成特定於 iPhone 的項目並在可旋轉取景器中預覽應用程序Joe Hewitt 的 iUi層疊樣式表(Cascading Style SheetsCSS)和 JavaScript 框架包含模擬本機 iPhone 體驗的部件和頁面集
在本文中我們使用 Aptana 和 iUi 創建一個新應用程序針對 iPhone 的簡單 Javadoc 查看器首先設計一個在 iPhone 中浏覽 Javadoc 的用戶界面 (UI)然後創建用於從任何源代碼生成 Javadoc 頁面的定制 doclet在此過程中將描述針對 iPhone 的 UI 問題如何使用這些開源工具簡化開發和調試以及 iPhone 開發的未來趨勢
工具快速入門
首先安裝 Aptana 並下載 iUi
在 Eclipse V 中選擇 Help > Software Updates > Find and Install
選擇 Search for new features to install此窗口列出了可以從中下載插件的站點以及 Eclipse 預定義的插件
單擊 New Remote Site 將 Aptana 添加到此列表中並使用 URL 對其進行定義
從列表中選擇新定義的 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如圖 所示
圖 創建新 iPhone Project
圖 顯示了生成的項目其中包含簡單 iPhone 應用程序
圖 在 Eclipse 中生成的 iPhone Project
注意由 Aptana 的基本編輯器提供的突出顯示的語法它支持 HTMLCSS 和 JavaScript
iPhone Preview 模式和應用服務器
在文本編輯器的底部您將看到 SourceiPhone Preview 選項卡以及系統中安裝的所有浏覽器(例如Safari PreviewFirefox Preview)單擊 iPhone Preview 查看示例應用程序在 iPhone 中的外觀在浏覽器外部單擊可以旋轉電話單擊電話標題欄可以隱藏導航欄下面顯示了水平顯示的 iPhone Preview 模式
圖 iPhone Preview 模式下的水平視圖
使用 iPhone Preview 模式可以節省大量時間可以快速測試新設計想法並重復進行開發而無需離開計算機當應該在實際的 iPhone 上測試您的應用程序時Aptana 的內置應用服務器將十分有用單擊 Eclipse 工具欄中的 Run 圖標啟動服務器圖 顯示了在 Eclipse 中運行的應用服務器
圖 Aptana 的 iPhone Application Server 托管頁面並創建帶有 URL 的電子郵件
如果通過 WiFi 連接將 iPhone 連接到本地網絡則可以訪問服務器窗口中顯示的 URL單擊 Email this url 並向 iPhone 中的電子郵件帳戶發送一條消息這可以省去一個步驟單擊電子郵件中的鏈接應用程序將在 iPhone 的 Web 浏覽器中啟動
iUi 演示劇院清單 Web 應用程序
雖然 Aptana 的啟動應用程序包含特定於 iPhone 的 HTML 和 CSS 文件但是這些文件的功能有限一種更好的備用解決方案是使用 iUi 框架此框架擁有一組豐富的自定義部件和 JavaScript 效果可以精確地模擬本機 iPhone 界面
解壓縮已下載的 iUi 發行版 iuitar然後把文件復制到 Eclipse 的 iDoc Project 中圖 顯示了包含 iUi 的項目
圖 帶有 iUi 框架和示例項目的 iDoc 項目
iUi 的演示 Web 應用程序可以在上面展開的 samples 文件夾中找到其中包括音樂浏覽器劇院清單和類似 Digg 的站點使用 Aptana 的 iPhone Preview 模式我們可以在 Eclipse 中查看這些組件圖 顯示了劇院清單 Web 應用程序 (samples/theaters/l) 的搜索頁面
圖 iUi 的示例劇院清單 Web 應用程序
注意該演示與本機 iPhone 的界面外觀極為相似使用這些預打包的部件可以快速開發 iPhone Web 應用程序
設計 UI
在本例中將為 iPhone 創建一個名為 iDoc 的 Javadoc 查看器由 Sun Microsystems 的標准Javadoc 生成器創建的緊密 HTML 文件在台式機上一切正常但是在 iPhone 中卻很難導航和讀取iDoc 將生成 iPhone 支持的 Javadoc —— 非常適合於在地鐵中浏覽應用程序編程接口 (API) 或者讓合作的編程團隊中的觀察員幫助解決困難
iPhone 人機接口指南
在開始設計 iDoc 的 UI 之前一定要先了解 iPhone 開發與普通 Web 開發的不同之處圖 來自 Apple 的 iPhone Dev Center(請參閱 參考資料)很好地總結了兩者的不同之處手指不是鼠標這樣做得不到桌面應用程序中的像素精度但是通過輕敲輕彈和輕壓將開啟一個豐富的新用戶交互模型此外iPhone 與用戶一起移動並且通常用於有干擾的環境中因此應用程序需要能夠快速容易地訪問目標信息
圖 手指不是鼠標
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 功能例如不顯示包描述注釋由於這些功能通常不包含有用信息(例如acmeclient 包含客戶機代碼)並且有時被同時省略因此把它們從 iDoc 中移除並簡化接口就顯得十分有意義
要獲得三個導航級別請使用邊對邊 (edgetoedge) 列表這是在本機 iPhone 應用程序中常用的構造用於浏覽聯系人電子郵件和音樂邊對邊列表將在 像素的等高行中顯示項並且有助於在大量信息中滾動查找Apple 的 iPhone 人機接口指南 提供了構造邊對邊列表的規格包括字體字體大小和邊框間距iUi 框架用 CSS 和 JavaScript 語言實現這些規格允許您創建像本機 iPhone 組件那樣顯示的簡單 HTML 列表
清單 顯示了頁眉以及 javaapplet 和 javarmi 包的前兩個導航級別
清單 帶有頁眉和前兩個導航級別的 HTML 文檔
<!DOCTYPE html PUBLIC //WC//DTD XHTML Strict//EN
strictdtd>
<html xmlns=>
<head>
<title>iDoc</title>
<meta name=viewport content=width=; initialscale=;
maximumscale=;
userscalable=;/>
<style type=text/css media=screen>@import
iui/iuicss;</style>
<style type=text/css media=screen>@import
iDoccss;</style>
<script type=application/xjavascript
src=iui/iuijs></script>
</head>
<body onclick=consolelog(Hello eventtarget);>
<div class=toolbar>
<h id=pageTitle></h>
<a id=backButton class=button
#></a>
</div>
<ul id=home title=Packages selected=true>
<li><a #javaapplet>javaapplet</a></li>
<! more packages>
<li><a #javarmi>javarmi</a></li>
</ul>
<ul id=javaapplet title=javaapplet>
<li class=group>Interfaces</li>
<li><a >
AppletContext</a></li>
<li><a >
AppletStub</a></li>
<li><a >
AudioClip</a></li>
<li class=group>Classes</li>
<li><a >Applet
</a></li>
<li><a >
AccessibleApplet</a></li>
</ul>
<ul id=javarmi title=javarmi>
<li class=group>Interfaces</li>
<li><a >
Remote</a></li>
<li class=group>Classes</li>
<li><a >
MarshalledObject</a></li>
<li><a >
Naming</a></li>
<li><a >
RMISecurityManager</a></li>
<li class=group>Exceptions</li>
<li><a >
AccessException</a></li>
<li><a >
AlreadyBoundException</a></li>
<li><a >
ConnectException</a></li>
<li><a >
ConnectIOException</a></li>
<li><a >
MarshalException</a></li>
<li><a >
NoSuchObjectException</a></li>
<li><a >
NotBoundException</a></li>
<li><a >
RemoteException</a></li>
<li><a >
RMISecurityException</a></li>
<li><a >
ServerError</a></li>
<li><a >
ServerException</a></li>
<li><a >
ServerRuntimeException</a></li>
<li><a >
StubNotFoundException</a></li>
<li><a >
UnexpectedException</a></li>
<li><a >
UnknownHostException</a></li>
<li><a >
UnmarshalException</a></li>
</ul>
圖 顯示了使用邊對邊列表生成的頂層選擇包導航級別
圖 像導航本機 iPhone 應用程序一樣導航 Javadoc 包
圖 顯示了在 iPhone Preview 模式下顯示的最終的 javarmi 包
圖 在 javarmi 包中導航接口類和異常
對於 iDoc 的目標詳細信息頁面使用另一種 iPhone 構造圓角矩形列表這些列表對於分組信息十分有用並且 iPhone 中的設置面板都使用這種列表使用圓角矩形列表可以分隔方法簽名與參數及異常清單在 V 中iUi 只支持將圓角矩形列表用於表單輸入;將其元素用於靜態文本將生成格式錯誤的塊 使用定制的 iDoccss 文件擴展這些 CSS(如清單 所示)以添加用於顯示帶有靜態文本的圓角矩形列表的 textRow 元素
From:http://tw.wingwit.com/Article/program/Java/ky/201311/28483.html
