Skip to content

Commit

Permalink
minor corrections
Browse files Browse the repository at this point in the history
  • Loading branch information
@stephanrauh
stephanrauh committed Dec 20, 2015
1 parent d39f626 commit 3bcbcc2
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 41 deletions.
2 changes: 1 addition & 1 deletion src/main/webapp/bootstrap/carousel.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -372,7 +372,7 @@ see how the standard controls look in a wizard. Don't forget to switch off the a

<br />
<br />
<b:panel look="info">
<b:panel look="info" rendered="false">
<f:facet name="heading">
<b>Skinning</b>
</f:facet>
Expand Down
49 changes: 39 additions & 10 deletions src/main/webapp/forms/DataTable.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,60 @@ td {
padding: 8px;
}
</style>
<h1>DataTable (&lt;b:dataTable /&gt;) <b:badge value="since 0.8.0" /></h1>
<h1>DataTable (&lt;b:dataTable /&gt;) <b:badge value="experimental / since 0.8.0" /></h1>
<p>Currently, the <code>&lt;b:dataTable &gt;</code> isn't much more than a proof of concept. We plan to
implement a full-blown datatable in the next version of BootsFaces (probably 0.9.0).</p>

<b:dataTable value="{{carPool.carPool}}" var="car" id="bcarPool" styleClass="table table-striped table-bordered"
<h3>Basic usage</h3>

<b:tabView activeIndex="1">
<b:tab title="JSF markup">
<b:well>
<script type="syntaxhighlighter"
class="brush: xml; toolbar: false;gutter: false; first-line: 1">
<![CDATA[
<b:dataTable value="&num;{carPool.carPool}" var="car" id="bcarPool" styleClass="table table-striped table-bordered"
style="width:100%">
<h:column>
<f:facet name="header">
<h:outputText value="Brand" />
</f:facet>
<h:outputText value="#{car.brand}" />
<h:outputText value="&num;{car.brand}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Type" />
</f:facet>
<h:inputText value="#{car.type}"/>
<h:inputText value="&num;{car.type}"/>
</h:column>

</b:dataTable>
]]>
</script>
</b:well>
</b:tab>
<b:tab title="displayed as" contentStyle="border:1px solid ;padding:10px">
<b:dataTable value="#{carPool.carPool}" var="car" id="bcarPool" styleClass="table table-striped table-bordered"
style="width:100%">
<h:column>
<f:facet name="header">
<h:outputText value="Brand" />
</f:facet>
<h:outputText value="#{car.brand}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Type" />
</f:facet>
<h:inputText value="#{car.type}"/>
</h:column>
</b:dataTable>
</b:tab>
</b:tabView>

<h3>Do it yourself</h3>

<p>This example shows how to convert the standard JSF datatable without support by BootsFaces. Until we've finished the
implementation of <code>&lt;b:dataTable &gt;</code>, this is the most flexible approach.</p>

