User Guide
Add ActionScript to the main Timeline 35
Add an instance of the Cart class and initialize it
The next code that you’ll add creates an instance of the custom Cart class and then initializes the
instance.
• In the Actions panel, add the following code:
var myCart:Cart = new Cart(this);
myCart.init();
This code uses the init() method of the Cart class to add a DataGrid instance to the Stage,
define the columns, and position the DataGrid instance on the Stage. It also adds a Button
component instance and positions it, and adds an Alert handler for the button. (To see the code
for the Cart class
init() method, open the Cart.as file.)
Set the data type of component instances
Next you’ll assign data types to each of the component instances you dragged to the Stage earlier
in the tutorial.
ActionScript 2.0 uses strict data typing, which means that you assign the data type when you
create a variable. Strict data typing makes code hints available for the variable in the Actions
panel.
• In the Actions panel, add the following code to assign data types to the four component
instances that you already created.
// data type instances on the Stage; other instances might be added at
// runtime from the Cart class
var problems_cb:ComboBox;
var products_dg:DataGrid;
var cart_dg:DataGrid;
var products_xmlcon:mx.data.components.XMLConnector;
Use styles to customize component appearance
Each component has style properties and methods that let you customize its appearance,
including highlight color, font, and font size. You can set styles for individual component
instances, or set styles globally to apply to all component instances in an application. For this
tutorial you’ll set styles globally.
• Add the following code to set styles:
// define global styles and easing equations for the problems_cb ComboBox
_global.style.setStyle("themeColor", "haloBlue");
_global.style.setStyle("fontFamily", "Verdana");
_global.style.setStyle("fontSize", 10);
_global.style.setStyle("openEasing", mx.transitions.easing.Bounce.easeOut);
This code sets the theme color (the highlight color on a selected item), font, and font size for
the components, and also sets the easing for the ComboBox—the way that the drop-down
menu appears and disappears when you click the ComboBox title bar.