Ext JS 5的平板支持

Posted 周六, 08/02/2014 - 00:30 by admin

Ext JS已被公认为桌面Web应用程序的领先框架。自从平板开始在全球挑战PC的销售，无论是个人还是企业，电脑横向的应用已经产生急剧的变化。Sencha意识到了这种变化，并推出了包含新功能和进行优化了的Ext JS 5。

Ext JS从Sencha Touch 2学到了一些新把戏。多年最好的移动Web应用程序框架经验的沉淀要应对现代平板电脑上的桌面显示，那是卓卓有余的。通过类系统、事件管理、窗口小部件和新的部署选项就可以了解到这些更新。

除了能在平板上展示富应用程序外，Ext JS 5还完全支持所有为触屏设备量身定做的交互模式。

类系统

在最新的类系统中，针对平板所需的新功能做了更新。在Ext JS 4引入了配置（config）系统，但直到Sencha Touch 2，它才被确切的被强制执行。开发人员现在可以在Ext JS 5充分利用起配置对象、访问方法（getter）、修改方法（setter）、更新方法（updater）和强大的Ext.factory。

要知道的是，新的Ext JS配置系统并不要求使用配置对象，这是为了向下兼容版本4。不过，它能自动将配置对象的属性转化为对应的根属性。

为了更好的解释这一概念，请观察以下Ext JS代码片段：

通常情况下，html属性在早期的Ext JS应该定义在config块外，因为Ext.Component已经包含了一个名为setHtml的成员函数，类系统会将值传送到访问方法。

这个重要的方式有助于Ext JS 5重用为Sencha Touch 2编写的代码，而反之亦然。这并不仅仅限于在两个框架中共享代码，它还能将许多Sencha的重要功能从Sencha Touch纳入到Ext JS 5中。

事件

Touch的核心输入方式是基于触屏的，而这也是为什么Sencha将touch事件和手势交互支持捆绑到Ext JS 5的原因。这次升级的关键一点就是为新的事件统一模式，把公共事件转换为各种不同平台的事件。

在该示例中，mousedown事件会被应用在大多数的桌面客户端上。然而，事件管理系统会自动识别触屏设备，并根据浏览器将它切换为touchstart或pointerdown。要能正确的与平板交互，事件转换是必需的。

事件更新是双向的，既添加新功能到移动应用程序，也添加新功能到桌面应用程序。Ext JS的小部件，现在即使运行在桌面浏览器，也能响应为移动应用程序设计的滑动、长按或其他手势。当然，涉及多点触碰（例如夹、旋转等）的事件并不能移植到桌面的鼠标操作环境中。这样，并不是鼓励开发人员去将移动体验应用到桌面上，而是要确保展示的一致性。

启用触碰事件后，动量卷动 (momentum scrolling)就可将它的方式应用到框架。Touch Scroller现在是Ext JS 5的一个组成部分，可以自动应用在触屏设备，且不需要做任何配置。

无论是类系统更新还是事件管理更新，都显著添加了对平板的支持。最终用户可通过与视图和小部件的交互来体验到这些新功能。下面我们来看看小部件是如何通过布局来获得最佳的平板的支持的。

小部件

寻求最优的触屏展示已超越了触碰事件。某些基于鼠标的交互模式（如mouserover/hover，右击）不能用在平板上。在桌面浏览器上支持这些事件的小部件现在可采用其他手段来进行界面操作。

网格面板是这样的小部件的完美示例。如果观察一下标题菜单，会发现它需要大量的交互来打开他们。

首先，要激活菜单，鼠标要移动到列标题上。然后UI显示一个箭头按钮在右边。最后，按下按钮弹出菜单。

这个特定的流程不可能完全复制在触屏上。尽管这样，网格面板还是有触屏感知的，并能将本地桌面模式替换为触屏模式。当网格显示在一台平板设备的时候，它可通过长按事件来显示标题菜单，而这只需要用户触屏列标题比平时更长一段时间。

另一个有趣的示例是行的突出显示。它很有趣，因为在平板上现在也有了替代品。突出显示的主要目的是便于识别鼠标指针位置。由于触屏没有这个问题，行突出显示显得有点过时。

Ext JS 5的小部件不单优化了平板上的显示，还包含了来自于Sencha Touch 2的新功能。例如，启用了图标的按钮让用户界面变得更美了。

属性iconCls现在在Ext JS工作得很好，因为按钮被融入到了其他小部件，如标签面板，我们会看到整个堆栈都已经被更新了。

新的Sencha图像包是另一个展示两个框架如何美妙的实现整合的例子。图表证明了新的类系统更新和事件管理更新让用户接口真正实现了设备无关性，同时保持了API和性能的持久性。无论是使用Ext JS 5还是Sencha Touch 2进行开发，一定要试一下图表。

除了这些特定的更新，任何小部件都具有专为移动设计准则而引入的 responsive配置项。任何基于方向或经过精心策划的可视区域的尺寸规则的具有访问方法的配置属性都可以被更新。Phil Guerrant为此写了一篇详细的博客文章《Designing Responsive Applications with Ext JS》，还可以在示例程序中看到这些新功能。

如果在这一小节有任何遗漏的，那就是Ext JS 5为开发人员提供了足够的工具来让小部件实现设备无关性。在开发mouseover或右击时，要为触屏考虑和计划所需的替代事件监听。框架提供了一些使用内置的小部件的解决方案。这需要观察、学习和重用他们来创建成功的应用程序。

最后，一个完美的精心编制的平板应用程序就会为用户设备找到它合适的方式。

部署

在完成制作完美的桌面和平板应用程序的所有艰苦工作后，接下来要做的就是部署。幸运的是，有多个可用的选项：

浏览器：最简单和最直接的解决办法就是通过HTTP协议来将Web应用程序交付到客户端浏览器。别忘了使用Sencha Cmd的“sencha app build production”命令来缩小、压缩和优化源代码。
Sencha Space：企业应用程序需要企业级的节方案。Space有助于在BYOD环境中交付和管理安全的Web应用程序，并能完美的运行Ext JS 5的应用程序。
Cordova：混合应用程序的开发人员会喜欢上将Ext JS 5和Sencha Cmd 5集成在一起的改进。新的构建功能能让开发人员轻松的使用“sencha app buildnative”命令来基于Cordova封装应用程序。