primefaces_Primefaces命令按钮

最新推荐文章于 2020-07-22 18:09:28 发布

cunchi4221

最新推荐文章于 2020-07-22 18:09:28 发布

阅读量501

点赞数

文章标签： java javascript vue html ajax ViewUI

原文链接：https://www.journaldev.com/3919/primefaces-commandbutton

版权

primefaces

Today we will look into primefaces CommandButton. Primefaces has a huge components library.

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

Primefaces命令按钮 (Primefaces CommandButton)

Primefaces CommandButton is an extended version of standard commandButton. I have used p:commandButton in many Primefaces tutorials in earlier posts.

Primefaces CommandButton是标准commandButton的扩展版本。在先前文章的许多Primefaces教程中，我都使用了p:commandButton 。

Primefaces CommandButton is an extended version of h:commandButton that’s provided by Reference Implementation of JSF.

Primefaces CommandButton是h：commandButton的扩展版本，由JSF的Reference Implementation提供。

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

标签	命令按钮
组件类别	org.primefaces.component.commandbutton.CommandButton
组件类型	org.primefaces.component.CommandButton
组件族	org.primefaces.component
渲染器类型	org.primefaces.component.CommandButtonRenderer
渲染器类	org.primefaces.component.commandbutton.CommandButtonRenderer

Primefaces CommandButton属性 (Primefaces CommandButton Attributes)

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.

名称	默认	类型	描述
ID	空值	串	组件的唯一标识符
呈现	真正	布尔型	布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。
捆绑	空值	目的	El表达式，它映射到支持Bean中的服务器端UIComponent实例
值	空值	串	按钮的标签
行动	空值	MethodExpr /字符串	单击按钮时将处理的方法表达式或字符串结果。
actionListener	空值	方法专家	单击按钮时将要处理的动作监听器。
即时	假	布尔型	当在apply_request_values处理为真时，在invoke_application阶段为false时，确定phaseId的布尔值。
类型	提交	串	设置按钮的行为。
阿贾克斯	真正	布尔型	指定提交模式，当设置为true（默认）时，将使用Ajax进行提交。
异步的	假	布尔型	设置为true时，ajax请求不会排队。
处理	空值	串	要部分处理而不是整个视图的组件。
更新	空值	串	用ajax更新的组件。
启动时	空值	串	在ajax请求开始之前执行的客户端回调。
未完成	空值	串	在ajax请求完成时执行的客户端回调。
成功	空值	串	在ajax请求成功时执行的客户端回调。
错误	空值	串	在ajax请求失败时执行的客户端回调。
全球	真正	布尔型	定义是否触发ajaxStatus。
延迟	空值	串	如果两次对request（）的调用之间的延迟时间少于毫秒，则只会发送最近的一次，而所有其他请求都将被丢弃。如果未指定此选项，或者delay的值是不带引号的文字字符串“ none”，则不使用延迟。
部分提交	假	布尔型	启用仅属于部分处理的组件的值的序列化。
resetValues	假	布尔型	如果为true，则将重置ajax请求中要更新的输入组件的本地值。
ignoreAutoUpdate	假	布尔型	如果为true，则不会为此请求更新autoUpdate =“ true”的组件。如果未指定，或者值为false，则不会进行任何指示。
样式	空值	串	按钮元素的内联样式。
styleClass	空值	串	按钮元素的StyleClass。
Onblur	空值	串	当按钮失去焦点时执行客户端回调。
不断变化	空值	串	当按钮失去焦点并且自获得焦点以来其值已被修改时执行客户端回调。
点击	空值	串	单击按钮时执行的客户端回调。
ondblclick	空值	串	双击按钮时执行客户端回调。
专注	空值	串	当按钮获得焦点时执行客户端回调。
按键	空值	串	当在按钮上按下键时执行客户端回调。
按键	空值	串	按下和释放按钮时执行客户端回调。
按键	空值	串	当在按钮上释放键时执行客户端回调。
鼠标停下	空值	串	当指针按钮在按钮上按下时执行客户端回调。
情绪激动	空值	串	当指针按钮在按钮内移动时执行客户端回调。
暂停	空值	串	当指针按钮从按钮移开时执行客户端回调。
鼠标悬停	空值	串	当指针按钮移到按钮上时执行客户端回调。
鼠标悬停	空值	串	当指针按钮释放到按钮上方时执行客户端回调。
选择	空值	串	用户选择按钮内的文本时执行客户端回调。
快捷键	空值	串	按下该访问键会将焦点转移到该按钮。
alt	空值	串	按钮的替代文字描述。
目录	空值	串	不继承方向性的文本的方向指示。有效值为LTR和RTL。
残障人士	假	布尔型	禁用按钮。
图片	空值	串	按钮图标的样式类。（不推荐使用：使用图标）
标签	空值	串	本地化的用户可显示名称。
郎	空值	串	描述此组件生成的标记中使用的语言的代码。
标签索引	空值	整数	按钮元素在制表顺序中的位置。
标题	空值	串	咨询工具提示信息。
只读	假	布尔型	指示此组件将阻止用户更改的标志。
图标	空值	串	按钮的图标作为css类。
iconPos	剩下	串	图标的位置。
排队	假	串	仅由PrimeFaces移动版使用。
逃逸	真正	布尔型	定义是否对标签进行转义。
widgetVar	空值	串	客户端小部件的名称。

