Skip to content

Commit

Permalink
Documentation update to reflect BootsFaces v0.3.7 release.
Browse files Browse the repository at this point in the history
  • Loading branch information
droidcoder committed Jul 16, 2014
1 parent ec77b4a commit 045cb79
Show file tree
Hide file tree
Showing 3 changed files with 168 additions and 36 deletions.
2 changes: 1 addition & 1 deletion web/applayout/navbarbottom.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<h:body>
<ui:composition>
<b:navBar brand="&copy;2013-2014 TheCoder4Eu" brandHref="http://www.thecoder4.eu/" fixed="bottom">
<p class="navbar-text pull-right"><h:outputText value="BootsFaces v.0.3.6 on Mojarra 2.2.5" /></p>
<p class="navbar-text pull-right"><h:outputText value="BootsFaces v.0.3.7 on Mojarra 2.2.5" /></p>
</b:navBar>
</ui:composition>
</h:body>
Expand Down
104 changes: 71 additions & 33 deletions web/bootstrap/modal.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:b="http://bootsfaces.net/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
<h:head>
<title>BootsFaces: next-gen JSF Framework</title>
<meta name="author" content="Riccardo Massera"></meta>
Expand All @@ -14,44 +15,81 @@
<ui:define name="content">
<h1>Modals</h1>
<p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
<p><strong>Modal options</strong></p>
<p>You can specify a Header with the <code>title</code> attribute. Modals have a dismiss button(a cross) in the upper right corner by default.</p>
<p>The <code>&lt;b:modal&gt;</code> tag has also a facet with name <code>footer</code> where you can add buttons for dismissing the modal or for other actions.</p>
<p>Notice that the <code>&lt;b:button&gt;</code> tag must have the <code>dismiss="modal"</code> attribute in order to dismiss the modal when clicked.</p>

<h4>Triggering Modals</h4>
<p>You have three ways to create a Button that triggers a Modal:</p>
<ul>
<li>Using HTML markup - a styled <code>&lt;a&gt;</code> tag with href and data attributes.</li>
<li>Using HTML markup - a styled <code>&lt;button&gt;</code> tag with two data attributes.</li>
<li>Using JSF BootsFaces markup - a <code>&lt;b:button&gt;</code> tag with passthrough data attributes and a little javascript to prevent click event.</li>
</ul>
<p>Note: if your intendended use is to trigger a data submission that shows the results in a Modal, then have a look at the <h:link outcome="/forms/commandButton" value="commandButton"/> documentation.</p>
<p>The following example shows you how to use the three kinds of trigger.</p>
<p class="text-warning"><b>Overlapping modals is not supported:</b> be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.</p>


<b:panel look="info">
<f:facet name="heading"><b>EXAMPLE - Triggering a modal</b></f:facet>
<b:modal id="amodal" title="Modal Example">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<f:facet name="footer">
<b:button value="close" dismiss="modal" onclick="return false;"/>
<b:button value="Ok" look="primary" dismiss="modal" onclick="return false;"/>
</f:facet>
</b:modal>
<b:row>
<b:column span="4">
<a id="atrigger" class="btn btn-primary btn-lg" href="#amodal" data-toggle="modal">Trigger (HTML A tag)</a>
</b:column>
<b:column span="4">
<button id="btrigger" class="btn btn-info btn-lg" data-target="#amodal" data-toggle="modal">Trigger (HTML Button)</button>
</b:column>
<b:column span="4">
<b:button value="Trigger (JSF passthrough)" look="success" p:data-target="#amodal" p:data-toggle="modal" onclick="return false;" size="lg"/>
</b:column>
</b:row>

<a id="trigger" class="btn btn-primary btn-lg"
href="#amodal" data-toggle="modal">Click here for Modal</a>
<b:modal id="amodal" title="Modal Example">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<f:facet name="footer">
<b:button value="close" dismiss="modal" onclick="return false;"/>
<b:button value="Ok" look="primary" dismiss="modal" onclick="return false;"/>
</f:facet>
</b:modal>

<br/><br/>
<strong>Markup:</strong><br/>
<strong>Markup:</strong><br/>

<script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
<![CDATA[
<b:modal id="amodal" title="Modal Example">
<p>Modal body</p>
<f:facet name="footer">
<b:button value="close" dismiss="modal" onclick="return false;"/>
<b:button value="Ok" look="primary" dismiss="modal" onclick="return false;"/>
</f:facet>
</b:modal>

]]></script>
<script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
<![CDATA[
<b:modal id="amodal" title="Modal Example">
<p>Modal body</p>
<f:facet name="footer">
<b:button value="close" dismiss="modal" onclick="return false;"/>
<b:button value="Ok" look="primary" dismiss="modal" onclick="return false;"/>
</f:facet>
</b:modal>
<b:row>
<b:column span="4">
<a id="atrigger" class="btn btn-primary btn-lg" href="#amodal" data-toggle="modal">Trigger (HTML A tag)</a>
</b:column>
<b:column span="4">
<button id="btrigger" class="btn btn-info btn-lg" data-target="#amodal" data-toggle="modal">Trigger (HTML Button)</button>
</b:column>
<b:column span="4">
<b:button value="Trigger (JSF passthrough)" look="success" p:data-target="#amodal" p:data-toggle="modal" onclick="return false;" size="lg"/>
</b:column>
</b:row>
]]></script>
</f:facet>
</b:panel>
<br/> <br/>

