Skin Swapping Example

This is a good skin swapping example

Flex application optimization

Here are some good basic steps!

Event Bubbling!

Excerpts from the LiveDocs!


When events are triggered, there are three phases in which Flex checks whether there are event listeners. These phases occur in the following order:

* Capturing Phase - Check for listeners "starting from the root until the immediate parent container" in the displayList[by default a) this phase is disabled unless you pass useCapture = true while adding the event listener b) Only a DisplayObject can participate in this phase]

* Targeting - trigger the event listeners of the "target object" - the event originating object.

* Bubbling - Check for listeners "starting from the immediate parent to the root"

During each of these phases, the nodes have a chance to react to the event. For example, assume the user clicks a Button control that is inside a VBox container.



During the capturing phase, Flex checks the Application object and the VBox for listeners to handle the event. Flex then triggers the Button's listeners in the target phase, no other nodes on the display list are examined for event listeners. [The values of the currentTarget and the target properties on the Event object during the targeting phase are the same.]. In the bubbling phase, the VBox and then the Application are again given a chance to handle the event but now in the reverse order from the order in which they were checked in the capturing phase.

- Event object moves from node to node in the display list,

- Only DisplayObject objects (visual objects such as containers and controls) can have a capturing phase and a bubbling phase in addition to the targeting phase.

- Any event can be captured, but no DisplayObject objects listen during the capturing phase unless you explicitly instruct them to do so.In other words, capturing is disabled by default.

- When a faceless event dispatcher, such as a Validator, dispatches an event, there is only a targeting phase, because there is no visual display list for the Event object to capture or bubble through.

Associative Array, Dictionary and Object!

Sourced from Adobe Livedocs:

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.

Unlike other classes, the Object class is dynamic - meaning arbitrary properties can be added to serve as keys.


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();

monitorInfo["aspect ratio"] = "16:10"; // bad form, do not use spaces
monitorInfo.colors = "16.7 million";
trace(monitorInfo["aspect ratio"], monitorInfo.colors);
// output: 16:10 16.7 million

The Dictionary class lets you create a dynamic collection of properties, which uses strict equality (===) for key comparison.

var dict:Dictionary = new Dictionary();
dict[key] == "Letters";

Iterating with object keys

You can iterate through the contents of a Dictionary object with either a for..in loop or a for each..in loop. A for..in loop allows you to iterate based on the keys, whereas a for each..in loop allows you to iterate based on the values associated with each key.

for (var key:Object in groupMap)
{
trace(key, groupMap[key]);
}
/* output:
[object Sprite] [object Object]
[object Sprite] [object Object]
[object Sprite] [object Object]
*/

for each (var item:Object in groupMap)
{
trace(item);
}
/* output:
[object Object]
[object Object]
[object Object]
*/

Cairngorm. In a brief!

Here's a link straight from the horse's mouth as they say!

The Cairngorm - micro-architecture as a composition of design patterns, addresses three key areas that Adobe Consulting has long recommended as best-practices for their customers and partners:

- Handling user gestures on the client
- Encapsulating business logic and server interactions
- Managing state on the client and representing this state to the user interface

There are four key benefits that Cairngorm provides:

- Maintaining state on the client
- Architecting the user experience
- Implementing feature-driven development
- Invoking server-side services

Important Components

Following are the important components of Cairngorm:

A) Model - holds the data and the state.

Generally we create a ModelLocator as a composition class consisting of public static getInstance method returning a static singleton reference to itself. all the model objects are stored and refered to from this ModelLocator handle.

B) View - render data and watch the data changes with bindings. Views talk to controller with events.

C) Control - Control layer is implemented as following sub parts

a) Commands - implement execute method that crunches business logic and make use of the model. Create Responder by passing Remote Service Result Handlers and pass the responder to appropriate delegate in constructors. Then invoke asynchronous remote service operations on delegates.(implements com.adobe.cairngorm.control.ICommand).

Register the commands to Cairngorm framework in Front Controller by using addCommand(eventType, commandClass) method.

b) Delegates - Are like proxies for business service APIs. E.g. UserDelegate provides routing to Login, Logout, Registration. OrderDelegate provides Create, Update or Delete order.

To implement a delegate's service method, make use of ServiceLocator. Invoke the appropriate service and attach the responder to the async token of the service operation called.

c) Events - Make use of business events to trigger commands. Typically create one event for each command. Extend com.adobe.cairngorm.events.Event class.

d) Front Controller - Registry of Event to Command mapping. Intercepts dispatched business events and routes them to appropriate commands extends com.adobe.cairngorm.control.FrontController

e) Service Locator - Base your service locator mxml component on Cairngorm ServiceLocator (extend the com.adobe.cairngorm.business.ServiceLocator). Add service tags with id. In your delegate obtain reference as follows

var service:HTTPService=__locator.getHTTPService("UserService");
var token: AsyncToken = service.operation();
token.addResponder(responder);

General Benefits

- maintenance is easier
- debugging is easier
- feature additions and/or changes are easier
- automated testing of business logic and data access is easier
- using mock data-services is easier

SQLite Quick Reference!

:) Here's a quick 10 minute refresher overview on SQLite.

Making a RESTful Web Service call!

Another name for HTTP Service is REST style web service. To make a successful web service call we gotta take care of steps as below. Similar steps apply for HTTP Object instantiated via HTTP service tag.

1) Instantiate the HTTPService Object.
var httpService: HTTPService = new HTTPService();

2) Set the URL
httpService.url = "serviceURL"; //Mention the service URL

3) Set the method type [GET/POST/PUT/DELETE], default is GET
httpService.method = HTTPService.POST;

4) Set the resultFormat to XML [for true REST], default is Object

httpService.resultFormat = "xml"; //Values possible are object, xml, e4x, text, array, flashvars

5) Add result and fault event listeners

httpService.addEventListener("result", httpResultHandler);
httpService.addEventListener("fault", httpFaultHandler);

6) Construct the parameters to be passed if any, default is null. For example if
your service expects two parameters "userID" & "userName", the values of which you wanna pass as userIDValue and userNameValue, construct an object:

var serviceParameters: Object = {};
serviceParameters["userID"] = userIDValue;
serviceParameters["userName"] = userNameValue;

7) Make the call
httpService.send(serviceParameters);

Bingo! Have Fun! :)