下載代碼示例

這篇文章介紹 Apache 科爾多瓦，創建使用 HTML5 和 JavaScript，跨平臺移動應用程序的框架，并顯示了如何使用它為 Windows Phone 開發應用程序。

Windows Phone 和其本機開發平臺允許您輕松地創建美麗地鐵樣式的應用程序。?最近諾基亞的伙伴關系，與 Windows Phone 開始越來越多口袋找到出路。

最近的數據發表的研究公司 Gartner Inc.?預測微軟操作系統的一個充滿希望的未來 (bit.ly/h5Ic32），具有重大的市場零碎的市場份額。?如果您正在開發一個智能手機的應用程序，此市場碎片意味著您必須選擇哪些目標或寫入多次使用的語言范圍很廣的同一應用程序的操作系統，這些電話，要么要求 （C#、 Java 和目標 C）。

然而，有另一種方式。?所有這些智能手機有很強的瀏覽器，在很多方面更有能力桌面同行，其中一些人仍用古老的瀏覽器 ！?現代智能手機允許您創建使用 HTML5、 JavaScript 和 CSS 的組合在瀏覽器中運行的應用程序。這些技術可以有可能編寫跨多種不同的智能手機設備運行單個基于瀏覽器的應用。

引入 Apache 科爾多瓦

您可以創建基于 HTML5 的移動應用程序通過 JavaScript 和 HTML5 內容創建公共 Web 頁并將用戶引導到宿主的 URL。?然而，有幾個使用這種方法的問題。?第一是通過在線市場和商店的分布模式。?您不能提交的 URL，那么如何你可以盈利它承載你到市場上的 Web 應用程序？?第二個問題是如何訪問手機的硬件。?沒有得到廣泛支持的瀏覽器 Api，用于訪問電話聯系人、 通知、 照相機、 傳感器等。?Apache 科爾多瓦 （以下簡稱為簡潔起見只是科爾多瓦) 是一個自由和開放源碼框架，解決了這兩個問題。

科爾多瓦生命始于 PhoneGap，這由 Nitobi 開發的。?2011 年 10 月 Nitobi 與 PhoneGap 框架正在開源了 Apache 軟件基金會根據 Adobe 系統公司被收購，作為科爾多瓦反攻。?這種轉變是仍在進行。

科爾多瓦提供環境承載您薄的本機包裝內的 HTML5/JavaScript 內容。?為每個智能手機操作系統，它使用一個本機瀏覽器控件呈現您的應用程序內容，與被打包成可發布的應用程序資產。?Windows Phone，與你 HTML5 資產打包在 XAP 文件和加載到獨立存儲科爾多瓦應用程序啟動時。?在運行時，WebBrowser 控件呈現您的內容，并執行 JavaScript 代碼。

科爾多瓦還提供一組標準的 Api，用于訪問跨不同的智能手機是一樣的功能。?這些功能包括：

• 應用程序生命周期事件
• 存儲 （HTML5 本地存儲和數據庫）
• “聯系人”程序
• 相機
• 地理定位
• 加速度計

每個前面的功能公開為 Java-腳本的 API，您從您的 JavaScript 代碼使用。科爾多瓦不會參與提供所需要的本機執行，確保您工作相同的 JavaScript Api，無論手機操作系統的針對您的代碼的努力工作正在運行，如中所示的所有圖 1。

圖 1 科爾多瓦允許跨范圍的移動操作系統運行同一 HTML5 應用程序

這篇文章的大部分討論科爾多瓦 Windows Phone 開發人員，在 Visual Studio 中發生的發展和您測試您的應用程序的物理設備或仿真程序上的視角。?科爾多瓦是跨平臺技術，您通常開發使用您的編輯器或 IDE 的選擇，因此一個 iOS 開發者將開發在 Xcode 科爾多瓦應用程序和一個 Android 開發者很可能會使用 Eclipse。

科爾多瓦也有稱為生成基于云計算的生成服務 (build.phonegap.com），可以在此提交您的 HTML5/JavaScript 內容。?在短時間后，它返回的科爾多瓦支持平臺的大部分分布。?這意味著您不需要為了生成應用程序的一系列平臺的各種特定于平臺的 Ide （或 Mac 計算機） 的副本。?生成服務是 Adobe 的財產和目前在 beta 版和免費使用。?它仍將免費開放源碼項目。

獲取工具

假定您已經有了 Visual Studio、 Windows Phone SDK 和 （可選） 為 Windows Phone 發展設置了 Zune。?如果不是，您可以獲取工具免費下載 Visual Studio 2010 表示為 Windows Phone （bit.ly/dTsCH2)。

