Ext 4 概述(四)之 ARIA、Data、Draw、Fx

Ext JS

参考资源

Intro to Ext 4 (video

Ext 4 Architecture
(video)

通用问题

适配器(Adapters)

之前的各个Ext版本中都可以透过使用适配器(adpaters)的方式转换第三方的JavaScript库为我所用。Ext4的话就没这支歌仔唱了。改朝换代后,Ext
JS应用程序的底层库唯一限定为Ext Core。不过我们依然可以继续让Ext
Core与别的JS库共存于一个JS运行时(实际上这就是为什么一些JavaScript对象其原型的方法都被<a
href="#lang">移至到Ext中</a>去的原因)。不同的就是Ext不依赖于其他JS的底层库了。

ARIA

为达到ARIA用户友好性的支持,而且是全面的支持,Ext对每一块组件都细心打造进而在这方面加强之。Ext.Component新设有ariaRole角色的配置项属性,默认是“presentation”(该角色仅表示为可见的并没有更高的含义,也没有用户交互的功能)。然后就让后面更高层次逻辑来覆盖它。例如,Ext.button.Button对ariaRole覆盖,标识为“button”,就表示这个是一个执行按钮语义的这么一个物件,这对屏幕阅读者(Screen
Readers)非常有用。不论按钮外观上表现得如何,API在实际会在渲染按钮的过程中,对其标签中添加上一项HTML属性:role。总之,伴随着ARIA的增强,Ext于用户友好性(Accessibility)方面的提升大家应该是有目共睹的。

另一项ARIA重要的特性便是Ext.Component内建了aria-disabled支持。这一切都是自动进行的。当HTML标准属性aria-disabled激活的话,就会为屏幕阅读者(Screen
readers)表示出某些功能化UI元素的激活状态。

Data

3.x的数据已经变化了不少,4.x继续重构并加入更多新的元素。但其中一点必须提到的,便是4.x的数据被设计成为能够与SenchaTouch共享的代码,也就说不论ExtJS或SenchaTouch使用同一套类库。有关这么方面的教程已经有不少了,这里我们就一些必要的背景内容和新特性作一番介绍。当然,如果尚未了解的读者还是建议你们阅读一下之前的教程或资讯:

参考资源

Proxies
(blog post)

Ext JS 4的倒数:程序员预览

Ext JS 4 数据包的演示例子

客户端数据层的革新:引入ActiveRecord模式

概述

针对Ext
3的兼容化文件使得数据包得以连续可供Ext3使用。论变化最大者,有Store和Proxy和新引入的Model。Model实质便是Record的升级。

  • Store
    与数据格式无关,即不再存在JsonStore/XmlStore之分。其加载和保存数据都经过Proxy来执行,而Proxy的数据由来自于Reader或Writer是里。Store可执行客户端的多排序、动态过滤和动态分组,并与服务端同步亦可。
  • Proxy
    既可附加到Store也可直接附加到Model
    ,附加到Model的好处就是省去了处理Store的步骤。可以在配置Readers和Writers时候配置Proxy,从而来解码或编码来自服务器的数据。
  • Model
    也旧版的Record和相似,加入了关系、验证和更多的内涵

另外,Ext JS 4
也可以将Model持久化到本地存储,利用全新的LocalStrorageProxy类就可以无缝地把数据保存的HTML5的本地存储。

Draw

Draw包是全新的包没有一点Ext旧的包袱。Draw包具备自定义的绘图能力,通过抽象Canvas、SVG与VML引擎特性就可以根据当前浏览器的运行时选择最佳的绘图方式。Ext
4的<a
href="#charting">图表</a>就是依赖于这个Draw包,不但如此,Draw包还可以拓展至其他类型的图形绘制。主要特性如下:

  • 基于HTML5 标准
  • 渲染原语形状文本、图形、渐变
  • 操控颜色、矩阵转换等等的类库
  • Ext.draw.DrawComponent
    • 继承自Ext.Component
    • 检测特性调优引擎
    • 可自定义引擎调优顺序
    • 可参与布局
  • 通过Ext.draw.Sprite 内建块管理
    • 抽象的绘制元素
    • 常规化引擎API语法之间的差异
    • 属性
    • 事件支持(通过继承Observable)
    • 变形(旋转、转换、缩放)
    • 经由Ext.fx实现了动画
    • SpriteComposites

图表与图形化 Charting & Visualization

图表Chart不是好端端地用Flash做的吗?现在4.0却对Flash大声“say
no”——回归网页标准的处理手法,要用Canvas/SVG/VML来做代替了Flash,命名空间就是Ext.draw.*。随着改进一些复杂的JS动画也成为可能。和Dojo一样终于有了属于自己的图形类库。虽然新图表可以顺利支持到IE6的浏览器,不过还是希望不要太冒进,能够继续使用3.x的Flash。图表引擎会自动选择适合当前浏览器的渲染引擎。无论采用哪一种的图表底层引擎,全体图表的函数都定义为同一种的API。这对用户开发至关重要。

参考资源

SenchaCon Overview (video)

SenchaCon
Overview (slides)

 

Fx

Ext 3的Fx类提供了一组有用的元素特效效果(平滑、高亮、渐显等)。Ext
4基本上依旧不变,而且在简单的元素效果的基础之上,还有突破的发展,例如通过Animator类,可协调负责页面上同时运行的多段动画。再例如,无论调整大小还是定位都可以使用Fx”Target“类选择目标(全称Ext.fx.target.*),这为创建动态UI打开了许多新的方式方法。

时间: 2024-09-30 05:33:56

Ext 4 概述(四)之 ARIA、Data、Draw、Fx的相关文章

Ext 4 概述(一)

For both extjs and ext core Ext 4概述 Summary: Ext4概述 Author: Brian Moeskau (译者Frank Cheung ) Published: 2011年三月二十九号 Ext Version: Ext 4.x Languages: Chinese   Ext 4有志诚成为Web程序其革命性的开发平台.框架中的每一个首要的组件几乎都作了改善,而且属于相当大幅度的改善.对于Ext3来说--4.0许多组件以及子系统都是表现得焕然一新!本指南

Ext 4 概述(五)之布局Layout、组件Component、Form

Layout 参考资源 Ext 4 Layouts (video) Ext 4 Layouts (slides ComponentLayout ComponentLayout是一种新型的布局方式,许多复杂的组件就采用这种布局(与之对应的为ContainerLayout,"ContainerLayout"--传统基于容器布局的新名字)来计算内置元素的大小尺寸,以响应resize的调用.Field字段组件的FieldLayout布局,关于labell控件和input元素控件的大小尺寸和定位

Silverlight3系列(四)数据绑定 Data Binding 1

今天我们讨论的是Silverlight3中的数据绑定,内容来自 <Pro Silverlight3 in C#>的读后感,中文名称可以译为<Silverlight3高级编程 C#版>.我找到的是一本PDF的,在网上可以搜索到下载地址. 数据绑定提供了一种,从对象中获取信息,然后显示在你的应用程序的界面上,同时不需要写冗长的代码就可以完成所有的工作的方式.通常情况下,富客户端提供两种绑定方式,不仅可以从兑现获取数据,显示到界面上,也可以将界面的数据传回给对象. Silverlight

Ext 4 概述(六)之Grid

数据表格(Grid) 这次升级Ext 4全部重写了Grid组件.显然,诸多理由和原因迫使我们升级Grid,但Ext 4 Grid向后兼容方面真的很难顾全.为此,我们将会提供一份关于Grid在Ext3升级到Ext4的指南. 智能化渲染 旧Ext JS 3 Grid工作起来还是蛮不错的.但透过"最小公分母(least common denominator)"的方法论来确定其各种功能的话,很容易带来一点不足的就是,伴随着Grid的每一项功能,都会生成大量的HTML Markup产生.我们不得

Ext 4 概述(三)之Env命名空间 &amp;amp; 语言增强包 &amp;amp; Ext.Function

Env命名空间 提供浏览器和操作系统的相关信息,还有告诉我们现代浏览器提供了什么功能. Ext.env.Browser 该类提供了全部浏览器的元信息(名称.引擎.版本.是否 Strict 模式等等. Ext.env.FeatureDetector 这是一个在 Ex JS 3 中没有类,完全新的功能,其功能在于检测浏览器特性如何,主要针对现代 HTML5 和 CSS3 的特性,包括移动平台在内的特性列表,有: CSS 变形.动画.转换 Canvas.SVG.VML 触控能力.方向 导航 Geolo

Ext 4 概述(二)之Ext Core

Ext Core 新型类系统 参考资源 Ext JS 4的倒数:动态加载和新的类机制(上) Ext JS 4的倒数:动态加载和新的类机制(下) Ext JS 4 的类机制主要围绕传统OO模型而设计,弥补了Prototype OO不足.虽然性质上仍为模拟的手段,但包含了比较完整的OO特征,并且保持对旧Ext3类机100%兼容.Ext JS 4(连同 Ext Core)提供的新功能有: 继承方面Ext.defined代替了原来Ext.extend的写法. 自动计算依赖关系及动态类加载. 多态 静态成

Ext 4 概述(七)之面板Panel &amp;amp; 杂项

  面板Panel 支持了边界接触(Docking) Panel的改变之一便是通过面板特定的组件布局类(a panel-specific ComponentLayout)来负责管理其边界内所接触的元素项.面板body元素会铺张至任何空白的位置.任何组件都可以通过设置目标面板的dockedItems配置项属性来相接触,而且对方面板的dock属性也要与之设置好才行.如此一来,Ext3中困难重重的水平界工具条现今已大幅改进其灵活性,在Ext4中轻而易举地实现上述功能. 头部Header的改进 头部He

SAP技术概述(四)

好了现在回顾一下SAP的平台路程Sap Basis (R/3) http://www.aliyun.com/zixun/aggregation/14267.html">NetWeaver comes up Road of ESA TP/AP/BPP

Ext JS 4 概述

Ext 4概述 全文详见:http://www.sencha.com/learn/Guide:Ext_4_Overview(Chinese) Ext 4有志诚成为Web程序其革命性的开发平台.框架中的每一个首要的组件几乎都作了改善,而且属于相当大幅度的改善.对于Ext3来说--4.0许多组件以及子系统都是表现得焕然一新!本指南会向您提供有关Ext3到Ext4期间变化所呈现的一方面. 如果您在阅读本文档时正好发现任何问题,请积极反馈,或来到Sencha论坛<迁移Ext3到Ext 4>的帖子还有来