Kendo UI 支持开发Web应用，前面介绍的SPA，也支持开发移动应用，至于使用 HTML5 + JavaScript + CSS开发移动是不是一个好的选择不在本文的讨论之中。Kendo UI Mobile提供了一种快速开发跨手机平台的方法（Kendo UI可以使得这种Web应用在界面上看起来和本地应用非常类似）。如果你的移动应用需要数据的支持，了解一些JSON方面计的知识也是必须的。
借助于PhoneGap 等工具可以HTML5打包成移动平台的本地应用，并支持使用JavaScript访问一些平台相关的功能，如GPS，Camera等功能，有兴趣的可以参考相关文档。
下面三点为构成Kendo 移动应用的几个组成部分：
- Application: Kendo 移动应用的主应用类，用来管理应用部分部分之间切换，应用页面历史，加载View以及其它一些重要的移动应用相关的任务。
- Layout: 定义移动应用UI的布局，类似于Web应用的MasterPage，主要可以用来定义不同View之间一些公用的部分，比如菜单。
- 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>
|
这样一个简单的移动应用就出现了，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中使用。
