View states

In many rich Internet applications, the interface changes based on the task the user is performing. A simple example is an image that changes when the user rolls the mouse over it or changing from a browse view to a detail view. View states let you easily implement such applications.

A view state defines a particular view of a component.

To create a view state, you define a base state, and then define a set of changes, or overrides, that modify the base state to define the new view state. Each additional view state can modify the base state by adding or removing child components, by setting style and property values, or by defining state-specific event handlers.

A view state does not have to modify the base

Events

Events let a developer know when something happens within a Flex application. They can be generated by user devices, such as the mouse and keyboard, or other external input, such as the return of a web service call. Events are also triggered when changes happen in the appearance or life cycle of a component, such as the creation or destruction of a component or when the component is resized.

You can "handle" these events in your code by adding an event handler. Event handlers are the functions or methods that you write to respond to specific events. They are also sometimes referred to as event listeners.

Components generate and dispatch events and consume (listen to) other events.

An object that requires information about another object's events registers a listener with that object. When an event occurs, the object dispatches the event to all registered listeners by calling a function that was requested during registration. To receive multiple events from the same object, you must register your listener for each event.

All visual objects, including Flex controls and containers, are subclasses of the DisplayObject class. They are in a tree of visible objects that make up your application. The root of the tree is the Stage. Below that is the SystemManager object, and then the Application object. Child containers and components are leaf nodes of the tree. That tree is known as the display list. An object on the display list is analogous to a node in the DOM hierarchical structure. The terms display list object and node are used interchangeably.

Associative arrays with object keys

You can use the Dictionary class to create an associative array that uses objects for keys rather than strings. Such arrays are sometimes called dictionaries, hashes, or maps.

import flash.display.Sprite;
import flash.utils.Dictionary;
var groupMap:Dictionary = new Dictionary();

// objects to use as keys
var spr1:Sprite = new Sprite();
var spr2:Sprite = new Sprite();
var spr3:Sprite = new Sprite();

// objects to use as values
var groupA:Object = new Object();
var groupB:Object = new Object();

// Create new key-value pairs in dictionary.

groupMap[spr1] = groupA;
groupMap[spr2] = groupB;

how to create associative arrays that use strings for keys

There are two ways to create associative arrays in ActionScript 3.0.

The first way is to use the Object constructor, which has the advantage of allowing you to initialize your array with an object literal.

An instance of the Object class, also called a generic object, is functionally identical to an associative array. Each property name of the generic object serves as the key that provides access to a stored value.

The following example creates an associative array named monitorInfo, using an object literal to initialize the array with two key and value pairs:

var monitorInfo:Object = {type:"Flat Panel", resolution:"1600 x 1200"};

trace(monitorInfo["type"], monitorInfo["resolution"]);
// output: Flat Panel 1600 x 1200

If you do not need to initialize the array at declaration time, you can use the Object constructor to create the array, as follows:

var monitorInfo:Object = new Object();

After the array is created using either an object literal or the Object class constructor, you can add new values to the array using either the bracket operator ([]) or the dot operator (.). The following example adds two new values to monitorArray:

monitorInfo["aspect ratio"] = "16:10";
monitorInfo.colors = "16.7 million";
trace(monitorInfo["aspect ratio"], monitorInfo.colors);
// output: 16:10 16.7 million

The second way to create an associative array is to use the Array constructor (or the constructor of any dynamic class) and then use either the bracket operator ([]) or the dot operator (.) to add key and value pairs to the array. If you declare your associative array to be of type Array, you cannot use an object literal to initialize the array. The following example creates an associative array named monitorInfo using the Array constructor and adds a key called type and a key called resolution, along with their values:

var monitorInfo:Array = new Array(); monitorInfo["type"] = "Flat Panel"; monitorInfo["resolution"] = "1600 x 1200"; trace(monitorInfo["type"], monitorInfo["resolution"]); // output: Flat Panel 1600 x 1200

There is no advantage in using the Array constructor to create an associative array. You cannot use the Array.length property or any of the methods of the Array class with associative arrays, even if you use the Array constructor or the Array data type. The use of the Array constructor is best left for the creation of indexed arrays.

Associative arrays

An associative array, sometimes called a hash or map, uses keys instead of a numeric index to organize stored values. Each key in an associative array is a unique string that is used to access a stored value.

An associative array is an instance of the Object class, which means that each key corresponds to a property name. Associative arrays are unordered collections of key and value pairs.

ActionScript 3.0 introduces an advanced type of associative array called a dictionary.

Dictionaries, which are instances of the Dictionary class in the flash.utils package, use keys that can be of any data type but are usually instances of the Object class. In other words, dictionary keys are not limited to values of type String.

Sort and Query/manipulate an array

Sorting an array

There are three methods--reverse(), sort(), and sortOn()--that allow you to change the order of an array, either by sorting or reversing the order. All of these methods modify the existing array.

The reverse() method changes the order of the array such that the last element becomes the first element, the penultimate element becomes the second element, and so on.

The sort() method allows you to sort an array in a variety of predefined ways, and even allows you to create custom sorting algorithms.

The sortOn() method allows you to sort an indexed array of objects that have one or more common properties that can be used as sort keys.

Querying an array

The four methods of the Array class--concat(), join(), slice(), toString()--all query the array for information, but do not modify the array.

The concat() and slice() methods both return new arrays, while the join() and toString() methods both return strings.

The concat() method takes a new array or list of elements as arguments and combines it with the existing array to create a new array.

The slice() method has two parameters, aptly named startIndex and an endIndex, and returns a new array containing a copy of the elements "sliced" from the existing array. The slice begins with the element at startIndex and ends with the element just before endIndex. That bears repeating: the element at endIndex is not included in the return value.


You can use the join() and toString() methods to query the array and return its contents as a string. If no parameters are used for the join() method, the two methods behave identically--they return a string containing a comma-delimited list of all elements in the array.

The join() method, unlike the toString() method, accepts a parameter named delimiter, which allows you to choose the symbol to use as a separator between each element in the returned string.

How to remove array elements

Three methods of the Array class--pop(), shift(), and splice()--allow you to remove elements from an array.

The pop() method removes an element from the end of the array. In other words, it removes the element at the highest index number.

The shift() method removes an element from the beginning of the array, which means that it always removes the element at index number 0.

The splice() method, which can also be used to insert elements, removes an arbitrary number of elements starting at the index number specified by the first argument sent to the method.

How to insert array elements

Three of the Array class methods--push(), unshift(), and splice()--allow you to insert elements into an array.

The push() method appends one or more elements to the end of an array. In other words, the last element inserted into the array using the push() method will have the highest index number.

The unshift() method inserts one or more elements at the beginning of an array, which is always at index number 0.

The splice() method will insert any number of items at a specified index in the array.

Arrays

ARRAYS:

Array: An object that serves as a container to group multiple objects together.

Associative array: An array that uses string keys to identify individual elements.

Dictionary: An array whose items consist of pairs of objects, known as the key and the value. The key is used instead of a numeric index to identify a single element.

Element: A single item in an array.

Index: The numeric "address" used to identify a single element in an indexed array.

Indexed array: The standard type of array that stores each element in a numbered element, and uses the number (index) to identify individual elements.

Key: The string or object used to identify a single element in an associative array or a dictionary.

Multidimensional array: An array containing items that are arrays rather than single values.