Ext JS 5对平板的支持

2014-8-18 15:13| 发布者: joejoe0332| 查看: 3908| 评论: 0|原作者: LeoXu, 土渣渣, 鉴客, 无若|来自: oschina

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

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

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

Ext JS 4 vs Ext JS 5 for Devices

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

类系统

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

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

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

Ext JS code snippet

　　在正常的情况下，对于属性 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. 这次升级中的一个关键成员就是能将通用的事件转换对应到跟平台相关的变种事件，这一新的事件标准化模式.

Ext JS mousedown code snippet

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

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

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

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

组件

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

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

Ext JS Mousedown code snippet

扩展了的头部菜单

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

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

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

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

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

Ext JS Mousedown code snippet

　　 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 2

Sencha Charts 是首个可以在 Ext JS 5 和 Sencha Touch 2 上共享的包

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

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

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

部署

　　当你完成了所有工作来实现超棒的桌面和平板应用时，接下来就是应用的部署。幸运的是 ExtJS 提供多种部署选项：

浏览器. 这是最简单最直接的通过 HTTP(S) 协议在浏览器上访问 Web 应用的方式。不过别忘了使用：sencha app build product 命令来最小化、压缩和优化源码。
Sencha Space. 企业应用要求企业的解决方案。Space 可以帮助分发和管理安全的 Web 应用到一个 BYOD 环境，完美无瑕的使用 ExtJS 5 应用
Cordova. 混合应用开发者很喜欢 ExtJS 5 和 Sencha Cmd 5 的集成。新的构建工具可以让开发者非常简单的封装基于 Cordova (PhoneGap) 应用，只需要通过 sencha app build native 命令即可