Spring.addDecoration

问题描述

在用做项目时,经常在***|||*.tagx**中看到如下的代码:

Spring.addDecorationSpring.ElementDecoration这两句代码是什么意思呢?Spring对象是何时引入的呢?如何使用?

Spring JavaScript

google了一下关键词,发现了这个网站,标题是:Spring Javascript Decorations-Spring JavaScript Quick Reference注意到其中的Spring JavaScript一词,又去google了一下,发现了这样的一个概念:

Spring Javascript (spring-js) is a lightweight abstraction over common JavaScript toolkits such as Dojo. It aims to provide a common client-side programming model for progressively enhancing a web page with rich widget behavior and Ajax remoting.

Use of the Spring JS API is demonstrated in the the Spring MVC + Web Flow version of the Spring Travel reference application. In addition, the JSF components provided as part of the Spring Faces library build on Spring.js.

Spring JS is designed such that an implementation of its API can be built for any of the popular Javascript toolkits. ** The initial implementation of Spring.js builds on the Dojo toolkit.**

大概的意思是,Spring 提供了一个javascript 的 toolkits 接口供外部库参考,意在为开发者提供一个统一的控件库的接口,其中dojo的控件实现了这个接口。

使用方法

这里介绍了如何引入spring-js

Using Spring Javascript in a page requires including the underlying toolkit as normal, the Spring.js base interface file, and the Spring-(library implementation).js file for the underlying toolkit.

打开roo项目默认生成的spring mvc页面: tags/util/load-scripts.tagx 可发现如下html标签

因为load-scripts.tagxlayouts/default.jspx中被引用:

所以我们在每一个合法的jspx中都能引用到dojo的类库

Spring Javascript Decorations

A central concept in Spring Javascript is the notion of applying decorations to existing DOM nodes.

可知,Spring Javascript Decorations主要是用于给node添加控件样式。下面这个例子中:

留意一下elementDecoration的构造函数的参数形式,再看一下dojox中手动生成一个widget的代码:

可以看出dojox的widget的条用方式和spring js的调用方式可以对应得上,Spring.ElementDecoration中的widgetAttrs对应dijit中的{params}elementId就是dijittargetID(这里忽略了这个参数),widgetType指定了widget的类型。

所以:

的意思是将dijit.form.FilteringSelect的样式应用到id为_${sec_field}_idnode上。

其他

我们还可以在create.tagx``find.tagx``update.tagx中找到这样的html代码:

其中

一句的意思是:

This decorates the “Proceed” button with a special onclick event handler that fires the client side validators and does not allow the form to submit until they pass successfully.

也就是为表单打开了验证功能。

除此之外,可以为node增添Ajax功能:

详情请看这里

dojo库resize控件使用方法

问题描述

项目中需要在网页上实现可以拖曳改变div大小的功能。由于项目用了roo,roo自带了dojo,所以打算用dojo自带的方法来实现它。

解决方案

首先在google上搜索 “dojo resize” ,搜索结果中发现这个。有具体例子,有api文档,是它了。

首先


做一点准备工作:

还有下面一个css文件:

值得一提的是,在roo自带的dojo中没有找到上述css文件,于是只好到官网下载了一个,放置在项目路径中。这个css文件的作用是:

This provides simple styling for your ResizeHandle, and a default handle icon.

然后


有两种使用方式,分别是:

Programmatic (编程式)

注意,new dojox.layout.ResizeHandle返回了一个handler控件(Widget/Dijit):

动态创建一个 Dijit 的时候,Dijit 动态构造语句的返回值就为该 Dijit 实体。将这个 Dijit 动态构造语句的返回值赋值给一个变量,则可以通过这个变量实现对新创建 Dijit 实体的操控。

需要插入到受控的node中,用到了placeAt()方法。

关于该方法,这里有一段中文描述:

这是一个常用的方法,dojo 控件都实现了这个方法。运用这个方法可以自由地放置控件的位置。该方法有两个参数:reference, 和 position。可以接受的 reference 参数类型有:String, DomNode 和 _Widget。其中 String 为引用 Dom 节点 (DomNode),或者 dojo 控件 (_Widget) 的 id。而被座位参数传入的 dojo 控件,必须是实现了 addChild 方法的类型的。可接受的 position 参数类型有 Int, 和 String。传入的 String 参数必须是”first”,”last”,”before”,”after”中的一个。

关于dojo的Widget,这里这里有一些描述:

widget的英文含义是装饰物或者小器具,有些技术文档将其译为小部件,在这里直接使用其英文名,以免引起不必要的混淆。Dojo提供widget框架的原因来自两方面:一是为了更好的用户体验;二是为了帮助开发人员快速开发Web应用。

Dojo 提供了两种方式给系统开发者去使用其所提供的 Dijit(Dijit 是 Dojo Widget 的简称)。第一种方法是通过直接在页面中静态的写入带有 Dijit 属性的标签去实现该 Dijit 的使用;第二种方法是通过 Javascript 语句,动态的在当前使用页面中生成 Dijit。 第一种方法被称为静态创建 Dijit,而第二种方法则被称为动态创建 Dijit。

动态创建 Dijit 又必须分为两个步骤。第一个步骤 :动态创建一个“替代层”,并将该层插入到当前页面 DOM 结构中 Dijit 应处的位置。第二个步骤 :调用该 Dijit 对应的动态构造语句,例如 new dijit.form.Button(params, srcNodeRef) 去创建该 Dijit。其中“params”是 Dijit 构造时相关的属性参数,“srcNodeRef”是上一步骤中创建的“替代层”。

Declarative (声明式)

关于声明式,也就是静态模式创建Dijit,这里也有描述:

首先回顾一下,静态创建 Dijit 的一个完整的过程。当页面加载完成以后,在引入了 Dojo 解析模块的基础上,Dojo 会自动将页面中所有的 Dijit 标签属性解析为标准的 HTML(动态创建的 Dijit,会在创建的过程中自动完成转换)。

其中“引入了 Dojo 解析模块”一句指的是:

静态创建 Dijit 的时候,页面加载完成以后会调用相应的 Dojo 解析模块将整个页面的 Dijit 标签属性解析为 HTML。

注意 ,要添加如下两行css代码:

最后

这里一句话总结一下为了解决这个问题学到的关于动态创建和静态创建的知识:

抛开动态创建和静态创建的表象从本质上说,创建一个 Dijit 对于动态和静态都需要以下相同的几项要素。

  • Dijit 将插入 DOM 结构中的位置。静态创建 Dijit 是通过直接写入到页面中,表明其所在 DOM 结构中的位置;而动态创建 Dijit 则需要通过一个“替代层”来实现 Dijit 插入到 DOM 树中的合适位置。
  • 表明要创建的 Dijit 类型。静态创建 Dijit 是通过使用 dojotype 标签属性来表明;而动态创建 Dijit 则是通过调用该 dijit 相应的动态构造语句来表明。
  • 在创建一个 Dijit 时,需设置其的相关属性。静态创建 Dijit 是通过标签属性来定义的;而动态创建 Dijit 则是通过在该 Dijit 相应构造语句中直接设定属性实现的。

强烈推荐【此处】文章集,学习dojo的好资料!另外【这里】几乎有每一个dojo模块的测试用例!