Struts2 标签库 [Tablib] 续

数据标签
@TODO 完成如下数据标签
数据标签包括
a
action
bean
date
debug
i18n
include
param
push
set
text
url
property

4.2节 UI标签
UI标签主要是指Form相关的标签,UI标签又分为两部分:form标签和构成form内部字段的其他标签。
每一个UI标签都是基于模板的,即:每一个标签都有一个对应的模板用来生成UI标签的样式,详细内容参看模板节。

所有的UI标签都有着共通的祖先UIBean,UIBean提供了这些UI标签的一系列共通的属性,这些属性可以分为三类:模版相关的属性,JavaScript相关的属性和其他通用属性。

模版相关属性:
属性 主题 数据类型 说明
templateDir n/a String 定义模版目录
theme n/a String 定义主题的名字
template n/a String 定义模版名字


JavaScript相关属性:
属性 主题 数据类型 说明
onclick simple String html javascript onclick 属性
ondbclick simple String html javascript ondbclick属性
onmousedown simple String html javascript onmousedown属性
onmouseup simple String html javascript onmouseup属性
onmouseover simple String html javascript onmouseover属性
onmouseout simple String html javascript onmouseout属性
onfocus simple String html javascript onfocus属性
onblur simple String html javascript onblur属性
onkeypress simple String html javascript onkeypress属性
onkeyup simple String html javascript onkeyup属性
onkeydown simple String html javascript onkeydown属性
onselect simple String html javascript onselect属性
onchange simple String html javascript onchange属性


Tooltip相关属性:
属性 数据类型 默认值 说明
tooltip String none 为指定的组件设置Tooltip
jsTooltipEnabled String false 使用js表示tooltip
tooltipIcon String /struts/static/tooltip/tooltip.gif 指向tooltip图表的URL
tooltipDelay String 500 多长时间后显示Tooltip 
key simple String 这个输入字段对应的属性,用来自动设置name,label和value


通用属性:
属性 主题 数据类型 说明
cssClass simple String 定义html class 属性
cssStyle simple String 定义html style属性
title simple String 定义html title属性
disabled simple String 定义html disabled属性
label xhtml String 定义form字段的标签
labelPosition xhtml String 定义标签在Form中的位置,从左从上计算
requiredPosition xhtml String 定义必须的标签在Form中的位置,从左从上计算
name simple String 定义form字段的name映射
required xhtml Boolean 在label上添加一个*
tabIndex simple String 定义 html tabIndex属性
value simple Object 定义form字段的值


对于name和value的说明:
name用来说明Form字段的名字,和Action类的属性对应。
value用来记录Form字段的值,和Action类中属性的值对应。
所以在修改一个字段的内容的时候应该使用如下的标签:
<s:form action="updateAddress">
    <s:textfield label="Postal Code" name="postalCode" value="%{postalCode}"/>
    ...
</s:form>
但是,由于name和value的关系,struts2标准标签可以自动对应,所以也可以使用如下标签:
<s:form action="updateAddress">
    <s:textfield label="Postal Code" name="postalCode" />
    ...
</s:form>

UI标签说明:
Form部分
autocompleter
checkbox
checkboxlist
combobox
datetimepicker
doubleselect
head
file
form
hidden
label
optiontransferselect
optgroup
password
radio
reset
select
submit
textarea
textfield
token
updownselect

非Form部分:
actionerror
actionmessage
component
div
fielderror
table
tabbedPanel
tree
treenode

4.3节 主题和模板
概念说明:
标签(tag):一小段代码,在JSP,Velocity或者FreeMarker中执行。程序开发的最小单位,用来生成HTML对应的元素。
模板(template):一些代码,通常使用FreeMarker写成,可以被某些Tag表示出来(通常是UI Tag)。
主题(theme):一组模板打包在一起,提供通用功能的模版

主题和模板主要针对可视化的标签(Tag)而言,使用以下例子来说明三者之间的关系。
假如我们要开发如下的一个画面:
我们使用如下的代码:

<s:url action="login"  id="loginUrl"></s:url>
<s:form action="%{loginUrl}">
    <s:textfield label="Name" name="name"/>
    <s:password label="Password" name="password" />
    <s:submit></s:submit>
    <s:reset></s:reset>
</s:form>

这里<s:form>,<s:textfield>,<s:password>,<s:submit>,<s:reset>每一个都是一个标签(tag)。

我们在看看这些标签在一起生成的HTML源代码:
<form id="login" onsubmit="return true;"
    action="/login/login/login.action" method="post">
<table class="wwFormTable">
    <tr>
       <td class="tdLabel">
<label for="login_name" class="label">
Name:
</label>
</td>
       <td>
