Dojo Mobile 1.7入門

最新版的移動 Web 開發框架 Dojo Mobile 1.7,是 Dojo Toolkit 的一個擴展。本文將使您瞭解如何從主幹網址下載 Dojo 1.7,以及如何在您的應用程序中使用 Dojo Mobile。您還將探索它提供的各種小部件和組件,學習如何使用 PhoneGap 將 Web 應用程序包裝在原生應用程序中。

簡介

移動 Web 使用量正呈指數型增長。隨着更多的人習慣於使用智能手機或其他移動設備瀏覽 Web,針對那些爲了實現移動版本而進行優化的網站和 Web 應用程序的需求在增加。由於平臺數量越來越多(iOS、Android、Blackberry OS、webOS、Windows Phone、Symbian、Bada 等),很難開發針對多個移動操作系統的原生應用程序。

因此,人們迫切需要開發移動 Web 應用程序的工具包。幾個主要的 JavaScript 框架(Dojo、jQuery 和 Sencha)很快提供了完全感知觸摸屏的框架。通過與 PhoneGap 等原生編譯工具包相結合使用,這些框架可以爲原生開發提供出色的替代方法。Web 開發人員可以使用他們已熟悉的語言和框架構建原生應用程序,然後相對容易地將這些應用程序部署到許多平臺上。

在本文中,我們將瞭解 Dojo Mobile,它是 Dojo Toolkit 的擴展。我們會先研究移動 Web 與原生應用程序之間的區別,然後通過示例瞭解如何在應用程序中包含和使用 Dojo Mobile 小部件。還要了解如何使用 PhoneGap 構建原生應用程序。您可以 下載 本文中使用的源代碼。

移動 Web 與原生應用程序

關於使用原生平臺還是使用 Web 平臺開發移動應用程序的爭論可能會持續很長一段時間。這兩種方法各有優缺點。在許多情況下,應該根據應用程序需求和個人偏好來選擇。

爲什麼要編寫原生應用程序而不是使用移動 Web ?表 1 總結了編寫原生應用程序的一些優點和缺點。

優點 缺點
  • 代碼更快,可以直接在設備的操作系統上運行,不需要中間的瀏覽器應用程序。

  • 可以部署到應用程序商店中,這提供了簡單且經濟有效的分發模型。

  • 原生 SDK 有許多設備特有的特性,通常有詳細的文檔說明和示例。

  • 由於各個平臺 SDK 中的編程語言和 API 存在一些差異,所以需要針對不同的設備要求完全分隔同一應用程序的各個版本。

  • 通過應用程序商店部署原生應用程序通常需要第三方批准,這會顯著降低將應用程序投放市場的速度(尤其在應用程序遭到拒絕的時候)。

  • 發佈更新(即使是很小的更新)需要經過批准過程,這讓向用戶交付關鍵的更新變得更困難。


表 2 總結了移動 Web 應用程序的優點和缺點。

優點 缺點
  • 只需編寫一個應用程序,即可部署到多個平臺。不需要爲不同的設備編寫不同的版本。

  • 可以通過 Web 部署應用程序,不需要第三方應用程序商店。

  • 您可以獲得應用程序產生的所有收入(如果收費的話)。

  • 對於通過 Web 分發的應用程序,如果通過瀏覽器使用它們,則無法像原生應用程序那樣使用許多設備特性(相機、麥克風等),儘管這個限制以後可能會有所改變。

  • 您需要提供用於分發應用程序的基礎架構,這比使用應用程序商店更困難、成本更高。

  • 因爲應用程序在瀏覽器中運行,而不是通過操作系統執行,所以應用程序的運行速度不如相應的原生應用程序。


幸運的是,有一個折中方法可以同時提供移動 Web 和原生方式的優勢。可以使用 PhoneGap 等平臺將移動 Web 應用程序包裝在原生包裝器中,這提供了 JavaScript API,使您能夠訪問原生設備 API。還可以將 Web 應用程序作爲原生應用程序部署到各個應用程序商店。有關的詳細信息,請參閱 用 PhoneGap 進行原生部署

Dojo Mobile 概述

