You can find Alex Hauri’s blog here http://blogs.adobe.com/aharui/

This is how it is done. You need to create a customized button by extending the Button class. The button class overrides the createChildren method and creates a UI textfield to display the label.

These are somethings which you need to know before you start with the task

1. Button uses an instance of UITextField to render its label, so we need to create an instance of UITextField for the label on our customized button.
2. Lable by default accommadates only a single line of text. In order to make it multiline, you need to override the createChildren() method of the Button class and give multiline and wordwrap behaviour to the instance of the textField and add it as a child of the button.

Please find the createChildren() as below.

override protected function createChildren():void
{
// Create a UITextField to display the label.
if (!textField)
{
textField = new UITextField();
textField.styleName = this;
addChild(textField);
}
super.createChildren();
textField.multiline = true;
textField.wordwrap = true;
}

I thought of sharing my experience and the way I successfully printed the dataGrid in Flex

See the below code before you start understanding how it works

——————————————————————————————-
<!– FileOne.mxml –>
public function printDataGrid() : void
{

var printJob : FlexPrintJob = new FlexPrintJob();
var thePrintView : FormPrintView = new FormPrintView();

Application.application.addChild(thePrintView);

if(printJob.start() != true)
return;

//Set the print view properties.
thePrintView.width=printJob.pageWidth;
thePrintView.height=printJob.pageHeight;

thePrintView.printableDataGrid.dataProvider = originalDataGrid.dataProvider
thePrintView.printableDataGrid.columns = originalDataGrid.columns ;
thePrintView.printableDataGrid.setStyle(“fontSize”, 8);
thePrintView.printableDataGrid.setStyle(“wordWrap”, true);

printJob.addObject(thePrintView);

printJob.send();

Application.application.removeChild(thePrintView);
}

<mx:DataGrid id=”originalDataGrid” width=”100%” height=”100%” dataProvider=”{dataForGrid}”/>
——————————————————————————————–

<!– FormPrintView.mxml –>

<mx:VBox xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:PrintDataGrid id=”printableDataGrid” width=”90%” height=”100%”>
<!– Specify the columns to ensure that their order is correct.
This is not mandatory–>

</mx:PrintDataGrid>
</mx:VBox>

——————————————————————————————-

Below are the simple steps to print the DataGrid in Flex

1. Crete an instance of the FlexPrintJob called printJob (you can call anything you want to)

2. Crete an instance of the PrintDataGrid in another MXML file FormPrintView.mxml and create an instance of that – thePrintView
(if you create<mx:PrintDataGrid/> in the same MXML, which uses the function –> printDataGrid() then the application reservers some place for <mx:PrintDataGrid/> component.
This looks a bit ugly as we do not want to see that extra space in our application)
Always use PrintGrid class to print the dataGrid instead of the DataGrid, which originally displays content in the application, as it is tailored to print DataGrid in flex

3. Add the thePrintView object to the application container
Application.application.addChild(thePrintView);

4. Only one print job can be active at a time. So check to see if the printJob.start() is true. Start printing when it is true

5. Set the height, width properties of the thePrintView object to the pageWidth and pageHeightof the pringJob object

6. Assign the dataProvider of the DataGrid to be printed to the instance of the PrintDataGrid class
You also need to set the columns of the original dataGrid to the thePrintView object

You can also control the appearance of the printDataGrid object as follows
printDataGrid.setStyle(“fontSize”, 8);
printDataGrid.setStyle(“wordWrap”, true);

7. Use addObject method to add object to the printJob instance

8. Use printJob.send() to send the print job to a printer.

I am assuming that you know how to implement the below mentioned function

private var filteredListArray : Array;

private function filterList(event:Event = null) : void
{
var txtLength:Number = txtInput.length;;
var txtEntered:String = txtInput.text;
filteredListArray = new Array();

if(txtInput.text == “”)
{
listId.dataProvider = dataProvider;
return;
}

else
{
for(var i : int = 0 ; i < dataProvider.length; i++)
{
if(dataProvider[i].toString().substring(0, txtLength).toLowerCase() == txtEntered.toLowerCase())
{
filteredListArray.push(dataProvider[i]);
}
listId.dataProvider = filteredListArray;
}
}

}

<mx:TextInput id=”txtInput” change=”filterList(event)”/>
<mx:List id=”listId” dataProvider=”{dataProvider}”/>

TextInput calls filterList(event) every time user inputs something in the text input box
filterList(event) method carries out all the necessary functionality

The catch is the way we assign the proper data provider to the List component

There are two types of Shared Objects
1. Local shared objects – LSOs
2. Remote shared objects – RSOs

