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. 浏览器支持
本版本可用于以下浏览器:
对于不支持的浏览器,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语句的参数:
var def = dojo.xhr(...); def.then(...); def.then(...);
同时有副作用的做法(链中的每一个元素都会对下一个元素的输入产生影响)也是支持的:
dojo.xhr(...).then(function(val){ return dojo.toJson(val); }).then(...);
最后,dojo.when()方法在一个值可用时执行对应的操作。这个值既可以是Defered值,也可以是普通值(那将立即触发操作)
// val might be a Deferred, or it could be (for example) a String dojo.when(val, function(val){ ... });
2.4 dojo.window, dojo.uacss
一些dijit包中的的函数已被移到了dojo核心中(只在dijit里保留一份调用接口,以确保向后兼容)
dojo.require("dojo.uacss")
为结点添加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)。该主题具有如下目标:
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.1 新的占位符参数
HTML5的占位符参数(也称为“提示参数”hint)已在所有基于TextBox的部件中实现。占位符通常是显示在空白输入字段内的一小段灰色的示例或提示文本,例如John Doe或“您的姓名”。这段文本将在用户把焦点移到这个输入字段上以后自动消失。
要使用这个功能,请为您的小部件指定"placeHolder"参数:
myTextBox = new dijit.form.TextBox({ name: "firstname", value: "" /* no or empty value! */, placeHolder: "type in your name" }, "firstname");
3.4.2 输入部件的标准化宽度和高度
另外,输入部件(如TextBox, ValidationTextBox,ComboBox/FilteringSelect,NumberSpinner)的宽度和高度已经被标准化。以前这些部件的高度和宽度可能会有几个像素的偏差,导致整个用户界面看上去不正常。
3.5 增强的双向显示功能
目前的应用能够通过dir属性为每一个部件设置文本的显示方向。可能的设置值有"lrt"(从左到右,用于大多数语言)以及"rtl"(用于阿拉伯语和希 伯来语)。以前所有的部件都必须保持同一种文本显示方向,及整个页面设置的方向。注意,这个属性只能在创建部件时设置。例如:
new dijit.Editor({dir: "rtl"}, srcNodeRef); new dijit.Editor({dir: "ltr"}, srcNodeRef);
而且,目前解析器已被重构,以感知结点上dir=rtl和dir=ltr的设置(这些结点可以具有也可以不具有dojoType声明)。如果一个结点具有dir设置,那么在这个结点内创建的所有部件都将具有这个dir属性。例如:
在自定义部件中使用这个混入类的方法如下:
1. 请求_CssStateMixin模块,并将其混入到部件中:
dojo.require("dijit._CssStateMixin"); ... dojo.declare(myWidget, [ ..., dijit._CssStateMixin], ...
注意 :所有的form部件都已经通过继承_FormWidget而自动混入了_CssStateMixin,所以它们(以及它们的子类)都不需要此步骤。
2. 设置baseClass属性(如果已经设置,例如所有的form部件,则不必重复设置)
baseClass: "dijitSlider",
3. 如果希望在部件内部的某些结点(例如Slider中的上/下键)上添加CSS类,需要设置cssStateNodes属性:
cssStateNodes: { incrementButton: "dijitSliderIncrementButton", decrementButton: "dijitSliderDecrementButton", focusNode: "dijitSliderThumb" }
这个关联数组的左侧(例如incrementButton)是模板中对应结点的dojoAttachPoint名称,其右侧(例如"dijitSliderIncrementButton")就是应用于该结点的CSS类。
经过以上步骤之后,一些用于状态控制的CSS类就已经被自动添加到Slider部件的DOM结点以及其子节点上了。
例如this.domNode上的dijitSliderHover和dijitSliderFocused, 以及this.incrementButton上的dijitSliderIncrementButtonActi。
注意 :部件模板中并没有hover/active/focus等事件的处理代码。
3.7 树 (Tree)
"获得焦点的结点"和"选中的结点"这两个概念被解耦,因此:
3.8 新的 get()/set()以及弃用的attr()
为了使代码更简洁,Dojo Toolkit 1.5将开始为代码控制下的属性访问使用get()/set()模式,而不是以前所采用的能同时处理get/set的attr()方法。
因此,设置部件属性的推荐方法从:
widget.attr('property', 'value'); // old way and now deprecated for Dijits
变为:
widget.set('property', 'value'); // new since 1.5
获取属性的推荐方法也从:
widget.attr('property'); // old way and now deprecated for Dijits
变为:
widget.get('property'); // new since 1.5
4. DojoX
4.1 图表
4.1.1 图表主题的主要更新:
4.1.2 整体改进
4.2 CSS3
新的dojo.style扩展支持transform和transform-origin属性:
dojo.require("dojox.html.ext-dojo.style"); dojo.style("myNode", "transformOrigin", "0 0"); dojo.style("myNode", "transform", "skew(10deg) rotate(20deg");
支持Internet Explorer 5.5+, Safari 3.1+, Firefox 3.5+, Chrome/Chromium 以及 Opera 10.50+
4.3 拖放DnD
致力于dojo.dnd相关改进的一个新的子项目。包括:
4.4 编辑器Editor
4.5 Geo
一个新的关于地理的子项目。第一个发布版包括一个基于地图的图表部件。附带美国地图的数据作为例子。
4.6 GFX
4.7 Lang
添加了新的模块:dojox.lang.async. 该模块有助于管理异步操作(返回dojo.Deffered的操作)的顺序。目前支持以下排列模式:
以下适配器模块用于常用的异步操作:如事件、主题、以及定时器等。
使用本模块能够以简单的构造语句块,构建出高度异步的复杂操作。
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
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引用)。
例如,下面这行代码可以正常工作:
dijit.popup.open({...});
但这个就不行:
var open = dijit.popup.open; open({...});
6.3 _Container.getChildren()
类似于
myWidget.getChildren().forEach(...);
的代码应当改为
dojo.forEach(myWidget.getChildren(), ...);
虽然getChildren()函数的文档中总是协整“返回一个单纯的数组”,但在1.4版中实际上将放回一个带有forEach()和filter()等方法的数组,因此某些用户代码可能会依赖于这一点。
6.4 表单部件
如果您的继承了_FormWidget的自定义部件拥有引用了${nameAttrSetting}的模板,您应当将其改为引用${!nameAttrSetting}。这是出于转义字符的考虑。
6.5 TextBox
TextBox的模板已改为类似于ValidationTextBox的样子,其中的标签外面包了一 层
sed -f dojoPath/util/migration/dijitCss14to15.sed -i .bak $(find myCssDirectoryPath -name '*.css' -print)
另一种选择是根据下面的表格手动更新这些名称:
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)现在都被包了一层
旧版本 | 新版本 | 描述 |
---|---|---|
.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 | 相当于单纯的 或,单击没有任何效果。 |
Editor:
旧版本 | 新版本 | 描述 |
---|---|---|
.RichTextEditable | .dijitEditor | 编辑器的根结点 |