Ext JS 5 对平板的支持 【已翻译100%】

Ext JS 已经被公认为桌面web应用的领衔框架. 计算机应用市场,无论是在个人还是企业领域,都因为平板开始挑战全球个人PC的销售量而变得云诡波谲起来. Sencha 认识到了这种变化,并在其 Ext JS 5 中退出了新的特性和功能优化.

Ext JS 5 从 Sencha Touch 2 那里学到了一堆的新花样. 多年在最佳移动web应用框架领域的经验集于一身,使得其在台式机上面的产品也能在现在平板上得到完美的呈现. 我们可以从整个全线的更新中看到这些更新 — 类系统,事件管理,小窗口,还有新的部署选项.

Ext JS 4 vs Ext JS 5 for DevicesIn 除了提供平板上的富Web应用,Ext JS 5 还完全支持触摸屏设备上的所有交互形式

类系统
支持面向平板的新功能的坚实基础,来自于最新的类系统更新. 当 Ext JS 4 引入配置系统时, 一直到Sencha Touch 2都还不完全是强制的. 开发者现在可以得到最有效的配置对象,get方法,set方法,update方法,apply方法,甚至还有Ext JS 5 中强大的 Ext.factory.

你需要理解,遵循了第4版本的要求,新的 Ext JS 配置系统并不一定需要使用配置对象。不过,它还是能够将配置对象的属性自动转换成它们对应的根配置的.

为了能够更好的理解这些概念,请参阅以下的 Ext JS 的代码片段:

在正常的情况下,对于属性 html 应该在 config 代码块外,至少在Ext JS 因为 Ext.Component 已经包含了一个函数 setHtml, 对于 系统级别的值通过 setter的方式实现。

重要的价值使用 在 Ext JS 5 reuse the code written for Sencha Touch 2 ,相反 这不仅仅允许开发人员在不同框架的应用程序中共享代码,而且能够使用 Ext JS 5 中关于Sencha Touch 的更多的特性。

事件

对于触摸屏而言,触摸是最至关重要的输入方法, 这就是为什么Sencha要将触摸事件和对手势的支持加入 Ext JS 5. 这次升级中的一个关键成员就是能将通用的事件转换对应到跟平台相关的变种事件,这一新的事件标准化模式.

在这个特定的示例中,mousedown事件会被用在大多数桌面客户端之上. 而事件管理系统将会自动的识别到触摸屏设备,并将mousedown事件切换到 touchstart 或者 pointerdown 事件, 这要看浏览器是怎么提供支持的了. 事件翻译对于同平板设备进行正常的交互式至关重要的.

事件的更新时双向的,移动和桌面应用都会被加入新的特性. Ext JS 组件现在能对手指扫动,长按,还有其它专为移动设备设计的手势操作进行响应, 甚至在一个桌面系统的浏览器上面也能起作用. 自然,需要多指操作的事件(比如,开合,旋转) 是不能被移植到使用鼠标操作的桌面环境的. 当然,开发者也不会被鼓励去移植一套移动的体验到桌面之上,但还是要确保展现上的一致性.

如果开启了触摸事件,动势滚动也会在框架中发生作用. Touch Scroller 现在已经是 Ext JS 5 的一个组成部分了, 它会在触摸屏设备上自动开启,而不需要进行什么配置.

类系统和事件管理的更新中都加入了能显著促进对平板设备支持的特性。终端用户将会在同视图和组件交互的过程中体验到这些特性。让我们来看看是如何放置以获取对平板设置的最优支持的.

组件

对于最优触摸屏展现的需求已经走在了实现触摸事件的前面. 某些基于鼠标的交互模式(鼠标滑过/悬停,右键) 将不会在平板上面起作用. 在桌面浏览器上面支持这些事件的组件将会使用一些界面操作的替代手段.

网格面板就是这样一种组件的完美示例. 当我们观察头部菜单时,我们很快会发现需要一些交互较能将它们打开.

扩展了的头部菜单

