JSF Showcase
h:commandButton
HtmlCommandButton is a UICommand component that renders a styleable HTML<input>
element. The default type is submit
. The component must be a child of h:form in order to trigger the action or actionListener.
Various Styles Usage
The component can be styled with Bootstrap class names as described in the Alloy Base CSS documentation.Source Code
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"> <h:form> <p> <h:commandButton styleClass="btn btn-primary" value="#{i18n['primary']}" /> <h:commandButton styleClass="btn btn-info" value="#{i18n['info']}" /> <h:commandButton styleClass="btn btn-success" value="#{i18n['success']}" /> <h:commandButton styleClass="btn btn-warning" value="#{i18n['warning']}" /> <h:commandButton styleClass="btn btn-danger" value=" #{i18n['danger']}" /> <h:commandButton styleClass="btn btn-link" value="#{i18n['link']}" /> </p> <!-- Abbreviated CSS classes are Bootstrap 3 classes. For example: btn-lg --> <!-- Full CSS classes are Bootstrap 2 classes. For example: btn-large --> <p> <h:commandButton styleClass="btn btn-primary btn-large btn-lg" value="#{i18n['large']}" /> <h:commandButton styleClass="btn btn-large btn-lg" value="#{i18n['large']}" /> </p> <p> <h:commandButton styleClass="btn btn-primary" value="#{i18n['default']}" /> <h:commandButton styleClass="btn" value="#{i18n['default']}" /> </p> <p> <h:commandButton styleClass="btn btn-primary btn-small btn-sm" value="#{i18n['small']}" /> <h:commandButton styleClass="btn btn-small btn-sm" value="#{i18n['small']}" /> </p> <p> <h:commandButton styleClass="btn btn-primary btn-mini btn-xs" value="#{i18n['mini']}" /> <h:commandButton styleClass="btn btn-mini btn-xs" value="#{i18n['mini']}" /> </p> <p> <h:commandButton disabled="true" styleClass="btn btn-primary disabled" value="#{i18n['disabled']}" /> <h:commandButton disabled="true" styleClass="btn disabled" value="#{i18n['disabled']}" /> </p> <p> <h:commandButton styleClass="btn btn-primary btn-block" value="#{i18n['block']}" /> <h:commandButton styleClass="btn btn-block" value="#{i18n['block']}" /> </p> </h:form> </ui:composition>
Liferay Faces Bridge Implementation 5.0.0 + Showcase Common 3.1.1 + Liferay Faces Util 3.4.1 + Mojarra 2.2.20