Dojo Mobile 是 Dojo Toolkit 的擴展,它提供了一系列在移動設備(比如智能手機或平板電腦)上使用而優化的小部件或組件。這些組件基於相應的原生組件,爲熟悉智能手機應用程序的用戶提 供了熟悉的界面。可以使用主題定製這些組件,例如可以向 iOS 用戶而不是 Android 用戶提供不同的樣式集。

Dojo Mobile 的使用方式與 Dijit 組件庫類似。要想在應用程序中使用某種小部件,首先需要在應用程序的主 JavaScript 塊中使用dojo.require加載相關的類。然後可以在應用程序中添加這種小部件,既可以使用帶dojoType屬性的常規 HTML 標記以聲明的方式添加小部件,也可以使用 JavaScript 代碼通過程序添加小部件。

Dojo Mobile 在 iOS、Android 和 BlackBerry OS 6 設備上表現很好,這主要是因爲在這些平臺上有 WebKit 瀏覽器。這一優勢在提供了比較完善的 WebKit 瀏覽器的其他平臺(比如 HP webOS 及其他設備)上也能發揮很好的效果。在非 WebKit 瀏覽器上,Dojo Mobile 應用程序會優雅地使用替代方法,它們甚至可以在老式的桌面瀏覽器中運行(包括 Microsoft® Internet Explorer)。在默認情況下,只提供了 CSS3 樣式,但是,只需使用一行代碼,就可以爲非 WebKit 瀏覽器添加兼容性模塊:

Dojo Mobile 的關鍵特性包括:
  • 由於使用 Dojo Mobile 解析器,實現了小部件的輕量加載。

  • CSS3 動畫和漸變,可以在高端 iOS 和 Android 設備上產生與原生應用程序相似的體驗。

  • 包含提供 iOS、Android 和 BlackBerry 外觀的主題。

  • 能夠與非 CSS3 兼容的設備和瀏覽器進行兼容。

  • 完全聲明式的語法,便於學習。

  • 一個龐大的 UI 小部件和組件套件,提供了針對移動友好的界面的豐富內容

下一節通過構建 “Hello, World” 應用程序解釋如何開始使用 Dojo Mobile。

Dojo Mobile 1.7 入門

在編寫本文時,Dojo 的最新的穩定版本是 1.6.1。要立即開始使用 Dojo Mobile 1.7,則需要從一個 Subversion 存儲庫中下載 Dojo Toolkit 最新的版本。svn 命令行工具通常已預先安裝在 Mac OS X 和 Linux® 操作系統上。如果使用 Windows®,那麼您可能需要先下載和安裝這些工具。有關的更多信息,請訪問 Subversion 站點。

假設您已經安裝了 Subversion,並且正在使用基於命令行的工具,那麼您可使用以下命令遷出最新的 Dojo 版本。該命令會下載完整的 Dojo Toolkit 源代碼,所以預計會花一段時間。

當完成遷出後,您將在一個名爲 dojo-toolkit-readonly 的新目錄中擁有 Dojo Toolkit 的完整源代碼。將此目錄複製或移動到您 Web 服務器上的一個位置,以便您能夠在 HTML 文檔中使用它。將它重命名爲更短的名稱,比如 dojo-toolkit,然後就可以開始使用 Dojo 了。

如果願意的話,可以僅下載您想要的 Dojo Toolkit 部分。一些人發現首先下載完整版本,然後丟棄不需要的部分更容易一些。Dojo 的源代碼沒有壓縮且比較大,所以不建議在生產應用程序中使用它。

清單 1 給出了 Dojo 應用程序的基本結構。Dojo Mobile 1.7 中新增了deviceTheme類,它將自動確定要爲您使用的設備加載的準確主題。您無需檢測用戶的瀏覽器並提供相關的 CSS 文件。

