Notes
Slide Show
Outline
1
Apycom Java Menus and Buttons
  • A tutorial…
2
Introduction
  • Apycom Java Menus and Buttons is a collection of highly-configurable java applets that allows you to create browser-independent drop-down menus, bars, and buttons for your website.  They are small, fast, very easy to use, and free*.
3
Introduction – The Menus
  • Animated Buttons – apMenu and apMenu2
    • Lets you generate appealing menus with impressive mouse-over and color-fade effects.  You can choose between 12 fade animations, configure colors, fonts, sounds, background to achieve an infinite variety of different menu appearances and behaviors. apMenu2 has an additional nice reverse fade-in effect.
    • Examples:
4
Introduction – The Menus
  • Drop-Down Menu – apPopupMenu
    • An extremely powerful drop-down menu solution.  Submenus can pop up over HTML content, frames, flash, and even go over the browser window.  Highly user configurable – you can fully adapt an applet's colors, fonts, image background, icons, sounds, text alignment, separators, etc.  Supports an unlimited number of submenus, JavaScript calls, target frames and 6 different button types.
    • Examples
5
Introduction – The Menus
  • Website buttons – apButtonMenu
    • A fast loading applet that allows you create stunning looking menus and buttons, without the need for separate graphics files. Web developers can change colors, fonts, icons, sounds, background and configure the applet to adopt entirely different appearances. The applet supports JavaScript calls, target frames and 6 different button types.
    • Examples
6
Introduction – The Menus
  • Image Web Buttons – apImageMenu
    • Allows you to create menus of any style you want.  You can use both the 3-state images for each menu item and the combinations of an image, text and tiled background.  The applet supports colors, fonts, text/image alignment, target frames, JavaScript, and sound
    • Examples
7
Introduction – The Menus
  • Navigation Bar Tabs – apTabMenu
    • Provides an obvious and friendly tabbed interface for your site, very familiar to most visitors.  The applet gives you a quantity of tab sorts - from simple border tabs to Windows-like 3D tabs.  You can change colors, fonts, icons, sounds, apply JavaScript calls, use the applet both with frames and w/o frames.
    • Examples
8
Introduction – The Menus
  • Flash menu Buttons – apMagicMenu
    • Allow you to develop really eye-catching menus with a magic floating background. You can create snow, star, rain, bubble effects, flash-like animations, banners and many more with Flash Menu Buttons. The buttons support colors, fonts, tiled image background, target frames, javascript, and sound. They are fast, small, and easy-to-use.
    • Examples
9
Introduction – The Menus
  • Animated Pulse Buttons – apPulseMenu
    • Great to create stunning looking menus with mouseover pulse effect. Animated Pulse Buttons provide 14 amazing throb kinds, allow you to configure colors, fonts, sounds, and background. The buttons are fast, small and very easy-to-use.
    • Examples
10
Introduction – The Menus
  • Pull Down Menu – apChoiceMenu
    • Presents a well-known pop-up menu of choices. The Pull Down Menu can overlap not only HTML contents but also can pop up over form elements, frames, flash, and even go over the browser window. The menu supports fonts, colors, sound, Javascript calls, target frames. Very small and easy-to-use.
    • Examples
11
Introduction – The Menus
  • XP Drop Down Menu – apXPDropDown
    • Bring an XP look-n-feel to your website navigation! This is an extremely powerful drop-down menu solution for your web site. In contrast to other drop down menus available in Web, the apXPDropDown can overlap not only HTML contents but also can pop up over form elements, frames, flash, and even go over the browser window. Fully adopt a menu appearance (such as colors, fonts, image background, icons, sounds, alignment) to fit any XP theme. Supports unlimited number of submenus, javascript calls, target frames and multiple button types
    • Examples
12
Introduction – The Menus
  • XP Web Buttons – apXPButtonMenu
    • Bring an XP look-n-feel to your website navigation! With XP Web Buttons you don't need to create separate graphics files for every mouse event. Simply change the buttons type and color parameter to fit any XP theme. XP Web Buttons are very flexible, allowing you to configure fonts, sounds, icons, background, and alignment. The buttons support javascript calls, target frames, multiple button types, and they are very easy-to-use.
    • Examples
13
Using the Menus
  • The menus are packaged as separate Java “class” files for each menu type
    • apPopupMenu.class apChoiceMenu.class
      apMenu.class apButtonMenu.class
      apImageMenu.class apMagicMenu.class
      apTabMenu.class apMenu2.class
      apPulseMenu.class apXPButtonMenu.class
      apXPDropDown.class
    • Copy the .class files for the menus to a location on the web server where other files can reference them
    • There can be a single copy of the .class files on the server (in an “includes”, “applets”, or similar directory) – use relative or absolute path names to specify the exact location
      • We’ll see this later when dealing with the APPLET tag…
