Beginning ActionScript 2.0 2006

Chapter 11

<?xml version=”1.0”?> <media>

<image data=”some data” label=”some label” /> <image data=”some data” label=”some label” /> <movie data=”some data” label=”some label” /> <movie data=”some data” label=”some label” />

</media>

Generally, you just use the same XML file that is to be loaded during runtime. The Schema mechanism gets two things out of this file: how the data is organized, and which elements are repeating. Any elements that repeat are candidates to bind with a list view. In this case, there’s one root element, the <media> element (all XML files must have exactly one root element). Within that, there are two repeating nested elements, <image> and <movie>.

Figure 11-6 shows the schema for the XML connector before and after importing a sample XML file. The circled button is the one to use to initiate the import of the sample XML file.

Figure 11-6

Once the schema is set up, you handle the binding much like you did in the preceding Try It Out. The following exercise takes you through the process step-by-step.

In this exercise, you connect two list components to data fed in from an XML connector.

278

Controlling Components

1.Using your preferred text editor, create a text file called mediaList.xml and save it to the same folder that you will use for the rest of this exercise. Enter the following XML markup into this file:

<?xml version=”1.0”?> <media>

<image data=”http://www.nathanderksen.com/book/; fullsize/aStudyInTexture.jpg” label=”A Study In Texture” />

<image data=”http://www.nathanderksen.com/book/; fullsize/buntzenWinter.jpg” label=”Buntzen Winter” />

<image data=”http://www.nathanderksen.com/book/; fullsize/flowerInDetail.jpg” label=”Flower In Detail” />

<image data=”http://www.nathanderksen.com/book/; fullsize/galianoSunset.jpg” label=”Galiano Sunset” />

<movie data=”http://www.nathanderksen.com/book/movieClipOverview.swf” ; label=”Animation” />

<movie data=”http://www.nathanderksen.com/book/trailer.swf” ; label=”Movie Trailer” />

</media>

2.Open the completed tryItOut_scriptingComponents.fla file from the first Try It Out exercise, or open tryItOut_scriptingComponents.fla from the book’s source files at <source file directory>/Chapter 11/tryItOut_scriptingComponents_v4/.

3.Open the Components panel (Window Components) and drag a new XMLConnector component from the Data section to the stage. Place it anywhere; it won’t show up when published.

4.Open the Properties panel (Window Properties) and give the component an instance name of mediaListXMLConnector by typing this name into the top-left text box in the panel.

5.Open the Component Inspector panel and select the Schema tab. Click the results row to select it. Click the small document icon (highlighted in Figure 11-6) with a down-pointing arrow located at the top right of the panel, just under the tab. In the dialog box that opens, locate and select the XML file that you created step 1.

6.Select the Bindings tab in the Component Inspector. Click the + button to add a binding. Select the row labeled image:Array and click the OK button.

7.With the new binding selected in the bindings list, change the direction option to out. Double-click the empty cell to the right of the bound to label. In the dialog box that pops up, select the component with the ID imageList, make sure that dataProvider is selected, and click the OK button.

8.Click the + button to add another binding. Select the row labeled movie:Array and click the OK button.

9.With the new binding selected in the bindings list, change the direction option to out. Doubleclick the empty cell to the right of the bound to label. In the dialog box that pops up, select the component with the ID movieList, make sure that dataProvider is selected, and click the OK button. Your Bindings tab should now look like Figure 11-7.

279

Chapter 11

Figure 11-7

10.Open the completed tryItOut_scriptingComponents.as file from the first Try It Out exercise, or open tryItOut_scriptingComponents.as from the book’s source files at <source file directory>/Chapter 11/tryItOut_scriptingComponents_v4/.

11.Update the init() function in the ActionScript file so that it looks like this:

function init() : Void

{

// Send data to the image list and movie list components mediaListXMLConnector.direction = “receive”; mediaListXMLConnector.URL = “mediaList.xml”; mediaListXMLConnector.trigger();

imageList.addEventListener(“change”, mediaListListener); imageList.addEventListener(“change”, mediaViewerListener);

movieList.addEventListener(“change”, mediaListListener); movieList.addEventListener(“change”, mediaViewerListener);

//Setup for the zoom stepper component zoomStepper.maximum = 400; zoomStepper.minimum = 25; zoomStepper.stepSize = 25; zoomStepper.value = 100;

zoomStepper.addEventListener(“change”, mediaViewerListener);

//Setup for the progress bar component mediaViewerProgress.mode = “manual”; mediaViewerProgress._visible = false;

//Setup for the scrollable media viewer component mediaViewerPane.scrollDrag = true;

}

12.Save the file, return to the Macromedia Flash project file, and select Control Test Movie.

280

Controlling Components

How It Works

