当前位置: 代码迷 >> 移动应用 >> Kendo UI开发课程(27): 移动应用开发简介
  详细解决方案

Kendo UI开发课程(27): 移动应用开发简介

热度:240   发布时间:2016-04-25 08:25:19.0
Kendo UI开发教程(27): 移动应用开发简介

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 如下:

1<!DOCTYPE html>
2<html>
3<head>
4    <title>My App</title>
5    <!--TODO: Add CSS links-->
6</head>
7<body>
8 
9    <!--TODO: Add JavaScript referneces-->
10</body>
11</html>

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

添加Kendu UI Mobile CSS和Javascript的引用。

1<!DOCTYPE html>
2<html>
3<head>
4    <title>My App</title>
5 
6    <link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
7</head>
8<body>
9 
10    <script src="js/jquery.min.js"></script>
11    <script src="js/kendo.all.min.js"></script>
12</body>
13</html>

第三步:定义应用布局文件

Layout为应用UI的模板,应用所有的View的内容都使用模板来显示,一个Layout可以包含任意的内容,通常它包含有标题头和任务栏。比如下面的Layout:

1<!DOCTYPE html>
2<html>
3<head>
4    <title>My App</title>
5 
6    <link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
7</head>
8<body>
9    <section data-role="layout" data-id="default">
10        <header data-role="header">
11            <div data-role="navbar">My App</div>
12        </header>
13        <!--View content will render here-->
14        <footer data-role="footer">
15            <div data-role="tabstrip">
16                <a href="#home">Home</a>       
17            </div>
18        </footer>
19    </section>
20 
21    <script src="js/jquery.min.js"></script>
22    <script src="js/kendo.all.min.js"></script>
23</body>
24</html>

代码中使用data-role属性,这个属性用来建立HTML和Kendo UImobile 库之间的联系。因此

1<section data-role="layout" data-id="default">

在应用初始化时,这部分定义将转换为Layout定义。 data-id为该Layout的id,后面定义的view 可以通过这个id来引用某个layout.
最后,为完整起见,这段代码还使用了NavBar和TabStrip两个用在移动应用中的UI组件。

第四步:构造View

创建好Layout之后,应用至少要创建一个View用来显示,大部分应用包含有多个View,这里我们创建一个简单的View如下:

1<!DOCTYPE html>
2<html>
3<head>
4    <title>My App</title>
5 
6    <link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
7</head>
8<body>
9    <div id="home" data-role="view" data-layout="default">
10        Hello Mobile World!
11    </div>
12 
13    <section data-role="layout" data-id="default">
14        <header data-role="header">
15            <div data-role="navbar">My App</div>
16        </header>
17        <!--View content will render here-->
18        <footer data-role="footer">
19            <div data-role="tabstrip">
20                <a href="#home">Home</a>       
21            </div>
22        </footer>
23    </section>
24 
25    <script src="js/jquery.min.js"></script>
26    <script src="js/kendo.all.min.js"></script>
27</body>
28</html>

View定义使用data-role属性“view”, data-layout定义使用那个layout.

第五步:初始化移动应用

前面定义了一些HTML元素,还没有使用任何JavaScript,使用下面一行代码,可以使得前面定义的HTML变得和本地应用类似:

1<script>
2    var app = new kendo.mobile.Application();
3</script>

20130825007

这样一个简单的移动应用就出现了,Kendo UI缺省情况下使用iOS 界面(如上图),在手机上运行会根据手机平台的不同选择合适的界面风格,你也可以通过指定平台类型,比如:

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

来测试你的应用在不同平台上显示,也可以根据平台的不同,对应用做些调整,比如:

1<div data-role="layout" data-id="foo" data-platform="ios">
2    <div data-role="header">iOS App</div>
3</div>
4 
5<div data-role="layout" data-id="foo" data-platform="android">
6    <div data-role="header">Android App</div>
7</div>

注意的是data-platform属性目前只支持在layout中使用。