我是靠谱客的博主 愤怒楼房,最近开发中收集的这篇文章主要介绍primefaces_Primefaces命令按钮,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

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提供。

TagCommandButton
Component Classorg.primefaces.component.commandbutton.CommandButton
Component Typeorg.primefaces.component.CommandButton
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.CommandButtonRenderer
Renderer Classorg.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)

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
valuenullStringLabel for the button
actionnullMethodExpr/ StringA method expression or a String outcome that’d be processed when button is clicked.
actionListenernullMethodExprAn actionlistener that’d be processed when button is clicked.
immediatefalseBooleanBoolean value that determines the phaseId, when true actions are processed at apply_request_values, when false at invoke_application phase.
typesubmitStringSets the behavior of the button.
ajaxtrueBooleanSpecifies the submit mode, when set to true(default), submit would be made with Ajax.
asyncfalseBooleanWhen set to true, ajax requests are not queued.
processnullStringComponent(s) to process partially instead of whole view.
updatenullStringComponent(s) to be updated with ajax.
onstartnullStringClient side callback to execute before ajax request is begins.
oncompletenullStringClient side callback to execute when ajax request is completed.
onsuccessnullStringClient side callback to execute when ajax request succeeds.
onerrornullStringClient side callback to execute when ajax request fails.
globaltrueBooleanDefines whether to trigger ajaxStatus or not.
delaynullStringIf 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.
partialSubmitfalseBooleanEnables serialization of values belonging to the partially processed components only.
resetValuesfalseBooleanIf true, local values of input components to be updated within the ajax request would be reset.
ignoreAutoUpdatefalseBooleanIf 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.
stylenullStringInline style of the button element.
styleClassnullStringStyleClass of the button element.
onblurnullStringClient side callback to execute when button loses focus.
onchangenullStringClient side callback to execute when button loses focus and its value has been modified since gaining focus.
onclicknullStringClient side callback to execute when button is clicked.
ondblclicknullStringClient side callback to execute when button is double clicked.
onfocusnullStringClient side callback to execute when button receives focus.
onkeydownnullStringClient side callback to execute when a key is pressed down over button.
onkeypressnullStringClient side callback to execute when a key is pressed and released over button.
onkeyupnullStringClient side callback to execute when a key is released over button.
onmousedownnullStringClient side callback to execute when a pointer button is pressed down over button.
onmousemovenullStringClient side callback to execute when a pointer button is moved within button.
onmouseoutnullStringClient side callback to execute when a pointer button is moved away from button.
onmouseovernullStringClient side callback to execute when a pointer button is moved onto button.
onmouseupnullStringClient side callback to execute when a pointer button is released over button.
onselectnullStringClient side callback to execute when text within button is selected by user.
accesskeynullStringAccess key that when pressed transfers focus to the button.
altnullStringAlternate textual description of the button.
dirnullStringDirection indication for text that does not inherit directionality. Valid values are LTR and RTL.
disabledfalseBooleanDisables the button.
imagenullStringStyle class for the button icon. (deprecated: use icon)
labelnullStringA localized user presentable name.
langnullStringCode describing the language used in the generated markup for this component.
tabindexnullIntegerPosition of the button element in the tabbing order.
titlenullStringAdvisory tooltip information.
readonlyfalseBooleanFlag indicating that this component will prevent changes by the user.
iconnullStringIcon of the button as a css class.
iconPosleftStringPosition of the icon.
inlinefalseStringUsed by PrimeFaces mobile only.
escapetrueBooleanDefines whether label would be escaped or not.
widgetVarnullStringName 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

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

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

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

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

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

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 ,它可以帮助您识别所需的图标。

MethodParamsReturn TypeDescription
disable()voidDisables button
enable()voidEnables button
方法 参数 返回类型 描述
disable() 虚空 禁用按钮
enable() 虚空 启用按钮

icons-enabled-disabled-CommandButtons.xhtml

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

最后

以上就是愤怒楼房为你收集整理的primefaces_Primefaces命令按钮的全部内容,希望文章能够帮你解决primefaces_Primefaces命令按钮所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(35)

评论列表共有 0 条评论

立即
投稿
返回
顶部