大夥兒都知道有很多基於HTML5的移動應用框架。下一代開發工具將幫助開發者遠離那些難學和讓人費勁的原生SDK語言，如Objective-C,Java等。大家都知道，HTML5代表著交叉平臺如移動應用程式開發的未來。
那為什麼呢？為什麼HTML5會如此的流行？
整個世界將會掀起自帶裝置(BYOD)支援HTML5的風潮。BYOD意味著開發者的應用將不會侷限於單個平臺，因為消費者想讓應用出現在他們日常用的所 有裝置上。HTML5是可以一次編寫跨平臺執行，同時使用者體驗非常接近原生API開發的解決方案，同時讓開發者免去了不同平臺移植的痛苦。未來交叉平臺上 的瀏覽器將都會支援HTML5,HTM5應用讓使用者體驗還是不錯的，有時很難區分是用原生API寫的程式還是HTML寫的。
|
頂 翻譯的不錯哦!
|
支援跨平臺，縮短上市時間以及維護費用低只是HTML/Javascript眾多優點的幾種。不僅如此，HTML會減少在新興技術使用的長期風險，如在WinRT，ChromeOS，FirefoxOS，和Tizen等。
簡單的說，HTML/Javascript是唯一跨平臺的程式語言。
用HTML/Javascript有缺點嗎？當然，原生API程式將消耗更少的記憶體，同時將更快，使用者體驗將更好。但對於一般應用來說，HTML
/Javascript就夠了，你可以用它建立跨平臺的移動應用程式，然後可以打包提交到應用商店。PhoneJs會這一切來的更快。
|
頂 翻譯的不錯哦!
|
試著用用PhoneJS吧
PhoneJS是一個多樣，靈活和有效的交叉平臺HTML5移動應用開發框架。PhoneJS是單頁面應用(SPA)框架，它擁有檢視管理和URL導航。PhoneJS佈局引擎在檢視中設定抽象的導航，這樣同一個應用程式根據不用平臺和不同的情況將顯示不同。PhoneJS內建豐富的觸控優化的UI元件，這些元件都是在iOS，Android和Windows Phone 8中非常的流行。
為了能更好的理解PhoneJS開發的原則和怎樣建立和在應用商店釋出應用，我們一起看一下叫TipCalculator的簡單例子。這個應用幫助你計算餐廳賬單。原始碼在這。
你可以在AppStroke，Google Play，Windows Store上找到它。
  