當完成遷出後,您將在一個名爲 dojo-toolkit-readonly 的新目錄中擁有 Dojo Toolkit 的完整源代碼。將此目錄複製或移動到您 Web 服務器上的一個位置,以便您能夠在 HTML 文檔中使用它。將它重命名爲更短的名稱,比如 dojo-toolkit,然後就可以開始使用 Dojo 了。 如果願意的話,可以僅下載您想要的 Dojo Toolkit 部分。一些人發現首先下載完整版本,然後丟棄不需要的部分更容易一些。Dojo 的源代碼沒有壓縮且比較大,所以不建議在生產應用程序中使用它。請參閱 參考資料,瞭解有關創建自定義 Dojo 構建版本來提升 Dojo 應用程序性能的信息。

清單 1 給出了 Dojo 應用程序的基本結構。

如果將清單 1 中的代碼保存到文件中,在 Web 瀏覽器中打開此文件,將會看到一個灰色背景,再沒有任何內容。這沒什麼用,所以讓我們在應用程序中添加一些內容。本文中的示例使用了非標準的 Dojo Mobile 類,所以需要用dojo.require加載它們。在dojo.require("dojox.mobile");行的後面,添加清單 2 所示的代碼。

人工加載 Dojo Mobile 類

現在,可以添加 "Hello World" 應用程序的主要代碼。本文中的示例使用了 Dojo Mobile 的聲明式語法,這意味着要使用帶特殊 Dojo Mobile 屬性的常規 HTML 標記,在運行時解析 Dojo Mobile 屬性。在代碼的<body>部分中,添加清單 3 中的代碼。

上述代碼定義了一個ScrollableView,它構成主要的應用程序界面。標準的View類與ScrollableView類之間的主要差異是:標準的View使用標準的瀏覽器機制來滾動頁面。ScrollableView類有自己的滾動機制,可以像原生應用程序一樣固定應用程序中的頁眉和頁腳,滾動它們之間的內容。

在ScrollableView中有一個Heading,它是包含文本 “Hello, World” 的標題欄。通過在這個對象上設置屬性fixed="top",Dojo Mobile 會將這個標題一直留在屏幕頂部,滾動它下面的其他內容。RoundRectCategory對象爲圓形的列表或單一列表項定義了一個組標題。第一個類別後面是一個RoundRect框,其中包含一些靜態文本。然後是另一個類別標題和RoundRectList對象,該對象包含一系列ListItem對象。最終結果應該像圖 1 這樣。

圖 1. Hello World 應用程序
Dojo Mobile 1.7 入門

下一節將討論可以在 Dojo Mobile 1.7 中使用各種小部件和組件。

小部件

Dojo Mobile 附帶了許多小部件,它們是專門針對移動設備而設計和優化的。這些小部件包括佈局組件(視圖)、列表、導航欄、標籤欄、按鈕和表單。本節將介紹許多小部件的 作用並提供基本代碼示例。本節中的屏幕圖取自使用 iPhone 主題的 iOS 設備,如果使用 Android 主題,屏幕會有差異。

View

View是一個容器小部件,它佔據設備屏幕上的所有可用空間。應用程序的頁面可以包含多個View對象,但只有其中的一個對象在任何時候都處於活躍狀態。用戶通常可以使用工具欄按鈕和標籤欄按鈕在不同的視圖之間切換,在視圖之間移動時,可以獲得各種漸變效果。圖 2 顯示了一個空的View示例。

Dojo Mobile 1.7 入門

使用 Dojo 基本 SDK 中的dojox.mobile.View類創建View對象。不需要使用dojo.require加載它。在使用View對象時,可以使用 selected 屬性決定是否在啓動應用程序時顯示這個視圖(啓動視圖)。以聲明方式創建以上 View 需要使用以下代碼。

也可以使用 JavaScript 以程序方式創建View。清單 4 給出使用這種方法創建圖 2 中的View的代碼。

清單 4 假設在 HTML 中有一個塊元素,其id屬性值是myView。它在 DOM 中將一個View對象綁定到這個元素。

後面對小部件的討論涉及如何僅以聲明方式使用它們。關於如何用程序語法使用 Dojo Mobile 小部件的更多信息,請查閱 Dojo API

ScrollableView

