Primefaces命令按钮-IGI

时间：2020-02-23 14:41:37 　来源:igfitidea点击:

今天，我们将研究primefaces CommandButton。
Primefaces具有庞大的组件库。

Primefaces命令按钮

Primefaces CommandButton是标准commandButton的扩展版本。
我在较早的文章中的许多Primefaces教程中都使用过p：commandButton。

Primefaces CommandButton是h：commandButton的扩展版本，由JSF的参考实现提供。

Tag	CommandButton
Component Class	org.primefaces.component.commandbutton.CommandButton
Component Type	org.primefaces.component.CommandButton
Component Family	org.primefaces.component
Renderer Type	org.primefaces.component.CommandButtonRenderer
Renderer Class	org.primefaces.component.commandbutton.CommandButtonRenderer

Primefaces CommandButton属性

Name	Default	Type	Description
id	null	String	Unique identifier of the component
rendered	true	Boolean	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	null	Object	An el expression that maps to a server side UIComponent instance in a backing bean
value	null	String	Label for the button
action	null	MethodExpr/String	A method expression or a String outcome that’d be processed when button is clicked.
actionListener	null	MethodExpr	An actionlistener that’d be processed when button is clicked.
immediate	false	Boolean	Boolean value that determines the phaseId, when true actions are processed at apply_request_values, when false at invoke_application phase.
type	submit	String	Sets the behavior of the button.
ajax	true	Boolean	Specifies the submit mode, when set to true(default), submit would be made with Ajax.
async	false	Boolean	When set to true, ajax requests are not queued.
process	null	String	Component(s) to process partially instead of whole view.
update	null	String	Component(s) to be updated with ajax.
onstart	null	String	Client side callback to execute before ajax request is begins.
oncomplete	null	String	Client side callback to execute when ajax request is completed.
onsuccess	null	String	Client side callback to execute when ajax request succeeds.
onerror	null	String	Client side callback to execute when ajax request fails.
global	true	Boolean	Defines whether to trigger ajaxStatus or not.
delay	null	String	If less than delay milliseconds elapses between calls to request() only the most recent one is sent and all other requests are discarded. If this option is not specified, or if the value of delay is the literal string 'none' without the quotes, no delay is used.
partialSubmit	false	Boolean	Enables serialization of values belonging to the partially processed components only.
resetValues	false	Boolean	If true, local values of input components to be updated within the ajax request would be reset.
ignoreAutoUpdate	false	Boolean	If true, components which autoUpdate=";true"; will not be updated for this request. If not specified, or the value is false, no such indication is made.
style	null	String	Inline style of the button element.
styleClass	null	String	StyleClass of the button element.
onblur	null	String	Client side callback to execute when button loses focus.
onchange	null	String	Client side callback to execute when button loses focus and its value has been modified since gaining focus.
onclick	null	String	Client side callback to execute when button is clicked.
ondblclick	null	String	Client side callback to execute when button is double clicked.
onfocus	null	String	Client side callback to execute when button receives focus.
onkeydown	null	String	Client side callback to execute when a key is pressed down over button.
onkeypress	null	String	Client side callback to execute when a key is pressed and released over button.
onkeyup	null	String	Client side callback to execute when a key is released over button.
onmousedown	null	String	Client side callback to execute when a pointer button is pressed down over button.
onmousemove	null	String	Client side callback to execute when a pointer button is moved within button.
onmouseout	null	String	Client side callback to execute when a pointer button is moved away from button.
onmouseover	null	String	Client side callback to execute when a pointer button is moved onto button.
onmouseup	null	String	Client side callback to execute when a pointer button is released over button.
onselect	null	String	Client side callback to execute when text within button is selected by user.
accesskey	null	String	Access key that when pressed transfers focus to the button.
alt	null	String	Alternate textual description of the button.
dir	null	String	Direction indication for text that does not inherit directionality. Valid values are LTR and RTL.
disabled	false	Boolean	Disables the button.
image	null	String	Style class for the button icon. (deprecated: use icon)
label	null	String	A localized user presentable name.
lang	null	String	Code describing the language used in the generated markup for this component.
tabindex	null	Integer	Position of the button element in the tabbing order.
title	null	String	Advisory tooltip information.
readonly	false	Boolean	Flag indicating that this component will prevent changes by the user.
icon	null	String	Icon of the button as a css class.
iconPos	left	String	Position of the icon.
inline	false	String	Used by PrimeFaces mobile only.
escape	true	Boolean	Defines whether label would be escaped or not.
widgetVar	null	String	Name of the client side widget.

Primefaces CommandButton示例

Primefaces CommandButton的用法与标准JSF实施并无不同。
默认情况下，commandButton使用ajax功能提交其封闭形式。

simpleCommandButton.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:commandButton value="Do Action" action="#{commandButtonManagedBean.doSomeAction}"></p:commandButton>
</h:form>
</html>

CommandButtonManagedBean.java

package com.theitroad.primefaces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class CommandButtonManagedBean {
	public String doSomeAction(){
		//Do any action that you would.
		System.out.println("Hello theitroad !");
		//Returns outcome
		return "";
	}
}

