 GhostWire Menu - Usage
Using the GhostWire Menu component
Just drag and drop an instance of the GhostWire Menu from the components panel onto the stage. Edit the component parameters of the instance to suit your requirements. If you wish to create a PullDown menu, it is suggested that you use the Menu(PullDown) version. For best results, it is also recommended that you add the following actionscripts to your application:
Stage.scaleMode = "noScale";
Stage.align = "TL";
This is to ensure that the component is able to compute the correct positions of its submenus.
---
How do I populate the component with an XML file?
During authoring time, you can specify the XML file to use in the component parameter 'xmlPath'. During runtime, you can use the loadXML(xmlPath) method to load and parse an XML file. The XML file should look like the example used on the website:
(remember to view source before copying, or use "save target as" to save the file)
http://ghostwire.com/swf/menu_en.xml
Note: You can also use your own XML structure, but you will need to do your own parsing and feed the array of objects to the setDataProvider(dataArray) method.
---
How do I populate the component with the setDataProvider method?
The setDataProvider method takes in a single parameter - an array containing objects with properties defining the menu items. Each menu item is defined by an object with the following properties:
label
A string specifying the text that should appear on the item
data
Specifying the data to be associated with the item. If undefined, the data will depend on the label property at the time of query.
type
Optional. If undefined, the item is a normal menu item. Alternatively, the item may also be of the type 'radio' (radiobutton), 'check' (checkbox), or 'separator'. If the item is a separator, you can leave all other properties undefined.
icon
Optional. Specifying the linkage identifier of the symbol to use as an icon for the item. Items of the 'radio' or 'check' types cannot have icons.
disabled
Optional. A boolean specifying whether the item is disabled or not.
selected
Optional. A boolean specifying whether the item is selected or not (for 'radio' and 'check' types).
groupName
Only for 'radio' type. A string specifying the group that the radiobutton should belong to.
childs
Optional. An array of objects defining the menu items to be nested as a submenu of this item.
callback
Optional. A string specifying the function to call when the item is selected. If defined, this callback function will supercede the 'action' parameter of the component. The callback function must be defined at the same level as the component instance.
---
How do I create custom reactions when a menu item has been selected?
Please set the 'action' property to 'Event'. The component has an event handler called 'onSelect'. You use this to create custom reactions to user interactions with the component. Example:
myMenu.onSelect = function(data)
{
// data is the value associated with the menu item just selected
// handle data here
}
Alternatively, you can also set callback functions for each individual item. If a menu item has a 'callback' property defined, the callback function (which must be defined at the same level as the component instance) will be called with the 'data' property of the item passed as the parameter.
---
How do I use checkbox menu items?
A menu item is a checkbox item if its 'type' property is set to 'check'. A 'check' icon will appear next to the label if the item is selected. It is recommended that you call the getLastSelected() method within your event handler to determine the 'selected' property, example:
myMenu.onSelect = function(data)
{
if (this.getLastSelected().selected)
{
// do something
}
}
Note: You may also find it easier to set up individual callback functions for checkbox menu items. It is a matter of preference and application requirements.
---
How do I use radiobutton menu items?
A menu item is a radiobutton item if its 'type' property is set to 'radio'. You should also specify a 'groupName' for the menu item. Only one item in the same group can be selected at a time. A 'radiobutton' icon will appear next to the selected item. It is recommended that you call the getLastSelected() method within your event handler to determine the 'selected' property, example:
myMenu.onSelect = function(data)
{
if (this.getLastSelected().selected)
{
// do something
}
}
Note: You may also find it easier to set up individual callback functions for checkbox menu items. It is a matter of preference and application requirements.
---
How do I set the size of the component?
During authoring time, you can set the size by using the Transform tool. The width you set for the component during authoring time determines its minimum width during runtime. Note that the component will automatically resize itself if necessary to accomodate the width of the menu items during runtime. The height depends on the number of menu items (and the 'tmItemHeight' property) and cannot be changed directly. Note that you can only change the width of the topmenu. The size of submenus is automatically determined by the component and cannot be changed directly. During runtime, you can use the setSize(width) method to adjust the width. Example:
myMenu.setSize(640);
---
How do I attach icons next to the labels of the menu items?
If you want an icon to appear next to the label of a menu item, you need to specify an 'icon' property for that particular item. The 'icon' property specifies a string - the symbol identifier for the icon's movieclip in the Library. Remember to export the movieclip. The icon you specify can have an "up" (default) state and an "over" state. To create a dual-state icon, you need to place the different visuals on different frames in the symbol, and label the frames "up" and "over", for rollOut and rollOver states respectively.
Note that 'check' and 'radio' types cannot have icons.
Flash Components
Button :: CheckBox :: CollapsibleMenu :: CollapsiblePane :: ColorPicker :: ComboBox :: ContextMenu :: DialogBox :: InputField :: ListBox :: Loader :: Menu :: SlideMenu :: NumericBox :: Panel :: ProgressBar :: RadioButton :: ScrollBar :: ScrollPane :: SlidePane :: Slider :: TabView :: TextArea :: TreeView :: Window
See also
Documentation :: FAQs :: Testimonials
|