<h:dataTable value="{{carPool.carPool}}" var="car" id="carPool" styleClass="table table-striped table-bordered"
style="width:100%">
Expand Down Expand Up @@ -84,14 +117,10 @@ td {

<h3>Advanced usage</h3>
<ui:include src="dataTable.html" />

<p>Describe in a few words what <code>&lt;b:image&gt;</code> is about.</p>
<h1>Basic usage</h1>
<p>Put a short description in simple words here.</p>

<h3>Reference section</h3>
<ui:include src="DataTableAttributes.xhtml" />
<b:panel look="info">
<b:panel look="info" rendered="false">
<f:facet name="heading">
<b>Skinning</b>
</f:facet>
Expand Down
24 changes: 12 additions & 12 deletions src/main/webapp/forms/commandButton.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<h3>The Bootstrap look</h3>
<p>By default, command buttons are gray (depending on your theme). You can configure them by using a different look:</p>
<h:form>
<b:panelGrid columns="2,2,2,2,2,2" size="md" >
<b:panelGrid columns="2,2,2,2,2,2" size="sm" >
<b:commandButton value="primary" ajax="true" update="@none" look="primary" style="width:80px"/>
<b:commandButton value="info" ajax="true" update="@none" look="info" style="width:80px"/>
<b:commandButton value="success" ajax="true" update="@none" look="success" style="width:80px"/>
Expand Down Expand Up @@ -181,51 +181,51 @@
<b:fetchBeanInfos />
</b:well>
<b:row>
<b:column span="2">
<b:column col-sm="2">
<b:commandButton value="Non-Ajax Submit" />
</b:column>
<b:column span="2">
<b:column col-sm="2">
<b:commandButton value="Ajax Submit" ajax="true" update="form:inform infoshow" look="primary" />
</b:column>
<b:column span="2">
<b:column col-sm="2">
<b:commandButton value="With Icon" ajax="true" update="form:inform infoshow" icon="plus-sign"
look="success" />
</b:column>
<b:column span="2">
<b:column col-sm="2">
<b:commandButton value="Ajax Modal" ajax="true" update="form:inform amodal" look="inverse"
oncomplete="if(validationFailed) alert('Please enter valid input before opening the modal'); else $('#amodal').modal('show')" />
</b:column>
<b:column span="1">
<b:column col-sm="1">
<b:commandButton ajax="true" update="form:inform infoshow" iconAwesome="thumbs-up"
look="info" tooltip="Thumbs up!" />
</b:column>
<b:column span="1">
<b:column col-sm="1">
<b:commandButton ajax="true" update="form:inform infoshow"
style="padding: 0; border: none; background: none;color: #000"
tooltip="This looks like an icon, but it's a commandButton">
<b:iconAwesome name="arrow-down"></b:iconAwesome>
</b:commandButton>
</b:column>
<b:column span="2">
<b:column col-sm="2">
<b:commandButton value="I'm disabled" disabled="true" ajax="true"
iconAwesome="thumbs-down" look="info" title="Disabled!" />
</b:column>
</b:row>
<b:row>
<b:column span="2">
<b:column col-sm="2">
<p></p>
<p>Partial processing:</p>
<p></p>
</b:column>
</b:row>
<b:row>
<b:column span="2">
<b:column col-sm="3">
<b:commandButton value="Submit first name" ajax="true" update="form:inform infoshow" process="@form:firstname" look="primary" />
</b:column>
<b:column span="2">
<b:column col-sm="3">
<b:commandButton value="Submit surname" ajax="true" update="form:inform infoshow" process="@form:familyname" look="primary" />
</b:column>
<b:column span="2">
<b:column col-sm="3">
<b:commandButton value="Submit both" ajax="true" update="form:inform infoshow" process="@form:firstname @form:familyname" look="primary" />
</b:column>
</b:row>
Expand Down
4 changes: 2 additions & 2 deletions src/main/webapp/forms/selectOneMenu.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
</b:selectOneMenu>
Current keeper: &num;{soccerTeamBean.goalkeeper.name}
</b:panelGrid>
<b:commandButton value="Submit">
<b:commandButton value="Submit (doesn't work yet)">
<f:ajax event="click" execute="@form" render="@form" />
</b:commandButton>
]]>
Expand Down Expand Up @@ -194,7 +194,7 @@ public class Player {
</b:selectOneMenu>
Current keeper: #{soccerTeamBean.goalkeeper.name}
</b:panelGrid>
<b:commandButton value="Submit">
<b:commandButton value="Submit (doesn't work yet)">
<f:ajax event="click" execute="@form" render="@form" />
</b:commandButton>
</b:well>
Expand Down
11 changes: 4 additions & 7 deletions src/main/webapp/layout/navLinks.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,11 @@
<p>Both <code>icon</code> and <code>iconAwesome</code> attributes, require the icon name as value the icon name without the trailing <b>glyphicon-</b> prefix and <b>fa-</b> prefix respectively.</p>
<p><b:badge value="Hint" /> Bootstrap 4 is going to drop support for the Glyphicon library. We recommend you to chose icons from the Font Awesome library to avoid future incompatibilities.</p>
<p>In the following example the <code>b:listLinks</code> tag is used as a container for the NavLinks, showing how to create a Sidebar with links.</p>
<b:panel>
<f:facet name="heading"><b>EXAMPLE</b></f:facet>
<h:form>
<b:panel title="Example" look="default">
<h:form>
<b:row>
<b:column span="3">
<b:panel look="primary">
<f:facet name="heading">Sidebar</f:facet>
<b:panel look="primary" title="Sidebar">
<b:listLinks>
<b:navLink header="BootsFaces" />
<b:navLink href="http://www.bootsfaces.net" value="BootsFaces"
Expand All @@ -81,8 +79,7 @@

<script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 1">
<![CDATA[
<b:panel look="primary">
<f:facet name="heading">Sidebar</f:facet>
<b:panel look="primary" title="Sidebar">
<b:listLinks>
<b:navLink header="BootsFaces" />
<b:navLink href="http://www.bootsfaces.net" value="BootsFaces"
Expand Down
15 changes: 6 additions & 9 deletions src/main/webapp/layout/wells.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,24 @@
<p>Use the well as a simple effect on an element to give it an inset effect.</p>

<b:panel look="info">
<f:facet name="heading"><b>EXAMPLE - Well in a container</b></f:facet>
<b:container>
<f:facet name="heading"><b>EXAMPLE - Well</b></f:facet>
<b:row>
<b:column col-md="11">
<b:well>
<h3>Well Header</h3>
Well content.
</b:well>
<b:well>
<h3>Well Header</h3>
Well, that's the content of the <code>&lt;b:well /&gt;</code>.
</b:well>
</b:column>
</b:row>
</b:container>
<f:facet name="footer">
<strong>Markup:</strong><br/>

<script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 1">
<![CDATA[
<b:well>
<h3>Well Header</h3>
Well content.
Well, that's the content of the <b:well />.
</b:well>

]]></script>
</f:facet>
</b:panel>
Expand Down

0 comments on commit 3bcbcc2

Please sign in to comment.