 GhostWire ContextMenu - Usage
Using the GhostWire ContextMenu component
Just drag and drop an instance of the GhostWire ContextMenu from the components panel onto the stage. Edit the component parameters of the instance to suit your requirements. You should scale and resize the instance to define the hotspot area (which appears as a greenish box on the stage) and position it accordingly. For best results, it is 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 is the ContextMenu triggered by the application users?
The ContextMenu is triggered when the user single-click on a spot in the hotspot area and hold for a predefined time (by default, 500 milliseconds). This delay can be set in the parameter 'triggerDelay'. The menu will popup at the spot of the mouse cursor. Alternatively, you can also allow users to trigger the ContextMenu by clicking with the ALT key held down. This feature is enabled if you set the parameter 'altKey' to true.
---
How do I set the hotspot area of the ContextMenu component?
During authoring time, you can position, scale and size the hotspot area using the Transform tool on the component instance. During runtime, the setSize(width,height) method can be used to modify the hotspot area's size.
---
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 make the movie navigate to another frame when a menu item is selected?
If you set Action to 'GotoAndPlay' or 'GotoAndStop', then the 'data' associated with each menu item is assumed to be a frame number/label and the gotoAndPlay or gotoAndStop methos will be called passing the 'data' as the frame/label.
---
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 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
|
