用Eclipse開發iPhone Web應用程序

 Apple 的 iPhone 平臺爲開發人員提供了一個有趣的機會。藉助其小型的交互式觸摸屏,iPhone 和 iPod Touch 在很短的時間內迅速吸引了數百萬用戶。

 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 對其進行定義。

  從列表中選擇新定義的 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 中很好地使用。

 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"

 

   <html xmlns=>

  <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 οnclick="console.log('Hello', event.target);">

   <div class="toolbar">

     <h1 id="pageTitle"></h1>

     <a id="backButton" class="button"

        href="#"></a>

 

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

 

         AppletStub</a></li>

 

         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>

 

         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 */

     position: relative;

    border-bottom: 1px solid #999999;

    -webkit-border-radius: 0;

    text-align: right;

  }

     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">

         <div class="textRow"><p><b>

           public BigDecimal(long, MathContext)</b></p></div>

        <div class="textRow"><p>Translates a

           <code>long</code> into a

        <code>BigDecimal</code>, with rounding according to the context settings.

        The scale of the <code>BigDecimal</code>, before any rounding, is zero.

     <h2>Parameters</h2>

         <div class="textRow"><p><b>long val

           </b>: <code>long</code> value to be converted

         to <code>BigDecimal</code>.</p></div>

        <div class="textRow"><p><b>MathContext mc

           </b>: the context to use.</p></div>

    <h2>Throws</h2>

         <div class="textRow"><p><b>ArithmeticException

           </b>: if the result is inexact but

    the rounding mode is <code>UNNECESSARY</code>.</p></div>

   </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; i<field.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; i<field.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; i<packages.length; i++) {

    printPackageDetail(p, packages[i]);

  }

  for (int i=0; i<packages.length; i++) {

    ClassDoc[] classes = packages[i].allClasses();

    Arrays.sort(classes);

    for (int j=0; j<classes.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 應用程序


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章