4.1.1, Webwork UI Tag
(1) Creating a form
The WebWork UI tag and HTML tag are very similar, and it is easy to identify from its name. You can use these tags directly to create a form, and the difference between HTML tags is that the parameters are enclosed in double quotes and single quotes because the names are distinguished from the name in the Value Stack. Look at the example below:
EX01-INDEX.JSP:
<% @ Taglib Uri = "Webwork" prefix = "ww"%>
Webwork Tutorial - Lesson 4.1.1 - Example 1 </ Title></p>
<p><meta http-equiv = "content-type" content = "text / html; charSet = ISO-8859-1"></p>
<p><style type = "text / css"></p>
<p>{color: red;</p>
<p></ style></p>
<p></ hEAD></p>
<p><body></p>
<p><p> ui form tags example: </ p></p>
<p><ww: form action = "'FormProcessing.action'" Method = "'POST'"></p>
<p><ww: checkbox name = "'checkbox'" label = "'a checkbox'" FieldValue = "'Checkbox_Value'" /></p>
<p><ww: file name = "'file'" label = "'a file field'" /></p>
<p><ww: hidden name = "'hidden'" value = "'hidden_value'" /></p>
<p><ww: label label = "'a label'" /></p>
<p><ww: password name = "'password'" label = "'a password field'" /></p>
<p><ww: radio name = "'Radio'" label = "'Radio Buttons'" List = "{'One', 'Two', 'Three'}" /></p>
<p><ww: select name = "'SELECT'" label = "'a select list'" list = "{'one', 'two', 'three'}"</p>
<p>EMPTYOPTION = "true" /></p>
<p><ww: textarea name = "'textarea'" label = "'a text area'" rows = "'3'" cols = "'40'" /> <ww: textfield name = "'TextField'" label = " 'A tomxt field' "/></p>
<p><ww: submit value = "'send form'" /></p>
<p></ ww: form></p>
<p></ body></p>
<p></ html></p>
<p>The HTML results after Webwork were as follows:</p>
<p><html></p>
<p><HEAD></p>
<p><title> Webwork Tutorial - Lesson 4.1.1 - Example 1 </ Title></p>
<p><style type = "text / css"></p>
<p>{color: red;</p>
<p></ style></p>
<p></ hEAD></p>
<p><body></p>
<p><p> ui form tags example: </ p></p>
<p><table></p>
<p><form action = "formProcessing.action" method = "post"></p>
<p><TR> <TD Valign = "TOP" colSpan = "2"></p>
<p><table width = "100%" border = "0" cellpadding = "0" cellspacing = "0"></p>
<p><TR> <TD Valign = "TOP"></p>
<p><Input Type = "Checkbox" name = "Checkbox" value = "checkbox_value" /></p>
<p></ td></p>
<p><TD Width = "100%" Valign = "TOP"></p>
<p><span class = "checkboxlabel"></p>
<p>A checkbox</p>
<p></ span></p>
<p></ td> </ tr></p>
<p></ TABLE></p>
<p></ td> </ tr></p>
<p><tr> <td align = "right" Valign = "TOP"></p>
<p><span class = "label"></p>
<p>A File Field:</p>
<p></ span></p>
<p></ td></p>
<p><TD></p>
<p><Input Type = "file" name = "file" /></p>
<p></ td> </ tr></p>
<p><Input Type = "Hidden" name = "hidden" value = "hidden_value" /></p>
<p><TR> <TD align = "right" Valign = "TOP"> <span class = "label"></p>
<p>A label:</p>
<p></ span></p>
<p></ td></p>
<p><TD></p>
<p><label> </ label></p>
<p></ td> </ tr></p>
<p><tr> <td align = "right" Valign = "TOP"></p>
<p><span class = "label"></p>
<p>A Password Field:</p>
<p></ span></p>
<p></ td></p>
<p><TD></p>
<p><Input Type = "Password" name = "password" /></p>
<p></ td> </ tr></p>
<p><tr> <td align = "right" Valign = "TOP"></p>
<p><span class = "label"></p>
<p>Radio Buttons:</p>
<p></ span></p>
<p></ td></p>
<p><TD></p>
<p><Input Type = "Radio" name = "Radio" id = "Radioone" value = "one" /></p>
<p><label for = "radioone"> One </ label></p>
<p><input type = "radio" name = "radio" id = "radiotwo" value = "two" /></p>
<p><label for = "radiotwo"> Two </ label></p>
<p><input type = "radio" name = "radio" id = "radiothree" value = "three" /></p>
<p><label for = "radiothree"> Three </ label></p>
<p></ td> </ tr></p>
<p><tr> <td align = "right" Valign = "TOP"></p>
<p><span class = "label"></p>
<p>A SELECT LIST:</p>
<p></ span></p>
<p></ td></p>
<p><TD></p>
<p><select name = "select"></p>
<p><Option value = "> </ option></p>
<p><Option value = "one"> one </ option></p>
<p><option value = "two"> Two </ option></p>
<p><option value = "three"> Three </ option></p>
<p></ select></p>
<p></ td> </ tr></p>
<p><TR> <TD align = "right" Valign = "TOP"> <span class = "label"></p>
<p>A Text Area:</p>
<p></ span></p>
<p></ td></p>
<p><TD></p>
<p><textarea name = "textarea" cols = "40" rows = "3"> </ textarea></p>
<p></ td> </ tr></p>
<p><tr> <td align = "right" Valign = "TOP"></p>
<p><span class = "label"></p>
<p>A Text Field:</p>
<p></ span></p>
<p></ td></p>
<p><TD></p>
<p><Input Type = "text" name = "textfield" /></p>
<p></ td> </ tr></p>
<p><TR> <TD COLSPAN = "2"></p>
<p><div align = "right"> <input type = "submit" value = "send form" /> </ div></p>
<p></ td> </ tr></p>
<p></ form></p>
<p></ TABLE></p>
<p></ body></p>
<p></ html></p>
<p>Xwork.xml:</p>
<p><! Doctype xwork public "- // opensymphony group // xwork 1.0 // en"</p>
<p>"http://www.opensymphony.com/xwork/xwork-1.0.dtd"></p>
<p><xwork></p>
<p><! - INCLUDE WebWork Defaults (from Webwork-2.1 Jar). -></p>
<p><include file = "Webwork-default.xml" /></p>
<p><! - configuration for the default package. -></p>
<p><package name = "default" extends = "Webwork-default"></p>
<p><action name = "forProcessing" class = "lesson04_01_01.formprocessing"></p>
<p><result name = "infut" type = "dispatcher"> eX01-index.jsp </ result></p>
<p><result name = "success" type = "dispatcher"> eX01-surcess.jsp </ result></p>
<p><Interceptor-Ref Name = "ValidationWorkflowstack" /></p>
<p></ action></p>
<p></ package></p>
<p></ xwork></p>
<p>FormProcessingAction.java:</p>
<p>Package lesson04_01_01;</p>
<p>Import com.opensymphony.xWork.Actionsupport; public class formProcessing Extends ActionSupport {</p>
<p>PRIVATE STRING CHECKBOX;</p>
<p>PRIVATE STRING FILE;</p>
<p>PRIVATE STRING HIDDEN</p>
<p>PRIVATE STRING Password;</p>
<p>PRIVATE STRING RADIO;</p>
<p>PRIVATE STRING SELECT;</p>
<p>PRIVATE STRING TEXTAREA;</p>
<p>PRIVATE STRING TEXTFIELD;</p>
<p>Public string getCheckbox () {return checkbox;}</p>
<p>PUBLIC STRING GETFILE () {Return File;</p>
<p>Public string gethidden () {return hidden;</p>
<p>Public string getpassword () {return password;}</p>
<p>Public string getradio () {return radio;}</p>
<p>Public string getselect () {return select;}</p>
<p>Public string gettextArea () {returnization textarea;}</p>
<p>Public string gettextfield () {returnization;</p>
<p>Public void setCheckbox (string checkbox) {this.checkbox = checkbox;}</p>
<p>Public void setfile (string file) {this.file = file;}</p>
<p>Public void sethidden (string hidden) {this.hidden = hidden;}</p>
<p>Public void setpassword (string password) {this.password = password;}</p>
<p>Public void setradio (string radio) {this.radio = radio;}</p>
<p>Public void setselect (string select) {this.select = select;}</p>
<p>Public void settextAREA (String textarea) {this.textarea = textarea;}</p>
<p>Public void settextfield (string textfield) {this.textfield = textfield;</p>
<p>Public String Execute () throws exception {</p>
<p>RETURN SUCCESS;</p>
<p>}</p>
<p>}</p>
<p>FormProcessingAction-Validation.xml:</p>
<p><! Doctype validators public "- // OpenSymphony Group // xwork validator 1.0 // en"</p>
<p>"http://www.opensymphony.com/xwork/xwork-validator-1.0.dtd"></p>
<p><validators></p>
<p><Field Name = "Checkbox"></p>
<p><Field-Validator Type = "RequiredString"></p>
<p><Message> please, Check the checkbox. </ message></p>
<p></ Field-Validator></p>
<p></ field></p>
<p><Field Name = "File"> <field-validator type = "required"></p>
<p><Message> please select a file. </ message></p>
<p></ Field-Validator></p>
<p></ field></p>
<p><Field Name = "Password"></p>
<p><Field-Validator Type = "RequiredString"></p>
<p><Message> please type something in the password field. </ message></p>
<p></ Field-Validator></p>
<p></ field></p>
<p><Field Name = "Radio"></p>
<p><Field-Validator Type = "RequiredString"></p>
<p><Message> please select a radio button. </ message></p>
<p></ Field-Validator></p>
<p></ field></p>
<p><Field Name = "SELECT"></p>
<p><Field-Validator Type = "RequiredString"></p>
<p><Message> please select an option from the list. </ message></p>
<p></ Field-Validator></p>
<p></ field></p>
<p><Field Name = "Textarea"></p>
<p><Field-Validator Type = "RequiredString"></p>
<p><Message> please type something in the text area. </ message></p>
<p></ Field-Validator></p>
<p></ field></p>
<p><Field Name = "TextField"></p>
<p><Field-Validator Type = "RequiredString"></p>
<p><Message> please type something in the text field. </ message></p>
<p></ Field-Validator></p>
<p></ field></p>
<p></ validators></p>
<p>EX01-SUCCESS.JSP:</p>
<p><% @ Taglib Uri = "Webwork" prefix = "ww"%></p>
<p><html></p>
<p><HEAD></p>
<p><title> Webwork Tutorial - Lesson 4.1.1 - Example 1 </ Title></p>
<p></ hEAD></p>
<p><body></p>
<p><p> ui form tags example result: </ p></p>
<p><ul></p>
<p><li> Checkbox: <ww: property value = "checkbox" /> </ li></p>
<p><li> file: <ww: protoyal value = "file" /> </ li></p>
<p><li> hidden: <ww: proty value = "hidden" /> </ li> <li> password: <ww: property value = "password" /> </ li></p>
<p><li> Radio: <ww: property value = "radio" /> </ li></p>
<p><li> select: <ww: property value = "SELECT" /> </ li></p>
<p><li> textarea: <ww: protoyal value = "textarea" /> </ li></p>
<p><li> textfield: <ww: protoyal value = "textfield" /> </ li></p>
<p></ ul></p>
<p></ body></p>
<p></ html></p>
<p>The default layout of form is a table, the left is a label, and the right is a single domain. You can create your own layout using the template system.</p>
<p>Note the reference to the ValidationWorkflowstack in the Action configuration. This allows WebWork to verify the parameters passed to the Action according to the verification profile (formProcessingAction-Validation.xml) on the same location as the Action class. If there is an illegal parameter, the webwork will block the execution of the Action, and the request assigned INPUT results page will display the error message to the corresponding form field.</p>
<p>(2) Template system</p>
<p>WebWork uses the Velocity template system to present the actual HTML output for all UI tags. The default implementation of all templates is included in the WebWork-2.1.jar / template / xhtml directory. These templates can be edited or replaced to customize HTML output results.</p>
<p>If you want to use a different layout to display UI components, you can:</p>
<p>l Edit or replace the file in / template / xhtml directory</p>
<p>l Editing the web.ui.Theme of the Webwork.properties file (to be placed in / web-inf / class directory), pointing to the template location.</p>
<p>l Use the tagged the or template property to specify a template location for a single tag.</p>
<p>Below is an example of using the third method:</p>
<p>EX02.JSP:</p>
<p><% @ Taglib Uri = "Webwork" prefix = "ww"%></p>
<p><html></p>
<p><HEAD></p>
<p><Title> Webwork Tutorial - Lesson 4.1.1 - Example 2 </ Title></p>
<p></ hEAD></p>
<p><body></p>
<p><p> template change EXAMPLE: </ P></p>
<p><p> <ww: checkbox name = "'checkbox'" label = "'a checkbox'"</p>
<p>FieldValue = "'CheckBox_Value'" "Theme =" / files / templates / components "/> </ p></p>
<p><p> <ww: textfield name = "'textfield'" label = "'a text field'" Template = "/ files / templates / components / mytextfield.vm" /> </ p></p>
<p></ body></p>
<p></ html></p>
<p>/files/templates/components/checkbox.vm:</p>
<p><div align = "center"></p>
<p><input type = "checkbox"</p>
<p>Name = "$! Webwork.htmlencode ($ Parameters.name)"</p>
<p>Value = "$! Webwork.htmlencode ($ Parameters.fieldValue"</p>
<p>#if ($ parameters.namevalue) checked = "checked" #end</p>
<p>#if ($ Parameters.Disabled == True) Disabled = "Disabled" #end</p>
<p>#if ($ parameters.tabindex) TabINDEX = "$! Webwork.htmlencode ($ Parameters.taBindex) #end</p>
<p>#if ($ Parameters.onChange) οnchange = "$! Webwork.htmlencode ($ Parameters.onChange)" #end</p>
<p>#if ($ Parameters.id) ID = "$! Webwork.htmlencode ($ Parameters.ID)" #end</p>
<p>/> <br /></p>
<p>$! Webwork.htmlencode ($ Parameters.label)</p>
<p></ div></p>
<p>/files/templates/components/mytextfield.vm:</p>
<p><div align = "center"></p>
<p><Input Type = "TEXT"</p>
<p>Name = "$! Webwork.htmlencode ($ Parameters.name)"</p>
<p>#if ($ parameters.size) size = "$! Webwork.htmlencode ($ Parameters.size) #end</p>
<p>#if ($ parameters.maxlength) maxlength = "$! Webwork.htmlencode ($ Parameters.maxlength)" #end</p>
<p>#if ($ parameters.namevalue) value = "$! Webwork.htmlencode ($ parameters.namevalue)" #end</p>
<p>#if ($ Parameters.Disabled == True) Disabled = "Disabled" #end</p>
<p>#if ($ Parameters.Readonly) Readonly = "Readonly" #end</p>
<p>#if ($ Parameters.onkeyup) οnkeyup = "$! Webwork.htmlencode ($ Parameters.onkeyup) #END</p>
<p>#if ($ Parameters.tabindex) TabINDEX = "$! Webwork.htmlencode ($ Parameters.Tabindex) # End # f ($ Parameters.onChange) οnchange =" $! Webwork.htmlencode "#end</p>
<p>#if ($ Parameters.id) ID = "$! Webwork.htmlencode ($ Parameters.ID)" #end</p>
<p>/> <br /></p>
<p>$! Webwork.htmlencode ($ Parameters.label)</p>
<p></ div></p>
<p>EX02.JSP is processed HTML output results:</p>
<p><html></p>
<p><HEAD></p>
<p><Title> Webwork Tutorial - Lesson 4.1.1 - Example 2 </ Title></p>
<p></ hEAD></p>
<p><body></p>
<p><p> template change EXAMPLE: </ P></p>
<p><p> <div align = "center"></p>
<p><input type = "checkbox"</p>
<p>Name = "checkbox"</p>
<p>Value = "Checkbox_Value"</p>
<p>/> <br /></p>
<p>A checkbox</p>
<p></ div> </ p></p>
<p><p> <div align = "center"></p>
<p><Input Type = "TEXT"</p>
<p>Name = "textfield"</p>
<p>/> <br /></p>
<p>A Text Field</p>
<p></ div> </ p></p>
<p></ body></p>
<p></ html></p>
<p>(3) Creating a custom UI component</p>
<p>Sometimes the Webwork's UI component can't meet your needs, you can create custom components. You can create a layout clean, an error check, reusable custom component recommended using the webwork recommended method.</p>
<p>To create a custom component, just create a Velocity template for it, use the <ww: component /> tag to place it in the web page, specify the template location using the template property. To pass parameters to the template, you can use the <ww: param /> tag in the <ww: component /> tag. The following example creates a custom Date domain:</p>
<p>EX03.JSP:</p>
<p><% @ Taglib Uri = "Webwork" prefix = "ww"%></p>
<p><html></p>
<p><HEAD></p>
<p><title> Webwork Tutorial - Lesson 4.1.1 - Example 3 </ Title></p>
<p></ hEAD></p>
<p><body></p>
<p><p> Custom Component Example: </ P></p>
<p><p></p>
<p><ww: Component Template = "/ files / templates / components / datefield.vm"></p>
<p><ww: param name = "label" value = "'Date'" /></p>
<p><ww: param name = "name" value = "'mydatefield'" /> <ww: param name = "size" value = "3" /></p>
<p></ ww: component></p>
<p></ p></p>
<p></ body></p>
<p></ html></p>
<p>/files/templates/components/datefield.vm:</p>
<p>#set ($ name = $ tag.params.get ('name'))</p>
<p>#SET ($ size = $ tag.params.get ('size'))</p>
<p>#set ($ YEARSIZE = $ SIZE * 2)</p>
<p>$ tag.params.get ('label'):</p>
<p><Input Type = Text "Name =" $ {name} .day "size =" $ size "/> /</p>
<p><Input Type = "text" name = "$ {name} .month" size = "$ size" /> /</p>
<p><Input Type = "text" name = "$ {name} .year" size = "$ yearsize" /> (dd / mm / yyyy)</p>
<p>EX03.JSP is processed HTML output results:</p>
<p><html></p>
<p><HEAD></p>
<p><title> Webwork Tutorial - Lesson 4.1.1 - Example 3 </ Title></p>
<p></ hEAD></p>
<p><body></p>
<p><p> Custom Component Example: </ P></p>
<p><p></p>
<p>Date:</p>
<p><Input Type = "text" name = "mydatefield.day" size = "3" /> /</p>
<p><Input Type = "text" name = "mydatefield.month" size = "3" /> /</p>
<p><Input Type = "text" name = "mydatefield.year" size = "6" /> (dd / mm / yyyy)</p>
<p></ p></p>
<p></ body></p>
<p></ html></p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-13750.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="13750" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.042</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'tyuj2vqCh5WoYUzzygPidSfASn0NGLGHRakWtnGuS51GdWm46uw5pz0xo_2Bi1t5t8Vgjb4pAEsHB5V2zWXEDVpg_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
