Kendo UI Validator 支持了客戶端校驗的便捷方法,它基於 HTML 5 的表單校驗功能,支持很多內置的校驗規則,同時也提供了自定義規則的便捷方法。HTML 5 表單校驗HTML5 的一項重要功能是HTML 5 表單校驗屬性, 通過設置限制屬性為 HTML 輸入設置輸入類型,值域等,然後由瀏覽器來檢查輸入是否合法。
Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成 HTML 元素的过渡显示。每种特效近可能的使用 CSS Transition ,对于一些老版本浏览器使用修改属性的方法作为补充。所有动画可以反向显示从而可以方便的实现元素的显示和隐藏。 本篇介绍了 Kendo UI 特效的概要,完整的文档可以参考 API 文档准备开始所有 Kendo UI 特效都是通过 kendo.
Kendo UI 框架提供了一个易用,高性能的 JavaScript 模板引擎。通过模板可以创建一个 HTML 片段然后可以和 JavaScript 数据合并成最终的 HTML 元素。Kendo 模板侧重于 UI 显示,支持关键的模板功能,着重于性能而不是语法上的方便。模板语法Kendo 模板使用了一种称为“#”的语法形式,使用这种语法,#用来表明模板中的某个部分可以使用 JavaScript 数据来替代。
Kendo 的数据源支持本地数据源( JavaScript 对象数组),或者远程数据源(XML, JSON, JSONP),支持 CRUD 操作(创建,读取,更新和删除操作),并支持排序,分页,过滤,分组和集合等。准备开始下面创建一个本地数据源。
avaScript 也是一种面向对象的开发语言,但和 C++,Java,C# 所不同的是,它的对象不是基于类(Class),而是基于对象原型(ProtoType),因此对于来自 C++,Java 等背景的程序员,初次接触到 JavaScript 的面向对象的开发时,开始会有些不适应。而 JavaScript 语言本身也非常灵活,实现面向对象的方法也很多,不同的框架使用的方法也不同。
Kendo UI 是基于 jQuery 库开发的,Kendo UI widgets 是以 jQuery 插件形式提供的。这些插件的名称基本上都是以 kendo 作为前缀。比如 Kendo 的 autocomplete UI 组件名称为 kendoAutoComplete ,Kendo UI 手机 UI 组件是以 “kendoMobile”为前缀。比如:”kendoMobileListView”.
前面在介绍准备 Kendo UI 开发环境时我们使用 jQuery 的方法将一个 HTML 元素转换成一个 Kendo UI 控制项: $(“#datepicker”).kendoDatePicker();除了使用 jQuery 插件的方法来初始化方法外,每个 Kendo 控制项还可以通过 data 属性来初始化,此时你需要设置 data 的 role 属性,然后调用 kendo.init 方法。
首先你需要从 Telerik 网站下载试用版开发包,注意需要注册后才能下载,或者从本站下载 (18M)下载后直接解压后包含下面几个文件和目录:./examples – 示例./js – minified 化后的 JavaScript 库./vsdoc JavaScript Intellisense 支持文件/styles – minified 后的 CSS 及主题资源.changelog.html – Kendo UI 发布文件.如果你下载伺服器端支持(比如 ASP.
jQuery UI 是一套 JavaScript 函式库,提供抽象化、可自订主题的 GUI 控制项与动画效果。基于 jQuery JavaScript 函式库,可用来建构互动式的 Web 应用。在开发 Web 应用时,可以直接使用 jQueryUI ,也可以使用其它一些基于 jQuery 的其它 UI 框架,其中 Kendo (日文剑道) UI 就是其中的佼佼者。
我们的应用现在完成了。你可以随意练习这些代码,用 git checkout 或者 goto_step.sh 命令切换到之前的步骤。对于更多我们在教程部分提及的细节以及 AngularJS 理论的例子,你可以在 开发指南 - Developer Guide 中找到。当你准备好使用 AngularJS 创建一个新项目时,我们推荐使用 angular-seed 项目来引导你的开发。
最后一步,我们通过在之前创建的模板代码上方附加CSS和JavaScript动画来加强phonecat web应用。现在我们使用 ngAnimate模块来保证动画可以贯穿这个应用。另外我们使用常用的ng指令来自动触发使动画接入的挂钩。当发现一个动画之后,这个动画就会在标准的DOM操作之间运行,该操作在给定的时间中发布在元素上(如在ngRepeat上插入或删除节点或者在ngClass上添加或删除类)。
在这一步中,我们会改进我们APP获取数据的方式。请重置工作目录: git checkout -f step-11对我们应用所做的最后一个改进就是定义一个代表 [RESTful][http://en.wikipedia.org/wiki/Representational_State_Transfer] 客户端的定制服务。有了这个客户端我们可以用一种更简单的方式来发送XHR请求,而不用去关心更底层的 $http 服务(API、HTTP方法和URL)。
在这一步,你会在手机详细信息页面让手机图片可以点击。请重置工作目录: git checkout -f step-10手机详细信息视图展示了一幅当前手机的大号图片,以及几个小一点的缩略图。如果用户点击缩略图就能把那张大的替换成自己那就更好了。现在我们来看看如何用AngularJS来实现它。步骤9和步骤10之间最重要的不同在下面列出。你可以在 GitHub 里看到完整的差别。
在这一步你将学习到如何创建自己的显示过滤器。请重置工作目录: git checkout -f step-9现在转到一个手机详细信息页面。在上一步,手机详细页面显示“true”或者“false”来说明某个手机是否具有特定的特性。现在我们使用一个定制的过滤器来把那些文本串图形化:√作为“true”;以及×作为“false”。来让我们看看过滤器代码长什么样子。
在这一步,你将实现手机详细信息视图,这个视图会在用户点击手机列表中的一部手机时被显示出来。请重置工作目录: git checkout -f step-8现在当你点击列表中的一部手机之后,这部手机的详细信息页面就会被显示出来。为了实现手机详细信息视图我们将会使用$http来获取数据,同时我们也要增添一个phone-detail.html视图模板。步骤7和步骤8之间最重要的不同在下面列出。
在这一步,你将学习如何创建一个布局模板并且通过路由功能来构建一个具有多个视图的应用。请重置工作目录: git checkout -f step-7注意到现在当你转到app/index.html时,你会被重定向到app/index.html#/phones并且相同的手机列表在浏览器中显示了出来。当你点击一个手机链接时,一个手机详细信息列表也被显示了出来。步骤6和步骤7之间最重要的不同在下面列出。
这一步,你会为手机列表的手机添加缩略图以及一些链接,不过这些链接还不会起作用。接下来你会使用这些链接来分类显示手机的额外信息。请重置工作目录: git checkout -f step-6现在你应该能够看到列表里面手机的图片和链接了。步骤5和步骤6之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。数据注意到现在phones.
到现在为止,我们使用是硬编码的三条手机记录数据集。现在我们使用AngularJS一个内置服务$http来获取一个更大的手机记录数据集。我们将使用AngularJS的依赖注入(dependency injection (DI))功能来为PhoneListCtrl控制器提供这个AngularJS服务。请重置工作目录: git checkout -f step-5刷新浏览器,你现在应该能看到一个20部手机的列表。
在这一步你会增加一个让用户控制手机列表显示顺序的特性。动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情。请重置工作目录: git checkout -f step-4你应该发现除了搜索框之外,你的应用多了一个下来菜单,它可以允许控制电话排列的顺序。步骤3和步骤4之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。
我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽。我们要加入全文检索功能(没错,这个真的非常简单!)。同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙。它监视着你的应用,并且在发生回归的时候迅速报告。请重置工作目录: git checkout -f step-3我们的应用现在有了一个搜索框。
关注时代Java