14
Using the Menus
  • The menus are included in an HTML or ASP page using the <APPLET> tag
    • Inserted in the HTML where you want the menu to appear.
      • In a table cell, aligned left/center/right, etc.  Great flexibility!
    • The applet tag parameters configure the menu itself, additional <PARAM> tags provide detail on the menu content.
    • Example (we’ll see the details later)

  • <applet Code="apPopupMenu.class" Width="597" Height="28">
    <param name="Copyright" value="Apycom Software - www.apycom.com">
    <param name="isHorizontal" value="true">
    <param name="buttonType" value="3">
    <param name="systemSubFont" value="true">
    <param name="backPic" value="pix/bkgr.gif">
    <param name="backColor" value="9999ff">
    <param name="fontColor" value="ffffff">
    <param name="font" value="Arial,11,1">
    <param name="menuItems" value="...">
    </applet>
15
The <APPLET> tag
  • The basis for adding a menu to an HTML page.
  • Configured using tag attributes:
    • CODE:  This is the name of the menu class file you’re using (e.g. “apPopupMenu.class”)
    • CODEBASE: when the “.class” file are not in the same directory, the path to the directory where the “.class” file are located. Use a relative path (e.g. “../../menus/” or “different/directory/”) or absolute path (e.g. “http://yoursite.com/menus/” )
    • WIDTH: the size (in pixels) of the menu horizontally.
    • HEIGHT: the size (in pixels) of the menu vertically.
16
The <APPLET> tag
  • You can also add ID and NAME attributes that allow the menu to be referenced using JavaScript and DHTML
    • Example:
      <applet Id=“mnuPop” Name=“mnuPop” Code="apPopupMenu.class" ... >
  • Two other optional tags
    • VIEWASTEXT:  displays the HTML code for the inserted menu rather than a graphical display when using a GUI editor such as Microsoft FrontPage or Visual InterDev
    • MAYSCRIPT:  allows you to use JavaScript routines as the action of a menu selection rather than just a hyperlink to another page.  See the “JavaScript” section of this tutorial.
17
The <PARAM> tag
  • Between the <APPLET> and </APPLET> tags are multiple <PARAM> tags that specify the content and formatting for the menu
    • Note that there is no closing </PARAM> tag…
  • Each <PARAM> tag has two attributes
    • NAME:  identifies the parameter being specified
    • VALUE:  identifies the value to which the parameter is being set
  • Example:
    <param name=“backColor” value=“FFFF00”>
18
Menu Items
  • You specify the content of the menu using a single (sometimes huge) string in the menuItems parameter.
    • Each menu item is enclosed in curly braces { … }
    • The overall “menuItems” string is comprised of one or more of the { … } items
  • Example
    <param name=“menuItems”
           value=“{menu item 1 stuff goes here}
                  {menu item 2 stuff goes here}
                   ...
                  {menu item n stuff goes here}”>
19
Menu Items
  • Alternately, you can place all the menu item information into a text file and specify the path to this file as the menuItemsFile parameter
    • Uses the same curly brace format, only the information is in a file rather than a string passed via a parameter
    • Useful for large menus
    • If menuItemsFile is specified, the menuItems parameter is ignored
  • Example
    <param name=“menuItemsFile” value=“../menus/itemFile1.txt”>
20
Menu Items
  • The format of each menu item varies based on the menu type being used
  • Now we’re going to jump into a series of slides for each of the different menus.  We’ll see…
    • How to specify the menu items for each menu
    • How to supply formatting for each menu
    • Some examples
21
apMenu and apMenu2
22
apMenu – Menu Items
  • Each apMenu item is comprised of three elements, separated by a comma
    • Item Text – the text you want to appear in the menu item
    • Item Link – the hyperlink you want triggered when the menu item is selected
    • Target window – the window where you want the hyperlinked page to appear
      • “_blank” : opens the hyperlink in a new window
      • “_self” : opens the hyperlink in the same window as the applet
      • “_parent” : opens the hyperlink in the parent window to the current one
      • “_ top” : opens the hyperlink using the entire browser (kills any frames)
      • “winName” : opens the hyperlink in the window (frame) called “winName”
      • “_” : allows you to disable/inactivate (“stipple”) the menu item
23
apMenu – Menu Items
  • Example
     <param name=“menuItems”
           value=“{Home,home.htm,_self}
                  {Product List,products.htm,sideFrame}
                  {Help Menu,help.htm,sideFrame}
                  {Contact Us,contact.htm,_blank}
                  {Our New WebSite!,http://ournewsite.com,_top}”>
  • What it’ll do…
    • Home will open home.htm in the same window as the menu
    • Product List will open products.htm in the frame called “sideFrame”, presumable a sidebar or a contents-style frame
    • Help Menu will open help.htm in the same “sideFrame” frame
    • Contact Us will open contact.htm in a new window
    • Our New Website! will open the specified URL in the same browser, breaking out of any existing frameset
24
apMenu – Fade Out
  • The apMenu provides a “fade out” capability that gives a cool effect to menu items when they go from being selected to non-selected.
  • There are three settings to the “fade out”
    • fadeType – the fade effect to use (see list on next slide)
    • fadeSteps – the number of steps the fade effect is broken out into; the higher the number, the longer the fade will take but the more “smoother” it will appear
    • fadeDelay – the number of milliseconds between each fade step; set a smaller delay for larger fadeSteps settings
25
apMenu – Fade Out
  • fadeType options
    •   0 – simple
    •   1 – from center to left and right
    •   2 – from center up and down
    •   3 – halves of item to left and right
    •   4 – halves of item up and down
    •   5 – to center
    •   6 – to left
    •   7 – to right
    •   8 – to center vertically
    •   9 – to center horizontally
    • 10 – vertical waves
    • 11 – horizontal waves to right
    • 12 – horizontal waves to left
26
apButtonMenu
27
apButtonMenu – Menu Items
  • Each apButtonMenu item is comprised of four elements, separated by a comma
    • Item Text – the text you want to appear in the menu item
    • Item Link – the hyperlink you want triggered when the menu item is selected
    • Target window – the window where you want the hyperlinked page to appear
      • Same options as the apMenu target
    • Item Icon – the image file you want to appear in the button
28
apButtonMenu – Menu Items
  • Example
     <param name=“menuItems”
          value=“{Home,home.htm,_self,images/home.gif}
                 {Product,products.htm,_self,images/prods.gif}
                 {Help,help.htm,_self,images/help.gif}
                 {Contact Us,contact.htm,_blank,images/cont.gif}”>
  • Using images
    • You can use relative paths to the image locations, meaning you can reference images anywhere on your website
    • Try to keep the images about the same dimensions, otherwise the menu can end up looking skewed
29
apButtonMenu - Formatting
  • Button style
    • Use the buttonType parameter to define how the buttons show in the menu
    • The following values are allowed:
      • 0 : no buttons
      • 1 : flat buttons with a mouse over effect
      • 2 : flat buttons without a mouse over effect
      • 3 : fat buttons with a mouse over effect
      • 4 : fat buttons without a mouse over effect
      • 5 : flat buttons with the fat button mouse over effect
    • Example
      <param name=“buttonType” value=“2”>
30
apButtonMenu - Formatting
  • 3-D effect
    • You can apply a 3-dimensional effect to the entire menu using the 3DBorder parameter, setting it to “true”
  • Pressed Item
    • The apButtonMenu allows one of the menu items to be selected by default, or to remain “pressed” after it is selected.
    • Use the pressedItem parameter with one of the following values:
      • -1 : disables the “pressed” mode, selected items revert to normal
      •  0 : no item selected by default, but a selected item stays “pressed”
      • 1, 2, 3, … : number of menu item to select by default
    • Example
      <param name=“pressedItem” value=“4”>
31
apImageMenu
32
apImageMenu– Menu Items
  • Each apImageMenu item is comprised of six elements, separated by a comma
    • Item Text – the text you want to appear in the menu item
    • Item Link – the hyperlink you want triggered when the menu item is selected
    • Target window – the window where you want the hyperlinked page to appear
      • Same options as the apMenu target
    • Normal state image – the image file that appears for menu items when they are inactive (not clicked or moused-over)
    • Mouse over image – the image file that appears when the mouse hovers over a menu item
    • Click image – the image file that appears when the mouse is clicked in a menu item.
33
apImageMenu– Menu Items
  • Notes
    • If the Click image isn’t specified, the Mouse over image is used
    • If Normal state or Mouse over images aren’t specified, the image defined as by the defaultImage parameter is used
  • Example
     <param name=“menuItems”
      value=“{Home,home.htm,_self,images/homeNorm.gif,
                                  images/homeMouse.gif,
                                  images/homeClick.gif}
             {Product,products.htm,_self,images/prodNorm.gif,
                                         images/prodMouse.gif,
                                         images/prodClick.gif}
             {Contact Us,contact.htm,_self,images/contNorm.gif,
                                           images/contMouse.gif,
                                           images/contClick.gif}”>
34
apImageMenu - Formatting
  • Default image
    • Use the defaultImage parameter to specify an image that will be used by default whenever the appropriate images aren’t defined in the menu items
    • The format is a single string, with the file names for the three default images (inactive image, mouse-over image, and click image) separated by commas
    • Example
      <param name=“defaultImage”
             value=“images/defaultInact.gif,
                    images/defaultMOver.gif,
                    images/defaultClick.gif”>
35
apPopupMenu
36
apPopupMenu– Menu Items
  • The apButtonMenu menuItems parameter is more complex than the other menus
    • This is because they must define a menu hierarchy of main menu entries and subentries instead of just a single level of items
  • Each menu item is comprised of four elements, separated by a comma
    • Item Text – the text you want to appear in the menu item
    • Item Link – the hyperlink you want triggered when the menu item is selected
    • Target window – the window where you want the hyperlinked page to appear
      • Same options as the apMenu target
    • Item Icon – the image file you want to appear in the button
37
apPopupMenu– Menu Items
  • However, items will differ depending on whether or not they have subitems.
    • For items that do not have subitems, all four elements must be specified.  That way, the menu item will have an action when selected.
    • For items that have subitems, only the Item Text is specified.  This basically makes the item a placeholder for the subitems.  Selecting the parent item performs no action – only the subitems perform actions.
    • When defining subitems beneath a parent item, the Item Text must begin with one or more vertical bar characters (|) indicating the level of indent for the menu item.
38
apPopupMenu– Menu Items
  • Example
     <param name=“menuItems”
      value=“{Apycom,http://www.apycom.com,_blank,pix/home.gif}
             {-}
             {apMenus,pix/progs.gif}
             {|apMenu,_,_}
             {|apButtonMenu,_,_}
             {|apPopupMenu}
             {||Examples}
             {|||Example #1,testlink.html,_self}
             {|||Example #2,testlink.html,_self}
             {|||Example #3,testlink.html,_self}
             {|||Example #4,testlink.html,_self}
             {|||Example #5,testlink.html,_self}
             {||Main parameters}
             {|||backColor,testlink.html,_self}
             {|||menuItems,testlink.html,_self}
             {|apImageMenu,_,_}
             {Parameters,testlink.html,_self,pix/setup.gif}
             {Examples,testlink.html,_self,pix/help.gif}
             {Download,http://www.apycom.com/download/apmenu.zip,_,pix/run.gif}
             {-}
             {Contact,mailto:support@apycom.com,_self,pix/mail.gif}”>
39
apPopupMenu - Formatting
  • 3-D effect
    • You can apply a 3-dimensional effect to the entire menu using the 3DBorder parameter, setting it to “true”
  • Pressed Item
    • The apButtonMenu allows one of the menu items to be selected by default, or to remain “pressed” after it is selected.
    • Use the pressedItem parameter with one of the following values:
      • -1 : disables the “pressed” mode, selected items revert to normal
      •  0 : no item selected by default, but a selected item stays “pressed”
      • 1, 2, 3, … : number of menu item to select by default
    • Example
      <param name=“pressedItem” value=“4”>
40
apPopupMenu - Formatting
  • Button style
    • Use the buttonType parameter to define how the buttons show in the menu
    • The following values are allowed:
      • 0 : no buttons
      • 1 : flat buttons with a mouse over effect
      • 2 : flat buttons without a mouse over effect
      • 3 : fat buttons with a mouse over effect
      • 4 : fat buttons without a mouse over effect
      • 5 : flat buttons with the fat button mouse over effect
    • Example
      <param name=“buttonType” value=“2”>
41
apPopupMenu - Formatting
  • Menu appearance
    • Enables you to configure the appearance of the popup menus
    • solidArrows parameter
      • Specify “true” for solid arrows on parent menu items; specify “false” for 3D effect arrows on parent menu items
      • Default is “false” (3D arrows)
    • popupOver parameter
      • Specify “true” for the submenus to appear when you mouse-over the parent menu item; specify “false” to require the parent item to be clicked for the submenu to appear
      • Default is “false” (menu click shows submenu)
42
apPopupMenu - Formatting
  • Menu appearance (continued)
    • showArrows parameter
      • Specify “true” to show arrows on parent menu items in the top-level menu; specify “false” to hide all top-level submenu arrows
      • Default is “true” (arrows show in top-level)
    • systemSubFont parameter
      • Specify “true” to use the default system font as the font for all submenus; specify “false” to set the font for all submenus the same as the main menu (i.e., using the font parameter settings)
      • Default is “true” (uses system font as submenu font)
43
apTabMenu
44
apTabMenu– Menu Items
  • Each apTabMenu item is comprised of four elements, separated by a comma
    • Item Text – the text you want to appear in the menu item
    • Item Link – the hyperlink you want triggered when the menu item is selected
    • Target window – the window where you want the hyperlinked page to appear
      • Same options as the apMenu target
    • Item Icon – the image file you want to appear in the button
45
apTabMenu– Menu Items
  • Example
     <param name=“menuItems”
          value=“{Home,home.htm,_self,images/home.gif}
                 {Product,products.htm,_self,images/prods.gif}
                 {Help,help.htm,_self,images/help.gif}
                 {Contact Us,contact.htm,_blank,images/cont.gif}”>
46
apTabMenu - Formatting
  • Tab style
    • The tabType parameter specifies how the tabs in the tab strip are displayed
    • One of the following settings:
      • 0 : 3D tabs  (default)
      • 1 : border tabs with chopped corners
      • 2 : tabs with bold borders
      • 3 : tabs with thin borders
      • 4 : tabs with thin borders and shadows
    • Example
      <param name=“tabType” value=“2”>
47
apTabMenu - Formatting
  • Additional colors
    • In addition to the standard colors (see Common Parameters later in the slides), there are three more colors for apTabMenu
    • tabColor parameter
      • The color for tabs in their normal (unselected) state
    • tabHighColor parameter
      • The color for tabs when they are moused-over
    • borderColor parameter
      • The color for the borders around each tab
      • Not applicable when the tabType is 0
    • Example
           <param name=“tabColor” value=“C0C0C0”>
           <param name=“tabHighColor” value=“0000FF”>
48
apTabMenu - Formatting
  • Tab strip border
    • You can display a border at the base of the tab strip using the bottomLine parameter
      • Set it to “true” to display a border; “false” to omit a border
  • Pressed Item
    • The apTabMenu allows one of the menu items to be selected by default, or to remain “pressed” after it is selected.
    • Use the pressedItem parameter with one of the following values:
      • -1 : disables the “pressed” mode, selected items revert to normal
      •  0 : no item selected by default, but a selected item stays “pressed”
      • 1, 2, 3, … : number of menu item to select by default
    • Example
      <param name=“pressedItem” value=“6”>
49
apPulseMenu
50
apPulseMenu – Menu Items
  • Each apPulseMenu item is comprised of three elements, separated by a comma
    • Item Text – the text you want to appear in the menu item
    • Item Link – the hyperlink you want triggered when the menu item is selected
    • Target window – the window where you want the hyperlinked page to appear
      • Same options as the apMenu target
51
apPulseMenu – Menu Items
  • Example
     <param name=“menuItems”
           value=“{Home,home.htm,_self}
                  {Product List,products.htm,sideFrame}
                  {Help Menu,help.htm,sideFrame}
                  {Contact Us,contact.htm,_blank}
                  {Our New WebSite!,http://ournewsite.com,_top}”>
  • What it’ll do…
    • Home will open home.htm in the same window as the menu
    • Product List will open products.htm in the frame called “sideFrame”, presumable a sidebar or a contents-style frame
    • Help Menu will open help.htm in the same “sideFrame” frame
    • Contact Us will open contact.htm in a new window
    • Our New Website! will open the specified URL in the same browser, breaking out of any existing frameset
52
apPulseMenu – Fade Options
  • fadeType options
    • 0 –simple
    • 1 – from center to left and right
    • 2 – from left and right to center
    • 3 – from center up and down
    • 4 – to center
    • 5 – from left to right
    • 6 – from right to left
    • 7 – halfs move horizontally
    • 8 – halfs to right
    • 9 – to center horizontally
    • 10 – to center vertically
    • 11 – to left
    • 12 – to right
    • 13 – to center
  • The fadeDelay and fadeSteps provide further means of configuring the pulse/fade effect of this menu.
53
apMagicMenu
54
apMagicMenu – Menu Items
  • Each apMagicMenu item is comprised of three elements, separated by a comma
    • Item Text – the text you want to appear in the menu item
    • Item Link – the hyperlink you want triggered when the menu item is selected
    • Target window – the window where you want the hyperlinked page to appear
      • Same options as the apMenu target
55
apMagicMenu – Menu Items
  • Example
     <param name=“menuItems”
           value=“{Home,home.htm,_self}
                  {Product List,products.htm,sideFrame}
                  {Help Menu,help.htm,sideFrame}
                  {Contact Us,contact.htm,_blank}
                  {Our New WebSite!,http://ournewsite.com,_top}”>
  • What it’ll do…
    • Home will open home.htm in the same window as the menu
    • Product List will open products.htm in the frame called “sideFrame”, presumable a sidebar or a contents-style frame
    • Help Menu will open help.htm in the same “sideFrame” frame
    • Contact Us will open contact.htm in a new window
    • Our New Website! will open the specified URL in the same browser, breaking out of any existing frameset
56
apMagicMenu – Fade Options
  • fadeType options
    • 0 – the background flows to left and right, up and down
    • 1 – to left and right
    • 2 – up and down
    • 3 – to right
    • 4 – to left
    • 5 – down
    • 6 – up
  • The fadeDelay and fadeSteps provide further means of configuring the pulse/fade effect of this menu.
57
apMagicMenu – “Magic” Options
  • The applet also provides a number of options for the “magic” animation in the background of the menu.  These include
    • The backWords parameter is a string containing the words to be displayed in the background of the menu.  These words must be  separated by comma.  If this parameter is not defined, the words from item labels will be used as background words.
    • The maxWords parameter sets the maximum number of words that will be simultaneously visible in the background
    • The maxbfsize parameter sets the maximum font size of the background words.
    • The brightness parameter sets the brightness of the background words.  1 is minimum, 6 is maximum.
58
apChoiceMenu
59
apChoiceMenu – Menu Items
  • Each apChoiceMenu item is comprised of four elements, separated by a comma
    • Item Text – the text you want to appear in the menu item
    • Item Link – the hyperlink you want triggered when the menu item is selected
    • Target window – the window where you want the hyperlinked page to appear
      • Same options as the apMenu target
    • Item Icon – the image file you want to appear in the button
60
apChoiceMenu – Menu Items
  • Example
     <param name=“menuItems”
          value=“{Apycom Software,http://www.apycom.com,_self}
                 {-,_,_}
                 {Test link #1,testlink.html,_self}
                 {Test link #2,testlink.html,_self}
                 {Test link #3,testlink.html,_self}
                 {-,_,_}
                 {Contact Us,mailto:support@apycom.com,_self}”>
  • Using images
    • You can use relative paths to the image locations, meaning you can reference images anywhere on your website
    • Try to keep the images about the same dimensions, otherwise the menu can end up looking skewed
61
apXPDropDown
62
apXPDropDown– Menu Items
  • Like the apButtonMenu, the menuItems parameter for its XP equivalent, the apXPDropDown is more complex than the others
    • This is because they must define a menu hierarchy of main menu entries and subentries instead of just a single level of items
  • Each menu item is comprised of four elements, separated by a comma
    • Item Text – the text you want to appear in the menu item
    • Item Link – the hyperlink you want triggered when the menu item is selected
    • Target window – the window where you want the hyperlinked page to appear
      • Same options as the apMenu target
    • Item Icon – the image file you want to appear in the button
63
apXPDropDown – Menu Items
  • However, items will differ depending on whether or not they have subitems.
    • For items that do not have subitems, all four elements must be specified.  That way, the menu item will have an action when selected.
    • For items that have subitems, only the Item Text is specified.  This basically makes the item a placeholder for the subitems.  Selecting the parent item performs no action – only the subitems perform actions.
    • When defining subitems beneath a parent item, the Item Text must begin with one or more vertical bar characters (|) indicating the level of indent for the menu item.
64
apXPDropDown– Menu Items
  • Example
     <param name=“menuItems”
      value=“{Apycom,testlink.html,_self,pix/new1-05.gif}
             {_}
             {|Apycom Home,http://www.apycom.com,_blank}
             {|-}
             {|Java Menus}
             {||apPulseMenu}
             {|||Demos,testlink.html,_self}
             {|||Parameters,testlink.html,_self}
             {||apXPDropDown}
             {|||Demos,testlink.html,_self}
             {|||Parameters,testlink.html,_self}
             {||apXPButtonMenu}
             {|||Demos,testlink.html,_self}
             {|||Parameters,testlink.html,_self}
             {||apMagicMenu}
             {|||Demos,testlink.html,_self}
             {|||Parameters,testlink.html,_self}
             {|Examples,testlink.html,_self}
             {|FAQ,testlink.html,_self}
             {|Javascript tips,testlink.html,_self}
             {|Purchase,http://www.apycom.com/apmenu/order.html,_self}
             {|Downloads,testlink.html,_self}
             {|-}
             {|Contact,mailto:support@apycom.com,_self}
             {-}
             {Java Menus,pix/new4-0985.gif}
             {|apPopupMenu}
             {||Demos,testlink.html,_self}
             {||Parameters,testlink.html,_self} ……”>
65
apXPDropDown - Formatting
  • 3-D background
    • You can apply a 3-dimensional background to the entire menu using the 3DBackground parameter, setting it to a filename.  Note this is in addition to the backPic parameter .
  • Pressed Item
    • The apXPDropDown menu supports the pressedItem parameter  just like the apPopupMenu.
  • Menu appearance
    • The solidArrows, popupOver, showArrows, and systemSubFont parameter enable you to configure the appearance of the popup menus.  See apPopupMenu for details.
66
apXPDropDown - Formatting
  • Button style
    • Use the buttonType parameter to define how the buttons show in the menu
    • The following values are allowed:
      • 0 - blue style XP theme buttons
      • 1 - blue style XP theme buttons on mouseover only
      • 2 - silver style XP theme buttons
      • 3 - silver style XP theme buttons on mouseover only
    • Example
      <param name=“buttonType” value=“2”>
67
apXPButtonMenu
68
apXPButtonMenu – Menu Items
  • Each apXPButtonMenu item is comprised of four elements, separated by a comma
    • Item Text – the text you want to appear in the menu item
    • Item Link – the hyperlink you want triggered when the menu item is selected
    • Target window – the window where you want the hyperlinked page to appear
      • Same options as the apMenu target
    • Item Icon – the image file you want to appear in the button
69
apXPButtonMenu – Menu Items
  • Example
     <param name=“menuItems”
          value=“{-}
                 {Apycom,testlink.html,_self,pix/new1-05.gif}
                 {Java menus,testlink.html,_self,pix/new1-07.gif}
                 {Parameters,testlink.html,_self,pix/new1-11.gif}
                 {Download,testlink.html,_self,pix/new2-12.gif}
                 {-}
                 {Order,order.html,_blank,pix/new1-10.gif}
                 {Links,testlink.html,_self,pix/new4-054.gif}
                 {-}”>
  • Using images
    • You can use relative paths to the image locations, meaning you can reference images anywhere on your website
    • Try to keep the images about the same dimensions, otherwise the menu can end up looking skewed
70
apXPButtonMenu - Formatting
  • Button style
    • Use the buttonType parameter to define how the buttons show in the menu
    • The following values are allowed:
      • 0 - blue style XP theme buttons
      • 1 - blue style XP theme buttons on mouse-over only
      • 2 - silver style XP theme buttons
      • 3 - silver style XP theme buttons on mouse-over only
    • Example
      <param name=“buttonType” value=“2”>
71
apXPButtonMenu - Formatting
  • 3-D background
    • You can apply a 3-dimensional background to the entire menu using the 3DBackground parameter, setting it to a filename.
  • Pressed Item
    • The apXPButtonMenu allows one of the menu items to be selected by default, or to remain “pressed” after it is selected.  This is just like the apButtonMenu.
72
Common Parameters
  • There are some other applet parameters that are common to all of the menus…
73
Common Parameters
  • Colors and backgrounds
    • Specify the colors and/or background image used in the menu
    • Provide six-digit HEX values (do not include the # sign)
      • The named colors (i.e. “black”, “red”) do not work
    • backColor parameter
      • The background color for each of the menu items
    • backHighColor parameter
      • The background color for the menu item that is currently selected
      • Not available for apTabMenu
    • fontColor parameter
      • The color of the font for each of the menu items
    • fontHighColor parameter
      • The color of the font for the menu item that is currently selected
74
Common Parameters
  • Colors and backgrounds (continued)
    • shadowColor parameter
      • Allows a shadow effect on the menu item text; specifies the color of the shadow
      • Not available for apMenu
    • shadowHighColor parameter
      • Specifies the color of the text shadow when the item is moused-over
      • Not available for apMenu
    • backPic parameter
      • The image file to display as the background for each menu item
75
Common Parameters
  • Colors and backgrounds (continued)
    • Default colors
76
Common Parameters
  • Fonts
    • Use the Font parameter to specify the font face, size, and style for the font used to display each menu item
      • One string, with the face, size, and style separated by commas
      • Style values:  0 – plain, 1 – bold, 2 – italic, 3 – bold italic
      • Default is “Arial,12,0”
    • Example
      <param name=“font” value=“Times New Roman,12,2”>
  • Text alignment
    • Use the alignText parameter to aligned the text labels to the left, center, or right within each menu item
      • Default is “left”
    • Example
      <param name=“alignText” value=“right”>
77
Common Parameters
  • Menu direction
    • Use the isHorizontal parameter to set either a horizontal or vertical menu configuration
      • Set to “true” for horizontal or “false” for vertical
      • Default is “false” (vertical)
      • Not applicable to the apTabMenu
    • Be careful!  You’ll need to tweak the HEIGHT and WIDTH attributes of the <APPLET> tag depending on what direction of menu you use
78
Common Parameters
  • The menus allows you to set what is displayed in the browser’s status bar
    • status parameter
      • Specify what gets displayed in the status bar, either:
        • “text” : displays the text of the menu item
        • “link” : displays the hyperlink for the menu item  (default)
    • statusString parameter
      • Provides a default string for displaying in the status bar
    • Example
      <param name=“status” value=“text”>
      <param name=“statusString” value=“Hello there!”>
79
Common Parameters
  • Sounds
    • You can play a sound when a menu item is moused-over or when it is clicked
    • clickSound parameter
      • Specify the sound file to play when an item is moused-over
    • overSound parameter
      • Specify the sound file to play when an item is clicked
    • The sound file format must be an “.au” file
    • Example
      <param name=“clickSound” value=“../sounds/click.au”>
      <param name=“overSound” value=“../sounds/mouseover.au”>
80
Common Parameters
  • Miscellaneous stuff
    • Copyright
      • You must specify the Apycom copyright as a parameter
      • Always include the following
            <param name="Copyright"
                   value="Apycom Software - www.apycom.com">
    • Registration key
      • Providing a registration key using the key parameter will eliminate the “Free menu applets at www.apycom.com” message that displays in the browser’s status bar
      • Example
        <param name=“key” value=“abcdefg12345”>
    • loadingString parameter
      • Text to display as the applet is loading (default is “Loading…”)
      • Not available for apTabMenu
81
Common Parameters
  • Miscellaneous stuff (continued)
    • The delimiter parameter lets you re-define the character used to separate the elements within a menu item
      • Normally this is a comma, but if you wish to use commas in your menu item names, that would pose a problem
      • You can use any character as the delimiter, but then it cannot appear in any menu item names
      • A good one to use is the tilde (~)
      • Example
             <param name=“delimiter” value=“~”>
    • The encoding parameter only applies to the apPopupMenu and the apXPDropDown.  It sets the encoding character set used by the applet.  See the Apycom web site for details.
82
Parameter Summary
83
Extras – Menu Item entries
  • When defining the Item Text elements in menu items, there are some special characters/settings you can use
    • Use the backslash (\) character to word-wrap and begin a new line.  This allows you make multi-line buttons.
    • Use a dash character between curly braces – {-} – to insert a separator line between menu items
      • For apPopupMenu, be sure to precede the dash with the proper number of vertical bars when inserting separators in submenus
      • For example, {|-} for 1st level submenu, {|||-} for 3rd level submenu
    • Use an underscore (_) character in place of an item text to create a blank button
84
Extras - Examples
85
Using JavaScript
  • So far, we’ve only seen the ability for a menu selection to launch another hyperlink
  • What if we want the menu selection to do something else?  How about…
    • Validate a form entry?
    • Take specific action based on a form selection?
    • Perform computations?
  • Can we do this?  Of course!  The menus support JavaScript as the Item Link within each menu item.
    • Let’s see how this works…
86
Using JavaScript
  • Executing a JavaScript action when a menu selection is made is either a three or a four-step process, depending on how complex the action needs to be.
  • First, for any menu applet that you want to use JavaScript with, you must add the MAYSCRIPT attribute to the <APPLET> tag
    • Without this, the JavaScript just won’t run
    • Example
      <applet Code="apPopupMenu.class" Width="597"
              Height="28" MAYSCRIPT>
      <param name="Copyright" value="Apycom Software - www.apycom.com">
      ...
      <param name="menuItems" value="...">
      </applet>
87
Using JavaScript
  • The next step is to modify how the Item Links are entered in the menu items.
    • Instead of entering a hyperlink as the Item Link you specify a JavaScript routine to run
    • These routines are numbered sequentially starting with 1 and are specified as the Item Link in the format “javascript:x” where x is the routine sequence number
    • You also specify the Link Target as “_” because the JavaScript can’t be run in a specific window
    • Example
       <param name=“menuItems”
            value=“{Link One,javascript:1,_}
                   {Link Two,javascript:2,_}
                   {Link Three,javascript:3,_}
                   {Link Four,javascript:4,_}”>
88
Using JavaScript
  • So far you’ve told the menu items what routine to run, now you need to define the JavaScript routines
    • This is where the complexity factor comes into play
    • The routines are defined as <PARAM> tags, with the NAME set to the name of the JavaScript routine (e.g. “javascript:1”) and the VALUE set to the actual JavaScript command to execute
    • Example
      <param name=“javascript:1” value=“alert(‘You clicked link 1’)”>
      <param name=“javascript:2” value=“alert(‘You clicked link 2’)”>
      <param name=“menuItems” value=“{Link One,javascript:1,_}
                                     {Link Two,javascript:2,_}”>
    • Obviously this limits you to what you can include in the value
      • One or two lines of JavaScript is about it, otherwise it becomes a kludge
      • And what if you need to use variables, pass parameters, etc?
89
Using JavaScript
  • Well, why not just create your own JavaScript routine and call that from the menu?
    • Your JavaScript routine is located anywhere in the code
    • Call your routine as the VALUE from one of the <PARAM> tags
    • Example
       
      <SCRIPT Language="JavaScript">
      function open_win(inFile)
      { if (confirm('Open a new window?') == true)
        { open(inFile,'window','scrollbars,width=680,height=600') }
      }
      </SCRIPT>

      <param name="javascript:1" value="open_win('index.html')">

      <param name="menuItems" value="{Open window,javascript:1,_}">
90
Dynamic Menu Changing
  • The applets have some public function that allow you to modify the menu "on fly" without the page reloading and refreshing
  • The following public function are available
    • setPressedItem(itemNumber)
      • Available for apPopupMenu, apButtonMenu, and apTabMenu
      • Sets a new highlighted/pressed item
      • Example: setPressedItem(3)
    • changeItem(itemIndex,newText,newLink,newTarget)
      • Changes an menu item’s text, link, and/or target
      • Example
        changeItem('3_1_9','Home','http://www.apycom.com','_self')
    • Note: when determining the itemNumber or itemIndex values, you must count any separators that may be in your menu structure.
91
Dynamic Menu Changing
  • How to call these functions?
    • Add the MAYSCRIPT attribute to the applet tag
    • Name an applet instance by adding NAME attribute, such as
      <applet name=app1 code=apPopupMenu.class
              Width=125 Height=156 MAYSCRIPT>
      .....
      </applet>
    • Then call the function via JavaScript, such as:
      <a href="javascript:document.app1.changeItem('3_2','Text',
                          'test.html','_blank')">Click here!</a>
92
THE END
  • For more information…
  • http://www.apycom.com