您可以從 PhoneGap 網站獲取最新的科爾多瓦開發人員工具 (phonegap.com），盡管未來的版本將會通過 Apache 分發 (incubator.apache.org/cordova)。?下載內容包括模板、 圖書館和跨所有支持的平臺開發科爾多瓦應用程序所需的腳本。?你要使用 Windows Phone 的版本，當然。

一旦您下載科爾多瓦工具，請按照 Windows Phone 獲取啟動指南 (phonegap.com/start#wp) 和安裝 Visual Studio 模板。?創建"Hello World"-樣式應用程序很簡單，創建新的項目基于提供的模板，如圖所示，在圖 2。

圖 2 為 Windows Phone 科爾多瓦包括 Visual Studio 模板

如中所示如果您生成和部署您的仿真程序模板所創建的項目，你應將其熱烈的消息"你好科爾多瓦，"?圖 3。

圖 3 運行模擬器上的科爾多瓦模板應用程序

Windows Phone 科爾多瓦應用解剖

雖然您可以開發多不知情的情況下科爾多瓦中應用的引擎罩下如何工作的是值得理解什么由模板生成的各種文件，如中所示圖 4。

圖 4 科爾多瓦模板文件夾結構

只專注于中的科爾多瓦文件圖 4?（從上到下），請注意下列事項：

• GapLib/WP7CordovaClassLib.dll 是科爾多瓦大會。?這包含 Windows Phone 的本機實現的科爾多瓦 Api。
• www 是您的應用程序資產，HTML5、 JavaScript、 CSS 和圖像的放置位置的文件夾。?該模板生成一個基本的 index.html 文件和 master.css 樣式表。
• www/cordova-1.5.0.js 提供了 Windows Phone 上一篇-科爾多瓦 JavaScript Api 的心理狀態。?此接口包含在 WP7CordovaClassLib 內的本機代碼。
• BuildManifestProcessor.js 是一個 JavaScript 文件，調用的后期生成步驟。?此文件生成科爾多瓦-SourceDictionary.xml 文件，確保任何您將添加到 www 文件夾將加載到獨立存儲。
• CordovaSourceDictionary.xml 是生成的 XML 文件，其中列出所有您應用程序的資產。?當應用程序首次啟動時，此 XML 文件指示要裝入到獨立存儲文件。

MainPage.xaml 文件包含 CordovaView 控件，用戶控件包含 WebBrowser 控件的實例：

 <Grid x:Name="LayoutRoot"> ??? <my:CordovaView Name="PGView" /> ? </Grid> 

當應用程序啟動時，CordovaView 控制照顧您應用程序的資產裝入本地存儲并導航到 www/index.html 文件，從而啟動您的應用程序。?可以，當然，放置其他 Silverlight 控件在頁中通過編輯 XAML 中，雖然我不會推薦它。?如果您編寫的 HTML5 的應用程序，你的意圖是可能使此工作跨平臺。?當然，任何控件，您將添加到 MainPage.xaml 將特定于您的 Windows Phone 構建。

科爾多瓦應用程序開發

可以將您的 HTML、 JavaScript 和 CSS 文件添加 www 文件夾和 — — 只要你將它們標記與生成操作的內容 — — 當您的應用程序執行時，他們就會包括在您的項目中，并可通過瀏覽器控件訪問。?可以在應用程序科爾多瓦中，只要他們是與手機的瀏覽器兼容使用任何 JavaScript/HTML5 標準庫或框架。

科爾多瓦網站上記錄了科爾多瓦 Api 我就不在這里詳細描述他們。?要注意的一件重要的事情是，你必須等待之前制作的 deviceready 事件的任何其它 API 方法的使用。?如果您檢查從模板生成的 index.html 文件，您可以看到它會等待直到設備準備好之前更新用戶界面：

2. ??????????<script?type="text/javascript">
3. ??document.addEventListener("deviceready",onDeviceReady,false);
4. ??function?onDeviceReady()
5. ??{
6. ????document.getElementById("welcomeMsg").innerHTML
7. ??????+=?"Cordova?is?ready!
8. ??????????version="?+?window.device.cordova;
9. ????console.log(
10. ??????"onDeviceReady.
11. ??????????You?should?see?this?"?+
12. ????????"message?in?Visual?Studio's?output?window.");
13. ??}
14. </script>

在前面的代碼中使用的控制臺對象允許您將添加到您的應用程序的調試輸出。?科爾多瓦的情況下，這些消息發送到 Visual Studio 控制臺。

單頁或多頁應用程序體系結構

當構建科爾多瓦的應用程序，您可以使用兩種不同的模式：

• 多頁的應用程序：多個 HTML 頁面在多頁的應用程序，用于表示您的應用程序的各種屏幕。?頁面之間的導航使用標準的瀏覽器的力學、 錨標簽所定義的鏈接。?每個 HTML 頁包含腳本的引用
• 科爾多瓦 JavaScript 代碼和 JavaScript 的應用程序。
• 單頁面的應用程序：在單頁面應用中，單個 HTML 文件引用科爾多瓦和 JavaScript 的應用程序。?您的應用程序的各個頁面之間的導航被通過呈現的 HTML 進行動態更新。?從手機瀏覽器的角度來看，URL 將保持不變，有沒有頁面之間的導航。

這兩種模式之間所做的選擇對您的代碼的結構具有重大影響。

一般來說，多頁的模式是最適合于主要包括靜態內容的應用程序。?使用此方法時，您可以采取 HTML/CSS/JavaScript，目前用于您的 Web 站點并包裝它，使用科爾多瓦，傳送到手機作為一種應用。?但多頁的方法有一些缺點。?第一，當瀏覽器從一個頁面導航到下一個，它已重新加載和解析與新頁相關聯的所有 JavaScript。?有一個明顯的暫停科爾多瓦生命周期，創建 JavaScript Api 與 C# 同行之間的聯系，執行。?第二，因為重新加載您的 JavaScript 代碼的所有應用程序狀態會丟失。

單頁面模式克服了多頁的方法與相關的問題。?科爾多瓦和 JavaScript 代碼的應用程序加載就一次，導致響應更快的用戶界面中，不再需要將應用程序狀態從一頁傳遞到下一步。?這種方法的唯一缺點是增加了復雜性，與正在更新 UI 導航發生時所需的 JavaScript 代碼。

本文中描述的演示應用程序使用單頁面模式。?行動中的多頁的方法的示例，我建議看看 DemoGAP CodePlex 項目 (demogap.codeplex.com），它提供了一個簡單的演示 Windows Phone 應用程序內的科爾多瓦 API 功能。

演示應用程序

本文的其余部分描述了"科爾多瓦 Twitter 搜索，"一個簡單的 Windows Phone 應用程序，允許用戶在搜索 Twitter 基于一個或多個關鍵字，如圖所示，在圖 5。

圖 5 科爾多瓦 Twitter 搜索演示應用程序

此應用程序，以及科爾多瓦，使得使用的下列框架：

• jQuery，jQuery 的模板：jQuery 已經成為事實上的標準框架的瀏覽器文檔對象模型 (DOM) 操作。?jQuery 模板是微軟開發的插件 （bit.ly/8ZO2V1），就可以更輕松創建可重用可以呈現給 DOM 的 HTML 模板?Twitter 搜索使用 jQuery 的模板來定義用戶界面的應用程序內的各個頁面。
• JS 挖空：挖空是一個模型-視圖-ViewModel （MVVM） 的框架，構建 ViewModels，并使他們與視圖同步 Silverlight 開發人員熟悉的方式很容易。?它是這種相似性，導致我選擇挖空，而許多其它合適 JavaScript UI 框架。

我不會在這篇文章中詳細報道挖空。?如果你有興趣了解更多有關這一框架，我推薦閱讀約翰爸爸最近一篇文章，挖"變得開始與空"(msdn.microsoft.com/magazine/hh781029)。?如果您不熟悉的 MVVM 模式 （有你一直躲在哪里呢？），我建議這精彩的文章，Josh 史密斯："WPF 應用程序與模型-視圖-ViewModel 設計模式"（msdn.microsoft.com/magazine/dd419663)。

與 Visual Studio 的 JavaScript 應用程序開發

前深入應用程序的詳細信息，我想說關于 JavaScript 應用程序開發的幾件事。?JavaScript 開發人員所面臨的挑戰之一就是語言的動態性質。?使用 JavaScript 不被受到一個剛性類型系統 ； 對象可以動態地生成。?這給的 JavaScript 編輯器和 Ide 的開發人員帶來了挑戰。?使用強類型語言如 C# 和 Java，類型信息可用于提供增強的代碼導航、 重構和智能感知。?另一方面，使用 JavaScript，類型信息的缺乏意味著 IDE 通常提供了少得多的開發人員艾滋病。

幸運的是，事情最近有所改善，與 Visual Studio 2010 pseudo-execution JavaScript 代碼的執行，以確定每個對象，"形狀"允許它提供 JavaScript 智能感知。?為了充分利用智能感知支持，我們有幾個"提示"中的"參考"形式提供 IDE，告訴 IDE 要在其 pseudo-execution 中包含的文件。?演示項目中，所有文件都開始時告訴 IDE 包含 intellisense.js 文件的參考注釋。?此文件的內容是只需確保在 IDE 中包括所有重要應用 JavaScript 文件跨應用程序，提供質量智能感知支持，如下所示的引用的列表：

2. ??????????///?Ensure?IntelliSense?includes?all?the?files?from?this?project.
3. ??????????///
4. ///?<reference?path="app.js"?/>
5. ///?<reference?path="viewModel/ApplicationViewModel.js"?/>
6. ///?<reference?path="viewModel/SearchResultsViewModel.js"?/>
7. ///?<reference?path="viewModel/TweetViewModel.js"?/>
8. ///?<reference?path="viewModel/TwitterSearchViewModel.js"?/>
9. ///?<reference?path="lib/jquery-1.6.4.js"?/>
10. ///?<reference?path="lib/cordova-1.5.0.js"?/>
11. ///?<reference?path="lib/knockout-1.2.1.js"?/>

JavaScript 是放松和寬容的語言，功能如值脅迫和半-結腸插入使它易于使用腳本的環境中。?然而，這些相同的功能往往成為一個問題管理大量的代碼時。?出于這一原因，我強烈建議使用 JSLint，適用一組更嚴格的編碼標準，JavaScript 的工具。?受歡迎的 Visual Studio 擴展添加 JSLint 支持 (jslint4vs2010.codeplex.com），報告錯誤控制臺內不起毛的軟錯誤。?已經用于 Twitter 搜索應用程序的 JSLint （和我做過幾乎所有其他 JavaScript 項目）。

您可能會注意到的每個項目中的 JavaScript 文件開頭的"全局變量"注釋。JSLint 可以幫助防止"泄漏"到全球范圍的意外遺漏的 var 關鍵字的變量。"全局變量"評論為 JSLint 提供正式定義，占據全球范圍變量被允許。

MVVM 應用程序結構

Twitter 搜索應用程序從手機的瀏覽器控件，看是一個單頁面的應用程序。相反，從用戶的角度看，它有多個頁面，在看到圖 5。?為了支持這一點，挖空 ViewModel 構建包含堆棧的 ViewModel 實例，每一個代表在應用程序中的頁。?在用戶定位到新的一頁，相應的 ViewModel 將被添加到此堆棧，而且當用戶導航回，最上面的 ViewModel 彈出堆棧的 （請參見圖 6)。

圖 6 挖空 ApplicationViewModel

2. ??????????///?<reference?path="..//intellisense.js"?/>
3. /*globals?ko*/
4. function?ApplicationViewModel()?{
5. ??///?<summary>
6. ??///?The?ViewModel?that?manages?the?ViewModel?back-stack.
7. ??????????///?</summary>
8. ??//?---?properties
9. ??this.viewModelBackStack?=?ko.observableArray();
10. ??//?---?functions
11. ??this.
12. ??????????navigateTo?=?function?(viewModel)?{
13. ????this.viewModelBackStack.push(viewModel);
14. ??};
15. ??this.back?=?function?()?{
16. ????this.viewModelBackStack.pop();
17. ??};
18. ??this.templateSelector?=?function?(viewModel)?{
19. ????return?viewModel.template;
20. ??}
21. }

當應用程序啟動時，ApplicationViewModel 的實例創建和綁定到使用挖空的 UI：

2. ??????????document.addEventListener("deviceready",?initializeViewModel,?false);
3. var?application;
4. function?initializeViewModel()?{
5. ??application?=?new?ApplicationViewModel();
6. ??ko.applyBindings(application);
7. }

用戶界面本身是很簡單，使用挖空模板綁定來呈現 ViewModel 堆棧的 div 元素組成：

2. ??????????<body>
3. ??<h1>Cordova?Twitter?Search</h1>
4. ??<div?class="app"
5. ????data-bind
6. ="template:?{name:?templateSelector,
7. ??????????????????????????foreach:?viewModelBackStack}"

>

1. ??</div>
2. </body>

挖空模板綁定工作以類似的方式向 Silverlight ItemsControl，它將綁定到 ViewModel 實例的數組，并負責生成通過模板的每個視圖。?在此情況下，templateSelector 函數 ApplicationViewModel 上調用，以確定命名的模板的每個 ViewModel。

如果運行此應用程序時，你會發現其實并不做任何事情 — — 這就是因為沒有任何 ViewModels 來表示應用程序的頁 ！

TwitterSearchViewModel

我將介紹第一 ViewModel，TwitterSearchViewModel，它表示應用程序的第一頁。?此 ViewModel 公開幾個簡單可觀察到支持的屬性用戶界面，即搜索術語，它綁定到用戶輸入字段和 isSearching，這是將禁用搜索按鈕時，Twitter Api 正在查詢通過 HTTP 的布爾觀測值。?它還公開相同的方式會將 ICommand 綁定到內 Silverlight 按鈕綁定到搜索按鈕，在很大程度的搜索功能 （請參閱圖 7)。

