Kendo UI 移動應用開發(fā)簡介
移動應用開發(fā)簡介
Kendo UI 支持開發(fā) Web 應用，前面介紹的 SPA，也支持開發(fā)移動應用，至于使用 HTML5 + JavaScript + CSS 開發(fā)移動是不是一個好的選擇不在本文的討論之中。Kendo UI Mobile 提供了一種快速開發(fā)跨手機平臺的方法（ Kendo UI 可以使得這種 Web 應用在界面上看起來和本地應用非常類似）。如果你的移動應用需要數(shù)據(jù)的支持，了解一些 JSON 方面計的知識也是必須的。借助于 PhoneGap 等工具可以 HTML5 打包成移動平臺的本地應用，并支持使用 JavaScript 訪問一些平臺相關的功能，如 GPS，Camera 等功能，有興趣的可以參考相關文檔。
下面三點為構成 Kendo 移動應用的幾個組成部分：
- Application: Kendo 移動應用的主應用類，用來管理應用部分部分之間切換，應用頁面歷史，加載 View 以及其它一些重要的移動應用相關的任務。
- Layout: 定義移動應用 UI 的布局，類似于 Web 應用的 MasterPage，主要可以用來定義不同 View 之間一些公用的部分，比如菜單。
- Views: 移動應用的每個頁面，每個應用包含一個或多個頁面。
Layouts 和 View 使用 HTML 來定義，而 Application 為 JavaScript。 下面的步驟給出了編寫 Kendo UI 移動應用的基本步驟。
第一步： 創(chuàng)建 HTML 頁面
Kendo UI 移動應用可以使用簡單的 HTML 頁面來創(chuàng)建，這里我們創(chuàng)建一個簡單的 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 庫之間的聯(lián)系。因此
<section data-role="layout" data-id="default">
在應用初始化時，這部分定義將轉換為 Layout 定義。 data-id 為該 Layout 的 id，后面定義的 view 可以通過這個 id 來引用某個 layout.最后，為完整起見，這段代碼還使用了 NavBar 和 TabStrip 兩個用在移動應用中的 UI 組件。
第四步：構造 View
創(chuàng)建好 Layout 之后，應用至少要創(chuàng)建一個 View 用來顯示，大部分應用包含有多個 View，這里我們創(chuàng)建一個簡單的 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>
樣一個簡單的移動應用就出現(xiàn)了，Kendo UI 缺省情況下使用 iOS 界面（如上圖），在手機上運行會根據(jù)手機平臺的不同選擇合適的界面風格，你也可以通過指定平臺類型，比如：
<script>
var app = new kendo.mobile.Application(document.body,
{
platform:'android'
});
</script>
來測試你的應用在不同平臺上顯示，也可以根據(jù)平臺的不同，對應用做些調整，比如：
<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 中使用。
更多建議：