Rahim's Blog: flex ur muscles :)

2009-12-09T01:41:00.001-08:00

Flex 3.3 - Intalling data visualisation component

2009-06-06T02:37:00.000-07:00

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

2009-05-21T03:45:00.000-07:00



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

2009-05-15T03:56:00.000-07:00

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

2009-04-28T06:40:00.000-07:00

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

2009-04-27T00:08:00.000-07:00

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

2009-04-22T00:46:00.000-07:00

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

2009-04-15T09:45:00.000-07:00

* 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/

MouseWheel support for mac OSX

2008-10-22T06:17:00.000-07:00

get the sample code here

MouseWheel.rar

Importing web service in flex 3

2008-10-17T08:35:00.001-07:00

1. Select Data > Import Web Services (WSDL).
2. Select the project source for generated code.
3. Enter the WSDL to use
4. Deselect any of the listed web service operations for which you do not want to
generate code.
5. Click Finish to generate the ActionScript classes.

see following example..........

happy coding
rahimoddin

Adobe Flex 2 Certification

2008-09-10T02:22:00.000-07:00

Hey friends,

I have cleared my Adobe Certification with 100%.

URL Validator

2008-06-18T02:18:00.000-07:00

hi friendz,

here is the URL Validator App
URL Validator

Flex Skinning Progress Bar

2008-06-15T02:38:00.000-07:00

http://blog.flexexamples.com/2008/03/27/setting-the-bar-skin-on-a-progressbar-control-in-flex/