ScrollableView小部件與View小部件相似:被用作放置其他小部件的容器。主要區別是,對於ScrollableView,如果內容超過屏幕的高度,用戶可以通過觸摸屏幕並上下滾動內容(如果使用水平滾動,就是左右移動),而頁眉和頁腳對象保持不動。如果使用標準的View對象,會滾動整個屏幕,頁眉和頁腳不會留在固定的位置。圖 3 顯示了一個示例。

Dojo Mobile 1.7 入門

創建空的ScrollableView對象與創建空的View對象非常相似。創建空的ScrollableView的代碼是:

建議希望在視圖中添加固定的頁眉或頁腳時使用ScrollableView,否則,應該使用常規的View類。

與常規的View類不同,基本類中不包含ScrollableView,所以需要使用dojo.require加載它。

SwapView(以前爲FlippableView)

SwapView小部件以前名爲FlippableView,在 Dojo Mobile 1.7 中已不推薦使用。SwapView可以創建一個容器對象,可以通過觸碰屏幕左右邊切換爲其他SwapView對象。視圖的次序取決於它們在代碼中的次序。圖 4 顯示一個SwapView小部件。

Dojo Mobile 1.7 入門

如果希望創建一個包含兩個視圖的示例FlippableView,可以使用清單 5 中的代碼。如果使用了 Dojo 1.7,則需要將FlippableView更改爲SwapView。

基本類中不包含SwapView,需要使用dojo.require加載它。

Heading

Heading小部件可以創建導航欄,導航欄出現在應用程序的頂部。Heading對象通常包含一個標題。您還可以在導航欄中添加導航元素(比如 Back 按鈕)或工具欄按鈕,以便提供簡便的應用程序導航。

如果在ScrollableView容器中使用Heading,Heading小部件會固定在應用程序的頂部,而應用程序的其餘部分會滾動。這讓用戶一直可以使用導航元素。圖 5 顯示了一個Heading對象示例,該示例包括標題、Back 按鈕和工具欄按鈕。

Dojo Mobile 1.7 入門

清單 6 給出了創建圖 5 中的Heading小部件的代碼。

您可能會注意到,Back 按鈕實際上是在Heading元素中定義的。back屬性定義了應該在按鈕中顯示的文本。moveTo屬性應該包含當用戶按 Back 按鈕時激活的View對象的 ID。還可以使用 transition 屬性定義以這種方式導航到另一個視圖時產生的漸變效果。默認設置是 slide,其他選項包括 fade、flip 和 none。

可以使用ToolBarButton小部件定義其他導航按鈕。如果希望獲得採用與左邊的 Back 按鈕樣式不同的按鈕,或者希望在右邊顯示按鈕,只需在Heading元素中添加ToolBarButton對象。

RoundRect

RoundRect類可以創建簡單的圓角容器,可以在其中放置靜態 HTML 或其他 Dojo Mobile 小部件。圖 6 顯示了RoundRect小部件的示例。

Dojo Mobile 1.7 入門

要想創建圖 6 中的RoundRect對象,可以使用清單 7 所示的語法。

RoundRect類非常簡單。它只接受一個屬性shadow,默認情況下被設置爲 false。這個屬性只定義容器是否應有陰影。

RoundRectCategory和RoundRectList

在移動設備上顯示數據時,列表非常重要。可以使用垂直的表格結構顯示一系列列表項。可以使用列表項顯示導航或其他信息。Dojo Mobile 允許創建兩種列表,它們都有相關聯的類別小部件。RoundRectList創建列表的兩邊有間隙,在第一個和最後一個列表項上有圓角。圖 7 顯示在 iPhone 上看到的RoundRectCategory和RoundRectList。

Dojo Mobile 1.7 入門

這個示例定義了一個RoundRectCategory,其中包含標籤 “List Heading” 以及一個包含三個ListItem對象的RoundRectList對象。清單 8 給出創建這些小部件的代碼。

EdgeToEdgeCategory和EdgeToEdgeList

EdgeToEdgeList與RoundRectList很相似。可以採用完全相同的方式使用EdgeToEdgeList,但是它創建的列表會佔據視圖的整個寬度。圖 8 給出一個示例。

Dojo Mobile 1.7 入門

EdgeToEdgeList的代碼幾乎與前一個示例完全相同,只是RoundRect的引用替換成了EdgeToEdge,參見清單 9。

