Kendo UI 移动应用开发简介

Kendo UI 支持开发 Web 应用,前面介绍的 SPA,也支持开发移动应用,至于使用 HTML5 + JavaScript + CSS 开发移动是不是一个好的选择不在本文的讨论之中。Kendo UI Mobile 提供了一种快速开发跨手机平台的方法( Kendo UI 可以使得这种 Web 应用在界面上看起来和本地应用非常类似)。如果你的移动应用需要数据的支持,了解一些 JSON 方面计的知识也是必须的。借助于 PhoneGap 等工具可以 HTML5 打包成移动平台的本地应用,并支持使用 JavaScript 访问一些平台相关的功能,如 GPS,Camera 等功能,有兴趣的可以参考相关文档。

下面三点为构成 Kendo 移动应用的几个组成部分:

  1. Application: Kendo 移动应用的主应用类,用来管理应用部分部分之间切换,应用页面历史,加载 View 以及其它一些重要的移动应用相关的任务。
  2. Layout: 定义移动应用 UI 的布局,类似于 Web 应用的 MasterPage,主要可以用来定义不同 View 之间一些公用的部分,比如菜单。
  3. 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 中使用。


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Kendo UI 单页面应用(四) Layout知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。