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

oschina 投递于 2014/07/30 06:50 (共 12 段, 翻译完成于 08-18)
阅读 4834
收藏 25
4
加载中

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 还完全支持触摸屏设备上的所有交互形式

LeoXu
LeoXu
翻译于 2014/07/30 16:05
2

类系统

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

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

LeoXu
LeoXu
翻译于 2014/07/30 16:13
1

为了能够更好的理解这些概念,请参阅以下的 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 的更多的特性。

土渣渣
土渣渣
翻译于 2014/07/31 10:10
1

事件

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

Ext JS mousedown code snippet

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

LeoXu
LeoXu
翻译于 2014/08/02 09:30
1

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

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

LeoXu
LeoXu
翻译于 2014/08/02 09:38
1

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

组件

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

LeoXu
LeoXu
翻译于 2014/08/02 09:50
1

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

Ext JS Mousedown code snippet

扩展了的头部菜单

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

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

LeoXu
LeoXu
翻译于 2014/08/02 09:58
1

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

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

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

Ext JS Mousedown code snippet
The 带有icon支持的新的TabPanel

LeoXu
LeoXu
翻译于 2014/08/02 10:04
1

新的 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 详细描述了此特性,你也可以查看一些 演示程序.

鉴客
鉴客
翻译于 2014/08/18 07:09
1

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

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

溪边九节
溪边九节
翻译于 2014/08/15 13:13
1
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(17)

骑着毛驴遛狗
骑着毛驴遛狗
ExtJS大部分功能始终是最好的,没有之一
Navee7
Navee7
"译者注:Spring0 请参见 敏捷开发中的 Sprint0."
敏捷开发中的sprint0到底是啥?
无悔_
无悔_
求指导。!
OSC屠夫
OSC屠夫
麻烦问下谁对ext5理解深刻点的,求指导
hythzx
hythzx

引用来自“采女孩的小蘑菇”的评论

5有破解的吗
你想多了,和Oracle一样,是否购买完全靠自觉,可以免费使用完整功能,人家保留告你的权利而已
codeLance
codeLance

引用来自“乾坤摄”的评论

退出了 你是,用啥翻译的
应该只是打错字了。跟翻译关系不大吧~
东方星痕
东方星痕
GPLv3在公司是怎么处理的?
你若安好
你若安好
电脑配置差的 浏览器直接卡死了
乾坤摄
乾坤摄
退出了 你是,用啥翻译的
雨翔河
雨翔河
我喜欢它,这是我第一次搞JS学的框架。
返回顶部
顶部