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="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</body>
</html>

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

Layout 為應用 UI 的模板，應用所有的 View 的內(nèi)容都使用模板來顯示，一個 Layout 可以包含任意的內(nèi)容，通常它包含有標題頭和任務欄。比如下面的 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="js/jquery.min.js"></script>
    <script src="js/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="js/jquery.min.js"></script>
    <script src="js/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>

http://wiki.jikexueyuan.com/project/kendo-ui-development-tutorial/images/42.jpg" alt="" />

樣一個簡單的移動應用就出現(xiàn)了，Kendo UI 缺省情況下使用 iOS 界面（如上圖），在手機上運行會根據(jù)手機平臺的不同選擇合適的界面風格，你也可以通過指定平臺類型，比如：


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

來測試你的應用在不同平臺上顯示，也可以根據(jù)平臺的不同，對應用做些調(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 中使用。

上一篇：Kendo MVVM 數(shù)據(jù)綁定(十) Source下一篇：Kendo MVVM 數(shù)據(jù)綁定(九) Text

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

移動應用開發(fā)簡介

第一步： 創(chuàng)建 HTML 頁面

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

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

第四步：構造 View

第五步：初始化移動應用

第一步：　創(chuàng)建 HTML 頁面