圖 7 TwitterSearchViewModel

2. ??????????///?<reference?path="..//intellisense.js"?/>
3. /*globals?$?application?ko?localStorage?SearchResultsViewModel?TweetViewModel*/
4. function?TwitterSearchViewModel()?{
5. ??///?<summary>
6. ??///?A?ViewModel?for?searching?Twitter?for?a?given?term.
7. ??????????///?</summary>
8. ??//?---?properties
9. ??this.template?=?"twitterSearchView";
10. ??this.isSearching?=?ko.observable(false);
11. ??this.searchTerm?=?ko.observable("");
12. ??//?---?public?functions
13. ??this.search?=?function?()?{
14. ????///?<summary>
15. ????///?Searches?Twitter?for?the?current?search?term.
16. ??????????///?</summary>
17. ????//?implementation?detailed?later?in?this?article?...
18. ??????????};
19. }

ViewModel 的模板屬性的名稱與此 ViewModel 相關聯的視圖。?此視圖被描述為一個 jQuery 模板 index.html 文件中：

2. ??????????<script?type=text/x-jquery-tmpl"?charset="utf-8"?id="twitterSearchView"
3. ??<div>
4. ????<form?data-bind="submit:?search">
5. ??????<input?type="text"
6. ????????data-bind="value:?searchTerm,?valueUpdate:?'afterkeydown'"?/>
7. ??????<button?type="submit"
8. ????????data-bind="enable:?searchTerm().length?>?0?&&
9. ??????????isSearching()?==?false">Go</button>
10. ????</form>
11. ??</div>
12. </script>

