RTree Visual Designer

Introduction

The RTree Designer will assists you in the task of creating menus for you web site. It is a Java[TM] application that will create HTML code for you to be used with the RTree applet. The use of the designer will report you the following benefits:

• You don't need to be familiar with HTML tags of the applet RTree. Anyone can now configure RTree using the Visual Designer, it makes the menu designing very easy.
• You can quickly design your menu and test it on the fly.
• You will not make mistakes in the HTML code and you will save time.

About the evaluation version

The evaluation version does not allow saving trees and running trees in the browser. You will also find two examples:

• Examples\Example1.tree
• Examples\Example2.tree

Description of the screen

The screen of the designer is very simple, it has three areas:

• The menu: will let you create new trees, save, load...
• The tree area: will display the tree and will let you add , move, delete and insert nodes
• The data area: it display the configuration of the tree and the selected item of teh tree.

The menu

The menu allows the following operations:

• Archives->New: creates a new empty tree.
• Archives->Load: loads a previously saved tree. The file must have the extension .tree.
• Archives->Save: saves the tree into a file. The file must have the extension .tree.
• Archives->Generate: this item will create the final HTML code you will put in you web site. When you deploy your final HTML file do not forget to copy the *.gif and *.jpg file into the images subdirectory of your server and do not forget to copy the rtreed.zip file.
• Archives->Test in browser: this item will open a browser and will show the applet. The designer uses a HTML file called RTreeFrames.html that contains 2 frames. The first frame ist called menu and will display the file RTreeTest.html that contains the menu. The second frame, called data will display the file RTreeData.html. Note: if your final web site will have other frame names the links will not work while using this option.
• Apply -> rebuild tree: applies new defaults values for the nodes and rebuilds the tree.
• Administration->Settings->browser: if you are using the Java[TM] machine of Sun you need to select the browser you want to use. Please select here the EXE file and the absolute path format.
• Help-> about: displays program version.
• Help -> help: displays this help file.

The tree area

The tree area is located on the left side of the main window and it will display the tree in same way you will see it in the browser. You can use the popup menu (mouse's right button) to

• add a new child to the selected node. The node will be created using the current defaults and will be added at the end of the children.
• insert a new node before the selected node. The node will be created using the current defaults.
• delete a node and its children. You cannot delete the root.
• moving a node: if you drag a drop a node you will be moving the position of the node in the tree. The dragged node is inserted before the destination node you drop on.



screenshot 2

The tree has however the following differences with the version that runs on the browser

• it does not perform animations
• the link will not work. Of course, this is not a browser.
• the frame of the tree will not be displayed. The designer always uses a simple line border.

The data area

The data area is located on the right side of the main window. It has three tabs:

• current node: display the configuration of the selected node of the tree.
• defaults: displays the default configuration of the nodes. New nodes will be initialised with that configuration.
• tree: displays general configuration of the tree.

Configuration fields of the nodes

The following fields a used in the current node tab or the defaults tab:

• Back. Image: background image of the node.
• Center Text: center text of the node.
• Back. Color: background color of the node.
• Sel. Back. Color: background color when the node is selected.
• Color: color of the texts.
• Children in file: if selected the definition of the the children for this node will be stored in a separate file. This can be used if a node has a large number of children. If they are stored in a different file they will be loaded only when they a required (i.e. when the node is expanded). This is called dynamically loading of the tree.
• Clicked Color: color of the node after it has been clicked. This will show the page the user is on.
• Clicked Back. Color: backgorund color of the node after it has been clicked.
• Clicked Font: font of the node after it has been clicked.
• Clicked Image: icon of the node after it has been clicked.
• Exp. Icon: icon when the node is expanded.
• Icon: icon of the node.
• Font: font of the text..
• Raise on select:: if selected the node will displayed a "raised" effect when it is selected.
• Sel. Color: color of the text when the node is selected.
• Url: URL to open when the user double-clicks the node.
• Target: target frame of the HTML page. Valid values are: "_self", "_parent","_top", "_blank" or <frame name>.
• Text: text for this node.
• Tip: tip for this node.
• Selection set: use this parameter to specify the selection mode:
  • 0 (default): the node can be selected (single node selection) and the action performed.
  • -1: the node cannot be selected and no action will be performed for this node when clicked (except expanding and collapsing).
  • 1,2,3 ...: set id. This Id is used to activate the multinode selection. Nodes with same "set id" can be selected simultaneously. As soon as the user clicks on a node with a different "set id", all nodes in previous set id will be desected.

   

Note: the images files must be located in the images subdirectory!.

Configuration of fields of the tree

The following fields a used in the current node tab or the defaults tab:

• (-) image: Image used instead of the signed - when the node is expanded.
• (+) image: Image used instead of the signed + when the node is not expanded.
• Show root: If selected then the root of the tree will be displayed, it not, it will be hidden.
• Animation: This parameter defines how the initial animation is going to be. Remember that the animation is not visible in the designer, you must test it in the browser if you want to see the animation. Valid values are:
  NO: there will be no animation
  FROM_TOP: the tree will come from the top a will scroll down.
  FROM_BOTTOM: the tree will come from the bottom a will scroll up.
  FROM_LEFT: the tree will come from the left a will scroll right.
  FROM_RIGHT: the tree will come from the right a will scroll left.
• Back. Color: background color of the tree.
• Back. Image: background image for the tree.
• Border: type of border. Valid values are: NO,RAISED,LOWERED,LINE,LINE2,SHADOW and DOUBLE.Remember that the border is not visible in the designer, you must test it in the browser if you want to see the border.
• Border Color: color of the border.
• Box Color: color of the box used to display the tips. The default value is BLACK.
• Expand: If selected nodes will be automatically expanded when the cursor is on it. If now selected the user must click on the icon or the (+/-) in order to expand or compress. 
• Draw Line: If not selected then no lines will be displayed between a node an its children.
• Draw +/-: If selected then the tree will display a + sign next to collapsed nodes and a - signe next to expanded nodes.
• Icon width: width in pixels of the space reserved for the icon.
• Item height. Height of the nodes of the tree. The default value is 20 (in pixels).
• Loading font: Font to be used for the text displayed when the tree is loading a definition file or images.
• Loading image:Image to be displayed when the tree is loading a definition file or images.
• Loading text: This is the text to be displayed when the tree is loading a definition file or images. The default value is "Loading...";
• Left margin:. In pixels.
• Line color: color of the lines in the tree. The default value is BLACK.
• Line type: This is the type of line used to link a node and its children. Valid values as NORMAL, DASHED or DOTS.
• Opening text: : This is the text to be displayed when the tree is opening a link after the user double-clicks a node. The default value is "Opening URL...";
• Reorganize: if selected the tree will be reorganized after the uses clicks on a node. This means that only the selected node will remain expanded.
• Startup node: name of the node that will be initially selected.
• Scroll color: : background color of the scroll bar. This is not visible in the designer, you must test it in the browser to see the color of the scrollbar.
• Tab: This is the left margin of the children of a node. The default value is 20. This means that children will be displayes 10 pixes to the right of the parent.
• Tips back: background color of the tips. The default value is YELLOW.
• Tips color: text color of the tips.
• Tips border: border color of the tips.
• Tips font: text font of the tips.
• top margin: In pixels.

Other parameters or the RTree Applet not included in the designer because they are very rarely changed are:

• TREE_ANIMATION_DELAY: time in milliseconds between scenes of the initial animation.
• TREE_TIP_DELAY: This is the number of milliseconds the tree is going to wait before showing the tip of the current node.

See the documentation of the applet to know how to use applets parameters.