Facebook Twitter LinkedIn E-mail
magnify
Home Posts tagged "Kendo UI"

Kendo UI开发教程: Kendo UI 示例及总结

前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分

20130826001

Web Demo
Mobile Demo
DataViz Demo

主要提供了每个部分UI组件的具体用法,比如Web Demos 包含了下面
20130826002

Mobile Demo 包含下面示例:
20130826003

DataViz Deom 包含下面示例:

20130826004

在正式开发Kendo Web应用前,需要把每个例子一一过一遍,对Kendo提供的UI组件的功能有个大概的了解,再看看本系列教程介绍的Kendo UI 开发的基本概念,你开发基于Kendo UI的Web应用就可以做到得心应手,次外Kendo UI还提供了三种服务器端的封装,AspNet MVC,JSP和PHP,这些封装并不是开发Web应用必须,实际上通过这些服务器封装代码执行后还是生成Kendo UI 对应的Javascript代码,和你直接使用JavaScript书写是等效的。你可以根据个人喜好选择是否使用服务器端封装。

为方便起见,这里把本教程列在下面:

  1. Kendo UI开发教程(1): 概述
  2. Kendo UI开发教程(2):准备Kendo UI开发环境
  3. Kendo UI开发教程(3): 初始化Data 属性
  4. Kendo UI开发教程(4): UI Widgets 概述
  5. Kendo UI开发教程(5): 使用 Kendo UI库实现对象的继承
  6. Kendo UI开发教程(6): Kendo DataSource 概述
  7. Kendo UI开发教程(7): Kendo UI 模板概述
  8. Kendo UI开发教程(8): Kendo UI 特效概述
  9. Kendo UI开发教程(9): Kendo UI Validator 概述
  10. Kendo UI开发教程(10): Kendo MVVM (一) 概述
  11. Kendo UI开发教程(11): Kendo MVVM (二) ObservableObject 对象
  12. Kendo UI开发教程(12): Kendo MVVM 数据绑定(一) attr
  13. Kendo UI开发教程(13): Kendo MVVM 数据绑定(二) Checked
  14. Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click
  15. Kendo UI开发教程(15): Kendo MVVM 数据绑定(四) Disabled/Enabled
  16. Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events
  17. Kendo UI开发教程(17): Kendo MVVM 数据绑定(六) Html
  18. Kendo UI开发教程(18): Kendo MVVM 数据绑定(七) Invisible/Visible
  19. Kendo UI开发教程(19): Kendo MVVM 数据绑定(八) Style
  20. Kendo UI开发教程(20): Kendo MVVM 数据绑定(九) Text
  21. Kendo UI开发教程(21): Kendo MVVM 数据绑定(十) Source
  22. Kendo UI开发教程(22): Kendo MVVM 数据绑定(十一) Value
  23. Kendo UI开发教程(23): 单页面应用(一)概述
  24. Kendo UI开发教程(24): 单页面应用(二) Router 类
  25. Kendo UI开发教程(25): 单页面应用(三) View
  26. Kendo UI开发教程(26): 单页面应用(四) Layout
  27. Kendo UI开发教程(27): 移动应用开发简介
 

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

<!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的内容都使用模板来显示,一个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="js/jquery.min.js"></script>
    <script src="js/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="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>

20130825007

这样一个简单的移动应用就出现了,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中使用。

 

Kendo UI开发教程(26): 单页面应用(四) Layout

Layout继承自View,可以用来包含其它的View或是Layout。
下面例子使用Layout来显示一个View

<div id="app"></div>

<script>
    var view = new kendo.View("<span>Foo</span>");

    var layout = new kendo.Layout("<header>Header</header><section id='content'></section><footer></footer>");

    layout.render($("#app"));

    layout.showIn("#content", view);
</script>

这个例子创建一个Layout对象,这个Layout含有一个Header,一个Content和一个footer,其中Content以setion元素定义,作为一个PlaceHolder, 实际应用时可以使用某个View来替换。
20130825005

Layout本身也是一个View,因此在showIn方法中也可以传入一个Layout对象,从而实现Layout的嵌套支持。

Layout定义多个View统一的布局,定义了View的Placeholder,因此在应用中可以实现View的切换。例如:

<div id="app"></div>

<script>
    var foo = new kendo.View("<span>Foo</span>", { hide: function() { console.log("Foo is hidden now"); }});
    var bar = new kendo.View("<span>Bar</span>");

    var layout = new kendo.Layout("<header>Header</header><section id='content'></section><footer></footer>");

    layout.render($("#app"));

    layout.showIn("#content", foo);
    layout.showIn("#content", bar);
</script>

这段代码首先显示”foo” ,然后很快切换到显示 “bar”。 这可以通过检查log来确认:

20130825006

 

Kendo UI开发教程(25): 单页面应用(三) View

View为屏幕上某个可视部分,可以处理用户事件。 View可以通过HTML创建或是通过script元素。缺省情况下View将其所包含的内容封装在一个Div元素中。
Kendo创建View有两种方式:

使用HTML 字符串创建View

<script>
    var index = new kendo.View('<span>Hello World!</span>');
</script>

或是使用

使用Script模板创建View

<script id="index" type="text/x-kendo-template">
    <span>Hello World!</span>
</script>

<script>
    var index = new kendo.View('index');
</script>

显示View内容

