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