如果您將 TwitterSearchViewModel 的實例添加到應用程序 ViewModel 堆棧，現在應用程序顯示第一頁，如圖所示，在圖 8。

圖 8 的 TwitterSearchViewModel 呈現，通過 twitterSearchView 模板

使用 CSS 創建 UI 地鐵

Windows Phone OS 最顯著的特征之一是地鐵的設計語言，指導手機的外觀和感覺的所有方面。?這種設計語言，使優先 chrome 于內容，不只是賞心悅目，也是實用的提供高度可閱接口上小的手機的外形。

當前的用戶界面，如圖所示，在圖 8，使用標準的瀏覽器樣式并因此不是很賞心悅目 ！?已經有幾個既定的框架，用于創建使用 HTML 和 CSS，如移動 jQuery 的好看移動 Ui (jquerymobile.com)。?目前這些框架往往集中在模仿 iOS 的外觀和感覺。?Windows Phone 科爾多瓦應用可以稱為使用 jQuery 移動，雖然因為這根本就不"符合"OS 的整體外觀可能會面對一些用戶排斥反應。

幸運的是，無鉻是很容易復制使用 HTML 和 CSS 的地鐵主題。?事實上，Windows 8 將 HTML 視為一個一流的公民，允許您使用 Windows 運行時 Api 的 HTML5 地鐵應用程序開發。

通過引入正確的字體、 字體大小和顏色，通過一些簡單的 CSS （示圖 9），如中所示，您可以創建用戶界面的嚴格遵循地鐵主題中，?圖 10。

圖 9 代碼，請按照地鐵主題

2. ??????????body
3. {
4. ??background:?#000?none?repeat?scroll?0?0;
5. ??color:?#ccc;
6. ??font-family:?Segoe?WP,?sans-serif;
7. }
8. h1
9. {
10. ??font-weight:?normal;
11. ??font-size:?42.667px;?/*?PhoneFontSizeExtraLarge?*/
12. }
13. button
14. {
15. ??background:?black;
16. ??color:?white;
17. ??border-color:?white;
18. ??border-style:?solid;
19. ??padding:?4px?10px;
20. ??border-width:?3px;?/*?PhoneBorderThickness?*/
21. ??font-size:?25.333px;?/*?PhoneFontSizeMediumLarge?*/
22. }
23. input[type="text"]
24. {
25. ??width:?150px;
26. ??height:?34px;
27. ??padding:?4px;
28. }

圖 10 Twitter 搜索應用程序與地鐵的 CSS 樣式應用

一個最終方面有點兒這是 HTML5 的應用程序，而不是本機的一個例子是用戶可以仍然"捏"用戶界面，使它放大的贈品。?這可以通過將下面的 meta 屬性添加到 index.html 頁面部分解決：