使用上述两种方法创建View,可以使用view的render方法来显示,render参数支持jQuery选择器,表示将View的内容显示到指定的DOM元素中或添加到指定的DOM元素。
例如:显示View

<div id="app"></div>

<script>
    var index = new kendo.View('<span>Hello World!</span>');

    index.render("#app");
</script>

20130825004

本例将View的内容显示到div元素中,如果需要向某个DOM元素中添加View的内容,可以使用append方法。例如:

<div id="app"></div>

<script>
    var index = new kendo.View('<span>Hello World!</span>');

    $("#app").append(index.render());
</script>

集成MVVM

在创建View时,可以传入一个model对象,此时model可以和创建的view绑定。例如:

<div id="app"></div>
<script id="index" type="text/x-kendo-template">
<div>Hello <span data-bind="text:foo"></span>!</div>
</script>

<script>
	var model = kendo.observable({ foo: "World" });
	var index = new kendo.View('index', { model: model });
	index.render("#app");
</script>
 

Kendo UI开发教程(24): 单页面应用(二) Router 类

Route类负责跟踪应用的当前状态和支持在应用的不同状态之间切换。Route通过Url的片段功能(#url)和流量器的浏览历史功能融合在一起。从而可以支持把应用的某个状态作为书签添加到浏览器中。Route也支持通过代码在应用的不同状态之间切换。

Router根路径回调函数

<script>
    var router = new kendo.Router();

    router.route("/", function() {
        console.log("/ url was loaded");
    });

    $(function() {
        router.start();
    });
</script>

缺省情况下,如果URL fragment为空,将使用缺省的“/”的根路径,此时对于的回调函数被调用,不管初始URL是什么,这个初始化的回调函数总会调用。
如果使用IE,按F12可以打开Developer Window,选择Console 可以看到console.log 的打印信息。

20130824002

参数

Router 支持bound parameters, optional segments, 和 route globbing,类似于绑定参数,可选参数,匹配符匹配参数等。
例如:绑定参数

<script>
    var router = new kendo.Router();

    router.route("/items/:category/:id", function(category, id) {
        console.log(category, "item with", id, " was requested");
    });

    $(function() {
        router.start();

        // ...

        router.navigate("/items/books/59");
    });
</script>

当运行这个页面时,注意地址栏中的地址为:

http://localhost:53223/Index.html#/items/books/59 –> #/items/books/59
20130825001

可选参数
如果URL的部分参数为可选的,此时Route的规则为使用”()”,将可选参数放在括号内。

<script>
    var router = new kendo.Router();

    router.route("/items(/:category)(/:id)", function(category, id) {
        console.log(category, "item with", id, " was requested");
    });

    $(function() {
        router.start();

        // ...
        router.navigate("/items/books/59");

        // ...
        router.navigate("/items");

        // ...
        router.navigate("/items/books");
    });
</script>

20130825002

使用×通配符匹配参数

<script>
    var router = new kendo.Router();

    router.route("/items/*suffix", function(suffix) {
        console.log(suffix);
    });

    $(function() {
        router.start();

        // ...
        router.navigate("/items/books/59");

        // ...
        router.navigate("/items/accessories");

        // ...
        router.navigate("/items/books");
    });
</script>

20130825003

页面切换

navigation方法可以用来切换应用,对应的路径的回调方法被调用,navigation方法修改URL的fragment部分(#后面部分)。
比如:

<a href="#/foo">Foo</a>

<script>
    var router = new kendo.Router();

    router.route("/foo", function() {
        console.log("welcome to foo");
    });

    $(function() {
        router.start();
        router.navigate("/foo");
    });
</script>

这个例子,将在地址栏显示 http://xxx/index.html#/foo。
如果对应的路径不存在,Router类触发routeMissing事件,并把URL作为参数传入。

<script>
var router = new kendo.Router({ routeMissing: function(e) { console.log(e.url) } });

$(function() {
    router.start();
    router.navigate("/foo");
});
</script>

你可以通过change事件来截获这种页面之间的切换,然后调用preventDefault阻止页面切换。

<script>
var router = new kendo.Router({
    change: function(e) {
        console.log(url);
        e.preventDefault();
    }
});

$(function() {
    router.start();
    router.navigate("/foo");
});
</script>
 

Kendo UI开发教程(23): 单页面应用(一)概述

Kendo单页面应用(Single-Page Application,缩写为SPA)定义了一组类用于简化Web应用(Rich Client)开发,最常见的单页面应用为Gmail应用,使用单页面可以给用户有使用桌面应用的用户体验。
Kendo 的Route类负责跟踪应用的当前状态和支持在应用的不同状态之间切换。Route通过Url的片段功能(#url)和流量器的浏览历史功能融合在一起。从而可以支持把应用的某个状态作为书签添加到浏览器中。Route也支持通过代码在应用的不同状态之间切换。
View和Layout类用于UI的显示。 UI事件和数据绑定可以通过MVVM或data初始化属性来完成。
下面为一个最简单的SPA应用框架。

<div id="app"></div>

<script id="index" type="text/x-kendo-template">
    Hello <span data-bind="text: foo"></span>
</script>

<script>
    var index = new kendo.View(
        "index", // the id of the script element that contains the view markup
        { model: kendo.observable({ foo: "World!" }) }
    );

    var router = new kendo.Router();

    router.route("/", function() {
        index.render("#app");
    });

    $(function() {
        router.start();
    });
</script>

运行这个应用,显示“Hello,World”。
20130824001