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事件会被应用在大多数的桌面client上。
然而,事件管理系统会自己主动识别触屏设备。并依据浏览器将它切换为touchstart或pointerdown。要能正确的与平板交互,事件转换是必需的。
事件更新是双向的。既加入新功能到移动应用程序,也加入新功能到桌面应用程序。Ext JS的小部件,如今即使执行在桌面浏览器,也能响应为移动应用程序设计的滑动、长按或其它手势。当然。涉及多点触碰(比如夹、旋转等)的事件并不能移植到桌面的鼠标操作环境中。这样,并非鼓舞开发者去将移动体验应用到桌面上,而是要确保展示的一致性。
启用触碰事件后,动量卷动 (momentum scrolling)就可将它的方式应用到框架。Touch Scroller如今是Ext JS 5的一个组成部分,能够自己主动应用在触屏设备。且不须要做不论什么配置。
不管是类系统更新还是事件管理更新,都显著加入了对平板的支持。
终于用户可通过与视图和小部件的交互来体验到这些新功能。以下我们来看看小部件是怎样通过布局来获得最佳的平板的支持的。
小部件
寻求最优的触屏展示已超越了触碰事件。
某些基于鼠标的交互模式(如mouserover/hover。右击)不能用在平板上。
在桌面浏览器上支持这些事件的小部件如今可採用其它手段来进行界面操作。
网格面板是这种小部件的完美演示样例。假设观察一下标题菜单。会发现它须要大量的交互来打开他们。
首先,要激活菜单,鼠标要移动到列标题上。然后UI显示一个箭头button在右边。
最后,按下button弹出菜单。
这个特定的流程不可能全然复制在触屏上。
虽然这样,网格面板还是有触屏感知的。并能将本地桌面模式替换为触屏模式。当网格显示在一台平板设备的时候。它可通过长按事件来显示标题菜单,而这只须要用户触屏列标题比平时更长一段时间。
还有一个有趣的演示样例是行的突出显示。它非常有趣,由于在平板上如今也有了替代品。突出显示的主要目的是便于识别鼠标指针位置。由于触屏没有这个问题,行突出显示显得有点过时。
Ext JS 5的小部件不单优化了平板上的显示,还包括了来自于Sencha Touch 2的新功能。比如,启用了图标的button让用户界面变得更美了。
属性iconCls如今在Ext JS工作得非常好,由于button被融入到了其它小部件,如标签面板,我们会看到整个堆栈都已经被更新了。
新的Sencha图像包是还有一个展示两个框架怎样美妙的实现整合的样例。
图表证明了新的类系统更新和事件管理更新让用户接口真正实现了设备无关性,同一时候保持了API和性能的持久性。不管是使用Ext JS 5还是Sencha Touch 2进行开发,一定要试一下图表。
除了这些特定的更新,不论什么小部件都具有专为移动设计准则而引入的 responsive配置项。不论什么基于方向或经过精心策划的可视区域的尺寸规则的具有訪问方法的配置属性都能够被更新。Phil Guerrant为此写了一篇具体的博客文章《Designing Responsive Applications with Ext JS》。还能够在演示样例程序中看到这些新功能。
假设在这一小节有不论什么遗漏的,那就是Ext JS 5为开发者提供了足够的工具来让小部件实现设备无关性。在开发mouseover或右击时,要为触屏考虑和计划所需的替代事件监听。框架提供了一些使用内置的小部件的解决方式。
这须要观察、学习和重用他们来创建成功的应用程序。
最后,一个完美的精心编制的平板应用程序就会为用户设备找到它合适的方式。
部署
在完毕制作完美的桌面和平板应用程序的全部艰苦工作后。接下来要做的就是部署。幸运的是,有多个可用的选项:
- 浏览器:最简单和最直接的解决的方法就是通过HTTP协议来将Web应用程序交付到client浏览器。别忘了使用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封装应用程序。
小结
Ext JS 5不只让应用程序能够在平板上显示。还包括了从0到公布这整个工作流程,还捆绑了强大的交互功能,甚至协助你部署应用程序。更重要的是,它非常easy,使学习曲线更适合于刚開始学习的人。当你開始构建下一个Ext JS 5的应用程序的时候。千万要记得可能某些人可能会在平板上使用它,而且会爱上它。
作者: Grgur Grisogono
Grgur is a Principal at Modus Create and is the co-author of Ext JS in Action SE. Grgur has experience in JavaScript, CSS, HTML5, Sencha Touch, Ext JS, web apps and hybrid mobile. He is active in the European Sencha community.