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

2019年11月29日 阅读数:150
这篇文章主要向大家介绍Kendo UI开发教程(27): 移动应用开发简介,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

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

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

  1. Application: Kendo 移动应用的主应用类,用来管理应用部分部分之间切换,应用页面历史,加载View以及其它一些重要的移动应用相关的任务。
  2. Layout: 定义移动应用UI的布局,相似于Web应用的MasterPage,主要能够用来定义不一样View之间一些公用的部分,好比菜单。
  3. Views: 移动应用的每一个页面,每一个应用包含一个或多个页面。

Layouts 和 View 使用HTML来定义,而Application 为JavaScript。 下面的步骤给出了编写Kendo UI移动应用的基本步骤。jquery

第一步: 建立HTML页面

Kendo UI移动应用可使用简单的HTML页面来建立,这里咱们建立一个简单的index.html 以下:android

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的引用。ios

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:app

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 库之间的联系。所以wordpress

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中使用。