LSO is similar to browser cookies

But what are cookies..Cookies have got the ability to remember the user information so that the user doesnt have to manually login during each visit..

LSO Vs Cookies

LSOs are can store more data than cookies
LSOs never expire
LSOs arent transmitted between the client and the server
LSOs can store native ActionScript datatypes.

Uh!! Cool isnt it??

LSOs are to Flash (Call it Flash cookies)
Cookies are to web browsers

LSO files are saved to the client computer in a binary file ending with a .sol extension
Flash movies with in the same domain can read from or write to the .sol files by means of ActionScript’s flash.net.SharedObjects

The static getLocal() method is the mechanism by which LSOs are both created and opened for reading

var example : SharedObject = SharedObject.getLocal(“example”);

Remote Sharing Objects

RSOs are created using the static getRemote function. This returns a reference to an object that can be shared across multiple clients by means of a server, such as Flash Media Server. If the shared object does not already exist, this method creates one.

The following code shows how you assign the returned shared object reference to a variable:

var myRemote_so:SharedObject = SharedObject.getRemote(name, remotePath, persistence);

To create a shared object that is available only to the current client, use SharedObject.getLocal().

After calling this method, use SharedObject.connect() to connect the object to the application server, as shown in the following code:

var myNC:NetConnection = new NetConnection();
myNC.connect(“rtmp://[yourDomain].com/applicationName”);
var myRemoteSO:SharedObject = SharedObject.getRemote(“mo”, myNC.uri, false);
myRemoteSO.connect(myNC);

To confirm that the local and remote copies of the shared object are synchronized, use the sync event.

All clients that want to share this object must pass the same values for the name and remotePath parameters.

Since I have been frequently been asked about details on this, a frequently asked questions format somehow seemed appropriate . For those that want to start working with RTMFP, make sure to read to the end, there is a goody for you!

Does Flash Player 10 beta support Peer to Peer (P2P) communication?
Flash Player 10 beta has new methods on the NetConnection and NetStream objects that allow communication through peer connections that are managed by a future Adobe server technology. The server will maintain a list of potential peers that can be connected to. If the NetConnection to the server is lost or closed, any peer connection that was initiated through the same NetConnection will also be closed.

How will I make a P2P connection through Flash Player 10 beta?
Connections from a SWF through a future Adobe server release will be assigned a temporary unique ID that is infeasible to guess or forge. Other SWFs connected to the same server can subscribe to the streams and events from that ID once the broadcasting SWF agrees to the connection.

On the server level, these IDs can be mapped to application-specific information such as presence. For a chat application, the ID can be linked to the nickname the user gave when connecting to the application. While the end-user may select the person that they want to chat with, Flash Player will use the ID to establish the connection with that user.

What can I send through the P2P connection?
In a similar way that you would stream local microphone and webcam media up to a server, you will also be able to stream it directly to another Flash Player client that has connected as a peer.

Through NetStream.send you can also send data which is useful for shared experiences in real-time applications. Any data format can be sent through this method though there are size limitations to the packet which may make certain data types less useful.

How does the peer connection work?
RTMFP UDP packets are sent directly from one Flash Player to another. The server translates the peer IDs to network addresses, and also assists in setting up the connection if one or both ends is behind a Network Address Translation (NAT) device. If UDP is blocked by a firewall or if RTMFP is blocked through a configuration of mms.cfg, the peer connection will not go through.

Can I choose between UDP and TCP?
No, RTMFP is a UDP-based protocol while RTMP is a TCP-based protocol. You will automatically use UDP by calling the methods that work over RTMFP.

Will RTMFP enable massive file-sharing applications through Flash Player 10 beta?
No. Large-scale file-sharing network applications rely on the ability to read from and write to the hard drive constantly to only load parts of files into memory when needed. In Flash Player 10 beta you can load files from the desktop to the Flash Player runtime, but the file would need to be loaded manually by the end-user and remain in memory for the entire time the file would be needed. The drain on system resources would make this style of application impractical.

Can I get started with RTMFP now?
While the support for RTMFP is built in to Flash Player 10 beta, there is no publicly available server technology to manage the connection process. If you would like to be considered for access to private beta programs around RTMFP, please send an email to fmsprerelease@adobe.com

But many of us wish to look under the covers and see a detailed comparison of the frameworks. So I took Adobe’s Flex Builder 3 Getting Started tutorial example of a simple Flickr photo search and re-implemented it in Cairngorm, PureMVC and Mate.

No Framework

But before we discuss each framework, let’s quickly go over the problems that the frameworks are trying to solve. All Flex application frameworks have been created, because there are problems with implementing a Flex application without one (or, of course, with another framework).

If you take a look at the Code Files in the tutorial, you’ll see that the application doesn’t really need a framework, because it’s simple and straightforward. However, oftentimes, applications are just the opposite. So implementing a complex Flex application, without a framework and following the model described in the tutorial, will require the following:

• Separation of Concerns. Of course, the major rationale for using the framework is to separate the code based on its roles/responsibilities, i.e. model, view, controller. The advantages of which I won’t discuss further. Read Wikipedia. In any case, without a framework, the data, the business logic and the interface are mixed inside the FlickrRIA application.
• Data Sharing. Data, e.g. the photoFeed, needs to be shared to other screens in the application. It will not be best practice to expose the variables in different pages for other pages to access. Think spaghetti, but not for eating.
• Service Sharing. The HTTP Service and the like, e.g. the photoService, needs to be reused in other functions of the application, as well as the logic for using that service, e.g. the requestPhotos() method. Similar dilemma as with data sharing.
• Unit Testing. Testing must be easy to do. Automation is highly recommended. It can still be done without a framework, but it is difficult with the logic embedded in the Flex components.

Cairngorm

For all 3 frameworks, the development process starts with implementing the Photo value object. Beyond that, the frameworks differ.

Flickr Example Using Cairnorm (Flex project archive, ZIP)

Cairngorm addresses the difficulties in the absence of a framework with recommended best practices and the framework. Ease of testing and maintenance are derived from the separation of concerns.

• Model. Data is encapsulated and shared via the singleton ModelLocator, and is bound to the Flex components of the application.
• View. The View is made up of different visual Flex components in the application. It has two jobs:  1) dispatching events to request data or invoke actions on the backend and 2) watching for Model updates and updating the interface as needed.
• Controller. The Controller is implemented via the FrontController. It manages which command is invoked when an event is dispatched from the View.
  • Business logic is encapsulated and spread out in Commands. It invokes the service (via delegates), handles the results, and updates the Model.
  • Delegates add an extra layer of indirection between the application (client) and the server. They locate the service, invoke it and pass the necessary parameters.
  • Services are encapsulated and shared via the singleton ServiceLocator.