<script type="text/javascript">
SyntaxHighlighter.all();
</script>
<br/>
<strong>Modal options</strong>
<p>You can specify a Header with the <code>title</code> attribute. Modals have a dismiss button(a cross) in the upper right corner by default.</p>
<p>The <code>&lt;b:modal&gt;</code> tag has also a facet with name <code>footer</code> where you can add buttons for dismissing the modal or for other actions.</p>
<p>Notice that the <code>&lt;b:button&gt;</code> tag must have the <code>dismiss="modal"</code> attribute in order to dismiss the modal when clicked.</p>

</ui:define>
</ui:composition>
</h:body>
Expand Down
98 changes: 96 additions & 2 deletions web/jquery-ui/slider.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
</f:facet>
</b:panel>
</h:form>
<p>You can use <code>orientation</code> attribute to obtain a vertical slider.</p>
<p>You can use the <code>orientation</code> attribute to obtain a vertical slider.</p>
<p>If you specify <code>orientation="vertical"</code>, the Label is rendered on top, then the value and the slider on the bottom.</p>
<p>If <code>orientation="vertical-bottom"</code> is used, the slider is rendered on top, then the value and the Label on the bottom.</p>
<b:panel look="info">
Expand Down Expand Up @@ -168,7 +168,101 @@
]]></script>
</f:facet>
</b:panel>

<h3>Slider Handle options</h3>
<h4>Handle Size</h4>
<p>If you are targeting Mobile, it can be useful to have a bigger handle.</p>
<p>You can control the handle size adding the <code>handle-size</code> attribute, using the <code>md</code> or <code>lg</code> values for a Medium sized handle and a Large sized handle respectively.</p>
<h:form>
<b:panel look="info">
<f:facet name="heading"><b>EXAMPLE - Handle Size</b></f:facet>
<b:row>
<b:column>
<b:slider min="0" max="100" step="5" value="25" label="Default size"/>
</b:column>
</b:row>
<b:row>
<b:column>
<b:slider handle-size="md" min="0" max="100" value="50" label="Medium handle (md)" />
</b:column>
</b:row>
<b:row>
<b:column>
<b:slider handle-size="lg" min="0" max="100" step="5" value="75" label="Large handle (lg)"/>
</b:column>
</b:row>

<f:facet name="footer">
<strong>Markup:</strong><br/>

<script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
<![CDATA[
<b:row>
<b:column>
<b:slider min="0" max="100" step="5" value="25" label="Default size"/>
</b:column>
</b:row>
<b:row>
<b:column>
<b:slider handle-size="md" min="0" max="100" value="50" label="Medium handle (md)" />
</b:column>
</b:row>
<b:row>
<b:column>
<b:slider handle-size="lg" min="0" max="100" step="5" value="75" label="Large handle (lg)"/>
</b:column>
</b:row>
]]></script>
</f:facet>
</b:panel>
</h:form>
<p class="text-success">Note: the same applies to Vertical Sliders.</p>
<h4>Handle Shape</h4>
<p>The default handle has a rounded square shape.</p>
<p>If you prefer a round handle you can add the <code>handle-shape="round"</code> attribute.</p>
<h:form>
<b:panel look="info">
<f:facet name="heading"><b>EXAMPLE - Handle Size</b></f:facet>
<b:row>
<b:column>
<b:slider handle-shape="round" min="0" max="100" step="5" value="25" label="Default"/>
</b:column>
</b:row>
<b:row>
<b:column>
<b:slider handle-shape="round" handle-size="md" min="0" max="100" value="75" label="Round handle (md)" />
</b:column>
</b:row>
<b:row>
<b:column>
<b:slider handle-shape="round" handle-size="lg" min="0" max="100" step="5" value="50" label="Round handle (lg)"/>
</b:column>
</b:row>

<f:facet name="footer">
<strong>Markup:</strong><br/>

<script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
<![CDATA[
<b:row>
<b:column>
<b:slider handle-shape="round" min="0" max="100" step="5" value="25" label="Default"/>
</b:column>
</b:row>
<b:row>
<b:column>
<b:slider handle-shape="round" handle-size="md" min="0" max="100" value="75" label="Round handle (md)" />
</b:column>
</b:row>
<b:row>
<b:column>
<b:slider handle-shape="round" handle-size="lg" min="0" max="100" step="5" value="50" label="Round handle (lg)"/>
</b:column>
</b:row>
]]></script>
</f:facet>
</b:panel>
</h:form>
<p class="text-success">Note: the same applies to Vertical Sliders.</p>
<b:modal id="amodal" title="Slider">
<strong>Submitted values:</strong>
<h:panelGrid columns="2">
Expand Down

0 comments on commit 045cb79

Please sign in to comment.