Primefaces Commandbutton

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

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 is an extended version of h:commandButton that’s provided by Reference Implementation of JSF.

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

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.

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.

simpleCommandButton.xhtml

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://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;@[email protected] class CommandButtonManagedBean { public String doSomeAction(){ // Do any action that you would. System.out.println("Hello JournalDev !"); // Returns outcome return ""; }}

Primefaces CommandButton

Rest & Push CommandButtons

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

rest-push-CommandButton.xhtml

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://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;@[email protected] 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

Primefaces CommandButton

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.

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

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.

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.

ajax-nonAjax-UpdateStandardJSF.xhtml

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://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;@[email protected] 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 ""; }}

Primefaces CommandButton

Here’s detailed explanation for the above code.

  • We’ve used two types of command buttons; one doesn’t support ajax while other does.
  • Non ajax command button causes two messages components to be updated. This type of command submits the whole form and update it as well.
  • Ajax command button causes one message component to be updated. This type of command submits the enclosed form and update specific component as well.
  • We’ve used Primefaces CommandButton

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

    Download PrimeFaces Command Confirm FileDownload Project
  • 25