Junky's IT Notebook

隨筆分類(224)

文章分類(5)

隨筆檔案(228)

文章檔案(7)

統計

隨筆 - 228
文章 - 7
評論 - 32
引用 - 0

留言簿(8)

積分與排名

積分 - 190104
排名 - 302

WebSphere Studio

cas - CSDN tag
IBM-WebSphere Studio
lucene java

閱讀排行榜

評論排行榜

WebWork2教程（中文版）(4.1.1)

4.1.1、WebWork UI標記

（1）創建表單

WebWork UI標記和HTML標記很相似，很容易從它的名字辨認出。你可以直接使用這些標記創建表單，和HTML標記的區別在于：參數使用雙引號和單引號括起，這是因為要和Value Stack中的名字區分?？聪旅娴睦樱?/span>

ex01-index.jsp：

<%@ taglib uri="webwork" prefix="ww" %>

<html>

<head>

<title>WebWork Tutorial - Lesson 4.1.1 - Example 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

       .errorMessage { color: red; }

</style>

</head>

<body>

<p>UI Form Tags Example:</p>

<ww:form action="'formProcessing.action'" method="'post'">

       <ww:checkbox name="'checkbox'" label="'A checkbox'" fieldValue="'checkbox_value'" />

       <ww:file name="'file'" label="'A file field'" />

       <ww:hidden name="'hidden'" value="'hidden_value'" />

       <ww:label label="'A label'" />

       <ww:password name="'password'" label="'A password field'" />

       <ww:radio name="'radio'" label="'Radio buttons'" list="{'One', 'Two', 'Three'}" />

       <ww:select name="'select'" label="'A select list'" list="{'One', 'Two', 'Three'}"

              emptyOption="true" />

       <ww:textarea name="'textarea'" label="'A text area'" rows="'3'" cols="'40'" />

       <ww:textfield name="'textfield'" label="'A text field'" />

       <ww:submit value="'Send Form'" />

</ww:form>

</body>

</html>

經WebWork處理后的HTML結果如下：

<html>

<head>

<title>WebWork Tutorial - Lesson 4.1.1 - Example 1</title>

<style type="text/css">

  .errorMessage { color: red; }

</style>

</head>

<body>

<p>UI Form Tags Example:</p>

<table>

<form action="formProcessing.action" method="post" >

<tr><td valign="top" colspan="2">

<table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr><td valign="top">

<input type="checkbox" name="checkbox" value="checkbox_value" />

</td>

<td width="100%" valign="top">

<span class="checkboxLabel">

A checkbox

</span>

</td></tr>

</table>

</td></tr>

<tr><td align="right" valign="top">

<span class="label">

A file field:

</span>

</td>

<td>

<input type="file" name="file" />

</td></tr>

    <input type="hidden" name="hidden" value="hidden_value" />

<tr><td align="right" valign="top">

<span class="label">

A label:

</span>

</td>

<td>

<label> </label>

</td></tr>

<tr><td align="right" valign="top">

<span class="label">

A password field:

</span>

</td>

<td>

<input type="password" name="password" />

</td></tr>

<tr><td align="right" valign="top">

<span class="label">

Radio buttons:

</span>

</td>

<td>

<input type="radio" name="radio" id="radioOne" value="One" />

<label for="radioOne">One</label>

<input type="radio" name="radio" id="radioTwo" value="Two" />

<label for="radioTwo">Two</label>

<input type="radio" name="radio" id="radioThree" value="Three" />

<label for="radioThree">Three</label>

</td></tr>

<tr><td align="right" valign="top">

<span class="label">

A select list:

</span>

</td>

<td>

<select name="select">

<option value=""></option>

<option value="One">One</option>

<option value="Two">Two</option>

<option value="Three">Three</option>

</select>

</td></tr>

<tr><td align="right" valign="top">

<span class="label">

A text area:

</span>

</td>

<td>

<textarea name="textarea" cols="40" rows="3" ></textarea>

</td></tr>

<tr><td align="right" valign="top">

<span class="label">

A text field:

</span>

</td>

<td>

<input type="text" name="textfield" />

</td></tr>

  <tr><td colspan="2">

<div align="right" ><input type="submit" value="Send Form" /></div>

</td></tr>

</form>

</table>

</body>

</html>

xwork.xml：

<!DOCTYPE xwork PUBLIC "-//OpenSymphony Group//XWork 1.0//EN"

"http://www.opensymphony.com/xwork/xwork-1.0.dtd">

<xwork>

       <!-- Include webwork defaults (from WebWork-2.1 JAR). -->

       <include file="webwork-default.xml" />

       <!-- Configuration for the default package. -->

       <package name="default" extends="webwork-default">

              <action name="formProcessing" class="lesson04_01_01.FormProcessingAction">

                <result name="input" type="dispatcher">ex01-index.jsp</result>

                <result name="success" type="dispatcher">ex01-success.jsp</result>

                <interceptor-ref name="validationWorkflowStack" />

              </action>

       </package>

