Kendo UI 移動應用開發簡介
下面三點為構成 Kendo 移動應用的幾個組成部分：
- Application: Kendo 移動應用的主應用類，用來管理應用部分部分之間切換，應用頁面歷史，加載 View 以及其它一些重要的移動應用相關的任務。
- Layout: 定義移動應用 UI 的布局，類似於 Web 應用的 MasterPage，主要可以用來定義不同 View 之間一些公用的部分，比如菜單。
- Views: 移動應用的每個頁面，每個應用包含一個或多個頁面。
Layouts 和 View 使用 HTML 來定義，而 Application 為 JavaScript。 下面的步驟給出了編寫 Kendo UI 移動應用的基本步驟。
第一步： 創建 HTML 頁面
Kendo UI 移動應用可以使用簡單的 HTML 頁面來創建，這里我們創建一個簡單的 index.html 如下：
<!DOCTYPE html> <html> <head> <title>My App</title> <!--TODO: Add CSS links--> </head> <body> <!--TODO: Add JavaScript referneces--> </body> </html>
第二步：添加 Kendo UI Mobile 的引用
添加 Kendu UI Mobile CSS 和 Javascript 的引用。
<!DOCTYPE html> <html> <head> <title>My App</title> <link href="css/kendo.mobile.all.min.css" rel="stylesheet" /> </head> <body> <script src="/attachments/image/wk/kendouidevelopmenttutorial/jquery.min.js"></script> <script src="/attachments/image/wk/kendouidevelopmenttutorial/kendo.all.min.js"></script> </body> </html>
第三步：定義應用布局文件
Layout 為應用 UI 的模板，應用所有的 View 的內容都使用模板來顯示，一個 Layout 可以包含任意的內容，通常它包含有標題頭和任務欄。比如下面的 Layout:
<!DOCTYPE html> <html> <head> <title>My App</title> <link href="css/kendo.mobile.all.min.css" rel="stylesheet" /> </head> <body> <section data-role="layout" data-id="default"> <header data-role="header"> <div data-role="navbar">My App</div> </header> <!--View content will render here--> <footer data-role="footer"> <div data-role="tabstrip"> <a href="#home">Home</a> </div> </footer> </section> <script src="/attachments/image/wk/kendouidevelopmenttutorial/jquery.min.js"></script> <script src="/attachments/image/wk/kendouidevelopmenttutorial/kendo.all.min.js"></script> </body> </html>
代碼中使用 data-role 屬性，這個屬性用來建立 HTML 和 Kendo UImobile 庫之間的聯系。因此
<section data-role="layout" data-id="default">
在應用初始化時，這部分定義將轉換為 Layout 定義。 data-id 為該 Layout 的 id，后面定義的 view 可以通過這個 id 來引用某個 layout.最后，為完整起見，這段代碼還使用了 NavBar 和 TabStrip 兩個用在移動應用中的 UI 組件。
第四步：構造 View
創建好 Layout 之后，應用至少要創建一個 View 用來顯示，大部分應用包含有多個 View，這里我們創建一個簡單的 View 如下：
<!DOCTYPE html> <html> <head> <title>My App</title> <link href="css/kendo.mobile.all.min.css" rel="stylesheet" /> </head> <body> <div id="home" data-role="view" data-layout="default"> Hello Mobile World! </div> <section data-role="layout" data-id="default"> <header data-role="header"> <div data-role="navbar">My App</div> </header> <!--View content will render here--> <footer data-role="footer"> <div data-role="tabstrip"> <a href="#home">Home</a> </div> </footer> </section> <script src="/attachments/image/wk/kendouidevelopmenttutorial/jquery.min.js"></script> <script src="/attachments/image/wk/kendouidevelopmenttutorial/kendo.all.min.js"></script> </body> </html>
View 定義使用 data-role 屬性“view”, data-layout 定義使用那個 layout.
第五步：初始化移動應用
前面定義了一些 HTML 元素，還沒有使用任何 JavaScript，使用下面一行代碼，可以使得前面定義的 HTML 變得和本地應用類似：
<script> var app = new kendo.mobile.Application(); </script>
樣一個簡單的移動應用就出現了，Kendo UI 缺省情況下使用 iOS 界面（如上圖），在手機上運行會根據手機平台的不同選擇合適的界面風格，你也可以通過指定平台類型，比如：
<script> var app = new kendo.mobile.Application(document.body, { platform:'android' }); </script>
來測試你的應用在不同平台上顯示，也可以根據平台的不同，對應用做些調整，比如：
<div data-role="layout" data-id="foo" data-platform="ios"> <div data-role="header">iOS App</div> </div> <div data-role="layout" data-id="foo" data-platform="android"> <div data-role="header">Android App</div> </div>
注意的是 data-platform 屬性目前只支持在 layout 中使用。