<input type="text" name="name"
value="" id="login_name" />
       </td>
    </tr>

    <tr>
       <td class="tdLabel">
<label for="login_password" class="label">
Password:
</label></td>
       <td>
<input type="password"
name="password" id="login_password" />
       </td>
    </tr>

    <tr>
       <td colspan="2">
       <div align="right"><input type="submit" id="login_0"
           value="Submit" /></div>
       </td>
    </tr>

    <tr>
       <td colspan="2">
       <div align="right"><input type="reset"
value="Reset" /></div>
       </td>
    </tr>

</table>
</form>




在由标签生成HTML代码的时候,例如:
<s:textfield label="Name" name="name"/>
生成的代码为:
<tr>
<td class="tdLabel">
<label for="login_name" class="label">
Name:
</label>
</td>
<td>
<input type="text" name="name" value="" id="login_name" />
</td>
</tr>
我们可以看到,<s:textfield>标签提供的有效信息只有Name和name,而其余的部分,例如<tr>,<td>,<label>等代码都根据一个固定的模板文件生成,这个模板文件为:



标签使我们开发JSP画面的时候使用的最小组件单元,我们根据客户的需要组合各种Tag达到客户的需求。模板是生成这些Tag时候使用的,使用模板可以定义Tag的基本形式,在使用tag的时候,我们只需要指定该Tag的不同属性,即可根据Tag指定的特殊属性,结合模板的基本属性生成可视化的HTML元素。主题是不同tag结合在一起而形成的。
<input type="text"<#rt/>
name="${parameters.name?default("")?html}"<#rt/>
<#if parameters.get("size")?exists>
size="${parameters.get("size")?html}"<#rt/>
</#if>
<#if parameters.maxlength?exists>
maxlength="${parameters.maxlength?html}"<#rt/>
</#if>
<#if parameters.nameValue?exists>
value="<@s.property value="parameters.nameValue"/>"<#rt/>
</#if>
<#if parameters.disabled?default(false)>
disabled="disabled"<#rt/>
</#if>
<#if parameters.readonly?default(false)>
readonly="readonly"<#rt/>
</#if>
<#if parameters.tabindex?exists>
tabindex="${parameters.tabindex?html}"<#rt/>
</#if>
<#if parameters.id?exists>
id="${parameters.id?html}"<#rt/>
</#if>
<#if parameters.cssClass?exists>
class="${parameters.cssClass?html}"<#rt/>
</#if>
<#if parameters.cssStyle?exists>
style="${parameters.cssStyle?html}"<#rt/>
</#if>
<#if parameters.title?exists>
title="${parameters.title?html}"<#rt/>
</#if>
<#include "/${parameters.templateDir}/simple/scripting-events.ftl" />
<#include "/${parameters.templateDir}/simple/common-attributes.ftl" />
/>

我们考虑标签(Tag)使用模板(Template)生成HTML的过程,根据不同的模板,坑顶可以生成不同的HTML画面,这样我们可以把不同tag的,视觉效果一致的模板放在一起:
例如:
<s:form>        TemplateForm_A,       TemplateForm_B
<s:textfield>  TemplateTextField_A, TemplateTextField_B
<s:password>   TemplatePassword_A,  TemplatePassword_B
<s:submit>,    TemplateSubmit_A,    TemplateSubmit_B
<s:reset>       TemplateReset_A,      TemplateReset_B

这样将_A的模板放在一起叫做A主题(Theme),将_B的模板放在一起叫B主题。这样我们在分别使用A主题,B主题的时候可以得到同一个Tag的不同的视觉效果。

模版和主题的概念处在Struts Tag的核心位置。

Struts2默认提供了四种主题:
Simple    主题:最简单的主题
XHTML     主题:默认主题,使用常用的HTML技巧
CSS XHTML主题: 使用CSS实现的XHTML主题
AJAX      主题:基于XHTML主题,但是同工了AJAX功能

相关配置:
在struts.properties文件中有如下项目:
struts.ui.theme=xhtml
struts.ui.templateDir=template
struts.ui.templateSuffix=ftl

struts.ui.theme的值表示的是使用哪个主题,可选项位:xhtml,simple,css_html,ajax其中xhtml为默认值。
struts.ui.templateDir的值表示模板的存放目录。
struts.ui.templateSuffix的值表示模板文件明的后缀,因为Struts2默认使用FreeMarker来编写模板,所以这里我们基本使用ftl。 另外也可以使用vm(Velocity)和jsp(Java Server Page),但是所有的Template和Theme要我们自己开发。

