My account
Shopping cart
Knowledge base
Support


Accordion Tree Menu V3 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 DECLARATION

All 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

<folderCollapsedIconId>

The value of the node should be the linkage id of the movieclip used for collapsed icon

<folderExpandedIconId>
The value of the node should be the linkage id of the movieclip used for expanded icon

<itemHeight>

The value of the node should be a number that will be used for sizing the height of an item

<itemNextSpacing>
The value will be used for spacing between items

<spacing>
The value will be used for spacing between icon and text, and where spacing is needed

<textFormat>
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.

E.g.
<textFormat>
<font>Tahoma</font>
<size>11</size>
<color>0xFF0000</color>
<bold>false</bold>
<italic>false</italic>
<underline>false</underline>
</textFormat>

<states>
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:

<up>

<over>
<down>
<selected>
<disabled>
<expanded_up>
<expanded_over>
<expanded_down>
<expanded_selected>
Every state may contain the following child nodes: <textFormat>
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. <mcLinkageId>
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
  • expanded_up = up
  • expanded_over = over = up
  • expanded_down = expanded_over = down = over = up
  • expanded_selected = selected = up

STYLE USAGE

The 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 accordion menu and the accordion menu tree shares the same themes and styles for skinning it is very easy to switch between them.

Overview | Properties | Methods | Events | Styles | XML