Commit 2d17a949 authored by Pierre.Vriens's avatar Pierre.Vriens
Browse files

#2124777 Correct typos, add missing links in Skins guide

parent 3eac8abf
......@@ -3,6 +3,12 @@
<booktitle>Skins and Theming</booktitle>
<bookfolder>help.skins</bookfolder>
<chapters>
<chapter>
<title>Introduction</title>
<subtitle>Content at a glance</subtitle>
<abstract></abstract>
<link>intro</link>
</chapter>
<chapter>
<title>Defining Skins</title>
<subtitle>How to create a .skinfo file</subtitle>
......@@ -17,16 +23,22 @@
</chapter>
<chapter>
<title>CSS Libraries</title>
<subtitle>Add css libraries to a skin</subtitle>
<subtitle>Add CSS libraries to a skin</subtitle>
<abstract></abstract>
<link>css</link>
</chapter>
<chapter>
<title>JavaScript Libraries</title>
<subtitle>Add a JavaScript libraries for use in reports</subtitle>
<subtitle>Add JavaScript libraries for use in reports</subtitle>
<abstract></abstract>
<link>javascript</link>
</chapter>
<chapter>
<title>Example</title>
<subtitle>Sample containing custom JS and CSS files</subtitle>
<abstract></abstract>
<link>example</link>
</chapter>
<chapter>
<title>Configuration Options</title>
<subtitle>Defining skin configuration options</subtitle>
......
......@@ -6,13 +6,14 @@
<head>
<title>Report Skins</title>
<frx:category>Help</frx:category>
<frx:options hidden="1"/>
<frx:options hidden="1" skin="tutorial_skin" />
<frx:parameters>
</frx:parameters>
<frx:docgen>
</frx:docgen>
<frx:fields>
<frx:field id="title" link="reports/help.skins#{link}" />
<frx:field id="enable_datatables" link="reports/help.setup#datatables">Enable DataTables</frx:field>
</frx:fields>
<frx:menu type="normal-item"/><style/></head>
<body>
......@@ -23,6 +24,7 @@
</ul>
</div>
<h2 id="intro">Introduction</h2>
<p>Report skins can be used to manage the look and feel and various settings of multiple reports. Skins are basically a
collection of:</p>
<ul>
......@@ -36,18 +38,17 @@
</p>
<p>Skin info (.skinfo) files are created in the same basic syntax as .info files for themes or modules. The following example
illustrates the syntax:</p>
<pre>
; The name indicates the name displayed in the skin select box
; on the Format tab when editing reports.
name = Default Skin
description = Default skin for use with Forena.
; JavaScript include example
scripts[] = dataTables/media/js/jquery.dataTables.min.js
; css Include example
stylesheets[all][] = table_padding.css
</pre>
<p>After creating each new skin information file be sure to {clear_drupal_cache} (or {clear_forena_cache} for Forena's pre
7.x-4.x versions).</p>
<pre class="code">
; The name indicates the name displayed in the skin select box
; on the Format tab when editing reports.
name = Default Skin
description = Default skin for use with Forena.
; JavaScript include example
scripts[] = dataTables/media/js/jquery.dataTables.min.js
; css Include example
stylesheets[all][] = table_padding.css
</pre>
<p>After creating each new skin information file be sure to clear the Drupal cache.</p>
<h2 id="assign">Assigning Skins to reports</h2>
<h3>Configuring the default skin</h3>
<p>
......@@ -62,16 +63,14 @@
section of the .frx file as follows (whereas skin_file_name is the filename of your skin, without the .skinfo extension of
it):
</p>
<div class="FrxSource" >
<html frx:renderer="FrxSource">
<head>
<frx:options skin="skin_file_name"/>
</head>
<body>
...
</body>
<html frx:renderer="FrxSource" id="frxsrc-1">
<head>
<frx:options skin="skin_file_name"/>
</head>
<body>
...
</body>
</html>
</div>
<h2 id="css">CSS Libraries</h2>
<p>Stylesheets can be included using the same syntax for Drupal themes. Including a stylesheets[all][]=sheet.css line in
your .skinfo file, will cause the sheet.css file to be loaded for any media types.</p>
......@@ -83,50 +82,47 @@
<p>
JavaScript libraries are included using the same syntax as is used in the theme info file. In the above example the
scripts[]=dataTables/media/js/jquery.dataTables.js is used to load the JQuery dataTables library. Forena will search
for these libraries first in the report directory and then in the sites/all/libraries folder (checkout <a
href="./help.setup.datatables" target="_self">Enable DataTables</a> for instructions about how to install the dataTables
for these libraries first in the report directory and then in the sites/all/libraries folder (checkout {enable_datatables} for instructions about how to install the dataTables
library). This is particularly useful if you want to load additional JQuery plugins for a set but not all reports. You can add
additional JavaScript libraries without needing to write custom module or theme code.
</p>
<h2 id="example">Example</h2>
<h3>Add a custom JS and CSS file</h3>
<p>Here is how a custom version of a skin info file might look like, cloned from the delivered default_skin.skinfo :
</p>
<pre frx:renderer="FrxSource">
; The name indicates the name displayed in the skin select box
; on the Format tab when editing reports.
name = Custom Skin
description = Custom skin for use with Forena.
; Javascript include example
scripts[] = dataTables/media/js/jquery.dataTables.min.js
scripts[] = custom_skin.js
; css Include example
stylesheets[all][] = table_padding.css
stylesheets[all][] = custom_skin.css
</pre>
<pre class="code">
; The name indicates the name displayed in the skin select box
; on the Format tab when editing reports.
name = Custom Skin
description = Custom skin for use with Forena.
; Javascript include example
scripts[] = dataTables/media/js/jquery.dataTables.min.js
scripts[] = custom_skin.js
; css Include example
stylesheets[all][] = table_padding.css
stylesheets[all][] = custom_skin.css
</pre>
<p>
The line containing <strong>stylesheets[all][] = custom_skin.css</strong> adds this css to any reports using that skin.
</p>
<p>
The line containing <strong>scripts[] = custom_skin.js</strong> to the .skinfo file, adds the content of
this custom_skin.js file to any report that is using this skin. In our example the javascript needed to actually use various features provided by the dataTables
this custom_skin.js file to any report that is using this skin. In our example the JavaScript needed to actually use various features provided by the dataTables
plugin. Adding the line <strong>scripts[] = dataTables/media/js/jquery.dataTables.min.js</strong> to
the .skinfo file only makes this plugin available, so we need to add our own javascript to make sure that this plugin gets invoked.
the .skinfo file only makes this plugin available, so we need to add our own JavaScript to make sure that this plugin gets invoked.
</p>
<p>According to the dataTables documentation, the content of the custom_skin.js file should look similar to this example:</p>
<script frx:renderer="FrxSource">
<script frx:renderer="FrxSource" id="frxsrc-2">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
</script>
<p>
However, this doesn't take into account that in Drupal the <strong>$(document).ready</strong> is already used by
Drupal. Rather than overwrite $(document).ready we need to implement a
<strong>Drupal 7 behavior</strong>. Start from a copy of this code snippet mentioned on
<a href="https://www.drupal.org/node/756722" target="_blank">Managing JavaScript in Drupal 7</a> in the provided custom.js:
</p>
<script frx:renderer="FrxSource">
<script frx:renderer="FrxSource" id="frxsrc-3">
(function ($) {
Drupal.behaviors.exampleModule = {
attach: function (context, settings) {
......@@ -136,19 +132,19 @@
}
};
})(jQuery);
</script>
</script>
<p>
Then apply these changes to the copied code snippet:
</p>
<ul>
<li>The behavior name <strong>exampleModule</strong> should be a variable name unique to our implementation so we change it to <strong>CustomSkin</strong>.</li>
<li>Change the attatch function to be code based on the dataTables example.</li>
<li>Change the attach function to be code based on the dataTables example.</li>
<li>Change <strong>#example</strong> to <strong>table</strong>, to use the dataTables plugin for all tables. </li>
</ul>
<p>
After these changes are applied, the updated custom_skin.js file should look like this:
</p>
<script frx:renderer="FrxSource">
<script frx:renderer="FrxSource" id="frxsrc-4">
(function ($) {
Drupal.behaviors.CustomSkin = {
attach: function (context, settings) {
......@@ -156,7 +152,11 @@
}
};
})(jQuery);
</script>
</script>
<p>
For more info about this topic, checkout the video about <a href="http://www.youtube.com/watch?v=ijmM85RGvvk" target="_blank">Report Skins
- Create skins that control graphing defaults and integrate JQuery plugin</a>.
</p>
<h2 id="options">Defining Configuration Settings</h2>
<p>Skins also facilitate assigning values to specific variables, which can then be used in all reports using the skin. This
is typically done for various flavors of settings, such as:
......@@ -169,33 +169,27 @@
<p>
The following example (which can be added anywhere in a .skinfo file) contains an illustration of how to do so:
</p>
<pre >
; *********************************************************************
; Set SVGGraph defaults:
;
; FrxSVGGraph[colors][] = red
; FrxSVGGraph[colors][] = blue
;
; *********************************************************************
; Settings that can be used to control how reports are rendered:
;
; Disable helper classes such as even and odd:
; FrxReport[noHelperClasses] = true
;
; Control the root element tag name:
; FrxXMLDoc[rootElementName] = node
;
; *********************************************************************
; Arbitrary variables referenced in reports using the skin data context:
;
; Make skin.my_variable available to be referenced anywhere in a report:
; my_variable = Value of my own variable
</pre>
<h2 id="videos">Recommended video tutorials</h2>
<p>
For more info about this topic, checkout <a href="http://www.youtube.com/watch?v=ijmM85RGvvk" target="_blank">Report Skins
- Create skins that control graphing defaults and integrate JQuery plugin</a>.
</p>
<pre class="code">
; *********************************************************************
; Set SVGGraph defaults:
;
; FrxSVGGraph[colors][] = red
; FrxSVGGraph[colors][] = blue
;
; *********************************************************************
; Settings that can be used to control how reports are rendered:
;
; Disable helper classes such as even and odd:
; FrxReport[noHelperClasses] = true
;
; Control the root element tag name:
; FrxXMLDoc[rootElementName] = node
;
; *********************************************************************
; Arbitrary variables referenced in reports using the skin data context:
;
; Make skin.my_variable available to be referenced anywhere in a report:
; my_variable = Value of my own variable
</pre>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment