w.button

Button组件与HTML的button是对应的，提供了常用的按钮功能，并加了一些额外的特性。 (样例)

目录
1 文档 2 FAQ 2.1 如何禁止点击按钮后提交表单 2.2 如何实现动态添加按钮 2.3 如何将button设置为图片的形式 2.4 同时指定button的action与onclick事件时触发哪一个 2.5 如何用javascript实现点击按钮，清空form表单中的内容 2.6 点击button后,如何出现IE系统的信息提示框 2.7 禁止field组件上回车时自动提交表单

文档

组件属性参考

FAQ

如何禁止点击按钮后提交表单

只需在w:button的onclick事件中return false即可。

如何实现动态添加按钮

根据输入的个数，添加对应数目的按钮。实现过程为；

<w:form>
 <div style="width:600px;height:300px;border:3px solid #c3daf9">
    <w:toolBar id="toolBar1" jsvar="toolBar1Jsvar" binding="#{addbuttonBean.toolbar}"></w:toolBar>
	<br/>
    <layout:panelGrid columns="3">
	<layout:cell colspan="1" rowspan="1">
	   <h:outputText value="num:"></h:outputText>
	</layout:cell>
	<layout:cell colspan="1" rowspan="1">
	  <w:textField id="num"></w:textField>
	</layout:cell>
	<layout:cell colspan="1" rowspan="1">
	  <w:button id="ok" label="submit"/>
	</layout:cell>
    </layout:panelGrid>
 </div>
</w:form>

页面对应的LiteBean代码：

AddbuttonBean.java

@ManagedBean(name="addbuttonBean", scope=ManagedBeanScope.SESSION)
public class AddbuttonBean implements Serializable {
    
  @Bind(id="num", attribute="value")
  private int num;
  private UIToolBar toolbar;
  private int flag=0;
  public UIToolBar getToolbar() {
		return toolbar;
	}

  public void setToolbar(UIToolBar toolbar) {
		this.toolbar = toolbar;
	}

  private UIButton createButton() {
    UIButton btn = (UIButton) FacesContext.getCurrentInstance().getApplication().createComponent(UIButton.COMPONENT_TYPE);
    btn.setValue("Click me");
    btn.setImage("example.gif");
    btn.setActionExpression(FacesContext.getCurrentInstance().getApplication().getExpressionFactory().createMethodExpression(
	FacesContext.getCurrentInstance().getELContext(),"#{DynamicToolBar.click}", Void.class, new Class[] {}));
		
	return btn;
	}
  public void addButton(int num) {	
    UIButton btn = createButton();
    int mynum=num;	
    String str="but"+String.valueOf(mynum);
    btn.setId(str);
    toolbar.addItem(btn);
	}
  @Action(id="ok")
  public void ok(){
    for(int i=0;i<num;i++)
	addButton(i);
	}
}

如何将button设置为图片的形式

button的属性image是指在button上加一个小图片，而不是把整个button变成图片。要将button设置为图片的形式，只能更改button的css。实现过程是，在写w:button时不指定其显示的文本，然后使用firebug等辅助工具，获取button的样式，将button的原有背景去掉，并设置button的背景图片为指定图片。即，在button上加一个styleClass属性，然后联合这个css 类别和 firebug 得出的button的css类别一起控制button的外观。要实现按钮呈现为图片，建议用commandLink组件。commandLink组件可以把图片用EL表达式来表示（解决正常和disabled图片问题），也可以IoVC在服务器端控制。

同时指定button的action与onclick事件时触发哪一个

如果onclick指定了客户端处理事件，则先执行完客户端事件再提交执行action指定的服务器端事件。
如果onclick指定了服务器端处理事件，由于onclick与action事件触发行为相同，为了避免两次提交产生同步问题，只触发onclick事件。

如何用javascript实现点击按钮，清空form表单中的内容

实现方法为获取表单的id，然后用reset()方法将表单置空。具体的方法为：

<w:button label="ok" onclick="document.getElementById('myform').reset();"/>

说明：myform为表单form的id,如果想要把表单中的某个组件的输入值置空，可以采用这样来实现：

<w:button label="ok" onclick="document.getElementById('myform:name').value='';"/>

其中name为输入组件的id。

点击button后,如何出现IE系统的信息提示框

实现方法为：

<w:button id="ok" onclick="return confirm('确定删除吗？')"/>

禁止field组件上回车时自动提交表单

在一个form中，在任意field组件输入完毕后，直接按回车，则默认会自动地点击第一个button，可给button设置type属性取消这种行为，实现方法为：

<w:button id="ok" type="button"/>