[START] [CLASSES] [TAG] | [structure]
[labels] shortcuts] [images]
[colors] [font] [view] |
LinkTree data.
Let's suppose that you have 6 files:
and want to gather all links in a convenient tree structure, something like:
First, you should devise an identifier for each tree item, including the directories. For example: friends,pets,cats,dogs,alice,bob,oscar,dolly,harvey,caesar.
Then, using any simple editor, create a file, say "my_simple_tree.src", which contains the following:
struct:
root: friends,pets; friends:alice,bob,oscar; pets: cats,dogs; cats:dolly; dogs: harvey,caesar; ; |
Note:
It's already enough to start the tree!
To verify this, insert in your document a proper tag , which in our case may look like the following:
<applet code="lt102.class" width=100 height=30 align=absmiddle>
<param name=source value="my_simple_tree.src">
<param name=button value="Start the tree">
</applet>
and, if your browser supports Java(TM), you will see this button:
If the tree have started successfully, you can note that the label of each item was produced from its identifier through converting the first letter into the upper case.For more flexibility you may assign to each item the label irrespective of its ID, using the following record :
label:
friends:"My friends"; pets:"My pets"; cats:"cats:"; dogs:"dogs:"; ; |
![]() |
if you add it to the source file ( we name this new file "second_tree.src").
try this new version of the source:(see new version of the tag).
The next thing we are to do is to assign the appropriate file shortcut to each tree item.
action:
alice:"alice.html",left; ; |
![]() |
As you can see, the shortcut may consist of two parts:
Note:
See the current variant of the tree:and its source(third_tree.src).
Important: The links only work when the applet area is visible, so you either should place the applet in a special separate frame or should direct the link content to a blank window (so the target parameter should be _blank). Otherwise, if the document containing the applet is replaced by another, the tree window disappears.
Well, the work is half done.Our next step is icon assigning.
Each tree item may have its personal icon. Otherwise, the default icon will be used (default.normal - for the normal state, default.selected - for the selected state). See below, how you define this icons.
Consider that we have next images, related to your friends and pets:
Image | URL |
![]() |
alice1.gif |
![]() |
bob.gif |
![]() |
oscar.gif |
![]() |
cat.gif, |
![]() |
dog.gif |
![]() |
open.gif |
![]() |
closed.gif |
image:
alice:"alice1.gif"; ; |
![]() |
Some notes:
If you add it to the source file ( we name this new file "fourth_tree.src").
try this new version of the source:
font:
name:"Helvetica"; ; |
![]() |
Note:
We add this to the source file ( we name this new file "fifth_tree.src") .
try this new version of the source:.
Now it's the time to customize colors:
color:
background:"ffff00"; ; |
![]() |
Note:
If you add it to the source file ( we name this new file "sixth_tree.src").
try this new version of the source:
And the last things we can adjust is the set of layout parameters. We have already used them silently, and here is the explanation:
view:
spacing: 24,28; ; |
![]() |
Note:
See the final version of the tree: and its source (seventh_tree.src).
[TOP] | [START] [CLASSES] [TAG] | [structure] [labels]
[shortcuts] [images] [colors] [font] [view] |