Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add split facet to commandButton and refactor postionning

  • Loading branch information...
commit a2610f446989bd11790142594bb2496abd66fecd 1 parent 117ce4d
@pauldijou pauldijou authored lfryc committed
View
21 bootstrap/demo/src/main/webapp/component/commandButton/index.xhtml
@@ -13,11 +13,30 @@
<ui:param name="tag" value="commandButton"/>
<h1><code>b:commandButton</code></h1>
<p>The <code>b:commandButton</code> is a AJAX enabled JSF commandButton.</p>
-
+
+ <h2>Basic usage</h2>
<ui:include src="/resources/sample.xhtml">
<ui:param name="tag" value="commandButton"/>
<ui:param name="sample" value="basic"/>
</ui:include>
+
+ <h2>Severity</h2>
+ <ui:include src="/resources/sample.xhtml">
+ <ui:param name="tag" value="commandButton"/>
+ <ui:param name="sample" value="severity"/>
+ </ui:include>
+
+ <h2>Scale</h2>
+ <ui:include src="/resources/sample.xhtml">
+ <ui:param name="tag" value="commandButton"/>
+ <ui:param name="sample" value="scale"/>
+ </ui:include>
+
+ <h2>Split button</h2>
+ <ui:include src="/resources/sample.xhtml">
+ <ui:param name="tag" value="commandButton"/>
+ <ui:param name="sample" value="split"/>
+ </ui:include>
</ui:define>
</ui:composition>
</html>
View
13 bootstrap/demo/src/main/webapp/component/commandButton/sample/scale.xhtml
@@ -0,0 +1,13 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:h="http://java.sun.com/jsf/html"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:b="http://richfaces.org/sandbox/bootstrap">
+ <h:form>
+ <h:panelGrid columns="4" cellpadding="5">
+ <b:commandButton value="mini" scale="mini" />
+ <b:commandButton value="small" scale="small" />
+ <b:commandButton value="default" />
+ <b:commandButton value="large" scale="large" />
+ </h:panelGrid>
+ </h:form>
+</ui:composition>
View
16 bootstrap/demo/src/main/webapp/component/commandButton/sample/severity.xhtml
@@ -0,0 +1,16 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:h="http://java.sun.com/jsf/html"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:b="http://richfaces.org/sandbox/bootstrap">
+ <h:form>
+ <h:panelGrid columns="3" cellpadding="10">
+ <b:commandButton value="Default" />
+ <b:commandButton value="Primary" severity="primary" />
+ <b:commandButton value="Info" severity="info" />
+ <b:commandButton value="Success" severity="success" />
+ <b:commandButton value="Warning" severity="warning" />
+ <b:commandButton value="Error" severity="error" />
+ <b:commandButton value="Inverse" severity="inverse" />
+ </h:panelGrid>
+ </h:form>
+</ui:composition>
View
53 bootstrap/demo/src/main/webapp/component/commandButton/sample/split.xhtml
@@ -0,0 +1,53 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:f="http://java.sun.com/jsf/core"
+ xmlns:h="http://java.sun.com/jsf/html"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:b="http://richfaces.org/sandbox/bootstrap">
+ <h:form>
+ <h:panelGrid columns="2" cellpadding="5">
+ <b:commandButton value="Default split">
+ <f:facet name="split">
+ <h:panelGroup>
+ <h:link outcome="/component/heroUnit/index.xhtml" value="heroUnit"/>
+ <h:link outcome="/component/tabbable/index.xhtml" value="tabbable"/>
+ <h:link outcome="/component/buttonGroup/index.xhtml" value="buttonGroup"/>
+ <h:link outcome="/component/navbar/index.xhtml" value="navbar"/>
+ </h:panelGroup>
+ </f:facet>
+ </b:commandButton>
+
+ <b:commandButton value="Primary small split" severity="primary" scale="small">
+ <f:facet name="split">
+ <h:panelGroup>
+ <h:link outcome="/component/heroUnit/index.xhtml" value="heroUnit"/>
+ <h:link outcome="/component/tabbable/index.xhtml" value="tabbable"/>
+ <h:link outcome="/component/buttonGroup/index.xhtml" value="buttonGroup"/>
+ <h:link outcome="/component/navbar/index.xhtml" value="navbar"/>
+ </h:panelGroup>
+ </f:facet>
+ </b:commandButton>
+
+ <b:commandButton value="Error large right split" severity="error" scale="large" horizontal="right">
+ <f:facet name="split">
+ <h:panelGroup>
+ <h:link outcome="/component/heroUnit/index.xhtml" value="heroUnit"/>
+ <h:link outcome="/component/tabbable/index.xhtml" value="tabbable"/>
+ <h:link outcome="/component/buttonGroup/index.xhtml" value="buttonGroup"/>
+ <h:link outcome="/component/navbar/index.xhtml" value="navbar"/>
+ </h:panelGroup>
+ </f:facet>
+ </b:commandButton>
+
+ <b:commandButton value="Warning top split" severity="warning" vertical="top">
+ <f:facet name="split">
+ <h:panelGroup>
+ <h:link outcome="/component/heroUnit/index.xhtml" value="heroUnit"/>
+ <h:link outcome="/component/tabbable/index.xhtml" value="tabbable"/>
+ <h:link outcome="/component/buttonGroup/index.xhtml" value="buttonGroup"/>
+ <h:link outcome="/component/navbar/index.xhtml" value="navbar"/>
+ </h:panelGroup>
+ </f:facet>
+ </b:commandButton>
+ </h:panelGrid>
+ </h:form>
+</ui:composition>
View
7 bootstrap/demo/src/main/webapp/component/icon/index.xhtml
@@ -11,6 +11,13 @@
xmlns:b="http://richfaces.org/sandbox/bootstrap">
<ui:define name="body">
<ui:param name="tag" value="icon"/>
+
+ <h:outputStylesheet>
+ .btn {
+ font-size: 14px;
+ }
+ </h:outputStylesheet>
+
<h1><code>b:icon</code></h1>
<p>The <code>b:icon</code> displays an icon.</p>
View
4 bootstrap/demo/src/main/webapp/resources/css/demo.css
@@ -2,10 +2,6 @@ body {
padding-top: 60px;
}
-.btn {
- font-size: 14px !important;
-}
-
.required {
text-decoration: underline;
}
View
4 bootstrap/demo/src/main/webapp/resources/template.xhtml
@@ -7,7 +7,6 @@
xmlns:b="http://richfaces.org/sandbox/bootstrap">
<h:head>
<title>RichFaces Bootstrap</title>
- <h:outputStylesheet library="css" name="demo.css"/>
</h:head>
<h:body styleClass="rich-container">
<ui:insert name="params" />
@@ -18,4 +17,7 @@
<ui:insert name="content">Content</ui:insert>
</b:gridContainer>
</h:body>
+
+<h:outputStylesheet library="css" name="demo.css"/>
+
</html>
View
16 bootstrap/ui/src/main/java/org/richfaces/bootstrap/component/AbstractButtonDropdown.java
@@ -61,20 +61,4 @@
@Attribute
public abstract VerticalPosition getVertical();
-
- public String getVerticalPositionStyleClass() {
- if(VerticalPosition.top.equals(getVertical())) {
- return "dropup";
- } else {
- return "";
- }
- }
-
- public String getHorizontalPositionStyleClass() {
- if(HorizontalPosition.right.equals(getHorizontal())) {
- return "pull-right";
- } else {
- return "";
- }
- }
}
View
19 bootstrap/ui/src/main/java/org/richfaces/bootstrap/component/AbstractCommandButton.java
@@ -74,8 +74,25 @@
@Attribute(hidden = true)
public abstract Object getValue();
+
+ @Attribute
+ public abstract BootstrapSeverity getSeverity();
+
+ @Attribute
+ public abstract BootstrapSize getScale();
+
+ @Attribute
+ public abstract HorizontalPosition getHorizontal();
+
+ @Attribute
+ public abstract VerticalPosition getVertical();
+
+ public boolean hasFacet(String facetName) {
+ return getFacet(facetName) != null && getFacet(facetName).isRendered();
+ }
public enum Facets {
- icon
+ icon,
+ split
}
}
View
13 bootstrap/ui/src/main/java/org/richfaces/bootstrap/component/HorizontalPosition.java
@@ -28,5 +28,16 @@
*
*/
public enum HorizontalPosition {
- right, left;
+ right("pull-right"),
+ left("");
+
+ private HorizontalPosition(String buttonClass) {
+ this.buttonClass = buttonClass;
+ }
+
+ private String buttonClass;
+
+ public String getButtonClass() {
+ return buttonClass;
+ }
}
View
13 bootstrap/ui/src/main/java/org/richfaces/bootstrap/component/VerticalPosition.java
@@ -28,5 +28,16 @@
*
*/
public enum VerticalPosition {
- top, bottom;
+ top("dropup"),
+ bottom("");
+
+ private VerticalPosition(String buttonClass) {
+ this.buttonClass = buttonClass;
+ }
+
+ private String buttonClass;
+
+ public String getButtonClass() {
+ return buttonClass;
+ }
}
View
4 bootstrap/ui/src/main/templates/org/richfaces/bootstrap/buttonDropdown.template.xml
@@ -14,13 +14,13 @@
</cc:interface>
<cc:implementation>
- <div class="btn-group #{component.verticalPositionStyleClass}">
+ <div class="btn-group #{component.vertical ne null ? component.vertical.buttonClass : ''}">
<a class="btn #{component.severity ne null ? component.severity.buttonClass : ''} #{component.scale ne null ? component.scale.buttonStyleClass : ''} #{component.buttonStyle} dropdown-toggle" data-toggle="dropdown" href="#"
cdk:passThrough="on*">
#{component.title.concat(' ')}
<span class="caret"></span>
</a>
- <ul class="dropdown-menu #{component.horizontalPositionStyleClass}">
+ <ul class="dropdown-menu #{component.horizontal ne null ? component.horizontal.buttonClass : ''}">
<c:forEach var="child" items="#{component.getChildren()}">
<li>
<cdk:call expression="child.encodeAll(facesContext)" />
View
103 bootstrap/ui/src/main/templates/org/richfaces/bootstrap/commandButton.template.xml
@@ -15,29 +15,90 @@
<cc:implementation>
<cdk:object type="java.lang.String" name="type" value="#{'client' eq component.attributes['mode'].toString() ? 'button' : component.attributes['type'].toString()}"/>
-
<c:choose>
- <c:when test="#{component.tag eq 'button'}">
- <button id="#{clientId}" name="#{clientId}" class="btn #{component.styleClass}" value="#{component.value}"
- onclick="#{this.getOnClick(facesContext, component)}"
- cdk:passThrough="style ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout disabled"
- type="#{type}">
-
- <c:if test="#{! empty component.icon}">
- <i class="icon-#{component.icon}"></i>#{" "}
- </c:if>
- #{component.value}
- <cdk:call expression="renderChildren(facesContext, component);" />
- </button>
- </c:when>
- <c:when test="#{component.tag eq 'input'}">
- <input id="#{clientId}" name="#{clientId}" class="btn #{component.styleClass}" value="#{component.value}"
- onclick="#{this.getOnClick(facesContext, component)}"
- cdk:passThrough="style ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout disabled">
- <cdk:call expression="encodeTypeAndImage(facesContext, component);"/>
- </input>
+ <c:when test="#{component.hasFacet('split')}">
+ <div class="btn-group #{component.vertical ne null ? component.vertical.buttonClass : ''}">
+ <cdk:renderFragment name="renderCommandButton" type="#{type}" />
+
+ <button class="btn dropdown-toggle #{component.severity ne null ? component.severity.buttonClass : ''} #{component.scale ne null ? component.scale.buttonStyleClass : ''}" data-toggle="dropdown">
+ <span class="caret"></span>
+ </button>
+
+ <ul class="dropdown-menu #{component.horizontal ne null ? component.horizontal.buttonClass : ''}">
+ <c:forEach var="child" items="#{component.getFacet('split').getChildren()}">
+ <li>
+ <cdk:call expression="child.encodeAll(facesContext)" />
+ </li>
+ </c:forEach>
+ </ul>
+ </div>
</c:when>
+
+ <c:otherwise>
+ <cdk:renderFragment name="renderCommandButton" type="#{type}" />
+ </c:otherwise>
</c:choose>
-
</cc:implementation>
+
+ <cdk:fragment name="renderButton">
+ <cc:interface>
+ <cc:attribute name="type" type="java.lang.String" required="true" />
+ </cc:interface>
+
+ <cc:implementation>
+ <button id="#{clientId}"
+ name="#{clientId}" class="btn #{component.styleClass} #{component.severity ne null ? component.severity.buttonClass : ''} #{component.scale ne null ? component.scale.buttonStyleClass : ''}"
+ value="#{component.value}"
+ onclick="#{this.getOnClick(facesContext, component)}"
+ cdk:passThrough="style ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout disabled"
+ type="#{cc.attrs.type}">
+
+ <c:if test="#{!empty(component.icon)}">
+ <i class="icon-#{component.icon}"></i>#{" "}
+ </c:if>
+
+ #{component.value}
+
+ <cdk:call expression="renderChildren(facesContext, component);" />
+
+ </button>
+ </cc:implementation>
+ </cdk:fragment>
+
+ <cdk:fragment name="renderInput">
+ <cc:interface>
+ <cc:attribute name="type" type="java.lang.String" />
+ </cc:interface>
+
+ <cc:implementation>
+ <input id="#{clientId}"
+ name="#{clientId}"
+ type="submit"
+ class="btn #{component.styleClass} #{component.severity ne null ? component.severity.buttonClass : ''} #{component.scale ne null ? component.scale.buttonStyleClass : ''}"
+ value="#{component.value}"
+ onclick="#{this.getOnClick(facesContext, component)}"
+ cdk:passThrough="style ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout disabled">
+
+ <cdk:call expression="encodeTypeAndImage(facesContext, component);"/>
+
+ </input>
+ </cc:implementation>
+ </cdk:fragment>
+
+ <cdk:fragment name="renderCommandButton">
+ <cc:interface>
+ <cc:attribute name="type" type="java.lang.String" />
+ </cc:interface>
+
+ <cc:implementation>
+ <c:choose>
+ <c:when test="#{component.tag eq 'button'}">
+ <cdk:renderFragment name="renderButton" type="#{cc.attrs.type}" />
+ </c:when>
+ <c:when test="#{component.tag eq 'input'}">
+ <cdk:renderFragment name="renderInput" type="#{cc.attrs.type}" />
+ </c:when>
+ </c:choose>
+ </cc:implementation>
+ </cdk:fragment>
</cdk:root>
Please sign in to comment.
Something went wrong with that request. Please try again.