通常使用上面的列表顯示人名列表,人名一般按姓氏的第一個字母分組。

IconContainer

可以使用IconContainer小部件定義一系列圖標,每當觸碰圖標時,都會打開一個單獨的容器。IconItem對象可以從嵌套在自身中的容器(在同一視圖上)中滑出,也可以把當前使用的View切換爲具有特定 ID 的視圖。圖 9 顯示一個包含三個圖標的IconContainer。

Dojo Mobile 1.7 入門

使用清單 10 所示的代碼創建上面的IconContainer。

in _base.js 中不包含IconContainer類,所以需要使用dojo.require加載它。但是,IconItem不是這樣,所以不需要人工加載它,否則在運行應用程序時會出現錯誤。

還有更多關於這些小部件的詳細信息,但它們超出了本文的討論範圍。請通過 參考資料 中的鏈接進一步瞭解 Dojo Mobile Showcase 和 API。

Button

可以使用Button類創建簡單的按鈕對象。然後,可以使用dojo.connect在這個小部件上創建處理 “click" 等事件的代碼。圖 10 給出一個示例。

Dojo Mobile 1.7 入門

創建這個按鈕的代碼很簡單,參見清單 11。

可以使用 CSS 自行創建新的按鈕風格,使用 class 屬性把類名分配給按鈕。如果使用過 Dojo Mobile 1.6,請注意 1.7 版本中對Button類進行的以下更改。

  • 它不再包含在 _base.js 中,因此您需要使用dojo.require明確加載Button類(本文前面的示例就是這麼做的)。

  • 使用 class 屬性把一個類名分配給按鈕,而不是像以前一樣使用btnClass屬性。如果嘗試在 1.7 版本中使用btnClass,您可能會發現按鈕的外觀與預期不符。

Switch

Switch對象是一個開關控件,可以在兩個值之間切換對象的值。在默認情況下,該值是 ON 或 OFF。改變開關值的方法是,觸碰希望切換到的值,或者將開關滑動到目標值。圖 11 給出Switch小部件的示例,其中有兩個開關:一個在 OFF 位置上,另一個在 ON 位置上。

Dojo Mobile 1.7 入門

下面的代碼創建一個Switch對象。

Switch小部件還接受另外兩個屬性leftLabel和rightLabel,它們分別定義在開和關狀態下應顯示的值。在默認情況下,標籤是 ON 和 OFF。當改變Switch的值時,會觸發onStateChanged事件。可以使用dojo.connect處理這個事件。

TabBar

TabBar小部件用於在觸碰TabBarButton時激活或取消激活視圖,從而將View對象換入或換出應用程序。TabBar小部件可以使用iconBase屬性定義圖像 sprite,在每個TabBarButton中顯示不同的圖標。當使用TabBar作爲應用程序底部的導航組件時,這樣做的效果很好,參見圖 12。

Dojo Mobile 1.7 入門

還可以使用TabBar組件和segmentedControl的barType屬性。這樣創建的標籤欄通常適合放在應用程序頂部的主Heading小部件下面。圖 13 給出這種TabBar的示例。

Dojo Mobile 1.7 入門

清單 12 中顯示了創建圖 13 中的TabBar的代碼。

您必須使用dojo.require明確加載TabBar類,否則會獲得一些令人費解的錯誤消息。但是,TabBarButton類不需要明確加載。

TabBarButton類有許多配置選項,可以用它們定製按鈕的外觀。可以指定圖標的位置、應該使用的圖標、改變視圖時使用的漸變、完成漸變時觸發的回調函數等。有關的更多信息,請參見 Dojo API

Carousel

Carousel小部件是 Dojo 1.7 中新增的部件,可用於創建旋轉式圖像庫,您可以滑動手指或使用導航控制小部件來旋轉它。圖 14 顯示了Carousel小部件的一個示例。

Dojo Mobile 1.7 入門

要使用Carousel組件,必須定義一個ItemFileReadStore對象作爲存儲器,其中包含一系列圖像。例如,清單 13 給出了在您的 JavaScript 代碼塊中定義的一個 JSON 對象。

