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