JSiteMap is an open source java site map generator; more precisely is a converter: from an HTML-only map to a Javascript, dynamic HTML map
(click on the links to see the difference).
2. JSiteMap is platform independent, but needs an input HTML code. You can easily generate the HTML map. Since version 0.9.1 you have two options:
a. if you are a Microsoft® Windows® user download Xenu's Link Sleuth(TM) for Microsoft® Windows® . Follow the instructions and run it on your PC. Xenu will generate the HTML site map, and also an useful broken link report. I suggest you to customize the report: go to Options - Preferences. Set the maximum level to 5 or 6. You can try other values, but a too great value will generate a chaotic map; anyway that's my opinion, find the best option for you.
If you are a Linux user you can try the Wine emulator; I haven't yet tested on it, but Xenu should work with. b.anyone who has an internet-connected computer may choose to generate the HTML map registering for free at FreeFind.com(TM). This is a very good site for webmasters (I'm registered too), the main feature is the internal search engine for your site, but there is also the online tool for the HTML site map generation (use the "Outline map"). Note: since this option is the last feature added to JSiteMap, it may still have some bug.
The default option is Xenu's Link; if you choosed FreeFind.com you have to locate the configuration files (one for the applet and one for the application) and be sure to use the right one. (For example, if you use the applet: delete the file classes/JSiteMapApplet.html and rename classes/JSiteMapAppletFF.html to classes/JSiteMapApplet.html; same thing applies to file config/JSiteMapFF.cfg)
A future JSiteMap release will hopefully include also a Java HTML map generator.
3. Now you have to copy the HTML source code (if you choosed Xenu's Link you will see a HTML page open in your browser; if you choosed FreeFind.com you will generate a web page: open that page in your browser and continue) into JSiteMap applet. To do so, in most of the browsers, right-click the report and press "HTML" or "View Source". The default editor will open, then select all HTML code and copy it. There's no need to search for the map starting point within the whole code, JSiteMap will do it for you.
4. Paste HTML code into JSiteMap.
5. Press 'Dynamic'. The applet will elaborate the map and you will find the javascript code in the second textarea.
6. Select all the js code (right-click -> select all could work, depending on your JVM version), copy it and paste it into the file jsitemap/sitemap/generatedCode.js .
7. Open in your browser jsitemap/sitemap/index.html and you will see your first javascript-tree map!
8. Last step, place a static map for those who have disabled JavaScript in their browsers. To do so, just press "Static". This time you'll see in the textarea the HTML map extracted from the report.
9. Select all the HTML code, copy it and paste it into the file jsitemap/sitemap/menu.html .
JSiteMap applet can also be used as a standalone application. But to do so you need a JVM installed on your system. Click here to download JRE or JDK 1.1 (or higher) from Sun's site. To launch the application just click on the jsitemapWin icon inside the jsitemap folder.
Since version 0.9.0 was introduced the feature of controlling the tree menu options inside the GUI, instead of adding them manually. Due to the security limitations imposed to Java(TM) applets, you can find this feature only in the application version.
Click the button "Configure", a popup window will open: here are listed the options of the Morten's Tree Menu (to view a description for each of them check the Tree Menu website). Simply type your changes and press "Save": the configuration file config/menuOptions.cfg will be updated.
To generate user options, be sure that the checkbox "Add user options" is checked and follow the normal procedure to generate the dynamic site map (note that in the file config/JSiteMap.cfg the property named "addUserOptions" controls the initial state of the checkbox depending on the value "true"/"false").
Once the HTML map code has been inserted into the applet, a parsing is done on it. The HTML-only map already has inside the particular structure of a tree (see this example), but is static. In general there is a root node with some children nodes which may have other children. Nodes are grouped in HTML lists, and each of them is placed in a list item. The parsing will retrieve for each node the URL and the title of the page, and they will be put in the javascript tree.
Before generating the javascript code, a tree image is kept in memory, in form of a java tree structure; this step is useful in an object-oriented design, in order to logically separate the parsing (input) from the script-generation (output). An advantage is, for example, that writing a new parser (for instance based on a different HTML-map syntax) will be easier with an object-oriented design. The TreeNode class was written by Craig R. McClanahan (Apache Software Foundation) and modified by me in order to obtain compatibility with Java 1.1 browsers (the majority).
The syntax used in the HTML-only map generated by Xenu Link Sleuth 1.2d is the following:
Description
HTML fragment
Java field name
Map start point
<A name=sitemap>
startTag
Map end point
<A href="#top">
STOPTag
URL start point
<A href="
hrefTag
URL end point
">
endURLTag
href end point
</A>
hrefEndTag
list start point
<UL>
startListTag
list end point
</UL>
endListTag
list item start point
<LI>
listItemTag
list item end point
</LI>
endListItemTag
The last step is the generation of the script. I choosed Morten Wang's Javascript Tree Menu as dynamic graphical representation of the map. This tree menu is highly configurable, so I suggest you to take a look at Morten's site to learn all the options.
For example: do you want the tree to emulate the same behavior of Microsoft® Windows Explorer? Simply open the configuration window and check the MTMEmulateWE checkbox; or (if you can't use the application version) add this line at the beginning of the file generatedCode.js:
var MTMEmulateWE=true;
Now you're ready to generate your first map (download JSiteMap) or to view the online tutorial.