然後可以定義一個ItemFileReadStore對象和 carousel 本身,如清單 14 所示。

清單 14 中的代碼可用來創建一個類似於 圖 14 的相冊Carousel。numVisible屬性定義了一次顯示多少幅圖像。

SpinWheel

SpinWheel組件是一個小部件,可使用它從旋轉界面中選擇值。iPhone 用戶應對自旋式日期選取器組件和類似的控件很熟悉。SpinWheel組件可用於創建自定義的轉輪。或者可以分別使用SpinWheelDatePicker或SpinWheelTimePicker創建日期和時間選取器。圖 15 顯示了這兩個小部件。

Dojo Mobile 1.7 入門

創建SpinWheelDatePicker和SpinWheelTimePicker很簡單。這兩個小部件默認情況下均未包含在基礎框架中,所以必須明確加載相關的類dojox.mobile.SpinWheelDatePicker和dojox.mobile.SpinWheelTimePicker。沒有比實際創建選取器更簡單的方法了。清單 15 中的代碼將分別使用 ID spin1 和 spin2 創建一個日期選取器和時間選取器。

當然,除非可以讀取每個轉輪上的值,否則SpinWheels沒有多大用處。要獲取日期選取器中第一個轉輪的當前值,只需使用 slots 屬性和getValue函數,如下所示。

可使用SpinWheel和SpinWheelslot 類創建一個自定義主題。輪槽 (wheel slot) 可包含文本和圖像,所以它們是高度可定製的。有關的更多信息,請參閱 Dojo Mobile 開發人員測試

用 PhoneGap 進行原生部署

通過移動 Web 部署應用程序變得越來越流行。隨着移動瀏覽器的改進和 HTML5 的發展,移動 Web 會成爲移動應用程序的更強大的分發方式。但是,在許多情況下,人們希望將應用程序以原生方式部署到相關平臺的應用程序商店。現在,不必使用每個平臺的原生 SDK 開發應用程序的不同版本,而是可以使用 PhoneGap 將移動 Web 應用程序包裝在原生包中。

PhoneGap 是一個開源項目,可以在任何應用程序中免費使用,無論應用程序採用什麼分發模型(免費、商業、開源或混合式許可證)。PhoneGap 本身採用的是 MIT 和 BSD 開源許可證。您可以選擇最適合自己的許可證。

PhoneGap 包含爲六種平臺構建原生應用程序的 SDK:iOS、Android、Blackberry、webOS、Windows Mobile 和 Symbian。開始使用 PhoneGap 的步驟因平臺而異。這一節會介紹如何將它部署到 iOS 上。

我們來創建一個非常基礎的 Dojo 應用程序,使用 PhoneGap 在 iOS 設備上以原生方式運行。爲了構建原生的 iOS 應用程序,需要包含 OS X 10.6 Snow Leopard 和 Xcode 的 Mac 計算機。可以從 Apple 的 Developer Center 或 Mac App Store 下載 Xcode。一定要下載 iOS SDK,否則無法構建 iOS 應用程序。

假設已經安裝了 Xcode 和 iOS SDK:

  1. 下載 PhoneGap 的最新版本(一個 zip 文件)。

  2. 提取並打開這個文件中的 iOS 目錄。您將會看到名爲 PhoneGapLibInstaller.pkg 的包。

  3. 啓動 PhoneGapLibInstaller.pkg,將 PhoneGap 安裝到 Xcode 中。

  4. 安裝程序運行結束時,啓動 Xcode 並創建一個新項目。

  5. 在左邊的項目類型組中,選擇 User Templates 組下面的 PhoneGap(參見圖 16),然後在右邊選擇 PhoneGap-based Application

  6. 單擊 Choose,指定項目的名稱(這個示例命名爲 “HelloNative”)。

Dojo Mobile 1.7 入門

在 Xcode 中的 Groups & Files 部分,通常在窗口的左側展開 “www” 文件夾。在該文件夾中,需要放入在本文開頭從 Subversion 遷出 Dojo 1.7 時創建的 dojo-toolkit 目錄。在開發應用程序過程中,通常會構建一個自定義的 Dojo 包並僅包含所需的文件。

