Hiermenus Go Forth, I - DHTML Lab | 10

Hiermenus Go Forth, I:
Version 4 - The External Arrays

Adding Another Dimension to the Arrays

Unlike the Version 3 menu arrays, the Version 4 arrays are multi-dimensional. That is, they are composed of elements which are themselves arrays. We are switching to this type of array structure because it lends itself to future expansion while maintaining backward-compatibility.

For example, the first element in any menu array is an array containing "overhead" parameters. The remaining elements are arrays that define menu items. In Version 3, the top-level-menu array had nine tree-specific overhead parameters defined by the first nine array elements (array index 0 to array index 8). The menu item parameters began with element ten (array index 9) and every group of three elements defined a menu item.

If we had cause to add an additional parameter, we would have had to insert an element, probably as element 10 (array index 9) and modify our script to begin item parameter parsing starting with element 11 (array index 10). Worse still, if we needed an extra parameter for each menu item, then we would have groups of four elements per item and more script modifications.

With the two-dimensional array structure, we can easily add new parameters in the future, without affecting the array index of any of the elements. Consequently, our script modifications are limited.

Let's take the Version 3 array structure, which you are all familiar with, and reproduce it in a multi-dimensional array structure. The element index is shown in blue for reference:

one-dimensional

multi(two)-dimensional

arMenu1 = new Array(  0 width,  1 left_position,  2 top_position,  3 font_color,  4 mouseover_font_color,  5 background_color,  6 mouseover_background_color,  7 border_color,  8 separator_color,  9 first_item_display_text, 10 first_item_link_url, 11 first_item_has_child, 12 second_item_display_text, 13 second_item_link_url, 14 second_item_has_child )

HM_Array1 = [  0 [    0 width,    1 left_position,    2 top_position,    3 font_color,    4 mouseover_font_color,    5 background_color,    6 mouseover_background_color,    7 border_color,    8 separator_color    ],  1 [    0 first_item_display_text,    1 first_item_link_url,    2 first_item_has_child    ],  2 [    0 second_item_display_text,    1 second_item_link_url,    2 second_item_has_child    ] ]

Now, let's say that we wanted to create a new tree-specific parameter, tree_is_horizontal, a Boolean that would cause the top-level menu to display with the items aligned horizontally (side-by-side) instead of vertically. Since it is a tree-specific parameter, it should appear before the item-defining parameters.

Furthermore, let's assume that we also want to add an additional parameter to each item, item_permanently_highlighted, which would cause a menu item to always display in the mouseover color scheme. This parameter would be inserted as the fourth item-specific parameter:

one-dimensional

multi(two)-dimensional

arMenu1 = new Array(  0 width,  1 left_position,  2 top_position,  3 font_color,  4 mouseover_font_color,  5 background_color,  6 mouseover_background_color,  7 border_color,  8 separator_color,  9 tree_is_horizontal, 10 first_item_display_text, 11 first_item_link_url, 12 first_item_has_child, 13 first_item_permanently_highlighted 14 second_item_display_text, 15 second_item_link_url, 16 second_item_has_child 17 second_item_permanently_highlighted )

HM_Array1 = [  0 [    0 width,    1 left_position,    2 top_position,    3 font_color,    4 mouseover_font_color,    5 background_color,    6 mouseover_background_color,    7 border_color,    8 separator_color    9 tree_is_horizontal,    ],  1 [    0 first_item_display_text,    1 first_item_link_url,    2 first_item_has_child    3 first_item_permanently_highlighted    ],  2 [    0 second_item_display_text,    1 second_item_link_url,    2 second_item_has_child    3 second_item_permanently_highlighted    ] ]

Compare the arrays above with the corresponding arrays in the earlier table, before we inserted the new elements. With the one-dimensional structure, the element insertion caused all elements after the first insertion to lose their original array index. For example, second_item_has_child had an original index of 14, which with the new elements became 16.

On the other hand, the elements in the multi-dimensional array retained their index. The second_item_has_child element was the third element in the third array (index 2[2]) and did not change position.

With the new structure we can add parameters without having to modify the parts of our script that handle the older parameters. Not to mention the "visual" benefits we'll have when attempting to debug.

HM Version 4, will be introduced with a feature-rich set of array parameters. However, your feedback will certainly lead to even more features. By creating an infrastructure that allows easy modification, we can implement future changes faster and more efficiently. This infrastructure needs to be present in the arrays as well as the script.

Now that we have set the stage, let's go through the new array parameter-elements.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Aug 08, 2000
Revised: Aug 08, 2000

URL: https://www.webreference.com/dhtml/column35/6.html