首先,为了激活菜单,我们将鼠标悬停在列的头部。然后将会显示一个靠右对齐的箭头按钮. 最后我们按下按钮,让菜单拉下显示出来.

使得这一流程在触摸屏上重复是可能的. 不过,网格面板是能够识别触摸屏的,并能够使用触摸屏的交互模式替换替换掉原来的桌面交互模式. 当在平板设备上查看时,网格会在长按事件发生时显示头部菜单,这需要用户花比平常稍长一点的时间,来简单的在列的头部按一下.

另外一个有趣的示例时行的高亮. 之所以有趣是因为它现在在平板设备上有了替代方案. 高亮的主要目的是使得指针所指处的那行变得醒目. 由于触摸屏并没有指针,因此行高亮就变得过时了.

Ext JS 5 中的组件不仅对平板设备上的展现进行了优化,它们还从 Sencha Touch 2 处引入了一些新的特性. 例如,使用了图标的按钮使得用户界面更加的漂亮.

iconCls 属性现在也能在 Ext JS 5 中起作用了. 因为按钮被其它诸如TabPanel的组件复用了,因此我们会看到整个栈都得到了更新.

The 带有icon支持的新的TabPanel

新的 Sencha Charts 包是另外一个两个框架交互的完美实例。Charts 证明了新的类系统和事件管理更新让 UI 更方便的进行设备上的诊断,同时维护持久化 API 和性能。不管你是否在 Ext JS 5 或者 Sencha Touch 2 上开发应用,你都应该试试 Charts。

Sencha Charts is the first package shared between Ext JS 5 and Sencha Touch 2Sencha Charts 是首个可以在 Ext JS 5 和 Sencha Touch 2 上共享的包

除了这三个特殊的更新外,任何的 widget 都提供专为移动的设计规则,这是通过引入了响应式配置插件实现的。任何配置属性都有一个 setter 方法来针对当前屏幕方位进行更新,或者是根据视角唯独进行更细致的计划。Phil Guerrant 写了一篇文章 Designing Responsive Applications with Ext JS 详细描述了此特性,你也可以查看一些 演示程序.

如果有额外的部分的话,那就是 Ext JS 5 给开发者提供了足够多的工具让它与设备无关。当开发的是鼠标悬停或者鼠标右键操作,就需要一个对触摸屏事件监听器的替换方案。框架提供大量构建在widgets之上的解决方案。查看,学习并重复使用它们直至成功地制作出app应用。

最终,一个完美且精巧的应用用这种方式被呈现在用户的设备上。

时间: 2024-11-01 20:57:26

Ext JS 5 对平板的支持 【已翻译100%】的相关文章

如何雇一个牛逼的 Node.js 开发者 【已翻译100%】

初创公司是我的激情所在,而我干的也是管理一群雄心壮志的开发人员.我工作在Strongloop,并且已经在很多初创公司待过.初创公司在雇佣问题上有它独特的挑战----预算紧,期限近.加上要使用开源框架进行开发,而且还是相对年轻的框架,如Node.js,这一切使得雇佣一个合适的团队成为了一种巨大的挑战. 正如所有新兴并被快速采用的技术框架一样,一开始的挑战就是给你的技术团队增加高效的人才资源.在快速得出关于把 Javascript 开发变成 Node.js 工厂的结论之前,让我们先来看看关于 Nod

50 个 jQuery 插件可将你的网站带到另外一个高度 【已翻译100%】

Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好的终端用户体验,它们比原来更轻量级,还有更强的处理能力. 关键是这些新发展起来的脚本和插件是能构建响应式Web的,而且还不会丧失它们原有的功能特性--除了更优秀和更轻巧(就文件大小而言)之外,它们还不会增加页面加载的时间. 通过浏览文档,掌握JQuery的语法是很容易的.它可以支持选择DOM元素,创

编写更好代码的 6 个提示 【已翻译100%】

