User Guide

Using styles to customize component color and text 91
To create an Accordion component with styles that are inherited by the
components in the individual Accordion panes:
1. Open a new FLA file.
2. Drag an Accordion component from the Components panel to the Stage.
3. Use the Property inspector to name and size the Accordion component. For this example,
give the component the instance name accordion.
4. Drag a TextInput component and a Button component from the Components panel to
the library.
By dragging the components to the library, you make them available to your script
at runtime.
5. Add the following ActionScript to the first frame of the Timeline:
var section1 = accordion.createChild(mx.core.View, "section1", {label:
"First Section"});
var section2 = accordion.createChild(mx.core.View, "section2", {label:
"Second Section"});
var input1 = section1.createChild(mx.controls.TextInput, "input1");
var button1 = section1.createChild(mx.controls.Button, "button1");
input1.text = "Text Input";
button1.label = "Button";
button1.move(0, input1.height + 10);
var input2 = section2.createChild(mx.controls.TextInput, "input2");
var button2 = section2.createChild(mx.controls.Button, "button2");
input2.text = "Text Input";
button2.label = "Button";
button2.move(0, input2.height + 10);
The above code adds two children to the Accordion component and loads each with a
TextInput and Button control, which this example uses to demonstrate style inheritance.
6. Select Control > Test Movie to see the document before adding style inheritance.
7. Add the following ActionScript to the end of the script in the first frame:
accordion.setStyle("fontStyle", "italic");
8. Select Control > Test Movie to see the changes.
Notice that the
fontStyle setting on the Accordion component affects not only the
Accordion text itself but also the text associated with the TextInput and Button components
inside the Accordion component.