Ext JS 提供了对触屏输入设备包含平板和触摸屏手提电脑的支持.这个特性的主要目的是使用较小或不用修改就能允许 Ext JS 应用程序运行在触摸屏设. 这意味着开发人员不用花太多时间来思考兼容性问题,从而有更多的时间来实现应用程序功能.
如何实现触摸屏支持
支持触屏设备可以分解为三个方面.
事件标准化
事件标准化是允许 Ext JS应用程序在触屏设备上运行的关键.这个标准化发生在幕后是从标准的鼠标事件转换为等价的触屏和指针事件.
指针事件是 w3c 标准来处理定位屏幕上一个特定坐标的事件,与输入设备无关(鼠标,触屏,触笔等等.
当你的代码要一个鼠标事件的监听器请求时,框架绑定一个相似的按需的触点事件.例如,如果应用程序要绑定一个 mousedown (鼠标按下)监听器:
myElement.on('mousedown', someFunction);在一个支持触点事件的设备上,事件系统转换这个操作为一个touchstart 事件:
myElement.on('touchstart', someFunction);或者, 在一个支持触笔事件的设备上转换为一个 pointerdown (点下)事件:
myElement.on('pointerdown', someFunction);有了这个转换,你就可以不需要额外的编码来完成平板和触屏设备的支持.
大多数情况下框架能在鼠标、触屏和触笔输入设备间作无缝转换.但是,有 一些鼠标操作(如 mouseover) 不能简单的翻译到触屏动作.这些事件需要一些区别对待,在下节中将会列出来.
手势系统
和标准的DOM事件不一样的是,元素也能够触发人工 "手势"事件. 因此在 Ext JS 5中 Sencha Touch 事件系统形成了这些新事件的基础实现,Sencha Touch 用户可能已经熟悉了这个概念.
从浏览器的方面来看,有三种主要类型关于触笔、触屏和鼠标的事件- 开始、移动和结束:
| 事件 | Touch | Pointer | Mouse |
|---|---|---|---|
| 开始 | touchstart | pointerdown | mousedown |
| 移动 | touchmove | pointermove | mousemove |
| 停止 | touchend | pointerup |
在解释这些事件的时序上,框架能合成更多复杂的事件诸如drag(拖), swipe(滑动), longpress(长按), pinch(捏), rotate(旋转), 和 tap(轻触). Ext JS 应用程序能象其它事件一样监听手势事件,例如:
Ext.get('myElement').on('longpress', handlerFunction);原始的 Sencha Touch 手势系统原意是为主要处理触屏事件而设计的. 通过增加对点击类和鼠标事件到手势系统, Ext JS 5 允许任意手势来响应任意类型的输入. 这意味着不管是使用触碰所有手势能被触发,而且所有单点手势 (如tap(轻触), swipe(滑动)等.) 也能象鼠标一样被触发.手势处理系统的这一结果可以在输入类型无关的设备间无缝工作.
触摸滚动
在有些移动webkit浏览器中有溢出内容的元素的原生滚动有许多想要的内容.缺乏滚动惯性和滚动位置指示会使滚动繁琐和有直观的体验.这个 ‘touch scroller’, 从Sencha Touch 中借鉴过来的,通过使用 JavaScript 的滚动指示实现惯性滚动解决了这个问题.应用程序开发人员通常不需要做什么就可以开启 touch scroller.当浏览器的本地化滚动不是最佳时这个功能就默认启用了..
应用程序的触摸屏支持意味着什么
标准化事件和手势识别在 Ext JS 5 的应用程序中默认是激活的.这就是说,在大多数情况下,不需要特别的动作来启动平板和触屏设备的支持.但是,有2个特别方面需要额外的注意.
第一个方面是处理在触屏世界里没有明显类似的鼠标事件. 现在, Ext JS 5 不再尝试实现如下鼠标事件的标准化:
- mouseover
- mouseout
- mousenter
- mouseleave
在桌面电脑设备上对这些事件响应的功能在触屏设备上必须要重新实现.开发人员在对应用程序进行架构设计时需要把这个记在心里.为了确保在触屏设备上一些重要的功能能够被访问,需要对这些操作提供一个替代的实现方法.这意味着用一个合适的触碰手势来替代这些事件. Ext JS 在多个地方实现了这一功能.
一个例子是表格组件.在桌面电脑设备中,表格的列头菜单是在头部远素点击时触发时显示出来的.然而这个响应只有在列头的 mouseover 事件触发时才会显示.而在触屏设备上没有一个等同 ‘mouseover’的手势事件,因此不会被触发而菜单也不会可见,也因此不能触发.为确保列头菜单能够被访问, Ext JS 侦测到这个表格是在触屏设备上运行时,在响应 ‘longpress长按’事件时显示这个菜单.
注意: 应用程序的开发人员和定制化的组件也需要做相应的调整.
第二个方面是关于一些内部框架的变化要值得注意.为了支持触屏手势, Ext JS 5以上版本转换为一个代理事件模型.为了直接绑定监听器到DOM元素上,对每一个事件类型的一个简单监听器绑定到了DOM的上层 (window或document对象). Ext JS 事件系统然后对基于窗口对象中的元素的事件分发事件处理器. 使用 Ext JS API来监听事件的应用程序开发人员通过这个新的实施途径不会遇到任何问题.
然而,如果DOM API 用来直接绑定事件处理器 (addEventListener 或者 attachEvent), 或者使用第三方JavaScript 库,在直接的事件处理器和那种代理方式的事件处理的时序上可能会产生问题.
注意: 平板和触屏设支持 Safari, Chrome 和 IE10以上. Android 浏览器不支持.