休息和按下命令按钮

Primefaces CommandButton提供了许多功能。
您可以使用CommandButton重置表单或者调用自定义JavaScript，而无需引发ajax/non-ajax请求。

rest-push-CommandButton.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
	<script>
		function justCall(){
			alert('Push Action');
		}
	</script>
</h:head>
<h:form>
	Enter your username: <p:inputText value="#{commandButtonManagedBean.username}"></p:inputText>
	<br
	Enter your username: <p:password value="#{commandButtonManagedBean.password}"></p:password>
	<br
	<p:commandButton value="Login" action="#{commandButtonManagedBean.doSomeAction}"></p:commandButton>
	#{''}
	<p:commandButton value="Rest" type="reset"></p:commandButton>
	#{''}
	<p:commandButton value="Push" type="button" onclick="justCall();"></p:commandButton>
</h:form>
</html>

CommandButtonManagedBean.java

package com.theitroad.primefaces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class CommandButtonManagedBean {

	private String username = "";
	private String password = "";

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getPassword() {
		return password;
	}

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

	public String doSomeAction(){
		//Do any action that you would.
		System.out.println("Entered Username :: "+username);
		System.out.println("Entered Password :: "+password);
		//Returns outcome
		return "";
	}
}

Primefaces CommandButton Ajax和非Ajax

Primefaces CommandButton具有内置的ajax功能。
默认情况下，commandButton用ajax提交封闭的表单。
通过将" ajax"属性设置为false，可以将其配置为提交不带ajax的表单。
当ajax属性设置为false时，将以常规的整页刷新形式提交表单。

两个属性与ajax一起使用-更新和处理。

在接收到ajax响应后，Update属性用于部分更新其他组件。
Update属性采用以空格分隔的样式分隔的组件标识符。

Process属性用于在提到的那些组件上部分执行jsf生命周期。
还使用空格分隔的方式来标识执行的组件。
可以使用相同的Primefaces ajax响应更新任何标准jsf生命周期。

ajax-nonAjax-UpdateStandardJSF.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
	<script>
		function justCall(){
			alert('Push Action');
		}
	</script>
</h:head>
<h:form>
	<p:growl id="primefacesMessage"></p:growl>
	<h:messages id="standardMessage"></h:messages>
	Enter your username: <p:inputText id="username" value="#{commandButtonManagedBean.username}"></p:inputText>
	<br
	Enter your username: <p:password id="password" value="#{commandButtonManagedBean.password}"></p:password>
	<br
	<p:commandButton value="Non Ajax Command - Refresh Whole Form"
		action="#{commandButtonManagedBean.doSomeAction}" ajax="false"></p:commandButton>
	#{''}
	<p:commandButton value="Ajax Command - Refresh Specific Form's Component(s)"
		action="#{commandButtonManagedBean.updateMessage}" update="primefacesMessage"></p:commandButton>
</h:form>
</html>

CommandButtonManagedBean.java

package com.theitroad.primefaces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class CommandButtonManagedBean {

	private String username = "";
	private String password = "";

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getPassword() {
		return password;
	}

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

	public String doSomeAction(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Message Updated !"));
		//Do any action that you would.
		System.out.println("Entered Username :: "+username);
		System.out.println("Entered Password :: "+password);
		//Returns outcome
		return "";
	}

	public String updateMessage(){
		//Do any action that you would.
		System.out.println("Entered Username :: "+username);
		System.out.println("Entered Password :: "+password);
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Message Updated !"));
		return "";
	}
}

这里是上述代码的详细说明。

我们使用了两种命令按钮；一个不支持ajax，而另一个则不支持。
Non ajax命令按钮导致两个消息组件被更新。
这种类型的命令将提交整个表单并进行更新。
Ajax命令按钮导致一个消息组件被更新。
这种类型的命令将提交随附的表单并更新特定的组件。
我们使用Primefaces搜索表达式来确定要使用Ajax响应更新的组件。
可以通过使用Primefaces ajax命令来更新标准消息组件，方法是在更新属性中添加标准消息组件的标识符。

图标和客户端API

除了使用客户端JavaScript代码启用/禁用命令外，Primefaces还为您提供了为命令设置图标的功能。
您可以参考ThemeRoller，它可以帮助您识别所需的图标。

Method	Params	Return Type	Description
disable()	–	void	Disables button
enable()	–	void	Enables button

icons-enabled-disabled-CommandButtons.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
	<script>
		function copy(){
			PF('copy').disable();
			PF('paste').enable();
		}
		function paste(){
			PF('copy').enable();
			PF('paste').disable();
		}
	</script>
</h:head>
<h:form>
	<p:commandButton widgetVar="copy" icon="ui-icon ui-icon-copy" value="Copy" type="button" onclick="copy();"></p:commandButton>
	<p:commandButton widgetVar="paste" icon="ui-icon ui-icon-document" value="Paste" type="button" onclick="paste();"></p:commandButton>
</h:form>
</html>

Primefaces命令按钮