WebWork2 Guide (Chinese Version) (4.1.1)
4.1.1, WebWork UI marker
(1) to create a form
WebWork UI marking and is very similar to HTML tags, it is easy to identify the name of it. You can direct the use of these markers to create forms, and the difference between the HTML tags: the use of double quotes parameters and single-enclosed in quotation marks, and this is because Value Stack in the name of distinction. Look at the following example:
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' and '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>
The WebWork deal with the HTML results are as follows:
<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 layout is the default form, the left is the label, the right form fields. Template system can be used to create your own layout.
Action attention to the allocation of validationWorkflowStack are cited. This makes WebWork according to the same position on the Action of the test configuration file (FormProcessingAction-validation.xml), the parameters passed to Action to verify. If illegal parameters, WebWork Action will prevent the implementation of, and shall be assigned to input the results page will display the wrong message to the corresponding form fields.
(2) template system
WebWork Velocity template system to use all the UI showed marked the actual HTML output. Realize all the default template contained in the webwork-2.1.jar / template / xhtml directory. These templates can be customized to edit or replace HTML output.
If you want to use a different layout to display UI components, you can:
L edit or replacement / template / xhtml directory of documents
L webwork.properties edit documents (to the / WEB-INF/classes directory) webwork.ui.theme, at the template location.
L use of the theme or template marking attribute to a single template marking designated location
Below are examples of the use of the third method:
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 be processed after the HTML output:
<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) create custom UI components
Sometimes the WebWork UI components can not meet your needs, you can create custom components. You can use WebWork recommend ways to create the layout clean, error checking, since the definition of reusable components.
To create a custom component, as long as it created Velocity template for use <ww: component /> marking it to the Web pages will be used in the template attribute template designated location. To convey the parameters to the template, In "ww: component /> markers using <ww: param /> marker. The following example creates a custom domain 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 be processed after the HTML output:
<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>
0 Comments to “WebWork2 Guide (Chinese Version) (4.1.1)”
No Comments. Send your comment.
Leave a Reply
You must be logged in to post a comment.