</xwork>

FormProcessingAction.java：

package lesson04_01_01;

import com.opensymphony.xwork.ActionSupport;

public class FormProcessingAction extends ActionSupport {

       private String checkbox;

       private String file;

       private String hidden;

       private String password;

       private String radio;

       private String select;

       private String textarea;

       private String textfield;

       public String getCheckbox() { return checkbox; }

       public String getFile() { return file; }

       public String getHidden() { return hidden; }

       public String getPassword() { return password; }

       public String getRadio() { return radio; }

       public String getSelect() { return select; }

       public String getTextarea() { return textarea; }

       public String getTextfield() { return textfield; }

       public void setCheckbox(String checkbox) { this.checkbox = checkbox; }

       public void setFile(String file) { this.file = file; }

       public void setHidden(String hidden) { this.hidden = hidden; }

       public void setPassword(String password) { this.password = password; }

       public void setRadio(String radio) { this.radio = radio; }

       public void setSelect(String select) { this.select = select; }

       public void setTextarea(String textarea) { this.textarea = textarea; }

       public void setTextfield(String textfield) { this.textfield = textfield; }

       public String execute() throws Exception {

              return SUCCESS;

FormProcessingAction-validation.xml：

<!DOCTYPE validators PUBLIC "-//OpenSymphony Group//XWork Validator 1.0//EN"

"http://www.opensymphony.com/xwork/xwork-validator-1.0.dtd">

<validators>

 <field name="checkbox">

    <field-validator type="requiredstring">

      <message>Please, check the checkbox.</message>

    </field-validator>

 </field>

 <field name="file">

    <field-validator type="requiredstring">

      <message>Please select a file.</message>

    </field-validator>

 </field>

 <field name="password">

    <field-validator type="requiredstring">

      <message>Please type something in the password field.</message>

    </field-validator>

 </field>

 <field name="radio">

    <field-validator type="requiredstring">

      <message>Please select a radio button.</message>

    </field-validator>

 </field>

 <field name="select">

    <field-validator type="requiredstring">

      <message>Please select an option from the list.</message>

    </field-validator>

 </field>

 <field name="textarea">

    <field-validator type="requiredstring">

      <message>Please type something in the text area.</message>

    </field-validator>

 </field>

 <field name="textfield">

    <field-validator type="requiredstring">

      <message>Please type something in the text field.</message>

    </field-validator>

 </field>

</validators>

ex01-success.jsp：

<%@ taglib uri="webwork" prefix="ww" %>

<html>

<head>

<title>WebWork Tutorial - Lesson 4.1.1 - Example 1</title>

</head>

<body>

<p>UI Form Tags Example result:</p>

<ul>

 <li>checkbox: <ww:property value="checkbox" /></li>

 <li>file: <ww:property value="file" /></li>

 <li>hidden: <ww:property value="hidden" /></li>

 <li>password: <ww:property value="password" /></li>

 <li>radio: <ww:property value="radio" /></li>

 <li>select: <ww:property value="select" /></li>

 <li>textarea: <ww:property value="textarea" /></li>

 <li>textfield: <ww:property value="textfield" /></li>

</ul>

</body>

</html>

Form的缺省布局是表格，左邊是標簽，右邊是表單域。可以使用模板系統創建自己的布局。

注意Action配置中validationWorkflowStack的引用。這使得WebWork會根據Action類相同位置上的驗證配置文件（FormProcessingAction-validation.xml），對傳遞給Action的參數進行驗證。如果有非法參數，WebWork會阻止Action的執行，將請求指派的input結果頁面，將錯誤信息顯示到對應的表單域。

（2）模板系統

WebWork使用Velocity模板系統為所有的UI標記呈現實際的HTML輸出。所有模板的缺省實現包含在webwork-2.1.jar的/template/xhtml目錄下。這些模板可以被編輯或替換來定制HTML輸出結果。

如果你想使用不同的布局來顯示UI組件，你可以：

l 編輯或替換/template/xhtml目錄下的文件

l 編輯webwork.properties文件（要放在/WEB-INF/classes目錄下）的webwork.ui.theme，指向模板位置。

l 使用標記的theme或template屬性為單個標記指定模板位置

下面是使用第三種方法的例子：

ex02.jsp：

<%@ taglib uri="webwork" prefix="ww" %>

<html>

<head>

<title>WebWork Tutorial - Lesson 4.1.1 - Example 2</title>

</head>

<body>

<p>Template Change Example:</p>

<p><ww:checkbox name="'checkbox'" label="'A checkbox'"

fieldValue="'checkbox_value'" theme="/files/templates/components" /></p>

<p><ww:textfield name="'textfield'" label="'A text field'"

template="/files/templates/components/mytextfield.vm" /></p>

</body>

</html>

/files/templates/components/checkbox.vm：

<div align="center">

       <input type="checkbox"

              name="$!webwork.htmlEncode($parameters.name)"

              value="$!webwork.htmlEncode($parameters.fieldValue)"

       #if ($parameters.nameValue) checked="checked" #end

       #if ($parameters.disabled == true) disabled="disabled" #end

       #if ($parameters.tabindex) tabindex="$!webwork.htmlEncode($parameters.tabindex)" #end

       #if ($parameters.onchange) onchange="$!webwork.htmlEncode($parameters.onchange)" #end

       #if ($parameters.id) id="$!webwork.htmlEncode($parameters.id)" #end

       /><br />

       $!webwork.htmlEncode($parameters.label)

</div>

/files/templates/components/mytextfield.vm：

<div align="center">

       <input type="text"

              name="$!webwork.htmlEncode($parameters.name)"

       #if ($parameters.size) size="$!webwork.htmlEncode($parameters.size)" #end

       #if ($parameters.maxlength) maxlength="$!webwork.htmlEncode($parameters.maxlength)" #end

       #if ($parameters.nameValue) value="$!webwork.htmlEncode($parameters.nameValue)" #end

       #if ($parameters.disabled == true) disabled="disabled" #end

       #if ($parameters.readonly) readonly="readonly" #end

       #if ($parameters.onkeyup) onkeyup="$!webwork.htmlEncode($parameters.onkeyup)" #end

       #if ($parameters.tabindex) tabindex="$!webwork.htmlEncode($parameters.tabindex)" #end

       #if ($parameters.onchange) onchange="$!webwork.htmlEncode($parameters.onchange)" #end

       #if ($parameters.id) id="$!webwork.htmlEncode($parameters.id)" #end

       /><br />

       $!webwork.htmlEncode($parameters.label)

</div>

ex02.jsp被處理后的HTML輸出結果：

<html>

<head>

<title>WebWork Tutorial - Lesson 4.1.1 - Example 2</title>

</head>

<body>

<p>Template Change Example:</p>

<p><div align="center">

  <input type="checkbox"

         name="checkbox"

         value="checkbox_value"

            /><br />

  A checkbox

</div></p>

<p><div align="center">

  <input type="text"

                                     name="textfield"

                    /><br />

  A text field

</div></p>

</body>

</html>

（3）創建自定義UI組件

有時WebWork的UI組件沒法滿足你的需求，你可以創建自定義的組件。你可以使用WebWork推薦的方法創建布局干凈、有錯誤檢查、可重用的自定義組件。

要創建自定義組件，只要為它創建Velocity模板，使用<ww:component />標記將它放到Web頁面中，使用template屬性指定模板位置。要傳遞參數給模板，可以在<ww:component />標記中使用<ww:param />標記。下面的例子創建一個自定義的Date域：

ex03.jsp：

<%@ taglib uri="webwork" prefix="ww" %>

<html>

<head>

<title>WebWork Tutorial - Lesson 4.1.1 - Example 3</title>

</head>

<body>

<p>Custom Component Example:</p>

<p>

<ww:component template="/files/templates/components/datefield.vm">

       <ww:param name="label" value="'Date'" />

       <ww:param name="name" value="'mydatefield'" />

       <ww:param name="size" value="3" />

</ww:component>

</p>

</body>

</html>

/files/templates/components/datefield.vm：

#set ($name = $tag.params.get('name'))

#set ($size = $tag.params.get('size'))

#set ($yearSize = $size * 2)

$tag.params.get('label'):

<input type="text" name="${name}.day" size="$size" /> /

<input type="text" name="${name}.month" size="$size" /> /

<input type="text" name="${name}.year" size="$yearSize" /> (dd/mm/yyyy)

ex03.jsp被處理后的HTML輸出結果：

<html>

<head>

<title>WebWork Tutorial - Lesson 4.1.1 - Example 3</title>

</head>

<body>

<p>Custom Component Example:</p>

<p>

Date:

<input type="text" name="mydatefield.day" size="3" /> /

<input type="text" name="mydatefield.month" size="3" /> /

<input type="text" name="mydatefield.year" size="6" /> (dd/mm/yyyy)

</p>

</body>

</html>

posted on 2007-06-28 09:40 junky 閱讀(1059) 評論(1) 編輯收藏所屬分類: web


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: spring+JAX-RPC(Axis) 構建webservice WebWork2教程（中文版）（1） WebWork2教程（中文版）（2） WebWork2教程（中文版）(3) WebWork2教程（中文版）(4.1) WebWork2教程（中文版）(4.1.1) WebWork2教程（中文版）(4.2) WebWork2教程（中文版）(5)(完） Web Services帶來了什么采用dwr+ajax和struts開發文件上傳進度條(轉)