关于模板文件的存放目录我们需要详细说明,如上述说明,模板文件的存放位置位template,那么系统在那里寻找template目录呢,
首先,在web应用程序中查找,如果应用程序中存在一个叫做template的目录(跟WEB-INF目录平级),那么所有的文件从这个目录中取得,具体的路径还要加上主题的名字。
然后,如果在web应用程序中没有找到template目录,那么struts2会在classpath中寻找,由于struts2-core-2.0.9.jar文件中存在template目录,其中内置了四种主题,所以会使用这里变的模板。
例如:
如果我们使用了ajax主题,那么会在如下位置超找<s:textfield>的主题
应用程序 /template/ajax/textfield.ftl
classpath /template/ajax/textfield.ftl



修改或者扩展模板:
有些时候Struts提供的模板不一定能够满足我们的需求,这时候我们需要修改或者扩展现有模板。重新做新的模板是不明智的,如果是在需要全新的模板,可以考虑基于simple扩展。

修改:
根据模板的装载机制,可以考虑将模板从struts2-core-2.0.9.jar文件中解压缩到web项目目录,之后修改对应的文件。

包装:
XHTML提供了一个很好的例子,simple主题提供了基本的功能,XHTML将它包括起来,例如:
以下是template/xhtml/xxx.ftl(xxx表示模板名字)文件内容:
<#include "/${parameters.templateDir}/xhtml/controlheader.ftl" />
<#include "/${parameters.templateDir}/simple/xxx.ftl" />
<#include "/${parameters.templateDir}/xhtml/controlfooter.ftl" />

扩展(extend):
使用棉线对象的特性可以扩展一个主题,扩展一个主题的时候不需要实现所有的模板,只需要实现需要变化的标签。
扩展需要在目录中新建一个叫做theme.properties的文件,这个文件只有一行,表明了继承而来的主题的名字,例如:
/template/ajax/theme.properties文件内容为:
parent = xhtml


4.4节 AJAX标签(试验阶段)
Struts2内置了Dojo 0.4 来提供对Ajax的支持。
想要使用AJAX标签需要做到两点:
1 使用Ajax主题
2 在JSP画面中使用了head标签配置Ajax属性

AJAX标签主要有:
<s:div> 
<s:submit>
<s:a>
<s:tabbedPanel>
<s:autocompleter>

AJAX标签的一些通用属性:
属性 说明 类型
href 请求使用的URL String
listenTopic 使用逗号分割的一组主题列表,这个列表中的主题会导致这个Tag自己内容(Div,Autocompleter)重新装载或者执行一个Action(Anchor,Submit) String
notifyTopic 使用逗号分割的一组主题列表,向这个列表中的主题发布一些信息,例如:’data’,’type’,’request’,参看每个标签的详细说明 String
showErrorTransportText 设置是否显示错误消息(默认显示) Boolean
indicator 请求过程中显示的对象,通常位ProgressBar等 String


Indicator
<img style="display:none"
src="${pageContext.request.contextPath}/images/indicator.gif"
alt="Loading..."/>

Topic
监听一个Topic:
dojo.event.topic.subscribe("/refresh", function(param1, param2) {
  //this function will be called everytime "/refresh" is published
});
向一个Topic发布内容:
dojo.event.topic.publish("/refresh", "foo", "bar");

URL
Href属性对应的URL必须使用URL标签定义,例如:
<s:url id="ajaxTest" value="/AjaxTest.action" />
<s:div theme="ajax" href="%{ajaxTest}">
  Initial Content
</s:div>

DIV标签:
Div主要用来异步的显示数据, PageLoad会出发Div中数据的显示,除非把AutoStart设置为False。
另外,Div的数据显示可以使用Topic来触发。使用listenTopic来定义触发器。

例如:
<s:url id="ajaxTest" value="/AjaxTest.action" />
<s:div theme="ajax" href="%{ajaxTest}" listenTopics="/refresh0,/refresh1"/>
每次想/refresh0,/refresh1发布内容的时候,上面代码定义的div都会刷新。

使用updateFreq可以让Div周期性的触发,在autoStart设置位true的情况下,可以使用delay来延迟首次画面加载的出发时间,例如:
<s:url id="ajaxTest" value="/AjaxTest.action" />
<s:div theme="ajax" href="%{ajaxTest}" updateFreq="2000" delay="3000"/>
上述代码说明,每隔2秒该div触发内容更新一次,但是首次画面加载完成之后3秒div出发内容更新。

@todo 其他标签



4.5节 OGNL
OGNL是Object Graph Navigation Language的简称,详细相关的信息可以参考: http://www.ognl.org。这里我们只涉及Struts2框架中对OGNL的基本支持。