Primefaces CommandButton示例 (Primefaces CommandButton Example)

Primefaces CommandButton usage isn’t vary different from the standard JSF implementation. By default commandButton submits its enclosing form with ajax capabilities.

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.journaldev.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 JournalDev !");
		// Returns outcome
		return "";
	}
}

休息和按下命令按钮 (Rest & Push CommandButtons)

Primefaces CommandButton provides a lot of features. You can use CommandButton to reset the form or to invoke custom JavaScript without causing an ajax/non-ajax request to be initiated.

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.journaldev.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 & Non-Ajax)

Primefaces CommandButton has built-in ajax capabilities. By default the commandButton submits the enclosed form with ajax. It can be configured to submit form without ajax by setting ajax attribute to false. When ajax attribute is set to false, form is submitted in a regular full page refresh.

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

Two attributes are used in conjunction with ajax – update and process.

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

Update attribute is used to partially update other component(s) after ajax response is received. Update attribute takes component(s) identifiers delimited with whitespace-separated style.

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

Process attribute is used to partially execute the jsf lifecycle upon those component(s) mentioned. The executed component(s) are also identified using whitespace-separated manner. It’s possible to update any of standard jsf lifecycle using the same Primefaces ajax response.

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.journaldev.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 "";
	}
}

Here’s detailed explanation for the above code.

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

We’ve used two types of command buttons; one doesn’t support ajax while other does.
我们使用了两种命令按钮；一个不支持ajax，而另一个则不支持。
Non ajax command button causes two messages components to be updated. This type of command submits the whole form and update it as well.
Non ajax命令按钮导致两个消息组件被更新。这种类型的命令将提交整个表单并进行更新。
Ajax command button causes one message component to be updated. This type of command submits the enclosed form and update specific component as well.
Ajax命令按钮将导致更新一个消息组件。此类命令将提交随附的表单并更新特定组件。
We’ve used Primefaces Search Expression for identified the components want to be updated with Ajax response.
我们已经使用Primefaces搜索表达式来确定要使用Ajax响应更新的组件。
It’s possible to update the standard message component through using of Primefaces ajax command by adding standard message component’s identifier into update attribute.
通过使用Primefaces ajax命令，可以通过将标准消息组件的标识符添加到update属性中来更新标准消息组件。

图标和客户端API (Icons & Client Side API)

Primefaces provides you the ability to set an icon for your commands in addition to make your commands Enabled/Disabled by using a client JavaScript code. You can refer for ThemeRoller that help you identifying the required icons that you would use.

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

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

方法	参数	返回类型	描述
disable（）	–	虚空	禁用按钮
enable（）	–	虚空	启用按钮

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>

That’s all for Primefaces CommandButton example. You can download the Primefaces CommandButton example project from below link.

这就是Primefaces CommandButton示例的全部。您可以从下面的链接下载Primefaces CommandButton示例项目。

Download PrimeFaces Command Confirm FileDownload Project 下载PrimeFaces命令确认文件下载项目

翻译自: https://www.journaldev.com/3919/primefaces-commandbutton

primefaces

cunchi4221

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
primefaces_Primefaces命令按钮

primefacesToday we will look into primefaces CommandButton. Primefaces has a huge components library. 今天，我们将研究素面CommandButton。 Primefaces具有庞大的组件库。 Primefaces命令按钮 (Primefaces CommandButton)Primeface...
复制链接

扫一扫