Mailing List Archive

svn commit: r1538865 - /forrest/trunk/site-author/content/xdocs/docs_0_100/project-js-css.xml
Author: crossley
Date: Tue Nov 5 04:39:18 2013
New Revision: 1538865

URL: http://svn.apache.org/r1538865
Log:
Add some examples to show other ways to deal with additional project images, javascript, and css, etc.

Modified:
forrest/trunk/site-author/content/xdocs/docs_0_100/project-js-css.xml

Modified: forrest/trunk/site-author/content/xdocs/docs_0_100/project-js-css.xml
URL: http://svn.apache.org/viewvc/forrest/trunk/site-author/content/xdocs/docs_0_100/project-js-css.xml?rev=1538865&r1=1538864&r2=1538865&view=diff
==============================================================================
--- forrest/trunk/site-author/content/xdocs/docs_0_100/project-js-css.xml (original)
+++ forrest/trunk/site-author/content/xdocs/docs_0_100/project-js-css.xml Tue Nov 5 04:39:18 2013
@@ -75,5 +75,66 @@
####
</p>
</section>
+ <section id="examples">
+ <title>Examples</title>
+ <section id="example-d3">
+ <title>D3.js Data Driven Documentation</title>
+ <p>
+ Hooking up
+ <a href="http://d3js.org/">D3.js</a> is very easy, as shown there.
+ After declaring the "script" element in the header of your source,
+ then add one of the example snippets to your project JS.
+ The "randomly color paragraphs" example is a quick test that you are
+ up and running.
+ </p>
+ <p>
+ Obviously it is a very powerful combination to use D3 together with
+ Forrest's ability to gather, co-ordinate, and transform data.
+ </p>
+ </section>
+ <section id="example-leaflet">
+ <title>Leaflet</title>
+ <p>
+ Follow the excellent
+ <a href="http://bost.ocks.org/mike/leaflet/">example</a>
+ "using D3 to render GeoJSON shapes in conjunction with Leaflet".
+ </p>
+ <p>
+ Forrest will automatically find the CSS and JS when you place them
+ in the corresponding "project resources" directories as explained above.
+ </p>
+ <p>
+ In this case we need to help Forrest find the images that are used by
+ the Leaflet CSS. For example, it is looking for the resource
+ <code>css/images/zoom-in.png</code> (i.e. relative to its CSS file).
+ </p>
+ <p>
+ However, the default machinery in Forrest for locating images does not
+ look in that location, even if you try to place them there.
+ </p>
+ <p>
+ Add to your "project locationmap". This is consulted first in the
+ sequence of locationmaps, so you can cause Forrest to look for all
+ project image files in certain specific locations. If it does not
+ find them there, then it continues through the default locationmaps.
+ </p>
+ <p>
+ So if you added your source images to a
+ <code>resources/images/leaflet/</code> sub-directory, then add the following to your "project locationmap":
+ </p>
+ <source>
+<![CDATA[<match pattern="project.images.**.*">
+ <location src="{properties:resources.images}leaflet/{1}.{2}" />
+</match>
+]]></source>
+ <p>
+ Note that each locationmap match can try multiple locations in sequence.
+ </p>
+ <p>
+ This "project locationmap" technique is useful for utilising multiple
+ image/javascript/css libraries and keeping their resources separate.
+ </p>
+ </section>
+ </section>
</body>
</document>