2. ??????????<meta?name="viewport"?content="user-scalable=no"?/>

這將通知瀏覽器不允許用戶規模呈現的內容。?不幸的是，這通過 Windows Phone 瀏覽器實現的方式使用戶可以縮放內容，但將捕捉回原規模互動結束時。?這個看起來非常好 ！

我發現，通過檢查 WebBrowser 控件的可視化樹，是可能的處理程序附加到操縱事件，并禁止冒泡到本機的 TileHost 呈現 flash 內容。?我發表的一個簡短的博客 (bit.ly/vU2o1q），其中包括一個簡單的實用程序類，達致這個目標。?但是，應該使用此謹慎，因為這取決于 WebBrowser 控件，這可能會改變在將來版本的 Windows Phone 操作系統的內部結構。

Twitter 搜索

如果你看更為詳細地 TwitterSearchViewModel 搜索功能，它會查詢通過 jQuery"ajax"函數，它返回 JSONP 響應的 Twitter Api。?TweetViewModel 實例從每個返回的推文的構造和這些被用來構建一個 SearchResultsViewModel 實例 (請參見圖 11)。

圖 11 TwitterSearchViewModel 搜索功能

2. ??????????this.search?=?function?()?{
3. ??///?<summary>
4. ??///?Searches?Twitter?for?the?current?search?term.
5. ??????????///?</summary>
6. ??this.isSearching(true);
7. ??var?url?=?"http://search.twitter.com/search.json?q="?+
8. ????encodeURIComponent(that.searchTerm());
9. ??var?that?=?this;
10. ??$.ajax({
11. ????dataType:?"jsonp",
12. ????url:?url,
13. ????success:?function?(response)?{
14. ??????//?Create?an?array?to?hold?the?results.
15. ??????????var?tweetViewModels?=?[];
16. ??????//?Add?the?new?items.
17. ??????????$.each(response.results,?function?()?{
18. ????????var?tweet?=?new?TweetViewModel(this);
19. ????????tweetViewModels.push(tweet);
20. ??????});
21. ??????//?Navigate?to?the?results?ViewModel.
22. ??????????application.
23. ??????????navigateTo(new?SearchResultsViewModel(tweetViewModels));
24. ??????that.isSearching(false);
25. ????}
26. ??});
27. };

SearchResultsViewModel 只是包含的推文的列表：

2. ??????????///?<reference?path="..//intellisense.js"?/>
3. /*globals?ko*/
4. function?SearchResultsViewModel(tweetViewModels)?{
5. ??///?<summary>
6. ??///?A?ViewModel?that?renders?the?results?of?a?twitter?search.
7. ??????????///?</summary>
8. ??///?<param?name="tweetViewModels">An?array?of?TweetViewModel?instances</param>
9. ??//?---?properties
10. ??this.template?=?"searchResultsView";
11. ??this.tweets?=?ko.observableArray(tweetViewModels);
12. }

TweetViewModel 公開個別的 tweet 和導航到個別的 tweet 視圖中，選擇函數的屬性，如中所示和圖 12。

圖 12 TweetViewModel

2. ??????????///?<reference?path="..//intellisense.js"?/>
3. /*globals?application*/
4. function?TweetViewModel(tweet)?{
5. ??///?<summary>
6. ??///?A?ViewModel?that?represents?a?single?tweet
7. ??///?</summary>
8. ??///?<param?name="tweet">A?tweet?as?returned?by?the?twitter?search?API</param>
9. ??//?---?properties
10. ??this.template?=?"tweetDetailView";
11. ??this.author?=?tweet.from_user;
12. ??this.text?=?tweet.text;
13. ??this.id?=?tweet.id;
14. ??this.time?=?tweet.created_at;
15. ??this.thumbnail?=?tweet.profile_image_url;
16. ??//?---?public?functions
17. ??this.select?=?function?()?{
18. ????///?<summary>
19. ????///?Selects?this?tweet,?causing?the?application?to?navigate?to?a?tweet-view.
20. ??????????///?</summary>
21. ????application.
22. ??????????navigateTo(this);
23. ??};
24. }

再次，描述這些 ViewModels 的每個視圖的模板添加到 index.html 文件，如圖所示，在圖 13。

圖 13 index.html 文件添加模板

2. ??????????<script?type=text/x-jquery-tmpl"?charset="utf-8"?id="searchResultsView">
3. ??<div>
4. ????<ul?data-bind="template:?{name:?'tweetView',
5. ??????????????????????????????foreach:?tweets}">?</ul>
6. ??</div>
7. </script>
8. <script?type="text/x-jquery-tmpl"?charset="utf-8"?id="tweetView">
9. ??<li?class="tweet"
10. ??????data-bind="click:?select">
11. ????<div?class="thumbnailColumn">
12. ??????<img?data-bind="attr:?{src:?thumbnail}"
13. ?????????????????????????????class="thumbnail"/>
14. ????</div>
15. ????<div?class="detailsColumn">
16. ??????<div?class="author"
17. ???????????data-bind="text:?author"/>
18. ??????<div?class="text"
19. ???????????data-bind="text:?text"/>
20. ??????<div?class="time"
21. ???????????data-bind="text:?time"/>
22. ????</div>
23. ??</li>
24. </script>

