|
||||
|
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
3.1 Images A number of separate images can be used in the construction of an eXpand menu. Menu items, highlights, and arrows can be used. The example below shows a simple menu with 2 buttons and identifies the individual images used to create it:   The actual image filenames can be anything you want - you will be able to simply script the relevant eXpand applet parameters with your image filenames. This is pretty easy to do, and we'll explain exactly how to go about this. Image Parameters The applet parameters to identify all the images you wish to use are: ImageTop, ImageItem, ImageHighlight, ImageItemWithArrow, ImageHighlightWithArrow, ImageBase, ImageSubItem and ImageSubItemHighlight. Don't worry if this is a little confusing - we'll go through each of these images step-by-step. So, you may have noticed the example above used just three different images: ImageTop, ImageItem (although there are two menu items in the example, eXpand automatically uses the single ImageItem image to create as many menu items as required) and ImageBase. ImageTop and ImageBase The ImageTop image is optional. If you omit it, eXpand will simply display the menu items without a specific image at the top. Similarly, the ImageBase image is also optional. If omitted, eXpand will not show a specific image at the foot of the menu. Why use ImageTop and ImageBase images? Well, if you want a panel-type menu (similar to the example menus shown on this page), these images provide an easy way to achieve this look rather than just repeating the image for the main menu item. ImageItem The ImageItem image will be automatically displayed for each main menu item you define. You can define up to 10 main menu items (see 3.2 Defining Menus for further information). This image can be replaced by an image with an arrow on it (to indicate sub-menus are available) and highlighted versions. Highlighting Main Menu Items You may want to display a different image when the mouse pointer is positioned over a menu item to emphasize that an action will happen (known as an image rollover). If you wish to do this, you'll need to specify an ImageHighlight image. The example below shows another menu with an ImageHighlight image in operation - the 'Menu #1' menu item has been replaced with the highlighted image:  The ImageHighlight image is optional. If you omit it, eXpand will simply display the original ImageItem image. Sub Menus One of the advantages of using eXpand is that it automatically shows and hides sub-menus depending on where the mouse pointer is, so you have a nice compact menu that dynamically expands when the user moves the mouse pointer over certain areas. So, as well as the main menu images, eXpand also allows a sub-menu image to be displayed through the ImageSubItem and the ImageSubItemHighlight images. The example below shows these two images in operation:  The ImageSubItemHighlight image is optional. If you omit it, eXpand will simply display the original ImageSubItem image. By default, the sub-menu image will be horizontally centered with the main menu item image. You can change this default behaviour by setting a pixel value with the SubXPos parameter. For detailed information on constructing sub-menus, see 3.3 Defining Sub-Menus. Main Menus With Arrows When a menu is displayed with just the images discussed so far, there is no visible way for the user to distinguish between immediate navigation links and menu items with sub-menus beneath them (the sub-items are hidden until the mouse pointer is moved over the relevant menu item). The ImageItemWithArrow and ImageHighlightWithArrow images can be included to be shown instead of ImageItem and ImageHighlight images for the menu items that have sub-items. The following example shows this in operation:  3.2 Defining Menus You can define up to ten main menu items within eXpand. These items are numbered sequentially from 1 through to 10. So, your first menu item will be '1', your second will be '2', and so on. It is important that you understand the numbering sequence as this tends to be the area that catches some people out with unexpected results! For each menu item you wish to add to the eXpand applet, you can define a description, a navigation URL, and a target frame. The parameter name for the menu text for the first menu is Menu_Desc_1. The second menu would have a parameter name of Menu_Desc_2. Similarly, the navigation URL follows the same convention. The parameter name for the navigation URL for the first menu is Menu_Addr_1. The second menu would have a parameter name of Menu_Addr_2. The target frame follows exactly the same convention. The parameter name for the target frame for the first menu is Menu_Frame_1. The second menu would have a parameter name of Menu_Frame_2. This is how the applet parameters would be named (don't worry about the actual parameter values just yet - we'll cover them next):
Menu Text As mentioned, the parameter name for the menu text is Menu_Desc_? (where '?' is the sequence number of the menu). The parameter value defines the text that will be displayed for that menu item. The menu text will be automatically vertically centered by eXpand against the image you specify for the menu item. You can instruct eXpand to horizontally center the text by setting the MainMargin parameter value to "-1". If, however, you wish to left-justify the text you can enter a pixel value instead - say 20 - to vertically align all the main menu item text 20 pixels from the left-hand side of the eXpand applet. The font used to display the menu text can be altered through the FontName, FontSize and FontStyle parameter values. The FontName parameter can have the values 'Dialog', 'DialogInput', 'Monospaced', 'Serif', or 'SansSerif'. By default, SansSerif will be used. The FontStyle parameter can have the following values:
The FontSize parameter value can be in the range 6-48. Choose your font size carefully as too high a setting may make your text larger than the image you've selected for your menu item. You can specify the color of your menu text through the MainColor parameter value. The MainColor value is a hexadecimal number in the range 000000-FFFFFF. This is a fairly standard RGB notation for color values. You can also instruct eXpand to automatically change the menu text color when the mouse pointer moves over a menu item by setting the MainSelectedColor parameter value. For further information on the way color values are represented, take a look at the Color Model information page. Navigation URL The Menu_Addr_? parameter (where '?' is the sequence number of the menu) gives the address of the page to link to when the menu item is clicked upon. It can either be the fully qualified web page address: http://www.wibbleware.com where it is preceded by 'http://', or it can just be a relative address. An example of a relative address would be just 'page.htm' (where it will open up the page of this name from the same folder as the web page that contains the applet). A Quick Note About Popup-Blocker Issues With the advent of Windows XP Service Pack 2, many client PCs now utilise popup-blocker software. Popup-blockers prevent web browsers from opening up new windows programatically. However, this (generally welcome!) preventative action may have a side effect on some Java menus (in fact, this issue is not just exclusive to Java - it impacts ALL navigation techniques, including HTML and JavaScript). If you specify a frame target of "_blank" with a URL link with one of the Wibbleware range of menu applets, this would normally open up the page in a new browser window. However, when popup-blocking is enabled, the new window will not appear! For a new browser window to appear, the user must press the shift key and click on the link at the same time. The good news is there are in fact only a few instances where new browser windows actually NEED to be created. Generally, a new page will be reloaded over the top of the current one. Technically, despite the popup-blocking software, it is perfectly feasible for us to use the applet to launch - say - a new instance of Internet Explorer or Firefox, and then open the linked page within that window. However, we don't feel comfortable with this approach. For example, if a user uses Firefox for Internet browsing on their PC and doesn't want to use Internet Explorer (for security reasons), it would be wrong to launch Internet Explorer on their system without their permission (a technique similar to this is actually used by spyware authors to install software on PCs). So, rather than implement a dangerous workaround to the popup-blocker problem, we feel the best course of action is simply to make our customers aware of these issues. Target Frame You can also instruct eXpand where to open the page after the user has clicked on it. The Menu_Frame_? parameter (where '?' is the sequence number of the menu) performs this task. If you omit the parameter completely or set the value to "_self", the new page will be automatically shown in the same window and frame as the eXpand applet. Using a value of '_blank' will tell eXpand to open the page in a brand new browser window. 3.3 Defining Sub-Menus Sub-menus are defined in a similar fashion to main menus. However, the sequence number of the parent menu item and a sub-menu sequence number must be used to identify each sub-menu. In total, you can define up to 200 sub-menus within your menus. The easiest way to demonstrate this is to take an example. Say we had a menu with two items and wanted to give the give the second menu two sub-menu items: We've seen that the main menu items are defined through parameter names such as Menu_Desc_1 and Menu_Desc_2. Well, to define sub-menus we need to append a further reference to a sub-menu sequence number. These sequence numbers are numbered sequentially from 1 through to 10. So, the first sub-menu for the second main menu would be defined through the parameter name Menu_Desc_2_1. The '2' is the sequence number of the main menu and the '1' is the sequence number of the sub-menu. The second sub-menu would be defined through the parameter name Menu_Desc_2_2. Again, the '2' is the sequence number of the main menu and the following '2' is the sequence number of the sub-menu. Important: When defining sub-menus, you must ensure no navigation URL (the 'Menu_Addr_?' parameter) exists for that particular main menu. If a navigation URL has been defined for the main menu, eXpand will ignore the sub-menus completely and treat the main menu like an immediate link (as if it had no sub-menus). The target frame will also be ignored. An example of the script required to generate sub-menus is shown below (notice there are no Menu_Addr_2 or Menu_Frame_2 parameters defined for the second main menu item):
The sub-menu text will be automatically vertically centered by eXpand against the image you specify for the sub-menu item. You can instruct eXpand to horizontally center the text by setting the SubMargin parameter value to "-1". If, however, you wish to indent the text you can enter a pixel value instead - say 20 - to vertically align all the sub-menu text 20 pixels from the left-hand side of the eXpand applet. The font used to display the sub-menu text can be altered through the SubFontName, SubFontSize and SubFontStyle parameter values. The SubFontName parameter can have the values 'Dialog', 'DialogInput', 'Monospaced', 'Serif', or 'SansSerif'. By default, SansSerif will be used. The SubFontStyle parameter can have the following values:
The SubFontSize parameter value can be in the range 6-48. Choose your font size carefully as too high a setting may make your text larger than the image you've selected for your sub-menu item. You can specify the color of your sub-menu text through the SubColor parameter value. The SubColor value is a hexadecimal number in the range 000000-FFFFFF. This is a fairly standard RGB notation for color values. You can also instruct eXpand to automatically change the sub-menu text color when the mouse pointer moves over a sub-menu item by setting the SubSelectedColor parameter value. For further information on the way color values are represented, take a look at the Color Model information page.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
[Home] [Products] [Downloads] [Purchase] [Support] [Articles] [About] support@wibbleware.com © Wibbleware 2003-2007 Privacy Policy [Java™ Trademark Disclaimer] |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