I found Cairngorm really easy to learn and work with. With its wide support and defacto standard status, it almost always is the chosen framework. It’s good for medium to large development teams of varying skill levels in Flex and ActionScript.

However, there are a few disadvantages with Cairngorm.

• The ModelLocator can get huge and unwieldy; depending on how large your application is and how much data it keeps. To resolve this, I have seen using more than one ModelLocator to separate, say, the business data from the presentation data. But it still won’t be fun to handle merge conflicts with everyone updating it, if you’re in a large team.
• Extending the CairngormEvent for each event to encapsulate the event name ID and data was not too pleasant. I would imagine it’s easy to end up with duplicate event IDs in a large application (which is why a naming convention would be vital). I suppose you can create a generic Cairngorm event, but the data parameters wouldn’t be type-checked.
• Lastly, I wasn’t in favor of referencing the ModelLocator in all of my Flex components. I favored passing a data reference from a parent component to keep my view components as reusable and un-Cairngorm-ish as possible.

PureMVC

Flickr Example Using PureMVC (Flex project archive, ZIP)

PureMVC addresses the difficulties similar to Cairngorm with a few more layers of indirection.

• Model. Data is encapsulated and spread out in Proxies. These are referenced singletons. The Model handles interaction to the data access layer in persisting or retrieving data. In the code, I used the Proxy and Delegate pattern. No huge model locators found here!
• View. The View is implemented with Flex components and Mediators. The mediators run interference between the view components and the rest of the application. The View listens to events, sends notifications to request data or invoke an action, and receives notifications to update the visual components. The view components do not have any PureMVC-specific code and are reusable.
  • Note that events do not need to be customized. The mediator retrieves the necessary data from the view component and passes it to the command.
  • Events are, in effect, replaced by notifications — similar to a Flex event. Of course, there is no type-checking for the parameters.
• Controller. The Controller is hidden from the developer, but maintained the mappings between notifications and commands.
  • Commands, like in Cairngorm, contain the business logic. But for data persistence and/or retrieval, they defer to the Proxies.
  • Unique to PureMVC is the Façade. It is a singleton that initializes the Model, View and Controller components. All components can be accessed through the façade, as well as all notification and/or event IDs.

PureMVC resolves a lot of the aspects I didn’t like about Cairngorm. It is good for complex applications, with a lot of common components, e.g. forms-based applications with workflows. And it works well for medium to large development teams.

However, it does have a few disadvantages:

