added missing documentation

TheCoder4eu · Jul 5, 2016 · 77f65c2 · 77f65c2
1 parent 8dddd1d
commit 77f65c2
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 0 deletions.
diff --git a/src/main/webapp/applayout/navbartop.xhtml b/src/main/webapp/applayout/navbartop.xhtml
@@ -65,6 +65,7 @@
           <b:navLink value="DataTable" outcome="/forms/DataTable" />
           <b:navLink value="DateTimePicker" outcome="/forms/DateTimePicker" icon-awesome="clock-o" />
           <b:navLink value="Fetch Bean Infos (Validations)" outcome="/forms/FetchBeanInfos" />
+          <b:navLink value="Focus" outcome="/forms/Focus" />
           <b:navLink value="Input Text" outcome="/forms/inputText" />
           <b:navLink value="Input Text with Tags" outcome="/forms/inputTextWithTags" />
           <b:navLink value="Input Secret" outcome="/forms/inputSecret" icon-awesome="user-secret" />

diff --git a/src/main/webapp/forms/Focus.xhtml b/src/main/webapp/forms/Focus.xhtml
@@ -0,0 +1,32 @@
+<?xml version='1.0' encoding='UTF-8' ?>
+<!DOCTYPE html>
+<ui:composition template="/applayout/pageTemplate.xhtml"
+	xmlns="http://www.w3.org/1999/xhtml"
+	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">
+
+	<ui:define name="content">
+		<style>
+td {
+	padding: 8px;
+}
+</style>
+	<h1>Focus (&lt;b:focus /&gt;)</h1>
+
+	<p><code>&lt;b:focus&gt;</code> allows you to define the field that gets the input focus when the page is loaded.</p>
+	<h1>Basic usage</h1>
+	<p>Simply put <code>&lt;b:focus target="someId" &gt;</code> somewhere in your JSF page. The input field bearing this
+      id gets the input focus.</p>
+	<ui:include src="FocusAttributes.xhtml" />
+
+	<script type="text/javascript">
+    		SyntaxHighlighter.all();
+  	</script>
+	<br />
+	<br />
+	<br />
+	<br />
+	</ui:define>
+</ui:composition>
diff --git a/src/main/webapp/forms/FocusAttributes.xhtml b/src/main/webapp/forms/FocusAttributes.xhtml
@@ -0,0 +1,44 @@
+<?xml version='1.0' encoding='UTF-8' ?>
+<!DOCTYPE html>
+<ui:fragment
+	xmlns="http://www.w3.org/1999/xhtml"
+	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">
+
+		<b:panel look="info">
+			<f:facet name="heading">
+				<b>Attributes of &lt;b:focus &gt;</b>
+			</f:facet>
+			<div class="table-responsive">
+				<table class="table table-striped table-hover"
+					style="background-color: #fff">
+					<thead>
+						<tr>
+							<th>Attribute</th>
+							<th>Default value</th>
+							<th>Description</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+						    <td>id</td>
+						    <td>(none)</td>
+						    <td>Unique identifier of the component in a namingContainer.</td>
+						</tr>
+						<tr>
+						    <td>rendered</td>
+						    <td>false</td>
+						    <td>Boolean value to specify the rendering of the component, when set to false the component will not be rendered.</td>
+						</tr>
+						<tr>
+						    <td>target</td>
+						    <td>(none)</td>
+						    <td>Id of the element to focus.</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		</b:panel>
+</ui:fragment>
diff --git a/src/main/webapp/forms/commandButton.xhtml b/src/main/webapp/forms/commandButton.xhtml
@@ -441,6 +441,36 @@
                </b:panelGrid>
            </h:form>
 
+           <h2>Custom icons and arbitrary content of a command button</h2>
+           <p>You can put arbitrary content in the caption of the command button.
+           You aren't limited to simple icons and text.</p>
+           <b:panelGrid colSpans="5,7" size="sm">
+            <h:form>
+              <b:commandButton style="width:280px"
+                   look="info">
+                   This text
+                   <b:image library="images"
+                      name="BSFLogo.png"
+                      style="width:20%" height="20%"/>
+                   surrounds an image.
+              </b:commandButton>
+            </h:form>
+            <b:well>
+            <script type="syntaxhighlighter"
+                    class="brush: xml; toolbar: false;gutter: false; first-line: 1">
+                <![CDATA[
+               <b:commandButton style="width:280px"
+                   look="info">
+                   This text
+                   <b:image library="images"
+                      name="BSFLogo.png"
+                      style="width:20%" height="20%"/>
+                   surrounds an image.
+              </b:commandButton>
+                 ]]></script>
+                 </b:well>
+            </b:panelGrid>
+
             <h2>Partial processing with AJAX <b:badge value="since 0.8.0" /></h2>
             <p>The lower row of the example above shows partial processing. Sometimes you don't want to submit an entire form to the server.
             In our example you can't send the first name unless you've filled the last name, too, because of the constraint violation