Drop Down Menu V3 Working with Styles
Overview | Properties | Methods | Events | Styles | XML
Jumpeye's V3 Components allows skinning with visual elements, Skinning is done via styles (styles are declared and used in the XML of a menu, but they may link to movieclip and fonts that need to be found inside a flash file library).
The styles need to be declared inside the <styles> tag, and should be used for items in the <data> tag of the XML file that feeds the component.
STYLE DECLARATIONAll styles should be declared inside the XML that feeds the component under the node <styles>, in separate nodes using the name that will be used in the data node when using styles. E.g. <myStyleName> or <style1>
A style node may contain some nodes that will be used for configuring all states, while it also have a <states> node, containing all/or some of the states allowed for the skin.
The <style> node may contain the following child nodes
The value of the node should be the linkage id of the movieclip used for the icon of a parent node
This style is used only in horizontal orientation mode.
The distance between the beginning of the movieclip item and the place where the text begins, a distance that will be used only if an icon will be displayed in the place, only if the icon attribute of the item node is set.
This style is used only in pop menus (main vertical mode and on all submenus).
The distance between the beginning of the movieclip item and the place where the text begins, a distance that will be used to display an icon.
Boolean, if true the menu size (width) will be taken from the size of the movieclip; if false, the size will be taken from the text size (the longest text size)
The value of the node should be a number that will be used for sizing the height of an item
The value will be used for spacing between icon and text inside a icon, and where spacing is needed
The node has exactly the same structure of a TextFormat Class but in XML format, all its childNodes will be added to the menu item TextField as TextFormat properties.
The node may will contain a child node for each possible state, however, you can omit states, you can simply define only the mandatory <up> state and it will be used for all others in base of the state substitution order.
The possible states are the following:
Every state may contain the following child nodes:
This OPTIONAL node has exactly the same structure of a TextFormat Class but in XML format, all its childNodes will be added to the menu item TextField as TextFormat properties. It overrides the general textFormat for a speciffic state.
The linkage id of the movieclip that will be loaded as a specific state of the menu item. This movieclip have to be found inside the flash library.
State substitution order
The up state has no substitute, all other states may have proximal substitute, or be substituted by the up state, as following:
- over = up
- down = over = up
- selected = up
- disabled = up
The node may will contain a child node for each possible part (top, bottom, lef, right, vertical and horizontal separators). All these nodes link to movieclips that will be loaded from the library.
Horizontal menu style (main menubar)
Vertical menu style (main vertical menu and all submenus)
STYLE USAGEThe styles can be used within the <data> child node as follows. Each menu item (folder item or terminal item) may have its own style, or it can use/inherit its parent childStyle or it can inherit its parent style, and its parent uses the same method to inherit styles from its parents.
A theme has the visual items and styles defined for a suite of sub-levels, themes are packages containing the following:
- .fla file containing the visual assets of the component
- .xml file containing the styles and applied to a standard data
- .as files (rarely, where classes are used to perform a movieclip special effect for component's states)
Inside the <data> node, each item node may contain the following style attributes:
style - the style of one particular item. E.g. style="style1"
childStyle - the style that every child of this item will inherit (in case they don't have their own style). E.g. childStyle="arctic"
A style can be applied to as many items you want. When an item has no style set, it will look for a childStyle of its parent following the style substitute order as follows:
item.style > item.parentNode.childStyle > item.parentNode.style >
> item.parentNode.parentNode.childStyle > item.parentNode.parentNode.style ...
Since the Drop Down Menu V3 and the Drop Down Tree Menu V3shares the same themes and styles for skinning it is very easy to switch between them.