• PureMVC cannot rely on data binding innately. Manually updating the data on the view from the mediator could get annoying in a larger application. I suppose that is the “sacrifice” that must be made in making the view components purely portable, without any knowledge of PureMVC. However, because of this, I began to question, how often do I need it to be portable? Apart from this exercise?
• It’s more complex than other frameworks. Therefore, it does incur a steeper learning curve than others. It may not be too difficult for a developer who knows Java, for example. But complexity and flexibility can breed more architectural mistakes.

Mate

Flickr Example Using Mate (Flex project archive, ZIP)

Mate responds to the challenges of having no Flex application framework in a simple, “indirect” way. It is a “tag-based, event-driven Flex framework”, but can facilitate an MVC implementation.

• Model. Mate doesn’t provide specific model components, but enables the data sharing and encapsulation with the use of cached generators. In examples, they call these managers.
• View. The View is implemented with Flex components, which handle event dispatching for data retrieval and/or method invocation. Similar to PureMVC, the view components are highly reusable, since they don’t have knowledge of Mate.
• Controller. The Controller is configured via the event map, the core of Mate.
  • Event handlers are defined in the map to specify what needs to happen when certain events are dispatched. It can support a variety of handlers, such as HTTP service invokers, web service invokers, command invokers and method invokers. In combination, these comprise the business logic triggered by the dispatched event.
  • Instead of binding view properties directly to the Model, Mate uses injectors. Injectors are also defined in the event map to set properties from a source (in the Model) to a target (in the View). Similar to event handlers, injectors observe changes from the Model to trigger updating the View.

Mate also resolves a lot of my issues with Cairngorm, but is simpler overall than PureMVC. It is still unable to take advantage of data binding, but I prefer injectors to setting data through code.

Mate would work well for complex applications and is suited for small to large development teams. And unlike other IoC Flex frameworks, it provides more meat behind the event handlers.

Note: The embedded code files have comments that contain more details about each ActionScript class/component. It explains what needs to be created/updated for new functionality and what are the base objects. I have also included a “simplistic” sequence diagram (well, I tried as best I could to make it simple) of the event flows for each framework, when a photo search is performed.

The ArrayCollection class has a built-in filtering mechanism, where you pass a function reference to the filterFunction property in order to filter out the items that don’t satisfy the function’s criteria. This is extremely useful, but if you need to filter on more than one criterion you’ll have to complicate the filter function more and more. I don’t know why, but It gives me the same chills on my spine as hardcoding does.

The solution was to extend the ArrayCollection and add the option to provide an array of function references as filters. The final result is the AND between each evaluated filter function. It’s one of those situations when writing some few extra lines of code really pays off.

Example:

Action script file -

package
{

import mx.collections.ArrayCollection;

public class ArrayCollectionComplex extends ArrayCollection
{
	private var _filterFunctions:Array;

	public function ArrayCollectionComplex( source:Array = null )
	{
		super(source);
	}
	public function set filterFunctions( filtersArray:Array ):void
	{
		_filterFunctions = filtersArray;
		this.filterFunction = complexFilter;
	}
	public function get filterFunctions():Array
	{
		return _filterFunctions;
	}

	protected function complexFilter( item:Object ):Boolean
	{
		var filterFlag:Boolean = true;
		var filter:Function;
		for each(filter in filterFunctions)
		{
			filterFlag = filter( item );
			if( !filterFlag )
				break;
		}
		return filterFlag;
	}
}

}

mxml file
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="creationCompleteHandler();" xmlns:local="*">
<mx:Script>
    <![CDATA[

        private var selectedMinPrice:int = 0;
        private var selectedMaxPrice:int = 3000;
        private var selectedType:String = "all";
        private var selectedCondition:String = "all";
        private var selectedVendor:String = "all";

        private function creationCompleteHandler():void
        {
            /* setup the filters array: in order to take effect
             * you must call refresh() on the collection
             */
            productsCollection.filterFunctions =
                [
                    filterByPrice, filterByType,
                    filterByCondition, filterByVendor
                ]
            productsCollection.refresh();
        }

        // your classic filter functions
        private function filterByPrice( item:Object ):Boolean
        {
            if( selectedMinPrice <= item.productPrice && selectedMaxPrice > item.productPrice )
                return true;
            return false;
        }

        private function filterByType( item:Object ):Boolean
        {
            if( item.productType == selectedType || selectedType == "all" )
                return true;
            return false;
        }

        private function filterByCondition( item:Object ):Boolean
        {
            if( item.productCondition == selectedCondition || selectedCondition == "all" )
                return true;
            return false;
        }

        private function filterByVendor( item:Object ):Boolean
        {
            if( item.productVendor == selectedVendor || selectedVendor == "all" )
                return true;
            return false;
        }

        // change handlers, nothing new here
        private function productPriceChangeHandler():void
        {
            selectedMinPrice = hsProductPrice.values[0];
            selectedMaxPrice = hsProductPrice.values[1];
            productsCollection.refresh();
        }

        private function productTypeChangeHandler():void
        {
            if( cbProductType.selectedItem != null )
                selectedType = cbProductType.selectedItem.data;
            productsCollection.refresh();
        }

        private function productConditionChangeHandler():void
        {
            if( cbProductCondition.selectedItem != null )
                selectedCondition = cbProductCondition.selectedItem.data;
            productsCollection.refresh();
        }

        private function productVendorChangeHandler():void
        {
            if( cbProductVendor.selectedItem != null )
                selectedVendor = cbProductVendor.selectedItem.data;
            productsCollection.refresh();
        }
    ]]>
