Kendo UI開發教程(27): 移動應用開發簡介

Kendo UI 支持開發Web應用，前面介紹的SPA，也支持開發移動應用，至於使用 HTML5 + JavaScript + CSS開發移動是否是一個好的選擇不在本文的討論之中。Kendo UI Mobile提供了一種快速開發跨手機平臺的方法（Kendo UI可使得這種Web應用在界面上看起來和本地應用很是相似）。若是你的移動應用須要數據的支持，瞭解一些JSON方面計的知識也是必須的。
藉助於PhoneGap 等工具能夠HTML5打包成移動平臺的本地應用，並支持使用JavaScript訪問一些平臺相關的功能，如GPS，Camera等功能，有興趣的能夠參考相關文檔。css

下面三點爲構成Kendo 移動應用的幾個組成部分：html

Application: Kendo 移動應用的主應用類，用來管理應用部分部分之間切換，應用頁面歷史，加載View以及其它一些重要的移動應用相關的任務。
Layout: 定義移動應用UI的佈局，相似於Web應用的MasterPage，主要能夠用來定義不一樣View之間一些公用的部分，好比菜單。
Views: 移動應用的每一個頁面，每一個應用包含一個或多個頁面。

Layouts 和 View 使用HTML來定義，而Application 爲JavaScript。下面的步驟給出了編寫Kendo UI移動應用的基本步驟。jquery

第一步：建立HTML頁面

Kendo UI移動應用可使用簡單的HTML頁面來建立，這裏咱們建立一個簡單的index.html 以下：android

 
      1 
      <!DOCTYPE html> 
     
      2 
      <html> 
     
      3 
      <head> 
     
      4 
          <title>My App</title> 
     
      5 
          <!--TODO: Add CSS links--> 
     
      6 
      </head> 
     
      7 
      <body> 
     
      8 
        
      9 
          <!--TODO: Add JavaScript referneces--> 
     
      10 
      </body> 
     
      11 
      </html>

第二步：添加Kendo UI Mobile的引用

添加Kendu UI Mobile CSS和Javascript的引用。ios

 
      1 
      <!DOCTYPE html> 
     
      2 
      <html> 
     
      3 
      <head> 
     
      4 
          <title>My App</title> 
     
      5 
        
      6 
          <link href="css/kendo.mobile.all.min.css" rel="stylesheet" /> 
     
      7 
      </head> 
     
      8 
      <body> 
     
      9 
        
      10 
          <script src="js/jquery.min.js"></script> 
     
      11 
          <script src="js/kendo.all.min.js"></script> 
     
      12 
      </body> 
     
      13 
      </html>

第三步：定義應用佈局文件

Layout爲應用UI的模板，應用全部的View的內容都使用模板來顯示，一個Layout能夠包含任意的內容，一般它包含有標題頭和任務欄。好比下面的Layout:app

 
      1 
      <!DOCTYPE html> 
     
      2 
      <html> 
     
      3 
      <head> 
     
      4 
          <title>My App</title> 
     
      5 
        
      6 
          <link href="css/kendo.mobile.all.min.css" rel="stylesheet" /> 
     
      7 
      </head> 
     
      8 
      <body> 
     
      9 
          <section data-role="layout" data-id="default"> 
     
      10 
              <header data-role="header"> 
     
      11 
                  <div data-role="navbar">My App</div> 
     
      12 
              </header> 
     
      13 
              <!--View content will render here--> 
     
      14 
              <footer data-role="footer"> 
     
      15 
                  <div data-role="tabstrip"> 
     
      16 
                      <a href="#home">Home</a>        
     
      17 
                  </div> 
     
      18 
              </footer> 
     
      19 
          </section> 
     
      20 
        
      21 
          <script src="js/jquery.min.js"></script> 
     
      22 
          <script src="js/kendo.all.min.js"></script> 
     
      23 
      </body> 
     
      24 
      </html>

代碼中使用data-role屬性，這個屬性用來創建HTML和Kendo UImobile 庫之間的聯繫。所以wordpress

 
      1 
      <section data-role="layout" data-id="default">

在應用初始化時，這部分定義將轉換爲Layout定義。 data-id爲該Layout的id，後面定義的view 能夠經過這個id來引用某個layout.
最後，爲完整起見，這段代碼還使用了NavBar和TabStrip兩個用在移動應用中的UI組件。工具

第四步：構造View

建立好Layout以後，應用至少要建立一個View用來顯示，大部分應用包含有多個View，這裏咱們建立一個簡單的View以下：佈局

 
      1 
      <!DOCTYPE html> 
     
      2 
      <html> 
     
      3 
      <head> 
     
      4 
          <title>My App</title> 
     
      5 
        
      6 
          <link href="css/kendo.mobile.all.min.css" rel="stylesheet" /> 
     
      7 
      </head> 
     
      8 
      <body> 
     
      9 
          <div id="home" data-role="view" data-layout="default"> 
     
      10 
              Hello Mobile World! 
     
      11 
          </div> 
     
      12 
        
      13 
          <section data-role="layout" data-id="default"> 
     
      14 
              <header data-role="header"> 
     
      15 
                  <div data-role="navbar">My App</div> 
     
      16 
              </header> 
     
      17 
              <!--View content will render here--> 
     
      18 
              <footer data-role="footer"> 
     
      19 
                  <div data-role="tabstrip"> 
     
      20 
                      <a href="#home">Home</a>        
     
      21 
                  </div> 
     
      22 
              </footer> 
     
      23 
          </section> 
     
      24 
        
      25 
          <script src="js/jquery.min.js"></script> 
     
      26 
          <script src="js/kendo.all.min.js"></script> 
     
      27 
      </body> 
     
      28 
      </html>

View定義使用data-role屬性「view」, data-layout定義使用那個layout.測試

第五步：初始化移動應用

前面定義了一些HTML元素，尚未使用任何JavaScript，使用下面一行代碼，可使得前面定義的HTML變得和本地應用相似：

 
      1 
      <script> 
     
      2 
          var app = new kendo.mobile.Application(); 
     
      3 
      </script>

這樣一個簡單的移動應用就出現了，Kendo UI缺省狀況下使用iOS 界面（如上圖），在手機上運行會根據手機平臺的不一樣選擇合適的界面風格，你也能夠經過指定平臺類型，好比：

 
      1 
      <script> 
     
      2 
          var app = new kendo.mobile.Application(document.body, 
     
      3 
          { 
     
      4 
              platform:'android' 
     
      5 
          }); 
     
      6 
      </script>

來測試你的應用在不一樣平臺上顯示，也能夠根據平臺的不一樣，對應用作些調整，好比：

 
      1 
      <div data-role="layout" data-id="foo" data-platform="ios"> 
     
      2 
          <div data-role="header">iOS App</div> 
     
      3 
      </div> 
     
      4 
        
      5 
      <div data-role="layout" data-id="foo" data-platform="android"> 
     
      6 
          <div data-role="header">Android App</div> 
     
      7 
      </div>