Flex 3.3 - Intalling data visualisation component

Many people get confused installing data visualisation components in flex 3.3 sdk.
Here is the simple 3 step solution...
1. download the data visualisation zip here

2. extract the zip file

3. and copy files from extracted folders to folders in sdk.

e.g.
datavisualization.swc
from datavisualization_sdk3.3\frameworks\libs\
to
FB Installation folder\sdks\3.3.0\frameworks\libs\

and thats it!

Happy flexing,

Flex: Accessing protected properties and internal namespace



Sometime we need to access the protected properties of the class. e.g. the TextField of a TextInput control.
You can access the such properties by subclassing the class.

package com
{
import mx.controls.TextInput;
import mx.core.IUITextField;

public class MyTextInput extends TextInput
{
public function MyTextInput()
{
super();
}
public function get myTextField():IUITextField
{
return this.textField;
}
}
}

The same property can be accessed without extending the class, using the internal namespace. ;)


import mx.core.mx_internal;

use namespace mx_internal;

private function getMyTextFild():void
{
var tf:IUITextField = ti.mx_internal::getTextField();
// ti is textinput control
}


DataGrid Search usign filterFunction

Following example uses filterFunction on the ArrayCollection.
You can view the example here Search DataGrid

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>

<![CDATA[
import mx.events.IndexChangedEvent;
import mx.collections.ArrayCollection;

[Bindable]
private var dp:ArrayCollection = new ArrayCollection([{name:'rahim',add:'fdsds dfdsfsd sf sdf sf '},
{name:'sanket',add:'fdsds dfdsfsd sf sdf sf '},
{name:'Rahim',add:'fdsds dfdsfsd sf sdf sf '},
{name:'Satish',add:'fdsds dfdsfsd sf sdf sf '},
{name:'Vikas',add:'fdsds dfdsfsd sf sdf sf '},
{name:'Jagtap',add:'fdsds dfdsfsd sf sdf sf '},
{name:'Ravi',add:'fdsds dfdsfsd sf sdf sf '},
{name:'Raju',add:'fdsds dfdsfsd sf sdf sf '},
{name:'Parvez',add:'fdsds dfdsfsd sf sdf sf '},
]);

private var tempdp:ArrayCollection;

private function changeHandler(e:Event):void
{
e.stopImmediatePropagation()
if(txtSearch.text == '')
{
dp.filterFunction = null;

}else
{
dp.filterFunction = nameFilter;
}
dp.refresh();
}

private function nameFilter(item:Object):Boolean
{
return item.name.toLowerCase().indexOf(txtSearch.text.toLowerCase())!=-1;
}
]]>
</mx:Script>
<mx:DataGrid x="10" y="87" dataProvider="{dp}" id="dg">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="name"/>
<mx:DataGridColumn headerText="Column 2" dataField="add"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
<mx:TextInput id="txtSearch" x="58" y="38" change="changeHandler(event)"/>
</mx:Application>




Custom Events in Flex Part II

In the following example the component is loosely coupled with the Application. The communication (and data transfer) happening through the custom events.



CustomEvent Class

=================



package com

{

import flash.events.Event;



public class MyButtonEvent extends Event

{

public static const MY_EVENT:String = "myevent";

        public var myBtnId:String;

        

        

        // create static cosnst for evetn name

        // and add public property to store button id

        // and finally override the clone method

        

        

public function MyButtonEvent(type:String, myBtnId:String)

{

super(type);

this.myBtnId = myBtnId;

}

        

        

        override public function clone():Event {

            return new MyButtonEvent(type, myBtnId);

        }



}

}



Component

===============



<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="166" height="80">

<mx:Metadata>

       [Event(name="myevent",type="com.MyButtonEvent")]

    </mx:Metadata>

<mx:Script>

<![CDATA[





private function clickHandler(e:MouseEvent):void

{

var objEve:MyButtonEvent = new MyButtonEvent("myevent",e.currentTarget.id)

dispatchEvent(objEve);

}





]]>

</mx:Script>

<mx:Button id="btn" x="47.5" y="30" label="Click Me" click="clickHandler(event)"/>



</mx:Canvas>



And the Application

=================





<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:com="com.*">



<mx:Script>

<![CDATA[

import com.MyButtonEvent;

import mx.controls.Alert;



private function myeventHandler(e:MyButtonEvent):void

{

Alert.show(e.myBtnId)

}



]]>

</mx:Script>

<com:MyComp myevent="myeventHandler(event)" x="373" y="61"/>

</mx:Application>






Custom Events in Flex Part I

Flex applications are event-driven. Events let an application know when the user interacts with the interface, and also when important changes happen in the appearance or life cycle of a component, such as the creation of a component or its resizing. Events can be generated by user input devices, such as the mouse and keyboard, or by the asynchronous operations, such as the return of a web service call or the firing of a timer.

In addition to using the events inherited from its superclasses, your custom components can define custom events. You use custom events to support data binding, to respond to user interactions, or to trigger actions by your component.

When a Flex component dispatches an event, it creates an event object, where the properties of the event object contain information describing the event. An event listener takes this event object as an argument and accesses the properties of the object to determine information about the event.

The base class for all event objects is the flash.events.Event class. All event objects are instances of the Event class, or instances of a subclass of the Event class.

Here is the simple example of dispatching a custom event from an custom component.



<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:com="com.*">



<mx:Script>

<![CDATA[

import mx.controls.Alert;



private function myeventHandler(e:Event):void

{

Alert.show('myevent')

}



]]>

</mx:Script>

<com:MyComp myevent="myeventHandler(event)" x="373" y="61"/>

</mx:Application>







Component

==========



<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="166" height="80">

<mx:Metadata>

       [Event(name="myevent",type="flash.events.Event")]

    </mx:Metadata>



<mx:Button x="47.5" y="30" label="Click Me" click="dispatchEvent(new Event('myevent'));"/>



</mx:Canvas>


DataGrid Itemrenderer Issues

After fighting with ItemRenderers in Flex ListBased Controls, I have finally figured out how they really work.

Issues:
1. When you scorll a datagrid it duplicates the itemrenderer's value. This is because datagrid create itemrenderer instances for visible rows only and it reuses these renderers for other rows when u scroll.

2. When you change the dataprovider same problem occurs. This is again because of reuse of itemrenderers.

Solution for first issue is just add an extra container like canvas and put your datagrid into it. Now set the datagrids height, so that no scroll will come
(datagrid.height = dataprovider.lenght * rowheight)
You will get the scroll on parent container.


Solution for second issue: Just reassign your itemRenderer everytime you change the dataprovider.
datagridcolumid.itemRenderer = new ClassFactory(itemRenderer)
datagrid.dataprovider = dataprovider_new