</mx:Script>
    <mx:DataGrid horizontalCenter="0" height="250" y="89">

        <mx:dataProvider>
            <local:ArrayCollectionComplex id="productsCollection">
                <mx:Array>
                    <mx:Object productName="Solar Panel" productPrice="1500" productType="home" productCondition="new" productVendor="SunPan" />
                    <mx:Object productName="Laptop Battery" productPrice="80" productType="computers" productCondition="used" productVendor="Laptop INC." />
                    <mx:Object productName="Laptop Screen" productPrice="300" productType="computers" productCondition="new" productVendor="Laptop INC." />
                    <mx:Object productName="Temp. Monitor" productPrice="95" productType="home" productCondition="new" productVendor="YourHome LTD" />
                    <mx:Object productName="Motion Sensor" productPrice="2500" productType="home" productCondition="new" productVendor="Secu-Dome" />
                    <mx:Object productName="Brake Disk" productPrice="200" productType="auto" productCondition="used" productVendor="Voltran" />
                    <mx:Object productName="Safety Belt" productPrice="500" productType="auto" productCondition="new" productVendor="PanAuto West" />
                    <mx:Object productName="Multimeter" productPrice="40" productType="electro" productCondition="new" productVendor="VOID" />
                    <mx:Object productName="Capacitor" productPrice="5" productType="electro" productCondition="new" productVendor="VOID" />
                </mx:Array>
            </local:ArrayCollectionComplex>
        </mx:dataProvider>        

        <mx:columns>
            <mx:DataGridColumn dataField="productName" headerText="Name" />
            <mx:DataGridColumn dataField="productPrice" headerText="Price" />
            <mx:DataGridColumn dataField="productType" headerText="Type" />
            <mx:DataGridColumn dataField="productCondition" headerText="Condition" />
            <mx:DataGridColumn dataField="productVendor" headerText="Vendor" />
        </mx:columns>

    </mx:DataGrid>
    <mx:HBox y="365" width="700" horizontalCenter="0" horizontalAlign="center" verticalAlign="middle">
        <mx:HSlider id="hsProductPrice" allowTrackClick="true" minimum="0" maximum="3000" snapInterval="10" liveDragging="true" thumbCount="2" toolTip="Price" width="220"
            change="productPriceChangeHandler()" values="[0,3000]" labels="[0, 3000]"/>

        <mx:ComboBox id="cbProductType" change="productTypeChangeHandler();">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="-- All Types --" data="all" />
                    <mx:Object label="home" data="home" />
                    <mx:Object label="computers" data="computers" />
                    <mx:Object label="auto" data="auto" />
                    <mx:Object label="electro" data="electro" />
                </mx:Array>
            </mx:dataProvider>
        </mx:ComboBox>

        <mx:ComboBox id="cbProductCondition" change="productConditionChangeHandler();">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="-- All Conditions --" data="all" />
                    <mx:Object label="new" data="new" />
                    <mx:Object label="used" data="used" />
                </mx:Array>
            </mx:dataProvider>
        </mx:ComboBox>
        <mx:ComboBox id="cbProductVendor" change="productVendorChangeHandler();">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="-- All Vendors --" data="all" />
                    <mx:Object label="SunPan" data="SunPan" />
                    <mx:Object label="Laptop INC." data="Laptop INC." />
                    <mx:Object label="YourHome LTD" data="YourHome LTD" />
                    <mx:Object label="Secu-Dome" data="Secu-Dome" />
                    <mx:Object label="Voltran" data="Voltran" />
                    <mx:Object label="PanAuto West" data="PanAuto West" />
                    <mx:Object label="VOID" data="VOID" />
                </mx:Array>
            </mx:dataProvider>
        </mx:ComboBox>
    </mx:HBox>
</mx:Application>