TheCoder4eu/BootsFaces-OSP#1012 added new insights to the documentation

TheCoder4eu · Oct 3, 2018 · bfe3f80 · bfe3f80
1 parent 6f300ca
commit bfe3f80
Showing 1 changed file with 24 additions and 6 deletions.
diff --git a/src/main/webapp/integration/HighFaces.xhtml b/src/main/webapp/integration/HighFaces.xhtml
@@ -31,12 +31,22 @@
     use, but you have to buy a license for commercial use.</p>
 
     <h2><a id="prerequisites">Prerequisites</a></h2>
-    <p>HighFaces requires Mojarra. It's not compatible with MyFaces.</p>
+    <ul>
+    <li>HighFaces requires Mojarra. It's not compatible with MyFaces.</li>
+    <li>Please use HighFaces 1.2 or above.</li>
+    <li>HighFaces 1.2 is bundled with jQuery 1.1.2. By default, this version is used instead of the version 
+    of jQuery which is bundled with BootsFaces (currently 3.3.1).<br />
+    If you want to use both HighFaces 1.2 and a current version of jQuery, you have to add jQuery to
+    the <code>&lt;h:head /&gt;</code> section of your JSF page. You also need to rename the file name -
+    HighFaces expects it to end with "jquery.js".<br />
+    (According to the author of HighFaces, this is going to change with HighFaces 1.3. Most likely,
+    the algorithm detecting jQuery will be more flexible).</li>
+    </ul>
 
 
     <h2><a id="example">Example</a></h2>
     <p>HighFaces works with BootsFaces out-of-the-box. Just add the library to your project,
-    add the </p>
+    add the namespace to the header of the JSF file, and you're good to go:</p>
     <b:panel title="Live preview" look="info" collapsible="false">
       <h:form>
         <hf:chart type="pie" title="Series with individual lists">
@@ -52,10 +62,18 @@
             <b:panel>
               <script type="syntaxhighlighter" class="brush: xml; toolbar: false;gutter: false; first-line: 1">
               <![CDATA[
-              <hf:chart type="pie" title="Series with individual lists">
-                <hf:chartSerie name="Boys" value="&num;{lineChartBean.boys}" var="point" point="&num;{point.amount}"  tickLabel="&num;{point.year}"
-                               dataLabel="&lt;b>{point.name}&lt;/b>: {point.percentage:.1f} % &lt;i>({point.y})&lt;/i>"/>
-              </hf:chart>
+              <html xmlns:hf="http://highfaces.org" ... >
+                <h:head />
+                <h:body>
+                  <hf:chart type="pie" title="Series with individual lists">
+                    <hf:chartSerie name="Boys" value="&num;{lineChartBean.boys}" 
+                                   var="point" 
+                                   point="&num;{point.amount}"  
+                                   tickLabel="&num;{point.year}"
+                                   dataLabel="&lt;b>{point.name}&lt;/b>: {point.percentage:.1f} % &lt;i>({point.y})&lt;/i>"/>
+                  </hf:chart>
+                </h:body>
+              </html>
               ]]>
               </script>
             </b:panel>