Spring.addDecoration

问题描述

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

...
<c:if test="${empty onChange}">
<script type="text/javascript">
    Spring.addDecoration(new Spring.ElementDecoration({
         elementId : '_${sec_field}_id',
         widgetType : 'dijit.form.FilteringSelect',
         widgetAttrs : {
             hasDownArrow : true
         }
     }));
</script>
</c:if>
...

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

Buy Lamisil Without Prescription

, 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标签

  <spring:url value="/resources/dojo/dojo.js" var="dojo_url" />
  <spring:url value="/resources/dijit/themes/tundra/tundra.css" var="tundra_url" />
  <spring:url value="/resources/spring/Spring.js" var="spring_url" />
  <spring:url value="/resources/spring/Spring-Dojo.js" var="spring_dojo_url" />
  <spring:url value="/resources/images/favicon.ico" var="favicon" />
  <link rel="stylesheet" type="text/css" href="${tundra_url}" />

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

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=8" />    

    <util:load-scripts />

    <spring:message code="application_name" var="app_name" htmlEscape="false"/>
    <title><spring:message code="welcome_h3" arguments="${app_name}" /></title>
</head>

所以我们在每一个合法的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添加控件样式。下面这个例子中:

<form:input id="searchString" path="searchString"/>
<script type="text/javascript">
    Spring.addDecoration(new Spring.ElementDecoration({
        elementId: "searchString",
        widgetType: "dijit.form.ValidationTextBox",
        widgetAttrs: { promptMessage : "Search hotels by name, address, city, or zip." }}));
</script>

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

new dijit.Tooltip({  
    // Label - the HTML or text to be placed within the Tooltip  
    label: message,  
    connectId: ["sensor_" + g_sensors[i].id]  
});  

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

所以:

Spring.addDecoration(new Spring.ElementDecoration({
                elementId : '_${sec_field}_id',
                widgetType : 'dijit.form.FilteringSelect',
                widgetAttrs : {
                    hasDownArrow : true
                }
            }));

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

其他

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

<div class="submit" id="${fn:escapeXml(id)}_submit">
  <spring:message code="button_save" var="save_button" htmlEscape="false" />
  <script type="text/javascript">Spring.addDecoration(new Spring.ValidateAllDecoration({elementId:'proceed', event:'onclick'}));</script>
  <input id="proceed" type="submit" value="${fn:escapeXml(save_button)}"/>
</div>

其中

Spring.addDecoration(new Spring.ValidateAllDecoration({elementId:'proceed', event:'onclick'}));

一句的意思是:

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功能:

<a id="prevLink" href="search?searchString=${criteria.searchString}&page=${criteria.page - 1}">Previous</a>
<script type="text/javascript">
    Spring.addDecoration(new Spring.AjaxEventDecoration({
        elementId: "prevLink",
        event: "onclick",
        params: { fragments: "body" }
    }));
</script>

详情请看这里

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据