Elementos de un sistema de cola. Características

The following explains how menu items from the BOU website menu can be changed. The website menu consists of a main menu which is displayed on every page on the site. Each of these menu items has sub items that are visible when a user hovers over the main menu item. For example, the submenu for “About the Bank” is illustrated below:

Having explained the concept of JSP templates above, it will now be easier to understand how these menu items can be changed. From the site location, “/”, expand the folder /system/modules/ug.or.bou.site/elements.

Expand the “main” folder to see the major jsp templates for the website. There are three templates that require focus: The templates that relate to the menu are 002_head_scripts.jsp and 007_menu_begin.jsp. The template that links to the footer is 014_footer.jsp.

002_head_scripts.jsp: this file contains code that links to the submenu for each of the menu items. The popup effect of the menu is done using javascript. An excerpt of the code for “About the Bank” is below

Referring to the popup menu above, it is clear that each submenu item is added under a particular main menu structure. To add a submenu item to this menu, copy the line to addMenuItem, for example copy the line for “Contact Us” as shown below:

Change the name of the link to “Location Map”

and the location of the URL to point to the .html file that holds the map of BOU, for example. In this case, we assume there is a file called map.html which is to be linked to this menu item.

After the edits that have been made are saved and the JSP template is published, the changes are visible on the website as shown:

007_menu_begin.jsp: This JSP template contains HTML code that generates the main menu.

The code that generates the “About the Bank” section of the menu:

<td colspan="2">

The above code does a couple of things:

1. When the user hovers the mouse over this link, the submenu appears and is generated using javascript, as was explained earlier. The submenu is linked to this main menu item through the mm_menu_0920093914_0 object. If a menu item did not have a submenu, this onMouseOver event would not be required.

(Refer to the code above from the 002_head_script.jsp.)

2. If the user clicks on the “About The Bank” menu item, the webpage “Who we are” will open.

3. The item “About the Bank” is actually an image, and this image file is displayed for the menu item.

4. The image name and the last parameter of MM_showMenu should match, in the example above, both are labeled ‘about’. If the names mismatch, the popup menu will be shown in the wrong location.

To add a main menu item, this code will be repeated for that particular item and the four functions of this specific piece of code mentioned above will have to be changed for the added menu item.

The following is an example of adding a menu item using the HTML editor, Macromedia Dreamweaver.

Copy out the code from the 007_menu_begin.jsp. Open the HTML Editor, create a new HTML file and paste the code into the Code section. In the Design section, the following should be seen:

The grey central part represents an image, but it is not available on the local file system, which is why is appears as such.

Click in the cell below which the menu item should be added as shown above. Select

“Modify->Table->Insert Rows or Columns, and select 2 rows to be added. Two rows are added to account for the new menu item image as well as the dotted line image which takes up another row.

When two empty rows have been added the following is seen.

Copy the image by clicking in Ctrl + selecting a cell containing a menu item, the cell should highlight as shown below:

Copy the image and paste it into the first row that was created

Click here to add menu item

The row should fill up as shown

Click away from the cell and the white spacing will disappear

The properties of the copied image now need to be changed for the new image. Click on the image item that has just been added.

To display the Properties menu, select ‘Modify->Selection Properties’. A panel should be visible with the following displayed:

The four items mentioned above now need to be changed.

1. Edit the value in the box titled ‘Src’, to specify the new image name. The new image needs to be created and added to the elements/template_images folder within the BOU system. This will be explained later. For now, change the image name in the ‘Src’ edit box to

‘test_menu_image.jpg’.

2. Change the value in the box titled ‘Link’ to point to the new menu that will be linked from this menu item, for now use ‘test_menu_link.html’.

3. The value in the edit box ‘Alt’ should also be changed to the name of the menu. This is the value that is seen when the user hovers their mouse over the menu image. Change it to TEST MENU

The image name should be the same as the last parameter of the OnMouseOver function.

Change the image name in the box titled ‘Image’ from links to testimage

Change to

Now the parameter of the OnMouseOver event should be changed, as shown:

Change ‘links’ to ‘testimage’:

Also the window.mm_menu values need to be changed for a new menu. In this case the number _14 is the value corresponding to the last menu item. For the new menu item ‘test menu’, this value should now be incremented to _15.

This _15 will link the submenu to this main menu, as will be shown below.

The dotted line image under the new menu item now needs to be added Press Ctrl + select the small row cell just above the new image that was added:

Copy this image and paste it into the second of the two rows that were added, which is now empty:

This last row should fill up as shown:

None of the properties of this image in the second row need to be changed. Now copy the content that you pasted into the <body> section of the html file in Dreamweaver and paste it back into the 007_menu_begin.jsp template. Take care not to delete the headers that are in the JSP template file.

Save the changes and preview the homepage from within the BOU system. You will need to switch location from ‘/’ to ‘/sites/default/’. The homepage, home.html is in the /bou folder. The menu item should look like this:

After ensuring that the new menu item appears appropriately, the 007_menu_begin.jsp can be published.

Should match image name

Matches image name

A note on image creation of the menu item: This is covered in a different section, but it is important to mention here that image templates for the menu items are stored in the system under main/template_images/png – there are two image templates called menu_template_big.png or menu_template_small.png. These are similar templates and vary in width. Either of these can be used depending on the size of the text to be added.

They can be edited in Macromedia Fireworks and exported as .gif images(Adaptive 128). The image will then have to be uploaded to the elements/template_images folder and published.

Adding the submenu to the new menu item

Now a submenu item needs to be added to the menu item just added. Again, this involves the use of the 002_head_scripts.jsp template.

The menu items in 002_head_scripts.jsp have a format as shown:

When a submenu is to be added to a new menu item, this section needs to be copied and some changes made. We will follow along with the example of the ‘test menu’ item being added after the

‘common links’ menu item.

1.Copy the section beginning with window.mm_menu _14 = new Menu…..

The number 14 is important here because it is the number corresponding to ‘common links’ which is the last menu item on the website.

Notice from the above code, that the menu item with number 13 comes after 14 – the ordering of the submenu items here does not matter, but what matters is that new submenu items added to a new menu should have a new number.

2.Change the numbers in this copied section: In this case, submenu items for the ‘test menu’

added will have a section mm_menu_0920095417_15 that is added. Refer above, where the properties of the new menu item ‘test menu’ added were changed. It was given a number 15, and this number will link it to this section of submenu code.

In the submenu example, a menu item called ‘Test SubMenu One’ has been added to the menu item ‘Test Menu’. It should appear as below:

Creating the corresponding web page for the new submenu

Note: Once the new submenu item has been created, make sure to create the web page that this sub-menu item points on, in the correct folder on the BOU Content Management System. And once the document has been created, make sure to specify the template (the JSP file that is used to display this page) in the "template-elements" property for the new document. This property can either be specified for the whole directory, or for the individual file if it uses a different template from the one specified for the directory.

Actual creation of the different types of web pages is addressed in the documentation for the different kinds of BOU Content Management Users, and can be found in the folders in which the documents are created, within the BOU Content Management System.