在 Dojo 1.7 中不能刪除 dijit 子目錄(像 Dojo 1.6 中一樣),因爲最新版本中有一些 Dijit 類的依賴關係。如果希望精減應用程序的大小,則應該創建一個自定義的 Dojo 構建版本,這可以確保您不會刪除任何依賴關係。

如果嘗試將 dojo-toolkit 文件夾拖放到 www 文件夾中,您會發現這不起作用。您需要在 Finder 中雙擊 www 文件夾來打開它,然後將 dojo-toolkit 文件夾複製到 www 文件夾中。該文件夾可能不會立即顯示在 Xcode 中,所以可以摺疊並展開 www 文件夾來刷新視圖。藉助 PhoneGap 中包含的 Dojo 1.7,您可以繼續構建應用程序本身。

打開 index.html 文件。該文件中的代碼應該類似於清單 16。

現在,我們要構建與 “Hello, World” 應用程序功能相同的原生應用程序。第一步是包含 Dojo 本身。在 index.html 中找到以下行: 在這一行下面,添加清單 17 中的以下代碼。

清單 17 中的代碼會根據需要加載 Dojo 的 CSS 和 JavaScript 文件。在此代碼下方,應該有一個內聯的<script>代碼塊。在這裏添加清單 18 中的代碼,以加載相關的 Dojo 類。

清單 18 中的代碼會加載 Dojo Mobile 解析器和基類,以及ScrollableView容器小部件。在本例中無需兼容層,因爲目標設備 iOS 肯定會使用 WebKit。

找到 JavaScript 函數onDeviceReady。在註釋 “do your thing!” 下方,刪除以下代碼,確保不會在每次運行應用程序時獲得一個警告對話框:

最後需要加載的代碼(如清單 19 所示)是小部件本身。將以下代碼添加到 index.html 中的開始和結束<body>元素之間,刪除 PhoneGap 添加的默認代碼。 保存 index.html 文件 ( File -> Save),確保將 Xcode 左上角的 Overview 工具欄選項設置爲 Simulator 目標。現在可以使用 Build and Run ( Build -> Build and Run) 來啓動應用程序。Xcode 會花費一些時間來啓動 iOS Simulator 應用程序。在此之後,您的原生 Dojo 應用程序應該會啓動。您可能會注意到,在屏幕的底部沒有 Safari 工具欄,而且應用程序佔據了整個設備屏幕,參見圖 17。

Dojo Mobile 1.7 入門

如果通過在模擬的 iPhone 上選擇 Home 退出應用程序,應用程序在設備的主屏幕上顯示爲默認的 PhoneGap 應用程序圖標和名稱HelloNative,參見圖 18。

Dojo Mobile 1.7 入門

如果在模擬器中打開另一個應用程序(比如 Safari 或 Contacts),兩次觸碰 Home 按鈕,會打開 iOS Multi-tasking 菜單。您會再次看到自己的應用程序的圖標,可以在其他應用程序和自己的應用程序之間快速輕鬆地切換。

部署到其他平臺的過程通常與這裏描述的一樣簡單,但是將應用程序部署到 Android 可能需要做一些調整。可以在 PhoneGap 網站上找到您需要的所有信息。如果計劃分發應用程序,或者您應用程序二進制文件偏大,請記得創建一個自定義 Dojo 構建版本。

結束語

移動 Web 應用程序正在快速發展,它會成爲原生移動應用程序開發的合理的、強大的替代方法。在本文中,我們瞭解了 Dojo Mobile 這樣的移動 HTML5 框架如何提高開發過程的價值,簡化爲移動設備設計 UI 組件和小部件的繁瑣工作。Dojo Mobile 甚至爲不同類型的設備提供了不同的主題。

構建移動 Web 應用程序之後,可以使用表現出色的 PhoneGap SDK 將應用程序以原生方式部署到多個目標平臺上。甚至可以利用相機和麥克風等原生設備特性。移動 Web 的未來不僅非常光明,而且就在眼前。

轉自:http://www.open-open.com/lib/view/open1355831701916.html

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