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 component, 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

<headerSize>
The value of the node should be a number that will be used for sizing the height of a header/title bar of an item

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

<iconPaddingLeft>
The value of the node should be a number that will be used for left-padding the folder icon and the title text inside an header/title bar of an item.

<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 header/title 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 header/title 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 header/title 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 item may have its own style, or it can use/inherit the main style. A theme has the visual items and styles defined; 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 or the main style. E.g. style="style1" A style can be applied to as many items you want. When an item has no style set, it will look for a style of the main data node:

ACCORDION PANEL DATA

In order to build the desired accordion panel, the data structure needs to be defined in the XML file, using the <data> tag. The <data> tag will contain the panels as items (using the <item> tag) following this structure:

<data>
    <item />
    <item />
    <item />
</data>

The <data> tag may have the style attribute.
The <item> tag may have the following attributes:

GENERAL ATTRIBUTES

title - the text that will be shown in the menu item
style - the style of the item (optional)
enabled - if the item is enabled(true) or disabled(false) (optional)
expanded - if the item is expanded or not (default:false)
contentPath - either an external file (jpg,swf) or an internal clip
contentSize - the size of the loaded content (if specified in item (primary) or in style (secondary) , will be fixed)
contentEvents - enables or disables the execution of events from the loaded content
headerSize - the size of the header/title bar of every item

URL METHOD ATTRIBUTES

url - a url address to be followed when user clicks on the menu (optional)
target - the url target (optional)

FUNCTION ATTRIBUTES

function - the function with brackets and params, its path by dot notation like in eg.: myFunc(param1,param2) (optional)

USER ATTRIBUTES

any other attributes can be inserted here. You will have access to them from the item itself with dot notation

Overview | Properties | Methods | Events | Styles | XML