|
頂 翻譯的不錯哦!
|
PhoneJS佈局和導航
TipCalculator是基於HTML5的單頁面(SPA)應用。開始頁是index.html，裡面是標準的標籤，CSS和Javascript資源。它包括index.js Javascript指令碼，你可以在PhoneJS的配置中找到：
1 |
TipCalculator.app = new DevExpress.framework.html.HtmlApplication({ |
2 |
namespace: TipCalculator, |
這裡，我們必須指定預設的佈局。這個例子中我們用了簡單選項和一個空佈局。更多更高階的佈局如互動式導航風格也是支援的，如下圖：
很多伺服器端框架都支援PhoneJS一些佈局方法，包括Ruby on Rails 和ASP.NET MVC.更多有關檢視和佈局的資訊在我們線上文件裡可以找到。
為了在我們單頁面應用中配置檢視導航，我們需在index.js中新增如下行：
1 |
TipCalculator.app.router.register(":view", { view: "home" }); |
這裡註冊了一個簡單的導航，這樣就可以從URL(URL中的雜湊段)中找到檢視名稱。主頁檢視是預設的設定。每一個檢視都有自己的HTML檔案，並且都能連線到index.html：
1 |
<link rel="dx-template" type="text/html" href="views/home.html" /> |
|
頂 翻譯的不錯哦!
|
PhoneJS 檢視模型
一個檢視模型代表著檢視的資料和操作。每一個檢視都有一個相同的基本名稱作為檢視自身，而且能返回檢視自身的檢視模型。在主頁檢視中，view/home.js指令碼定義了home函式，這裡面建立了響應式檢視模式。
1 |
TipCalculator.home = function(params) { |
賬單計算演算法中輸入引數有3個：賬單數，付賬的人數，賬單百分比。這些變數的定義都是可見的，這些都會有相應的UI元件與之對應。
注意：可見函式是由Knockout.js提供的，它在PhoneJS中是構建檢視模型的關鍵。你可以在這瞭解Knockout.js更多的資訊。
|
頂 翻譯的不錯哦!
|
下面的程式碼是home函式中初始化變數的：
1 |
var billTotal = ko.observable(), |
2 |
tipPercent = ko.observable(DEFAULT_TIP_PERCENT), |
3 |
splitNum = ko.observable(1); |
小費計算的結果有4種值：應付總數，每人付的總數，小費總數，每人付的平均數。每個值都是依賴可度量值(可計算的值)，當任何一種值發生變化時，這些值都要重新計算一邊。當然，這也是Knockout.js的功能。
1 |
var totalTip = ko.computed(...); |
2 |
var tipPerPerson = ko.computed(...); |
3 |
var totalPerPerson = ko.computed(...); |
4 |
var totalToPay = ko.computed(...); |
舉一個在商業邏輯中應用檢視模型的例子，那我們就看看上一個例子中的可度量值totalToPay。
計算的總額常常會四捨五入。依次，我們有兩個函式roundUp和roundDown來改變四捨五入的模式(另一個可度量值).
這些變化將引起totalToPay的重新計算，因為四捨五入的模式也會用到totalToPay的可度量值中。
01 |
var totalToPay = ko.computed(function() { |
02 |
var value = totalTip() + billTotalAsNumber(); |
06 |
if(Math.floor(value) >= billTotalAsNumber()) |
07 |
return Math.floor(value); |
11 |
return Math.ceil(value); |
|
頂 翻譯的不錯哦!
|
當檢視中任何一個輸入引數發生變化時，舍入的做法不會讓使用者看到精確值。我們贊成如下的UI-bound度量值的改變：
01 |
billTotal.subscribe(function() { |
02 |
roundMode(ROUND_NONE); |
05 |
tipPercent.subscribe(function() { |
06 |
roundMode(ROUND_NONE); |
09 |
splitNum.subscribe(function() { |
10 |
roundMode(ROUND_NONE); |
在home.js中可以找到一個完整的檢視模型。它是一個典型檢視模型的簡單例子。
注意：在複雜的應用中，對於每一個獨立的檢視實現檔案，實現一個可以模式化結檢視模式是很有用的。換句話說，如home.js不需要包含實現檢視模式的實現程式碼，而是調一個幫助函式或者其它方式來實現。這樣就可以使整個結構變的簡單了。
|
頂 翻譯的不錯哦!
|
PhoneJS 檢視
讓我們跳轉到在 view/home.html檔案中標記的檢視。最上層的div元素呈現一個名稱為“home”的檢視。在這個div中包含了一個叫做‘conetent’的定位文字。
1 |
<div data-options="dxView : { name: 'home' }"> |
2 |
<div data-options="dxContent : { targetPlaceholder: 'content' }"> |
在檢視的頂部有一個toolbar
1 |
<div data-bind="dxToolbar: { items: [ { align: 'center', text: 'Tip Calculator' } ] }"></div> |
dxToolbar
是PhoneJS UI的一個視窗小元件。它是通過使用Knockout.js繫結標記定義的。
|
頂 翻譯的不錯哦!
|
在工具欄下面是一個自定義控制元件。我們使用了2個能夠被PhoneJS編譯通過的特殊CSS類：分別是dx-fieldset和dx-field。這個自定義控制元件包含了一個記錄總賬單的文字域和兩個選擇器分別是選擇小費的百分比和選擇用餐人的數量。
1 |
<div data-bind="dxNumberBox: { value: billTotal, placeholder: 'Type here...', valueUpdateEvent: 'keyup',min: 0 }"> |
4 |
<div data-bind="dxSlider: { min: 0, max: 25, step: 1, activeStateEnabled: true, value: tipPercent }"></div> |
6 |
<div data-bind="dxSlider: { min: 1, step: 1, max: 10, activeStateEnabled: true, value: splitNum }"></div> |
在下面的編輯器裡面展示了2個按鈕（dxButton），用於允許使用者支付總金額。其他的剩餘檢視欄位用於計算結果。
01 |
<div class="round-buttons"> |
02 |
<div data-bind="dxButton: { text: 'Round Down', clickAction: roundDown }"></div> |
03 |
<div data-bind="dxButton: { text: 'Round Up', clickAction: roundUp }"></div> |
06 |
<div id="results" class="dx-fieldset"> |
07 |
<div class="dx-field"> |
08 |
<span class="dx-field-label">Total to pay</span> |
09 |
<span class="dx-field-value" style="font-weight: bold" data-bind="text: Globalize.format(totalToPay(), 'c')"></span> |
11 |
<div class="dx-field"> |
12 |
<span class="dx-field-label">Total per person</span> |
13 |
<span class="dx-field-value" data-bind="text: Globalize.format(totalPerPerson(), 'c')"></span> |
15 |
<div class="dx-field"> |
16 |
<span class="dx-field-label">Total tip</span> |
17 |
<span class="dx-field-value" data-bind="text: Globalize.format(totalTip(), 'c')"></span> |
19 |
<div class="dx-field"> |
20 |
<span class="dx-field-label">Tip per person</span> |
21 |
<span class="dx-field-value" data-bind="text: Globalize.format(tipPerPerson(), 'c')"></span> |
這就完成了在描述檔案中要求使用phonejs建立一個簡單的應用程式。正如你所看到的，這個過程就是這麼的簡單，直接和直觀。
|
頂 翻譯的不錯哦!
|
啟動，除錯和釋出
啟動和除錯一個PhoneJS程式和其他基於HTML5的應用程式操作一樣，你必須把包含HTML、Javascript的資料夾和其它所需資源部署到
web伺服器上。因為PhoneJS是一個無伺服器端元件的模型，並不關心你使用哪種web伺服器，只要能通過HTTP協議訪問所需資源就行。一旦部署成
功，你就可以在裝置、模擬器開啟應用，或者通過在桌面瀏覽器 導航欄輸入應用首頁的URL進行訪問。
如果你想通過桌面瀏覽器看到手機和平板上訪問應用一樣的效果，你需要重新設定瀏覽器的UserAgent屬性。 幸運的是，利用目前流行的瀏覽器提供的開發者工具很容易實現。
如果你不喜歡改UserAgent的設定，你可以用 Ripple Emulator來模擬不同裝置來檢視效果。
在這個層次上，你的web應用將會在移動裝置的瀏覽器上像本地應用一樣執行。現在移動裝置上的瀏覽器提供了訪問本地儲存、地理位置API，攝像頭的介面。多好的機會啊，你已經擁有了所有你需要的東西。
|
頂 翻譯的不錯哦!
|
使用PhoneJS和PhoneGap建立應用併發布到APP Store
但是如果你想訪問裝置的特性而瀏覽器沒有提供的話呢？如果你想把它作為一個app store裡面的應用而不僅僅是一個網頁呢？那麼你就得建立一個混合應用,實際上這類應用的標準是Apache Cordova又名 PhoneGap。
PhoneGap專案是一個允許你建立包含Webview(瀏覽器控制)和需要通過Javascript對PhoneGap提供的庫和外掛進行原生呼叫的本地應用開發平臺。
你需要有對應平臺的SDK才能使用它，但是你不需要了解原生開發的具體細節,你只需要將你的HTML，CSS，JS檔案放在正確的位置，並指定你應用的屬性比如名字、版本、圖示、快照等等。
|
頂 翻譯的不錯哦!
|
為了發行你的應用，你需要在不同的商店註冊為開發人員。每個商店都有註冊過程的詳細文件，這裡就不羅嗦了。之後你將會收到一個認證來對你的應用進行簽名。
在你聽到HTML5/JS的目標是“一次編寫，到處執行”之後，你也許覺得每個平臺下SDK開發可能更是一個大挑戰。也許你得為你構建的混合應用付一些費用，但還好，一切都在控制中，因為有些服務組織和產品就能解決這個問題。
一個就是Adobe線上服務-PhoneGap，它可以構建一個免費的應用(多了要收費的)。如果你需要平臺認證檔案，只需點選下滑鼠，這個服務商輕鬆為你構建所有平臺的認證。為了你的應用能順利提交到商店，你只需要準備應用的說明，推銷和相關資訊內容，以及一些圖片即可。
|
頂 翻譯的不錯哦!
|
對於Visual Studio開發者來說，DevExpress提過一個產品叫DevExtreme(裡面包括PhoneJS)，這個產品可以幫助你直接在Microsoft Visual Studio整合開發環境構建iOS，Android和Windows Phone 8應用程式。
總結一下：如果你需要構建一個在移動裝置上像原生API開發的網路應用程式，你需要PhoneJS，它裡面包含你想要的一切。如果你需要用
Javascript更深層次的控制裝置，如聯絡人列表，照相等，你需要Cordova或者叫PhoneGap。PhoneGap允許你將網路應用打包成
本地安裝包。如果你不想安裝不同平臺的SDK，你可以用PhoneGap服務來構建你得應用，如果你有DevExtreme，你也可以在Visual
Studio實現。