Posts Tagged ‘component

There are very few resources on the web about printing in Flex. Adobe LiveDocs is an excellent on-line reference for Flex. I thought of sharing my experience and the way I successfully printed the dataGrid in Flex.

Example below: shows how to call a function to print a datagrid

public function printDataGrid() : void
var printJob : FlexPrintJob = new FlexPrintJob();
var thePrintView : FormPrintView = new FormPrintView();
if(printJob.start() != true)

//Set the print view properties.
thePrintView.printableDataGrid.dataProvider = originalDataGrid.dataProvider
thePrintView.printableDataGrid.columns = originalDataGrid.columns ;
thePrintView.printableDataGrid.setStyle(”fontSize”, 8);
thePrintView.printableDataGrid.setStyle(”wordWrap”, true);


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

Example below: shows printview

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

Below are the simple steps to print the DataGrid in Flex

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

2. Create 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


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

print datagrid
Download source here


The below example  gives you a hook to sort a  particular column in a datagrid without user input. One can use the below function where ever a datagrid has to have a default sort order on its column(s).  Note : This works with flex 2 datagrid and not with Advanced datagrid in Moxie.

The dataGridDefaultSort functions requires two input items. The dgName which as the variable suggest is the name of the DataGrid and the dgColumn, DataGrid Column, to be sorted by the numbers. column numbering begins with zero.

These input items are used with the DataGridEvent below and is dispatched (excuted). The DataGridEvent has a total of 9 values for successful operation. They are listed below in expanded detail.

1. type:String — The event type; indicates the action that caused the event. This is represented by the dgName input variable. The DataGridEvent.HEADER_RELEASE constant defines the value of the type property of the event object for a headerRelease event, which indicates that the user pressed and released the mouse on a column header
2. bubbles:Boolean (default = false) — Specifies whether the event can bubble up the display list hierarchy.
3. cancelable:Boolean (default = false) — Specifies whether the behavior associated with the event can be prevented.
4. columnIndex:int (default = -1) — The zero-based index of the column where the event occurred. This is represented by the dgColumn input variable.
5. dataField:String (default = null) — The name of the field or property in the data associated with the column.
6. rowIndex:int (default = -1) — The zero-based index of the item in the in the data provider.
7. reason:String (default = null) — The reason for an itemEditEnd event.
8. itemRenderer:IListItemRenderer (default = null) — The item renderer that is being edited or the header renderer that was clicked.
9. localX:Number — Column x-position for replaying columnStretch events.

Call this function anywhere in the program and  use as per above attributes.

private function dataGridDefaultSort(dgName:Object, dgColumn:int):void{
dgName.dispatchEvent(new DataGridEvent(DataGridEvent.HEADER_RELEASE,   false,true,dgColumn,null,0,null,null,0));

Yesterday I spent hours writing my own password strength monitor utility in for a personal project but i couldn’t make it work properly, So i did exactly what every other developer does after getting thoroughly frustrated i.e.  I Googled until i reached this: geekWisdom 😉

  • Download source from here
  • Click on the image to view sample

You can even use a text input validator which would give you  the similar result. Depends on the requirement … one can make it as  fancy as  the one mentioned above or as simple as a validator

below is the code for textInput validation

public class PasswordStrength{
private static var _strength : Number = 0;
private static var _regSmall : RegExp = new RegExp( /([a-z]+)/ );
private static var _regBig : RegExp = new RegExp( /([A-Z]+)/ );
private static var _regNum    : RegExp = new RegExp( /([0-9]+)/ );
private static var _regSpecial : RegExp = new RegExp( /(\W+)/ );

public static function checkStrength( password : String ) : Number{
_strength = 0;
if( _regSmall ) != -1 ){
_strength ++;
if( _regBig ) != -1 ){
_strength ++;
if( _regNum ) != -1 ){
_strength ++;
if( _regSpecial ) != -1 ){
_strength ++;
return _strength;
public function PasswordStrength( se : SingletonEnforcer ){
//Force it so the user can’t get here;
class SingletonEnforcer{}

The following example is a Simple searchable DataGrid, I have also included dataGrid item renderer to show how to define/use a dataGrid “itemRendrer”. Search and Highlight a row depending on the searched text in a dataGrid. Define a cursor to traverse dataGrid rows.

The Objective of this example :

  • How to create custom item rendrer using Updatedisplaylist and data property.
  • How to use the itemrendrer (detail).
  • How to use custom cursors in a dataGrid.
  • how to write a custom component extending a base component in this case dataGrid. (highlight a row in the dataGrid).

Download source:

Sample : search_datagrid

There are different kinds of events in the Flex world. An event can be generated from user gesture, return of requests and component lifecycle. Use event is a two step process, (1) You need to write the handler (2) You need to register the handler to the event hook. To register event, there are two different ways:

Inline MXML way:<mx:Button id=”myButton” click=”myhandler(event)”/>

Actionscript way: myButton.addEventListener(MouseEvent.CLICK, myhandler);

The code above does the same job.  However, addEventListener provides more advanced control like event propagation and event priority. Event in Flex can be dispatched implicitly (user clicks on a button, the event is dispatched by the system) and explicitly (you can programmatically trigger an event).

Event propagation is an important topic for Flex programming. So, I will try to talk about what I have known on this topic here. Feel free to correct me if I am wrong. As I know, event propagation has three phases. They are capturing, at target, and bubbling. If you have an Application A contains a VBox B that has a Button C. When an user clicks the Button C, it first goes through “capturing phase”. In this phase, the event propagation through the topmost parent of C (ie. stage) and continue walk down the display object hierarchy until it reaches the original target (ie. C). The path for capturing phase is stage -> root -> A -> B -> C. When the event reaches C, the “at target phase” will be started and it just involves one object (ie. C). After that, the event bubbles up following the reverse path of the capturing phase and walk its way back up to root (C -> B -> A -> root -> stage). This is called “bubbling phase”.


As the event makes its way though each phase and each object within those phases, it calls all of the listener functions that were added for that event. This means that clicking on the Button C doesn’t limit the event to C, A and B also receive the event. Actually, they receive the event twice, once in the capturing phase and once in the bubbling phase.

However, by default, listener cannot receive event in capturing phase because the capability is turned off. To enable it, we need to set “true” to the third parameter in “addEventListener”, the “useCapture” parameter. If you don’t do that, listener would just listen to event in the “at target” or “bubbling” phase. However, it is an exclusion setting. Once you set the “useCapture” to true, it will not receive event in other phases. To get around this, you need to use “addEventListener” twice, once with “useCapture” set to false (or omitted) and once with “useCapture” set to true.  On the other hand, any listener along the path can stop the event propagation.

In the Event object, the “target” attributed is the component where the event originated (ie. C in this example) whereas “currentTarget” attribute is the component that event currently reaches. So, this attribute’s value will be changed along the propagation path. Apart from these two properties, Event object also contains properties like type (String), eventPhase (int), bubbles (boolean), and cancelable (boolean).

I have moved to a different location

check out my new home Flexout


May 2018
« May    

Blog Stat

  • 84,065 Hop's so far!!!

follow me


Linkedin Blogger Twitter Youtube Orkut

latest flickr photos

top rated