使用此代碼中的地方，當用戶點擊"轉"的按鈕，以搜索 Twitter，新的 SearchResultsViewModel 被添加到 ViewModel 堆棧。?這將自動導致正在呈現在"應用程序"專區內的 searchResultsView 模板?但是，由于 ViewModel 堆棧通過 foreach 模板綁定呈現出來，這不會隱藏 twitterSearchView 模板實例 ； 而他們就會堆積另一個上面。?這可以通過幾個簡單的 CSS 規則添加解決：

2. ??????????.app>div
3. {
4. ??display:?none;
5. }
6. .app>*:last-child
7. {
8. ??display:?block;
9. }

第一個選擇器隱藏 div 標記與應用程序的類，而第二個選擇器，具有更高的優先級，確保顯示的最后一個子級的所有即時的兒童。

這些位置中的 CSS 規則，Twitter 搜索應用程序是完全功能和通航。

管理 Back 堆棧

與當前 Twitter 搜索應用程序，您可以從搜索導航到個別的 tweet，結果頁，但如果你打手機后退按鈕立即退出應用程序。?這是因為應用程序導航出現完全在一個瀏覽器控件內 — — 因此，Silverlight 框架的角度來看，從應用程序具有單個頁面。?這不僅會導致糟糕的用戶體驗，它幾乎肯定會被拒絕，如果提交到 Windows Phone 市場上的應用程序中。

幸運的是，這個問題的解決方案是簡單的。?ApplicationViewModel 包含一個 ViewModel 實例的堆棧。?如果此堆棧中有多個 ViewModel 實例，您需要處理硬件后按下按鈕和關閉此堆棧的最頂層 ViewModel 流行。?否則，您可以允許 Silverlight 退出應用程序框架。

為了提供支持，backButtonRequired 依賴觀測值添加到 ViewModel：

2. ??????????function?ApplicationViewModel()?{
3. ??//?---?properties
4. ??this.viewModelBackStack?=?ko.observableArray();
5. ??this.backButtonRequired?=?ko.dependentObservable(function?()?{
6. ????return?this.viewModelBackStack().length?>?1;
7. ??},?this);
8. ??//?---?functions
9. ??//?...
10. ??????????}

ViewModel 初始化時，您可以處理此觀測值的更改和訂閱科爾多瓦用品的 backbutton 事件。?當觸發該事件時，請調用背上的 ApplicationViewModel，彈出堆棧的最頂層 ViewModel 函數。?挖空模板綁定照顧從用戶界面中刪除 ViewModel 關聯的視圖和 CSS 樣式設置確保是可見的認為現在是最頂層 （請參見圖 14)。

圖 14 處理后按下按鈕

2. ??????????function?initializeViewModel()?{
3. ??application?=?new?ApplicationViewModel();
4. ??ko.applyBindings(application);
5. ??//?Handle?the?back?button.
6. ??????????application.backButtonRequired.subscribe(function?(backButtonRequired)?{
7. ????if?(backButtonRequired)?{
8. ??????document.addEventListener("backbutton",?onBackButton,?false);
9. ????}?else?{
10. ??????document.removeEventListener("backbutton",?onBackButton,?false);
11. ????}
12. ??});
13. ??var?viewModel?=?new?TwitterSearchViewModel();
14. ??application.
15. ??????????navigateTo(viewModel);
16. }
17. function?onBackButton()?{
18. ??application.back();
19. }