OGNL是一个对象,属性的查询语言。在OGNL中有一个类型为Map的Context(称为上下文),在这个上下文中有一个根元素(root),对根元素的属性的访问可以直接使用属性名字,但是对于其他非根元素属性的访问必须加上特殊符号#。

在Struts2中上下文为ActionContext,根元素位Value Stack(值堆栈,值堆栈代表了一族对象而不是一个对象,其中Action类的实例也属于值堆栈的一个)。ActionContext中的内容如下图:
              |
              |--application
              |
              |--session
context map---|
              |--value stack(root)
              |
              |--request
              |
              |--parameters
              |
              |--attr (searches page, request, session, then application scopes)
              |
因为Action实例被放在Value Stack中,而Value Stack又是根元素(root)中的一个,所以对Action中的属性的访问可以不使用标记#,而对其他的访问都必须使用#标记。

引用Action的属性
<s:property value="postalCode"/>
ActionContext中的其他非根(root)元素的属性可以按照如下的方式访问:
<s:property value="#session.mySessionPropKey"/> or
<s:property value="#session["mySessionPropKey"]"/> or
<s:property value="#request["mySessionPropKey"]/>

Action类可以使用ActionContext中的静态方法来访问ActionContext。
ActionContext.getContext().getSession().put("mySessionPropKey", mySessionObject);

OGNL与Collection(Lists,Maps,Sets)

生成List的语法为: {e1,e2,e3}.
<s:select label="label" name="name"
list="{'name1','name2','name3'}" value="%{'name2'}" />
上面的代码生成了一个HTML Select对象,可选的内容为: name1,name2,name3,默认值为:name2。

生成Map的语法为:#{key1:value1,key2:value2}.
<s:select label="label" name="name"
list="#{'foo':'foovalue', 'bar':'barvalue'}" />
上面的代码生成了一个HTML Select对象,foo名字表示的内容为:foovalue,bar名字表示的内容为:barvalue。

判断一个对象是否在List内存在:
<s:if test="'foo' in {'foo','bar'}">
   muhahaha
</s:if>
<s:else>
   boo
</s:else>

<s:if test="'foo' not in {'foo','bar'}">
   muhahaha
</s:if>
<s:else>
   boo
</s:else>

取得一个List的一部分:
?  –  所有满足选择逻辑的对象
^  -   第一个满足选择逻辑的对象
$  -   最后一个满足选择逻辑的对象
例如:
person.relatives.{? #this.gender == 'male'}
上述代码取得这个人(person)所有的男性(this.gender==male)的亲戚(relatives)


Lambda 表达式

OGNL支持简单的Lambda表达式语法,使用这些语法可以建立简单的lambda函数。

例如:
Fibonacci:
if n==0 return 0;
elseif n==1 return 1;
else return fib(n-2)+fib(n-1);
fib(0) = 0
fib(1) = 1
fib(11) = 89

OGNL的Lambda表达式如何工作呢?
Lambda表达式必须放在方括号内部,#this表示表达式的参数。例如:
<s:property value="#fib =:[#this==0 ? 0 : #this==1 ? 1 : #fib(#this-2)+#fib(#this-1)], #fib(11)" />

#fib =:[#this==0 ? 0 : #this==1 ? 1 : #fib(#this-2)+#fib(#this-1)]定义了一个Lambda表达式,
#fib(11) 调用了这个表达式。

所以上述代码的输出为:89

在JSP2.1中#被用作了JSP EL(表达式语言)的特殊记好,所以对OGNL的使用可能导致问题,
一个简单的方法是禁用JSP2.1的EL特性,这需要修改web.xml文件:
<jsp-config>
    <jsp-property-group>
      <url-pattern>*.jsp</url-pattern>
      <el-ignored>true</el-ignored>
    </jsp-property-group>
</jsp-config>


4.6节 Tag 语法
代码示例:
表达式 含义
<p>Username: ${user.username}</p> 一个在标准上下文中的JavaBean对象,可以适用Freemarker,Velocity,JSTL EL等(不是OGNL)。
<s:textfield name="username"/> 在Value Stack中的一个username属性。
<s:url id="es" action="Hello">
  <s:param name="request_locale">
    es
  </s:param>
</s:url>
<s:a href="%{es}">Espanol</s:a> 引用Value Stack中属性的另外一种方法。
<s:property
  name="#session.user.username" /> Session中的user对象的username属性。
<s:select
  label="FooBar" name="foo"
  list="#{'username':'trillian',
    'username':'zaphod'}" /> 一个简单的静态Map,和put("username","trillian")一样

你可能感兴趣的:(JavaScript,Ajax,UI,struts,XHTML)