每周我都可以用四种不同的语言编写至少几百行代码.我也可以同其他与我一同工作的开发者协作进行代码的编辑和审查. 简单来说,有许多代码在到处放着,当它们没有被组织管理起来,但 更重要的是当它们没有写好时,事情就会变得有点复杂起来.让我们来看一看几种能提升我们的代码整体质量的不同方法. 1. 开始构建模块 保持代码一致,可重用且有组织的一个最好方式就是将功能成组的放在一起.例如,别把你所有的js代码都扔到一个main.js文件中,而是要尝试基于功能将它们分组放在分开的文件里面, 然后在你达成你的构建步

使用 Protocol Buffers 代替 JSON 的五个原因 【已翻译100%】

在Ruby和Rails开发者中,面向服务(Service-Oriented)架构有一个当之无愧的名声,它是一个缓解程序规模恶性增长的一个强有力的途径,可在大量应用程序中提取关注点.这些新生小巧的服务通常继续使用Rails或Sinatra,并使用JSON在HTTP上通信.尽管JSON作为一个数据相互交换格式,有很多优点:人类可读.可理解,并通常表现出色. 浏览器和JS并不直接处理数据--尤其是遇到内部服务时.我的观点是,结构化格式,例如谷歌的Protocol Buffers,是一个比JSON在编码

一个易用的 WPF 自动完成文本框 【已翻译100%】

介绍 这篇文章的目的是在社区中分享一些我上个月完成代码,让一个简单的文本框拥有自定义的自动完成过滤器.这个想法的灵感来自于GMail的搜索功能.在我的项目中,自定义的控件需要如下所有我需要的功能: 它是容易使用的,集成到项目中时,需要的代码要尽量的少. 它需要兼容WCF.我的想法是像GMail一样创建一个分层的应用,过滤功能需要在服务器端执行,然后将结果通过WCF通道传送. 它需要过滤自定义数据(来自于数据库或者自定义的列表)并可搜索多个字段,像GMail一样,建议类似的结果. 所有的过滤需要异

SQLite4 的设计 【已翻译100%】

1.0 内容提要 1.SQLite4 是一个放在库中的紧凑的,自包含的,零维护的的ACID数据库引擎, 像SQLite3一样, 但具有改进的接口和文件格式. 2.运行时环境封装到了一个对象之中. 3.使用了一个很不错的键值对存储引擎: 一个独立的大型键空间 - 不是SQLite3中那种每个表单独的键空间和索引. 2.按字典顺序的键排序. 3.多个存储引擎,可在运行时互换. 4.默认在磁盘上的存储殷勤使用了一个日志结构的合并数据库. 4.表的PRIMARY KEY真正被用作存储引擎的键. 5.可以

AngularJS 提交表单的方式 【已翻译100%】(2/2)

简洁语法 这个例子是以字符串的方式发送数据,并且发送你的头信息.如果你不需要这些,并且希望Angular 的$http POST尽可能的简洁,我们可以使用简写方法: ... $http.post('process.php', $scope.formData) .success(function(data) { ... }); ... 绝对更简洁更容易记住方法. $http 内部控制器: 理想的,你可以将$http请求从controller移除到 service.这只是为了演示目的,我们将会尽快在

Nginx 作为 WebSockets 代理 【已翻译100%】

WebSocket 协议给我们提供了一个创建可以支持客户端和服务端进行双向实时通信的web应用程序的方法.相比之前使用的方法,WebSocket(作为HTML5的一部分)可以使我们更容易开的发出这种类型的应用程序.绝大多数的现代浏览器都支持WebSocket,包括火狐,IE,Chrome,Safari以及Opera等,同时,越来越多的服务端框架也开始支持WebSocket了. 对于企业应用来说,我们需要多个WebSocket服务器来保障性能和高可用性,因此我们迫切的需要对WebSocket协议进

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 【已翻译100%】

本文为开发者呈现了一些概念和相关的示例代码,介绍了用ngResource($resource)服务POST方式提交数据到和服务器端SpringMVC环境下的RESTFul APIs.示例代码可以在如下页面找到:http://hello-angularjs.appspot.com/angularjs-restful-apis-post-method-code-example.相对于使用$http服务,我更喜欢这种方法的主要理由是ngResource允许你使用抽象方式(例如$resource类),你