Dojo 1.5已经发布了,让我们来看看它都加了些什么新东东~
本文翻译自:
https://www.dojotoolkit.org/reference-guide/releasenotes/1.5.html#id15
部分内容参考了DojoCampus的版本:
http://docs.dojocampus.org/releasenotes/1.5
Dojo 1.5 发布说明
1. 浏览器支持
本版本可用于以下浏览器:
- Firefox 3.5/3.6
- Safari 4/Safari 5 和 Chrome 5
- IE6,IE7,IE8
- Opera 10.50 及更高版本 (只支持Dojo核心)
对于不支持的浏览器,Dojo可能仍然可以在其上运行,但这些浏览器都没有经过任何测试,而且也不保证为这些浏览器修复任何缺陷。
2. Dojo核心
2.1 在Firefox扩展中运行Dojo
如果您正在使用Dojo的源码发布版本,并希望用于某个Firefox扩展,请务必在载入dojo.js之前设置djConfig.hostEnv = "ff_ext",以确保其正常工作。
2.2 dojo.cldr
使用CLDR1.8(unicode.org/cldr)格式化数字、货币、以及日期。
2.3 dojo.Deferred,dojo.when
重构了dojo.Deferred模块使其在构建执行链时没有副作用,从而在执行如下代码时不用担心第一个then语句会影响传递给第二个then语句的参数:
同时有副作用的做法(链中的每一个元素都会对下一个元素的输入产生影响)也是支持的:
最后,dojo.when()方法在一个值可用时执行对应的操作。这个值既可以是Defered值,也可以是普通值(那将立即触发操作)
2.4 dojo.window,dojo.uacss
一些dijit包中的的函数已被移到了dojo核心中(只在dijit里保留一份调用接口,以确保向后兼容)
dojo.require("dojo.uacss")
为<html>结点添加CSS类,诸如dj_ie等,以标识浏览器类型、版本、以及CSS盒模型等信息。
以前版本使用的是dojo.require("dijit.sniff").
dojo.window.getBox()
获取视口的大小。
以前版本使用的是dijit.getViewport().
dojo.window.get()
获取文档对象(document)所属的窗口对象(window).
以前版本使用的是dijit.getDocumentWindow().
dojo.window.scrollIntoView()
将结点滚动到可见范围内,类似于node.scrollIntoView(),但能规避某些浏览器的诡异行为。
以前版本使用的是dijit.scrollIntoView().
2.5 dojo.Stateful
一种新的通用接口和基类,用于以统一的方式获取、设置、或者监视对象属性的变化(通过getter/setter实现)
参见:
dojo.Stateful
Tichket #10839
Stateful blog post
3. Dijit
3.1 Claro主题
Claro是一种适用于dijit和dojox.Grid的全新主题(曾用名:Lucid)。该主题具有如下目标:
- 为使用Dojo Dijit库的互联网应用提供一组切合时代潮流的视觉效果。其中包括增强的透明渐变背景图片,拖放阴影,以及合适的CSS动画(针对Webkit和mozilla);
- 通过统一的填充尺寸(padding)、字体设置、以及对齐方式等方面,提供符合“合用与完备”(fit and finish)理念的专业质量。同时弥补了以往小部件所缺失的一些有用行为状态(如鼠标悬浮,活跃,选中等)。
- 使自定义主题CSS更为便捷。设计者能够方便地通过设置元素样式(如填充尺寸、颜色等等)来创建他们自己的主题,而不需要设计新的背景图片。
Claro主题同时支持从左到右和从右到左的显示方式,并支持所有Dojo1.5中的小部件,虽然针对个别浏览器在个别样式上需要作出一定的退化处理:例如IE6无法正确显示24位PNG格式的图像,IE6,7,8无法显示圆角等。
对于更多关于Dijit主题的信息(包括Claro,Tundra,Nihilo和Soria)以及1.5版中主题方面的更新,请参见Themes and Theming
从其他主题切换到Claro的注意事项
Claro的.dijitTreeIcon类并不包含宽度(width)和高度(height).如果你要为树形控件(或其他任何有关控件)设置自定义的图标,请务必为其标明宽度和高度。
在TabContainer中,具有图标的标签的高度将小于16像素。如果您的某些标签页有图标而另一些没有,将会导致高度上的偏差。对此,您可以要么增加一条最小高度规则:
要么为所有没有图标的标签设置一个1x16的空白图标。
3.2 ColorPalette
其样式改为在每个颜色块周围增加一个白色边框,从而当鼠标悬浮在暗色块上(或者获得焦点)时显得更为清晰。另外,焦点与鼠标悬浮这两者是分开处理的(解耦)。
还有,ColorPalette目前支持set("value",...)以及get("value")方法,并且将当前选中的颜色通过一个窄小的黑色扁 阔标示。编辑器的前景色和背景色插件也能够标示目前所选中的文本的颜色(如果没有文本被选中,则标示光标附近文本的颜色)。
3.3 Dialog
对话框部件现在支持“功能栏”,即一个位于对话框底部的灰色条块,上面有一些功能按键,例如典型的“确定”和“取消”。您可以像往常一样创建您的对话框,但需要将对话框中的内容与功能键分开,就像这样:
3.4 输入部件
3.4.1 新的占位符参数
HTML5的占位符参数(也称为“提示参数”hint)已在所有基于TextBox的部件中实现。占位符通常是显示在空白输入字段内的一小段灰色的示例或提示文本,例如John Doe或“您的姓名”。这段文本将在用户把焦点移到这个输入字段上以后自动消失。
要使用这个功能,请为您的小部件指定"placeHolder"参数:
3.4.2 输入部件的标准化宽度和高度
另外,输入部件(如TextBox,ValidationTextBox,ComboBox/FilteringSelect,NumberSpinner)的宽度和高度已经被标准化。以前这些部件的高度和宽度可能会有几个像素的偏差,导致整个用户界面看上去不正常。
3.5 增强的双向显示功能
目前的应用能够通过dir属性为每一个部件设置文本的显示方向。可能的设置值有"lrt"(从左到右,用于大多数语言)以及"rtl"(用于阿拉伯语和希 伯来语)。以前所有的部件都必须保持同一种文本显示方向,及整个页面设置的方向。注意,这个属性只能在创建部件时设置。例如:
而且,目前解析器已被重构,以感知结点上dir=rtl和dir=ltr的设置(这些结点可以具有也可以不具有dojoType声明)。如果一个结点具有dir设置,那么在这个结点内创建的所有部件都将具有这个dir属性。例如:
解析器的parse函数也能够接受一个表示默认dir和语言设置的参数,以继承方式作用于结点中的部件:
通常并不需要指定,因为解析器将使用文档的默认文字方向和语言设置。
这两个改动时某些门户页面能够在不同的区域显示不同的语言,或者在一个显示RTL语言(如希伯来语或阿拉伯语)的页面上插入一小块英语区域。
Tundra和Claro主题支持混用RTL和LTR的页面。
在内部机理方面,这个特性通过让具有dir=rtl的部件在其根结点上应用一种额外的CSS类,例如dijitTextBoxRtl,通常是部件的基本CSS类名加上"Rtl")。
Tundra和Claro主题被实现为能够使用这些针对部件的CSS类,而不使用应用于整个BODY结点的dijitRtl类。
最后,请注意虽然想以前一样lang属性能够为每一个部件设置,但dojo所使用的翻译语言(例如工具提示,加载信息等等)对于单个页面仍然是唯一的。
3.6 _CssStateMixin
一种新的混入类,用于为widget部件根据其状态来设置CSS类。
这些状态除了鼠标悬浮(hover)/活动(active)/拥有焦点(focused)之外,还包括一些语义状态,如标记(checked)、选定(selected)、禁用(disabled)等。
大多数dijit小部件都已采用了这个新的混入类。因此,比起以前版本,现在可以使用更为丰富的CSS选择符。例如,通过CSS类定制滑块部件(Slider)在鼠标悬浮时的样式,或其递增按钮被按下时的样式。
以下部件增加了"鼠标悬浮",“活跃”(鼠标按下)以及“选中”(获取焦点)等行为状态:
- dijit.Calendar
- dijit.ColorPalette
- dijit.Dialog
- dijit.Editor
- dijit.InlineEditBox
- dijit.Menu
- dijit.MenuBar
- dijit.ProgressBar
- dijit.TitlePane
- dijit.Toolbar
- dijit.Tree
- dijit.layout.AccordionContainer
- dijit.layout.BorderContainer
- dijit.layout.ContentPane
- dijit.layout.TabContainer
- dojox.grid.EnhancedGrid
- dojox.grid.enhancedDataGrid
在自定义部件中使用这个混入类的方法如下:
1. 请求_CssStateMixin模块,并将其混入到部件中:
注意 :所有的form部件都已经通过继承_FormWidget而自动混入了_CssStateMixin,所以它们(以及它们的子类)都不需要此步骤。
2. 设置baseClass属性(如果已经设置,例如所有的form部件,则不必重复设置)
3. 如果希望在部件内部的某些结点(例如Slider中的上/下键)上添加CSS类,需要设置cssStateNodes属性:
这个关联数组的左侧(例如incrementButton)是模板中对应结点的dojoAttachPoint名称,其右侧(例如"dijitSliderIncrementButton")就是应用于该结点的CSS类。
经过以上步骤之后,一些用于状态控制的CSS类就已经被自动添加到Slider部件的DOM结点以及其子节点上了。
例如this.domNode上的dijitSliderHover和dijitSliderFocused,以及this.incrementButton上的dijitSliderIncrementButtonActi。
注意 :部件模板中并没有hover/active/focus等事件的处理代码。
3.7 树 (Tree)
"获得焦点的结点"和"选中的结点"这两个概念被解耦,因此:
- 一个树部件在初始化时不会将任何结点标记为“选中”状态。您的应用需要调用set("selectedItem",...)或者set("path",...),以标记当前选中的结点。单击一个结点也会选中它,但单击结点左边的展开按钮(“+”)不会选中。
- 用方向键浏览一棵树不会改变以选中的结点。
3.8 新的 get()/set()以及弃用的attr()
为了使代码更简洁,Dojo Toolkit 1.5将开始为代码控制下的属性访问使用get()/set()模式,而不是以前所采用的能同时处理get/set的attr()方法。
因此,设置部件属性的推荐方法从:
变为:
获取属性的推荐方法也从:
变为:
4. DojoX
4.1 图表
4.1.1 图表主题的主要更新:
- 对基于空白的渐变的综合支持。
- 主题能够制定任意的填充样式,包括线性的和放射式的渐变。
- 在区块、系列、以及单个数据值层面的统一的主题重载。
- 创建您自己的渐变或基于渐变的图表主题的新工具。
- 全新的基于新特性的图表主题包括:
-
- Julie Santilli设计的Julie: 拥有庞大的32种不同渐变的多样的简洁主题
- Christopher Anderson设计的Chris: 明亮的卷曲状的展示主题
- Tom Trenka设计的Tom: 为暗色调背景设计的主题使您的数据在页面上更为耀眼。
- PrimaryColors: 细微的渐变平衡了亮色,使这款基于经典主色调的主题焕然一新
- ThreeD: 在PrimaryColors的基础上为所有条形和柱形的图表增加了3D圆柱体效果,为其他图表增加了细微的阴影效果。
- Tom Trenka设计的Electric: 在暗色背景上用明亮的霓虹色彩展示您的数据。
- Tom Trenka设计的Charged: Electric的“孪生兄弟”,但适用于亮色背景。
- Tom Trenka设计的Renkoo: 用于暗色背景的怀旧的粉笔色效果。
4.1.2 整体改进
- 对DataPresentation部件的几个渐进式改进,包括对自定义工具提示、图表图例的布局和包装选项、禁用图表标签的功能、以及在渲染过程中开放“钩子”事件的支持。
- 条形盒柱形图表现在支持对象和值(您可以设置自定义的工具提示、颜色、填充色等)。
- 用于区域、线条以及标记图表的图表动画(缩放)。
- 在所有图表上支持缺失值(null值)。
- 增加一种新的坐标轴:隐藏坐标轴。当它不可见时,您仍然可以通过改变该坐标轴的几何参数来影响图表的行为。
- 为图表和系列增加轻量级的重排序功能。
- 事件相关的改进
- 新增的数据系列DataSeries: 连接dojo.data.stores的桥梁。它能被当做一个常规系列使用,并支持所有dojo.data的API,包括当底层数据改变时动态更新图表的通知。
- 新增旋转一定角度的坐标轴标签。
- 大量的缺陷修复。
4.2 CSS3
新的dojo.style扩展支持transform和transform-origin属性:
支持Internet Explorer 5.5+,Safari 3.1+,Firefox 3.5+,Chrome/Chromium 以及 Opera 10.50+
4.3 拖放DnD
致力于dojo.dnd相关改进的一个新的子项目。包括:
- 通过一个边界框进行选择
- 以编程方式选择、反选DnD对象
4.4 编辑器Editor
- Smiley插件(在1.4中就已存在但无法使用,现在可以正常使用了)。
- dojox.editor.plugins.CollapsibleToolbar -- 一个修改网格的头部并将其转变为一个可压缩的工具栏的插件。这个插件经过了充分的测试并在Dojo所支持的所有浏览器下都能很好工作。
- dojox.editor.plugins.Blockquote --一个为工具栏增加文本块引用按钮的插件。当启用时,一个文本块中的所有文本将被blockquote标签包裹;当关闭时去除blockquote标 签。对于范围巨大的选择也能正常工作:块引用每一段文本和行内元素。这个插件经过了充分的测试并在Dojo所支持的所有浏览器下都能很好工作。
- dojox.editor.plugins.PasteFromWord -- 一个为工具栏增加“从word粘贴”按钮的插件。它打开一个对话框,word或其他类似程序的中的内容可以被粘贴到里面,然后运行过滤器从输入中剔除不相 干的、可能导致编辑器难以处理的HTML内容,从而使最终插入的HTML更为简洁。
- dojox.editor.plugins.InsertAnchor -- 一个为工具栏增加“插入锚结点”按钮的插件。一个锚结点就是一个用于链接到文档内特定位置的<a>标签。这个插件通过CSS将页面中的锚结点高亮。该插件还允许通过双击编辑锚结点。
- dojox.editor.plugins.FindReplace -- 该插件的更新是为了改进其布局和键盘交互。改进意见主要来自于一个用户体验开发团队。在功能特性上维持原样。
- dojox.editor.plugins.TextColor - 一个实现了颜色选择器的插件,可用于文本颜色和背景颜色的选取。使用了dojox.widget.ColorPicker而非dijit.ColorPalette.
- dojox.editor.plugins.NormalizeStyle -- 一个实验性的自由开发的插件,用前置/后置过滤器将编辑器的输入和输出内容装换成CSS样式(利用具有stype属性的span),或者为常用的格式化选 项添加语义标签(如<b>,</i>等)。该插件所使用的输出模式是可配置的;所使用的输入模式取决于浏览器,以尝试用正确的输 入模式,从而使本地浏览器指令能合理的运行在输入上。
- dojox.editor.plugins.StatusBar -- 一个实验性的插件,为编辑器添加了一个新的脚注栏,使用户能向编辑器报告状态。报告的方式可以是直接设置editor.statusBar的value属 性,或者通过发布一个主题(topic)实现。该插件还具有一个可选的“resizer”句柄,用于当编辑器位于一个内容面板之外时调整其大小。
4.5 Geo
一个新的关于地理的子项目。第一个发布版包括一个基于地图的图表部件。附带美国地图的数据作为例子。
4.6 GFX
- 现在VML渲染器能够模拟SVG的线性渐变。
- SVG渲染器以选项的方式支持SVGWeb(基于Flash的SVG)。如果您坚持要支持IE6-IE8,但又不想使用VML,那这是一个不错的选择。
- 支持批处理形式的SVG操作,以加速大型场景的创建。
- 修补了大量缺陷。
4.7 Lang
添加了新的模块:dojox.lang.async. 该模块有助于管理异步操作(返回dojo.Deffered的操作)的顺序。目前支持以下排列模式:
- 顺序模式: 当前一个操作成功结束后,立即启动下一个操作。
- 并行模式: 在同一时间启动所有操作,然后等待,直到所有这些操作全部结束。
- 竞争模式: 并行地启动所有操作并等待,直到出现第一个结束的操作,然后取消剩余的所有操作。
- 选择模式: 模仿switch()语句,即异步地执行一个操作,然后根据其结果从一个操作数组中选择下一个操作。
- 选择模式II: 模仿if()语句,即异步地执行一个操作,然后根据其记过从两个可选操作中选一个执行。
- 连续模式: 模仿while()语句,即异步地执行一个操作,根据其结果异步地执行另一个操作,然后要么重复执行循环,要么跳出循环。
以下适配器模块用于常用的异步操作:如事件、主题、以及定时器等。
使用本模块能够以简单的构造语句块,构建出高度异步的复杂操作。
4.8 布局Layout
GridContainer用MDnD进行了翻新,引入了GridContainerLite。GridContainer的使用方式与以前类似,唯一的 变化时accetTypes属性。以前这个属性接受一个逗号分隔的类名列表,例如:“dojox.widget.Portlet,dijit.layout.ContentPane"。现在改为接受任意与子部件的dndType属性相匹配的字符串,例如在GridContainer 中,acceptTypes="Protlet,SomeCustomWidget",在其子部件中,dndType="Portlet"或者 dndType="SomeCustomWidget"。
4.9 MDnD
dojox.mdnd使用类似于dojo.dnd的接口实现了可移动的DnD。您现在能够在不使用代替层(Avatar)的情况下在容器之间移动结点。这个新功能在基于面板的用户界面中特别有用。
4.10 移动平台(Mobile)
dojox.mobile由一组专为移动平台设计的轻量级部件组成,并具有用于iPhone和android的主题。目前该模块支持按钮、开关、列表型标签页容器等部件。
5. Util
5.1 打包系统/buildscripts
- 现在copyTest属性的默认值变为false而不再是true。这是为了减少在打包后手动复制测试文件和其他相关文件的概率,以及由此引发的一些安全顾虑。
- 更新的cldr脚本使用了CLDR 1.8版。(参见dojo.cldr)
6. 版本迁移
与以往一样,dojo的API是向后兼容的(兼容以前的1.x版本)。然而仍不免有一些CSS上的改变,以及一些需要注意的“陷阱”。
6.1 get/set
attr()正在被逐步淘汰,取而代之的是get()和set()。旧函数attr()仍被支持(只不过多了一个“弃用”警告),因此以前的代码应当仍然可以工作。
然而如果您的某些类包含自定义的get/set方法,它们将与_Widget或者dojo._Stateful的get()/set()方法产生冲突。
另外,连接到attr()的dojo.connect()调用应当改为连接到set()。
6.2 dijit.popup
dijit.popup中的函数不可以被缩略使用(因为这是一个对象,里面有this引用)。
例如,下面这行代码可以正常工作:
但这个就不行:
6.3 _Container.getChildren()
类似于
的代码应当改为
虽然getChildren()函数的文档中总是协整“返回一个单纯的数组”,但在1.4版中实际上将放回一个带有forEach()和filter()等方法的数组,因此某些用户代码可能会依赖于这一点。
6.4 表单部件
如果您的继承了_FormWidget的自定义部件拥有引用了${nameAttrSetting}的模板,您应当将其改为引用${!nameAttrSetting}。这是出于转义字符的考虑。
6.5 TextBox
TextBox的模板已改为类似于ValidationTextBox的样子,其中的<input>标签外面包了一 层<div>。对于一个id=foo的TextBox,若要对<input>添加样式,那跟以前一样,对#foo创建一条规则:
若要对外层结点应用样式,则需要对#widget_foo创建一条规则:
更多细节请参见#11133
6.6 Dijit CSS
如果你已修改了dijit小部件的模板,你将很可能需要删除一些事件处理代码,如onmouseenter/onmouseleave/onfocus /onblur等。特别需要指出的是,_onMouse方法已经从_FormWidget中移除,因此你需要从你自定义的模板中删除对它的调用。
另外,如果你为某些具有嵌套按钮的form部件添加了自定义的CSS类或CSS规则,请参见:http://bugs.dojotoolkit.org/changeset/21117
若要更新自定义CSS规则中的CSS类名,您可以运行位于util/migration目录下的脚本dijitCss14to15.sed。(如果您使用的是Windows操作系统,可能需要安装cygwin或其他unix实用程序)
另一种选择是根据下面的表格手动更新这些名称:
Spinner:
旧版本 | 新版本 | 描述 |
---|---|---|
.dijitSpinnerUpArrowHover .dijitUpArrowButton | .dijitSpinner .dijitUpArrowButtonHover | |
.dijitSpinnerUpArrowActive .dijitUpArrowButton | .dijitSpinner .dijitUpArrowButtonActive | |
.dijitSpinnerDownArrowHover .dijitDownArrowButton | .dijitSpinner .dijitDownArrowButtonHover | |
.dijitSpinnerDownArrowActive .dijitDownArrowButton | .dijitSpinner .dijitDownArrowButtonActive |
ComboButton:
旧版本 | 新版本 | 描述 |
---|---|---|
.dijitComboButtonHover .dijitButtonContents | .dijitComboButton .dijitButtonContentsHover | |
.dijitComboButtonActive .dijitButtonContents | .dijitComboButton .dijitButtonContentsActive | |
.dijitComboButtonDownArrowHover .dijitDownArrowButton | .dijitComboButton .dijitDownArrowButtonHover | |
.dijitComboButtonDownArrowActive .dijitDownArrowButton | .dijitComboButton .dijitDownArrowButtonActive |
还有一些CSS选择符的名称进行了标准化,如下所示:
Accordion:
旧版本 | 新版本 | 描述 |
---|---|---|
.dijitAccordionFocused | .dijitAccordionTitleFocused | 是手风琴部件(Accordion)的标题获得焦点,而不是面板里德内容。 |
.dijitAccordionTitle-hover | .dijitAccordionTitleHover | |
.dijitAccordionTitle-selected | .dijitAccordionTitleSelected |
另外,手风琴(accordion)布局中的每一个板块(pane)现在都被包了一层<div>: dijitInnerAccordionContainer。
这个<div>将同时容纳标题和内容,类似于TitlePane。如果你继承了AccordionContainer,或者做了一些依赖于其内部实现的事情,那么也许你需要更新你的代码。
旧版本 | 新版本 | 描述 |
---|---|---|
.dijitTab .closeButton | .dijitTabCloseButton | |
.dijitTab .closeButton-hover | .dijitTabCloseButtonHover | 单个标签页的关闭按钮 |
.dijitTabBtnDisabled | .dijitTabDisabled | 标签条上的左右滚动按钮 |
.dijitTab .closeImage | .dijitTabCloseIcon | 关闭按钮的图标 |
.dijitTab .closeText | .dijitTabCloseText | 关闭按钮的文本(可访问性) |
.tabStripButton img | .dijitTabStripIcon | 标签条上的左右滚动以及菜单图标类 |
.tabStripMenuButton img | .dijitTabStripMenuIcon | 显示菜单的图标(列出所有的标签页) |
.tabStripSlideButtonLeft img | .dijitTabStripSlideLeftIcon | 向左滚动标签条的图标 |
.tabStripSlideButtonRight img | .dijitTabStripSlideRightIcon | 向右滚动标签条的图标 |
Dialog:
旧版本 | 新版本 | 描述 |
---|---|---|
.dijitDialogCloseIcon-hover | .dijitDialogCloseIconHover |
Tree:
旧版本 | 新版本 | 描述 |
---|---|---|
.dijitTreeNodeHover | .dijitTreeRowHover | 用于TreeNode.rowNode和domNode |
.dijitTreeNodeSelected | .dijitTreeRowSelected |
TitlePane:
旧版本 | 新版本 | 描述 |
---|---|---|
.dijitTitlePaneTitle-hover | .dijitTitlePaneTitleHover |
InlineEditBox:
旧版本 | 新版本 | 描述 |
---|---|---|
.dijitInlineEditBoxDisplayMode-hover | .dijitInlineEditBoxDisplayModeHover | |
.dijitInlineEditBoxDisplayMode-disabled | .dijitInlineEditBoxDisplayModeDisabled | 相当于单纯的<div>或<span>,单击没有任何效果。 |
Editor:
旧版本 | 新版本 | 描述 |
---|---|---|
.RichTextEditable | .dijitEditor | 编辑器的根结点 |