概述
primefaces
Today we will look into primefaces CommandButton. Primefaces has a huge components library.
今天,我们将研究素面CommandButton。 Primefaces具有庞大的组件库。
Primefaces命令按钮 ()
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属性 ()
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 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 "";
}
}
休息和按下命令按钮 ()
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 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 ,它可以帮助您识别所需的图标。
Method | Params | Return Type | Description |
---|---|---|---|
disable() | – | void | Disables button |
enable() | – | void | Enables 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示例项目。
翻译自: https://www.journaldev.com/3919/primefaces-commandbutton
primefaces
最后
以上就是愤怒楼房为你收集整理的primefaces_Primefaces命令按钮的全部内容,希望文章能够帮你解决primefaces_Primefaces命令按钮所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复