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

Text Layout Framework in Flex 3

* Bidirectional text, vertical text and over 30 languages, like arabic, chinese, devnagari etc............
* Selection, editing and flowing text across multiple columns and linked containers, and around inline images
* Vertical text, Tate-Chu-Yoko (horizontal within vertical text) and justifier for East Asian typography
* Rich typographical controls, including kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens
* Cut, copy, paste, undo and standard keyboard and mouse gestures for editing
* Rich developer APIs to manipulate text content, layout, markup and create custom text components.

To use TLF you need to install Adobe AIR 1.5 or Flex 3.2

More Links:

http://corlan.org/2009/01/19/how-to-use-text-layout-framework-in-flex-32-or-air-15/