 | ||||
|
|
| Expand - Expanding 2-Level Web Navigation Menu
6.1 Uploading Menus After purchasing eXpand, you'll want to implement a menu in your web pages. Before we explain how to do this, we'll discuss a few key concepts. How eXpand Menus Work The eXpand menu is a Java applet. It a pre-compiled component that holds all the programmatic code required to operate your menu. This is held in a file called 'WibbleExpand.class'. When you purchase eXpand, you'll receive a new installation that contains a licensed version of this file. The 'WibbleExpand.class' file needs to be uploaded to your web server. When a visitor views one of your pages, the 'WibbleExpand.class' file on your web server is downloaded and run on their PC (this all happens invisibly to the user - as long as they have Java installed). It uses the parameter information you've provided in your web page script to figure out which images to display, which menu items to list, and where the URL links should point to. The 'WibbleExpand.class' file is located in the 'C:\Program Files\Wibbleware\Expand\' folder on your hard drive. We'd recommend uploading the file into the root web folder on your web server. Other Files Require Uploading You also need to upload all the images used by the menu (specified in the ImageTop, ImageItem, ImageHighlight, ImageItemWithArrow, ImageHighlightWithArrow, ImageBase, ImageSubItem and ImageSubItemHighlight parameters) to your web server. Of course, in addition to all these files, you'll also need to upload the web file you've created containing the applet script. Examples We'll step through a few scenarios and detail where the files could be placed and the effect it has on the web page script. For our examples, we'll assume we're using the 'set5_?.gif' images and that our main web page is called 'main.htm' and a secondary page is called 'secondary.htm'. To keep the focus on specifi elements here, in the script examples we'll only display the <applet> tags, image parameters and menu parameters. Scenario #1 The easiest (but messiest) thing to do is to simply copy all your files up into your public HTML folder on your web server. If you did this, the folder would contain the following: /Public_HTML WibbleExpand.class set5_1.gif set5_2.gif set5_3.gif set5_4.gif set5_5.gif set5_6.gif set5_7.gif set5_8.gif main.htm secondary.htm The 'main.htm' and 'secondary.htm' web files would both contain the following script to invoke the eXpand menu:
As mentioned, this is simple but a little messy. Generally, files are grouped into different folders for ease of maintenance. Scenario #2 Suppose we didn't want our images to be in the root public HTML folder. Instead we wanted to put them in an 'images' folder with all the other images for our site: /Public_HTML WibbleExpand.class main.htm secondary.htm /Public_HTML/images set5_1.gif set5_2.gif set5_3.gif set5_4.gif set5_5.gif set5_6.gif set5_7.gif set5_8.gif This has an effect on the script for the menu. The image parameters need to know where the images are now we've moved them out of the same folder as the Java applet.
Notice the image properties all now have a relative reference to the images folder. Each 'images/set5_?.gif' value tells the applet to look in the images folder for the image. Scenario #3 For our third scenario, imagine that the web pages are also located in different folders. We'll create a 'misc' folder and place the 'secondary.htm' file into it: /Public_HTML WibbleExpand.class main.htm /Public_HTML/misc secondary.htm /Public_HTML/images set5_1.gif set5_2.gif set5_3.gif set5_4.gif set5_5.gif set5_6.gif set5_7.gif set5_8.gif Again, this has an effect on the script for the menu. The main.htm script needs to be changed to reference the 'misc' folder when linking to the 'secondary.htm' page:
However, an extra change now needs to be made to the 'secondary.htm' script. When it tries to invoke the eXpand menu, it is now no longer in the same folder as the 'WibbleExpand.class' file. It needs to use the special 'CODEBASE' applet property to refer to the previous folder to fully specify where the 'WibbleExpand.class' file is. It uses the standard relative addressing value of '../' to step back to the previous folder:
One important thing to notice here is that the menu URLs do not change, even though the 'secondary.htm' file has been moved into another folder. This is because the menu URLs are based on the location of the 'WibbleExpand.class' file, not the web page. 6.2 Case-Sensitivity You should be aware that image, file and URL references are generally case-sensitive on UNIX-based platforms. So, for instance, the URL 'main.htm' would not load a page called 'MAIN.htm'. To complicate matters, Windows does not make this distinction. So, projects that work fine on local drives may suddenly fail when uploaded to your web server. So, always double-check your image, file and URL references carefully!
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| [Home] [Products] [Downloads] [Support] [Articles] [About] support@wibbleware.com © Wibbleware 2003-2009 Privacy Policy [Java™ Trademark Disclaimer] | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