The first thing this exercise needs is some sample XML. Generally, you can just use the same XML file that is loaded at runtime. When the XML file is chosen for the schema, the Flash development environment parses through that file and guesses at what the data structure is supposed to represent. If you try taking one of the <movie> elements out of the XML file so that there is only one left, then try creating the schema based on that file, you will get a substantially different schema because the parser will no longer see <movie> as a repeating element.

If you have trouble getting this exercise to work, make sure that when you define your schema, you have the results row selected, not the params row. That is a common error because the params row is selected by default.

Now that the schema is set up, you have a way of binding individual data elements to a component. Flash recognizes that there are two different elements nested at the same level within the XML file, and it enables you to treat the two separately. Here, the <image> elements are bound to the dataProvider parameter of the imageList component, and the <movie> elements are bound to the dataProvider parameter of the movieList component.

With those changes made, all that remains are a few changes to the init() function. First, a couple of parameters are set with the XML connector, and the load is started by calling the trigger() method:

mediaListXMLConnector.direction = “receive”; mediaListXMLConnector.URL = “mediaList.xml”; mediaListXMLConnector.trigger();

The code to create two arrays and assign them to the components’ dataProvider properties has been removed. Instead of the arrays, the bindings now deal with assigning data to the dataProvider properties.

The remaining code in the init function is the same as for the previous image viewer exercise, performing component setup and listener registration tasks.

Controlling Component Appearance

Although the visual appearance of the version 2.0 components is definitely an improvement over the version 1.0 components, there is still the need to be able to customize the look of the components to better fit in with the design of your site. Two ways exist to customize components:

Styles — Styles enable you to change characteristics such as font properties, highlights, and colors.

Skinning — Skinning allows the entire look of a component to be completely changed.

You explore both ways in the following sections.

281

Chapter 11

Using setStyle() to Change Component Styles

The main mechanism for setting component styles is through the setStyle() method. Every component has this method available to call because it’s inherited from the UIObject class upon which all components are based. In addition, there are ways to use this method to set styles to classes of components, to components of the same component type, and to all components globally. The general form of the setStyle() method is as follows:

componentInstance.setStyle(styleName:String, styleValue:Object);

For instance, the following code sets the text color, weight, font, and text size for an instance of the Button component:

this.createClassObject(mx.controls.Button, “myButton”, this.getNextHighestDepth()); myButton.label = “My Button”;

myButton.setStyle(“color”, 0x666666);

myButton.setStyle(“fontWeight”, “bold”); myButton.setStyle(“fontFamily”, “Arial”); myButton.setStyle(“fontSize”, 14);

Here’s an example that sets alternating background colors for the rows, a solid border with no shadow, a light blue header, and black text:

var testArray:Array = new Array(); testArray.push({col1:”foo”, col2:”bar”}); testArray.push({col1:”foo”, col2:”bar”});

this.createClassObject(mx.controls.DataGrid, “myDataGrid”, ; this.getNextHighestDepth());

myDataGrid.dataProvider = testArray; myDataGrid.setStyle(“alternatingRowColors”, [0xFFFFFF, 0xCCCCCC]); myDataGrid.setStyle(“borderStyle”, “solid”); myDataGrid.setStyle(“headerColor”, 0x9999CC); myDataGrid.setStyle(“color”, 0x000000);

Setting Styles Globally

A global variable called _global.style is used for setting global styles. Any style set on this variable applies to any component that uses that style.

The following example sets the font face, size, and color for all component text labels:

_global.style.setStyle(“fontFamily”, “Arial”); _global.style.setStyle(“fontSize”, 10); _global.style.setStyle(“color”, 0x666666);

Here’s an example that sets all borders in components that support this style to be solid, and tells all listbased components to use alternating colors:

_global.style.setStyle(“borderStyle”, “solid”);

_global.style.setStyle(“alternatingRowColors”, [0xFFFFFF, 0xCCCCCC]);

282

Controlling Components

Setting Styles for a Component Type

In addition to the _global.style variable, there is also a _global.styles variable. This variable refers to classes of styles. Each component has a reserved class name already registered with _global.styles and can be accessed by referring to _global.styles.<componentName>. One example of this in use is

if (_global.styles.Label == undefined)

{

_global.styles.Label = new mx.styles.CSSStyleDeclaration();

}

_global.styles.Label.setStyle(“color”, 0x003399);

Note the if statement here. Before a style class can be used, it must be assigned a new CSSStyleDeclaration instance. The CSSStyleDeclaration class is used throughout to store style settings. Individual component instances already have an instance of this class as part of their makeup, but style classes do not. If you make a setStyle() call on a component class that has not been initialized yet, it has no effect.

Setting Styles Using Custom Classes

Another way to control how styles are applied to components is to define custom classes and to set styles on each custom class. Whenever a custom class is assigned to a component instance, the instance acquires each of the styles set on the custom class.

The process for setting styles for a custom class is very similar to the process of setting styles for a component type. A CSSStyleDeclaration class is instantiated, styles are applied to the instance, and then the class is assigned to individual component instances, as the following example shows:

