描述
绘制一个提交按钮. submit标签和form标签一起使用可以提供异步表单提交功能. submit可以绘制三种输出结果:
- input: 绘制<input type="submit"...>
- image: 绘制<input type="image"...>
- button: 绘制<button type="submit"...>
注意button类型已经演进为可以分别指定提交值和按钮上显示的文本, 但只能用于Microsoft Internet Explorer 6.0以上版本的浏览器.
下列属性只在使用AJAX时生效
- resultDivId
- notifyTopics
- onLoadJS
- preInvokeJS
远程表单(remote form)有三种使用模式, 分别使用resultDivId, notifyTopics或onLoadJS. 可以混合使用各种组合来达成期望的结果. 全部例子都包含在Ajax的样例Web项目中. Lets go through some scenarios to see how you might use it:
属性
| 名称 |
必填 |
缺省值 |
类型 |
描述 |
| resultDivId |
false |
|
String |
包含提交结果的HTML元素的id(不能是表单或页面上任何其他元素的id). |
| onLoadJS |
false |
|
String |
表单提交后将执行的Javascript代码. 格式为 onLoadJS='yourMethodName(data,type)'. 注意: 如果你希望使用事件类型和返回数据的话, 必须保留参数data和type. |
| notifyTopics |
false |
|
String |
表单提交完成后发送事件的主题 (Topic names to post an event to after the form has been submitted). |
| listenTopics |
false |
|
String |
设置listenTopics属性. |
| preInvokeJS |
false |
|
String |
在远程调用之前执行的Javascript代码. 格式为 preInvokeJS='yourMethodName(data,type)'. |
| label |
false |
|
Object/String |
提供提交按钮的显示文字(不同于提交值). 对于input类型的submit无效, 因为它的文本总是使用value参数的值. 对于image类型, alt参数将使用该值. |
| src |
false |
|
Object/String |
为image类型提供图片地址. 对于input和button类型无效. |
| action |
false |
|
String |
设置action属性. |
| method |
false |
|
String |
设置method属性. |
| align |
false |
|
String |
HTML的align属性. |
| type |
false |
input |
String |
submit的类型. 有效值为: input, button, image. |
| theme |
false |
|
Object/String |
输出元素时使用的主题(theme)(不使用缺省的) |
| template |
false |
|
Object/String |
输出元素时使用的模板(template)(不使用缺省的) |
| cssClass |
false |
|
Object/String |
输出元素时的class属性 |
| cssStyle |
false |
|
Object/String |
输出元素时的css样式定义(译者注:就是html元素的style属性) |
| title |
false |
|
Object/String |
在输出元素时设置html属性title |
| disabled |
false |
|
Object/String |
在输出元素时设置html属性disabled |
| label |
false |
|
Object/String |
用于输出一个元素对应的label的表达式 |
| labelPosition |
false |
left |
Object/String |
不赞成使用. |
| labelposition |
false |
|
Object/String |
定义元素标签的位置(top/left) |
| requiredposition |
false |
|
Object/String |
定义required属性输出的位置(left|right) |
| name |
false |
|
Object/String |
元素的名字 |
| required |
false |
false |
Boolean |
如果设置为true, 在输出标签时将显示出此字段是必须输入的(译者注:如果使用默认模板,将会标示为"*") |
| tabindex |
false |
|
Object/String |
在输出元素时设置html属性tabindex |
| value |
false |
|
Object/String |
预设input元素的value属性. |
| onclick |
false |
|
Object/String |
在输出元素时设置html属性onclick |
| ondblclick |
false |
|
Object/String |
在输出元素时设置html属性ondblclick |
| onmousedown |
false |
|
Object/String |
在输出元素时设置html属性onmousedown |
| onmouseup |
false |
|
Object/String |
在输出元素时设置html属性onmouseup |
| onmouseover |
false |
|
Object/String |
在输出元素时设置html属性onmouseover |
| onmousemove |
false |
|
Object/String |
在输出元素时设置html属性onmousemove |
| onmouseout |
false |
|
Object/String |
在输出元素时设置html属性onmouseout |
| onfocus |
false |
|
Object/String |
在输出元素时设置html属性onfocus |
| onblur |
false |
|
Object/String |
在输出元素时设置html属性onblur |
| onkeypress |
false |
|
Object/String |
在输出元素时设置html属性onkeypress |
| onkeydown |
false |
|
Object/String |
在输出元素时设置html属性onkeydown |
| onkeyup |
false |
|
Object/String |
在输出元素时设置html属性onkeyup |
| onselect |
false |
|
Object/String |
在输出元素时设置html属性onselect |
| onchange |
false |
|
Object/String |
在输出元素时设置html属性onchange |
| tooltip |
false |
|
String |
设置元素的tooltip属性(译者注:tooltip为工具栏提示) |
| tooltipConfig |
false |
|
String |
设置tooltip属性的配置 |
| id |
false |
|
Object/String |
id是定位元素时使用的. 对于UI和表单标签它会被用作HTML的id属性 |
例子
例子1
Content pulled from external source. Click here to refresh. |
<ww:submit value="%{'Submit'}" />
|
例子2
Content pulled from external source. Click here to refresh. |
Render an image submit:
<ww:submit type="image" value="%{'Submit'}" label="Submit the form" src="submit.gif"/>
|
例子3
Content pulled from external source. Click here to refresh. |
Render an button submit:
<ww:submit type="button" value="%{'Submit'}" label="Submit the form"/>
|
例子4
在另一个DIV中显示结果. 如果想在DIV中显示结果, 可以使用resultDivId指定用于显示结果的div的id. 这将使用InnerHtml方法插入结果内容. 结果将被加入到div中. 下面是这一方法的例子:
Content pulled from external source. Click here to refresh. |
Remote form replacing another div:
<div id='two' style="border: 1px solid yellow;">Initial content</div>
<ww:form
id='theForm2'
cssStyle="border: 1px solid green;"
action='/AjaxRemoteForm.action'
method='post'
theme="ajax">
<input type='text' name='data' value='WebWork User' />
<ww:submit value="GO2" theme="ajax" resultDivId="two" />
</ww:form >
|
例子5
通知其他控件(div)有变化发生. 可以采用发布-订阅(pub-sub)模型把控件变化消息通知其他控件以便执行相关的动作. 最常见的动作是执行某个action来刷新控件(这里的动作和控件是指订阅变化的控件在接到通知后执行的动作, 译注). notifyTopics可以实现这种功能. 可以使用逗号分隔多个主题名. 例如: notifyTopics="newPerson, dataChanged". 下面是这一方法的例子:
Content pulled from external source. Click here to refresh. |
<ww:form id="frm1" action="newPersonWithXMLResult" theme="ajax" >
<ww:textfield label="Name" name="person.name" value="person.name" size="20" required="true" />
<ww:submit id="submitBtn" value="Save" theme="ajax" cssClass="primary" notifyTopics="personUpdated, systemWorking" />
</ww:form >
<ww:div href="/listPeople.action" theme="ajax" errorText="error opps"
loadingText="loading..." id="cart-body" >
<ww:action namespace="" name="listPeople" executeResult="true" />
</ww:div>
|
例子6
传递JavaScript代码结果. 也就是返回结果中包含XML内容, 需要解析并用它完成一些很酷的效果. 这么做的方法是使用onLoadJS句柄(handler). 需要提供一个用于回调的包含结果(result)和事件类型(event type)参数的JavaScript函数名. 关键在于必须使用变量名'data'和'type'定义该回调函数. 例如: onLoadJS="myFancyDancyFunction(data, type)". 虽然本例中讨论的是XML, 但不仅限于XML, 回调函数中的data仅仅是你希望的返回结果. 下面是这一方法的例子:
Content pulled from external source. Click here to refresh. |
<script language="JavaScript" type="text/javascript">
function doGreatThings(data, type) {
//Do whatever with your returned fragment...
//Perhapps.... if xml...
var xml = dojo.xml.domUtil.createDocumentFromText(data);
var people = xml.getElementsByTagName("person");
for(var i = 0;i < people.length; i ++){
var person = people[i];
var name = person.getAttribute("name")
var id = person.getAttribute("id")
alert('Thanks dude. Person: ' + name + ' saved great!!!');
}
}
</script>
<ww:form id="frm1" action="newPersonWithXMLResult" theme="ajax" >
<ww:textfield label="Name" name="person.name" value="person.name" size="20" required="true" />
<ww:submit id="submitBtn" value="Save" theme="ajax" cssClass="primary" onLoadJS="doGreatThings(data, type)" />
</ww:form>
|
