Using Arrays for Defining the Hierarchical Structure

Here we are defining the content of a layer and its possible relationship with another layer's content.

For each menu/sub-menu, we have to define the items displayed and the various related details for each of them, such as the associated label, the image to be displayed, the URL targeted by the link, the possible associated sub-menu, etc.

The "cleaner" method of doing this is to store the required details in an array variable, creating one line per menu item and one column for each piece of information.

Here is how the array's content for the parent menu could be represented when displayed in a tabular fashion:

Item ID	Associated label (.text)	Associated sub-menu ID (.child)	Associated image (.image)	Targeted URL (.url)
[1]	GoTo a simple page	None	link_dn	bienvenue.htm
[2]	GoTo child1	child1Lyr	folder_closed	None (sub-menu)
[...]	[...]	[...]	[...]	[...]
[11]

As an example, examine line [2]: all the information needed for defining the behaviour of this item is available here:

• This is the second item of the described menu.
  
  
• Its label is "GoTo Child1"
  
  
• The sub-menu contained in the child1Lyr layer will be displayed when the mouse pointer hovers over the item.
  
  
• The folder_closed image will be displayed beside the label.
  
  
• Clicking on the item will have no effect.
  
  

We will have to define an array for each of our menu layers.

We will implement these arrays through the arraySetup section of the choreographer() function, on lines 236-299. For your information, the code snippet shown below (lines 241-253) corresponds to the creation of the table associated with the parent menu:

// Array parameters for the Parent Menu
parentArray = new Array();
parentArray[1] = new arrayObject("GoTo a simple page",null,"link_dn","bienvenue.htm");
parentArray[2] = new arrayObject("GoTo Child1",child1Lyr,"folder_closed",null);
parentArray[3] = new arrayObject("GoTo Child2",child2Lyr,"folder_closed",null);
parentArray[4] = new arrayObject("GoTo Child3",child3Lyr,"folder_closed",null);
parentArray[5] = new arrayObject("GoTo Child4",child4Lyr,"folder_closed",null);
parentArray[6] = new arrayObject("GoTo Child5",child5Lyr,"folder_closed",null);
parentArray[7] = new arrayObject("GoTo Child6",child6Lyr,"folder_closed",null);
parentArray[8] = new arrayObject("GoTo Child7",child7Lyr,"folder_closed",null);
parentArray[9] = new arrayObject("GoTo a Simple Page",null,"link_dn","bienvenue.htm");
parentArray[10] = new arrayObject("line",null,"left",null);
parentArray[11] = new arrayObject("Send an E-Mail", null, "mail_dn","mailto:masterweb@yoursite.com");

Note that we use the arrayObject() function (associated with the new keyword) to add a line to the array. It receives four arguments, each corresponding to a piece of information to be stored.

There will be as many arrays as there are menus and sub-menus. Plus one more, for the button labelled: "Summary - click here".

Is everything clear? So let's generate our code.