_global.styles.listStyle = new mx.styles.CSSStyleDeclaration(); _global.styles.listStyle.setStyle(“color”, 0xCC3333); _global.styles.listStyle.setStyle(“fontWeight”, “bold”);

_global.styles.listStyle.setStyle(“fontSize”, 12);

myList.setStyle(“styleName”, “listStyle”);

To keep the lines a bit shorter, the styles can first be applied to a temporary variable before being assigned to the styles variable. Also, it’s a good idea to import the CSSStyleDeclaration class for easier reference:

import mx.styles.CSSStyleDeclaration;

var tempStyle:Object = new CSSStyleDeclaration(); tempStyle.setStyle(“color”, 0xCC3333); tempStyle.setStyle(“fontWeight”, “bold”); tempStyle.setStyle(“fontSize”, 12); _global.styles.listStyle = tempStyle;

myList.setStyle(“styleName”, “listStyle”);

Style Search Order

Flash component styles have an order of precedence. The search order used to see which particular style setting takes precedence is as follows:

283

Chapter 11

With the following two style declarations and a List component called myList, the color for myList ends up being 0x00FF00:

// Set style globally _global.style.setStyle(“color”, 0xFF0000); // Set style to all List component instances

_global.styles.List = new mx.styles.CSSStyleDeclaration(); _global.styles.List.setStyle(“color”, 0x00FF00);

With the following three style declarations and a List component called myList, the color for myList ends up being 0x0000FF:

// Set style globally _global.style.setStyle(“color”, 0xFF0000); // Set style to all List component instances

_global.styles.List = new mx.styles.CSSStyleDeclaration(); _global.styles.List.setStyle(“color”, 0x00FF00);

// Set style to all component instances assigned the style “myListStyle” _global.styles.myListStyle = new mx.styles.CSSStyleDeclaration(); _global.styles.myListStyle.setStyle(“color”, 0x0000FF); myList.setStyle(“styleName”, “myListStyle”);

With the following four style declarations and a List component called myList, the color for myList ends up as 0xFFFF00:

// Set style globally _global.style.setStyle(“color”, 0xFF0000); // Set style to all List component instances

_global.styles.List = new mx.styles.CSSStyleDeclaration(); _global.styles.List.setStyle(“color”, 0x00FF00);

//Set style to all component instances assigned the style “myListStyle” _global.styles.myListStyle = new mx.styles.CSSStyleDeclaration(); _global.styles.myListStyle.setStyle(“color”, 0x0000FF); myList.setStyle(“styleName”, “myListStyle”);

//Set style directly to component instance

myList.setStyle(“color”, 0xFFFF00);

Available Styles

The following table describes some of the more common styles that are available for you to use. You can find the complete set of styles for any particular component in the Help panel under Components Language Reference <Component Name> Customizing the <Component Name> Component. Not all of these styles can be used everywhere, or for every theme.

284

285

Chapter 11

Alert Style Names

The Alert component has a way of applying styles to the components embedded inside by applying styles directly to one of three static properties, which you use as follows:

buttonStyleDeclaration — Set the style of the response button(s) in the Alert component.

messageStyleDeclaration — Set the style of the alert message text.

titleStyleDeclaration — Set the style of the title bar.

286

Controlling Components

The following code shows how to customize the Alert component by creating style declarations and assigning them to the component’s static style properties:

import mx.controls.Alert;

import mx.styles.CSSStyleDeclaration;

var messageStyle = new CSSStyleDeclaration();

messageStyle.setStyle(“fontWeight”, “bold”); messageStyle.setStyle(“fontSize”, 14); messageStyle.setStyle(“color”, 0x990000); Alert.messageStyleDeclaration = messageStyle;

var titleStyle = new CSSStyleDeclaration();

titleStyle.setStyle(“fontWeight”, “normal”); titleStyle.setStyle(“fontSize”, 12); titleStyle.setStyle(“color”, 0x000000); Alert.titleStyleDeclaration = titleStyle;

Alert.show(“The credit card number entered is not valid.”, “Validation Error”);

As of this writing, there was a problem with the custom style properties for the Alert component. The buttonStyleDeclaration would be overridden by the messageStyleDeclaration, even if the messageStyleDeclaration was not specified.

Custom Date Classes

The DateChooser and DateField components define three custom classes that can be used to style parts of the calendar:

HeaderDateText — This declaration enables you to set styles for the month name label.

WeekDayStyle — Use this declaration to set styles for the days of the week labels.

TodayStyle — Set styles for the label for today’s date.

These style declarations work exactly the way other custom style declarations do, except that the CSSStyleDeclaration class is already instantiated for you. The general form for using these declarations is as follows:

_global.styles.WeekDayStyle.setStyle(“color”, 0x003399);

Now you use what you’ve learned to apply styles to your image viewer application. At the end of the exercise, the application should look something like Figure 11-8.

287