因為通過科爾多瓦中的代碼提供了 backbutton 事件，則圖 14?會工作得很好如果執行應用程序使用不同的手機操作系統 （只要手機本身具有硬件后退按鈕）。

狀態持久性

我們會將最后的一個功能添加到 Twitter 搜索應用程序：當搜索成功返回時，搜索詞添加到最近的搜索列表 （請參見圖 15)。

圖 15 到最近的搜索列表中添加一個搜索詞

2. ??????????function?TwitterSearchViewModel()?{
3. ??///?<summary>
4. ??///?A?ViewModel?for?searching?Twitter?for?a?given?term.
5. ??????????///?</summary>
6. ??//?---?properties
7. ??//?...
8. ??????????some?properties?omitted?for?clarity?...
9. ??????????this.recentSearches?=?ko.observableArray();
10. ??//?---?functions
11. ??//?...
12. ??????????some?functions?omitted?for?clarity?...
13. ??????????this.loadState?=?function?()?{
14. ????///?<summary>
15. ????///?Loads?the?persisted?ViewModel?state?from?local?storage.
16. ??????????///?</summary>
17. ????var?state?=?localStorage.getItem("state");
18. ????if?(typeof?(state)?===?'string')?{
19. ??????$.each(state.split(","),?function?(index,?item)?{
20. ????????if?(item.trim()?!==?"")?{
21. ??????????that.recentSearches.push(item);
22. ????????}
23. ??????});
24. ????}
25. ??};
26. ??function?saveState()?{
27. ????///?<summary>
28. ????///?Saves?the?ViewModel?state?to?local?storage.
29. ??????????///?</summary>
30. ????localStorage.setItem("state",?that.recentSearches().toString());
31. ??}
32. ??function?addSearchTermToRecentSearches()?{
33. ????///?<summary>
34. ????///?Adds?the?current?search?term?to?the?search?history.
35. ??????????///?</summary>
36. ????that.recentSearches.unshift(that.searchTerm());
37. ????saveState();
38. ??}
39. }

AddSearchTermToRecentSearches 函數采用挖空方便的功能，unshift，其中將項添加到數組的開始。?添加最近的搜索，使用 HTML5 本地存儲存儲狀態。?在此情況下數組的狀態被轉換為通過 toString 函數，以逗號分隔的列表，并轉換回通過拆分。?更復雜的 ViewModel 很可能會 JSON 格式保存多個屬性值。

有趣的是，雖然 Windows Phone 瀏覽器不支持本地存儲，此函數時關閉瀏覽器呈現頁從獨立存儲。?為了使較早的代碼工作，科爾多瓦團隊不得不寫的本地存儲保存的狀態，在手機的獨立存儲內的 Api 的"農心"執行。

Twitter 搜索應用程序要這最后的更改，現在是完全正常。

可移植性證明：在 iPhone 上運行

正如您所看到的科爾多瓦框架使創建基于 HTML5 的應用程序的 Windows Phone。?它也是可以模擬使用簡單的 HTML5 和 CSS 技術，如挖空框架允許您正確地組織代碼時的本機地鐵外觀和感覺。

這篇文章側重于為 Windows Phone，創建應用程序，但 Twitter 搜索應用程序是便攜式和應在 iPhone 或未經修改的 Android 手機上運行。?但地鐵樣式應用適合這些手機嗎？

作為最后的這種做法的多功能演示，我創建了 iOS 版本的 Twitter 搜索應用程序，使用 jQuery 移動來模仿本機的外觀和感覺。?這使得大 ； 使用 MVVM 的模式，在這只查看需要改變 — ViewModel 的邏輯是完全相同的。?使用基于云計算的生成服務得以對創建 iOS"ipa"包和 iPhone，全部從 Windows 機器上安裝它。?你可以看到兩個應用程序在運行中并排圖 16。

IPhone 和 Windows Phone 設備上圖 16 Twitter 搜索較大的運行

?

原文來自：http://msdn.microsoft.com/zh-cn/magazine/hh975345.aspx

?

轉載于:https://www.cnblogs.com/webapplee/p/3767808.html

總結

以上是生活随笔為你收集整理的[WP]使用ApacheCordova开发HTML5-WindowsPhone应用程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。