CommandButton extends the standard h:commandButton with ajax, partial processing and skinning features.

New Person

Firstname: *
Surname: *

Ajax SubmitNon-Ajax SubmitWith Iconui-buttonDisabled

Information

Firstname:
Surname:

Source

<h:form id="form">

	<p:panel id="panel" header="New Person" style="margin-bottom:10px;">
		<p:messages id="messages" />
		<h:panelGrid columns="3">
			<h:outputLabel for="firstname" value="Firstname: *" />
			<p:inputText id="firstname" 
				value="#{pprBean.firstname}" required="true" label="Firstname">
				<f:validateLength minimum="2" />
			</p:inputText>
			<p:message for="firstname" />
			
			<h:outputLabel for="surname" value="Surname: *" />
			<p:inputText id="surname" 
				value="#{pprBean.surname}" required="true" label="Surname"/>
			<p:message for="surname" />
		</h:panelGrid>
	</p:panel>

	<p:commandButton value="Ajax Submit" update="panel,display" id="ajax"
			 actionListener="#{pprBean.savePerson}" />
				
	<p:commandButton value="Non-Ajax Submit" actionListener="#{pprBean.savePerson}" 
			ajax="false" />
	
	<p:commandButton value="With Icon" actionListener="#{pprBean.savePerson}" id="withIcon" 
			update="panel,display" icon="ui-icon-disk" />
	
	<p:commandButton actionListener="#{pprBean.savePerson}" update="panel,display" id="iconOnly"
			icon="ui-icon-disk" title="Icon Only"/>
	
	<p:commandButton value="Disabled" disabled="true" id="disabled" />
	
	<p:panel id="display" header="Information" style="margin-top:10px;">
		<h:panelGrid columns="2">
			<h:outputText value="Firstname: " />
			<h:outputText value="#{pprBean.firstname}" />
			
			<h:outputText value="Surname: " />
			<h:outputText value="#{pprBean.surname}" />
		</h:panelGrid>
	</p:panel>
	
</h:form>