A BRAND NEW WORLD

Whats up with me?

2010-01-16T06:40:00.000-08:00

Its been a long time since I have blogged here and a lot of things have happened in between.

From breaking my knee to a painful surgery to a new job to an accident to a new place to live , Life is surely bashing me up!! This post is just to let know that I will be blogging regularly from now on. Like atleast once a week.

Thanks!

Communication between itemrenderers

2009-07-08T04:55:00.000-07:00

ItemRenderers has always been my favourite feature in flex. In one of the tasks I took on, I had to communicate between item renderers to achieve the desired result.

As usual, flex's event architecture was there to aid me achieve this task.

So here is the flow

1.Dispatch an event with bubbles set to true when some user action is performed in the source item renderer or in caase of an inline item renderer call a method using outerDocument like this.
outerDocument.handleFirstColumnChange(data);

2.Have a listener attached to the event dispatched by the source renderer on the parent.Now the parent should re-dispatch the event on the datagrid like
datagrid.dispatcEvent(new Event("itemchangeonfirstcolumn"),data.id));
Note:I am passing the id along with this event so that the target itemrenderers can figure out if they are intended to react or not.

3.Add a listener on the target itemrenderer and on the handler you can do whatever the target is supposed to do.

Here is a simple example The case is that one itemrenderer has to change itself based on a selection done on the other item renderer.

Right clik->viewsource for full source code of the example.

Enjoy!

Changing the headers of dataGrid dynamically

2009-04-03T04:03:00.000-07:00

In a recent project I was working on, I came across a situation where I will know the header text for the columns at run time, pulled from a xml document.

And here is how I did it.


   private function setHeaderTexts():void {
    var i:Number = 0;
    var columns:ArrayCollection =new ArrayCollection(datagrid.columns);
    for each (var column:DataGridColumn in columns) {
     column.headerText = tempArrayCollection.getItemAt(i).toString();
     //tempArrayCollection is where I store the list of headers from the XML
     i++;
    }
    datagrid.invalidateDisplayList();
   }

Hope it helps!

Refresh tileList on DataChange

2009-04-01T22:38:00.000-07:00

I happened to come across an issue with tileLists that use a custom itemRenderer.

The problem is that when I change the data provider, the items in the tileList do not redraw appropriately.

After some time spent in digging into this, I found out that for some reason the dataChange event in the itemrenderer is not triggered automatically when the data provider changes.

Note:DataChange event is triggered internally for dataGrids which are bound to a dataProvider, so we wont even notice it,but that is not the case for a tileList.

The event is triggered only when we call tileList.invalidateList().

So here is what I did. Call tileList.invalidateList() every time I change the dataProvider and handle the dataChange event in the itemRenderer and reset the UIControl's properties whatever it may be.

Here is what the view does.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
 <![CDATA[
  import mx.collections.ArrayCollection;
 
  [Bindable]
  private var dataP:ArrayCollection = new ArrayCollection(
              [{isMarried:true, isAnimal:true,name:"Montgomery"},
              {isMarried:false, isAnimal:true,name:"Juneau"},
              {isMarried:true, isAnimal:false,name:"Little Rock"},
              {isMarried:true,isAnimal:true,name:"Ricky Martin"}]);
            
          private function changeFirstElement():void {
           dataP.getItemAt(0).name = "changed";          
           tileList.invalidateList();
          }
            
 ]]>
</mx:Script>

<mx:TileList itemRenderer="testItemRenderer" dataProvider="{dataP}"
id="tileList"/>
<mx:Button label="change first element" click="changeFirstElement();"/>
</mx:Application>

And here is what the itemRenderere does.


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" dataChange="handleDataChange()"
creationComplete="handleCreationComplete()">
<mx:Script>
<![CDATA[
[Bindable]
private var theName:String=new String();

private function handleCreationComplete():void {
 if (data != null && data.hasOwnProperty("name")) {
  theName =data.name;
 }
}
private function handleDataChange():void {
 if (data != null && data.hasOwnProperty("name")) {
  if (theLabel) {
   theName = data.name;
  }
 } 
}
]]>
</mx:Script>
<mx:Label text="{theName}" id="theLabel"/>
</mx:Canvas>

Hope it helps!

Reuse ItemRenderers for Multiple columns

2009-04-01T02:29:00.000-07:00

When dealing with item renderers, one will come across all sorts of problems thrown at . One such case is "how to reuse the same itemrenderer"

Picture this case. You have a custom itemrenderer,( imagine a check box within a canvas for now) that performs a specific task and you want to reuse it on multiple columns. But how will the itemrenderer know which field in the arrayCollection is to be used to render itself appropriately?

Alright. Here is the trick.

There is this interface called IDropInListItemRenderer which your itemrenderer will have to implement to get access to listData which can be typeCasted to DataGridListData. The listData variable will hold reference to the owner of the itemRenderer and the hierarchy upwards. Following is the list of steps one has to follow.

1.Create the itemRenderer class that implements the IDropInListItemRenderer.

2.Create an instance variable to buffer the listData , namely _listData.

3.Override the set/get methods of the listData instance variable . In the setter, buffer the listData onto the instance variable

Ex:


private var _listData:DataGridListData;
public function set listData(value:BaseListData):void
    {
        _listData = DataGridListData(value);       
    }

Note:The importance of this step is that the itemrenderer can use the _listData variable to find out the name of the dataField , using something like _listData.dataField. Once the name of the dataField is acquire, the value for that datfield can be acquired by using data[_listData.dataField]

4.Override the updateDisplyList() method to update the status of the checkBox based on the value of the dataField.

Ex:


  override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {

   super.updateDisplayList(unscaledWidth,unscaledHeight);
   _instanceCheckBox.selected = Boolean(data[_listData.dataField]);
  }

5. Create the datagrid and use the above created item renderer.
Ex:


<mx:DataGridColumn dataField="isMarried" itemRenderer="sampleItemRenderer"/>
<mx:DataGridColumn dataField="isAnimal" itemRenderer="sampleItemRenderer" />

Following is the complete code.

The view:


// View
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   [Bindable]
   private var dataP:ArrayCollection = new ArrayCollection(
               [{isMarried:true, isAnimal:true,name:"Montgomery"},
               {isMarried:false, isAnimal:true,name:"Juneau"},
               {isMarried:true, isAnimal:false,name:"Little Rock"},
               {isMarried:true,isAnimal:true,name:"Ricky Martin"}]);
  ]]>
 </mx:Script>
 

 
 <mx:DataGrid dataProvider="{dataP}">
  <mx:columns>
   <mx:DataGridColumn dataField="isMarried" itemRenderer="sampleItemRenderer"/>
   <mx:DataGridColumn dataField="isAnimal" itemRenderer="sampleItemRenderer" />
   <mx:DataGridColumn dataField="name"/>
  </mx:columns>
 </mx:DataGrid>
</mx:Application>

The itemRenderer


package
{
 import mx.containers.Canvas;
 import mx.controls.CheckBox;
 import mx.controls.dataGridClasses.DataGridListData;
 import mx.controls.listClasses.BaseListData;
 import mx.controls.listClasses.IDropInListItemRenderer;

 public class sampleItemRenderer extends Canvas implements IDropInListItemRenderer
 {
  private var _listData:DataGridListData;
  private var _instanceCheckBox:CheckBox = new CheckBox();
  private var _currentDataFieldName:String = new String();
  public function sampleItemRenderer()
  {
   super();
  }

  public function get listData():BaseListData
  {
   return _listData;
  }
  
  public function set listData(value:BaseListData):void
  {
   _listData = DataGridListData(value);   
  }
  override protected function createChildren():void {
   super.createChildren();
   addChild(_instanceCheckBox);
   
  }
  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
   super.updateDisplayList(unscaledWidth,unscaledHeight);
   _instanceCheckBox.selected = Boolean(data[_listData.dataField]);
  }
 }
}

Hope it helps!

Filterfunctions .

2009-03-31T23:49:00.000-07:00

Here is a quick little post on how to use filter functions .

The primary use of filterfunctions as it implies is to filter data on a data structure such as ArrayCollection which will in turn filter the data displayed on UI controls like datagrid,combobox.

The filterfunction is called with each item in the arrayCollection as a paramter. Say you have n items in the arrayCollection, the filter function will be called n times with items 0...n passed in as a parameter. The items for which the call returns true are added to the visible list, while the rest are ignored.

Lets jump in to the sample code.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 <mx:Script>
     <![CDATA[
         import mx.collections.ArrayCollection;
         [Bindable]
         private var dataP:ArrayCollection = new ArrayCollection(
             [{type:"1", data:"Montgomery",label:"Montgomery"},
             {type:"2", data:"Juneau",label:"Juneau"},
             {type:"1", data:"Little Rock",label:"Little Rock"},
             {type:"2",data:"test 2",label:"test 2"}]);
    
         private function handleOptionSelect() :void {
             if (selectionCombo.selectedItem.toString() == "ALL") {
                 dataP.filterFunction = null;
             } else {
                 dataP.filterFunction = filterOnTypes;
             }
                 dataP.refresh();           
         }
    
         private function filterOnTypes(item:Object):Boolean {
             if (item.hasOwnProperty("type")) {
                 if (item.type == selectionCombo.selectedItem.toString()) {
                     return true;
                 }
             }
             return false;
         }
            

     ]]>
 </mx:Script>

 <mx:ComboBox change="handleOptionSelect()" id="selectionCombo">
     <mx:dataProvider>
         <mx:ArrayCollection>
             <mx:Object>ALL</mx:Object>
             <mx:Object>1</mx:Object>
             <mx:Object>2</mx:Object>           
         </mx:ArrayCollection>
     </mx:dataProvider>
 </mx:ComboBox>

 <mx:DataGrid dataProvider="{dataP}">
     <mx:columns>
         <mx:DataGridColumn dataField="type"/>
         <mx:DataGridColumn dataField="data"/>
     </mx:columns>
 </mx:DataGrid>
</mx:Application>

Note that the elements in the arrayCollection that do not match the filter criteria removed from the arrayCollection. You can restore the original data set by setting the filter function to null and calling the refresh method again.

Wondering how the AVM knows the original set? it just stores the original data set in the "source" attribute of the arrayCollection.

Hope it helps!

Bookmark and Share

Complex editors on a datagrid

2009-01-09T02:01:00.000-08:00

There are times when you want to have a data grid whose cells can have other complex controls like combobox , numeric stepper.To achieve this multi-entity ,entry form t, we use the inline itemEditor field of the datagrid component.

The key here is the itemEditor property of the datagrid column to which you can specify a class ,aka editor or renderer(either flex built in or custom). Now how will flex know which property of the editor or renderer is the user input? . The “editorDataField” property specifies which property of the renderer is to be taken as the user input. Example: value property of a numeric stepper, when numeric stepper is the itemEditor.

One very important thing to notice here is that the dataprovider is also synched with the values committed on the item renderers.

Here is an example that shows how to do this.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Script> <![CDATA[ private function showArrayCollection():void { resultText.htmlText=""; for (var i:Number=0;i<stateArray.length;i++) { resultText.htmlText+="Name:"+stateArray.getItemAt(i).name; resultText.htmlText+=" Age:"+stateArray.getItemAt(i).age; resultText.htmlText+="<br>"; } } ]]> </mx:Script>  <mx:ArrayCollection id="stateArray"> <mx:Object name="Amitha" age="25"/> <mx:Object name="Priyanka" age="27"/> <mx:Object name="Krups" age="45"/> </mx:ArrayCollection> <mx:DataGrid x="531" y="82" editable="true" dataProvider="{stateArray}"> <mx:columns> <mx:DataGridColumn headerText="Name" dataField="name" editable="false"/> <mx:DataGridColumn headerText="Age" dataField="age" editable="true" itemEditor="mx.controls.NumericStepper" editorDataField="value"/> </mx:columns> </mx:DataGrid> <mx:Button label="show" click="showArrayCollection()"> </mx:Button> <mx:TextArea width="300" height="300" id="resultText"> </mx:TextArea> </mx:Application>

Hope it helps!!

Events for DUMMIES

2009-01-05T22:26:00.001-08:00

Accept it, we all have used events but never really got to know what goes behind the scenes.

So here in vivid little words, I try to throw some light on this.

Here goes my “EVENTS for DUMMIES!”

Flash Player 9 implements an event model based on the World Wide Web Consortium’s (W3C) specification entitled Document Object Model Events available at http://www.w3.org/TR/DOM-Level-3-Events/events.html. According to this document, the lifecycle of an event that deals with display objects consists of three phases: capture, target, and bubbling.

You have probably heard of these names but never got to know why three phases are used??

The reason is simple.W3C recommends so! J

• Capture: During this phase, Flash Player makes a first pass to check every object from the root of the display list to the target component to see if any parent component might be interested in processing this event. By default, events are ignored by the parents of the target component at the capture phase. Its like collecting who and all are interested in the a components events.

Ex:

If component 1 has a code like component2.addEventListener(“eventname”,myfunction);

Component 1 will be added to a list in this phase.

• Target: At this phase, event object properties are set for the target and all registered event listeners for this target will get this event.

Event.name and event.whatever is set now!

• Bubbling: Finally, the event flows back from the target component all the way up to the root to notify all interested parties identified during the capture phase. Not all events have a bubbling phase and you should consult the AS3 language reference for the events you’re interested in.

The three event phases described above don’t apply to the user-defined events because Flash Player 9 doesn’t know about parent-child relations between user-defined event objects. But AS3 developers can create custom event dispatchers, if they want to arrange event processing in three phases.

Hope it helps!

Case insensitive SortCompare Function for Strings

2008-12-19T01:35:00.001-08:00

Here is a quick post on how to use the sortCompare function to sort strings.

Here goes the sample.Assuming your dataField is called status.This sortcomparefunction will function insensitive to the case of the strings.

private function statusSortCompareFunction(obj1:Object,obj2:Object):int {

if (!obj1.hasOwnProperty("status")) {

obj1.status = null;

}

if (!obj2.hasOwnProperty("status")) {

obj2. status = null;

}

return ObjectUtil.stringCompare(obj1.status,obj2.status,true);

}

Hope it helps!

Integrating Spring with Flex on TOMCAT

2008-12-04T09:43:00.000-08:00

This is a sequel to my post on getting up and running with blazeds/flex/tomcat on eclipse. This little post is going to explain how to integrate your ultra cool flex front end with the spring framework.Checkout http://www.springframework.org/ if you are not familiar with spring or Dependency injection.

Alright.Here are the steps.

1.Setup your blazeds server and client as mentioned in the previous blog post
2.Download the spring framework from http://www.springframework.org. Extract and move the neccessary jars into WEB-INF/lib folder of your server application.
3. Add the spring context param and listener to your web.xml file:

<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/applicationContext.xml</param-value>
</context-param>

<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>

4.Download the flex spring factory from www.adobe.com. COmpile it and have the class file inside your WEB-INF/classes folder .

5. Add the following configuration to your WEB-INF/flex/services-config.xml file:

<factories>
<factory id="spring" class="flex.samples.factories.SpringFactory" />
</factories>

6.Define your components in spring's XML file. Given the above spring
configuration, they would be placed in WEB-INF/applicationContext.xml. This
file can contain components which are intended to be exposed to flex clients as
remote objects as well as classes to be used as Flex Data Management Services
(FDMS) assembler implementations using the Java adapter.

7.To be constructed by Spring, your component should have a zero argument constructor so
Spring can construct an instance. Your applicationContext.xml file might look like:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd">

<beans>
<bean name="weatherBean" class="dev.weather.WeatherService" singleton="true"/>

<bean name="myAssembler" class="dev.assemblers.MyAssembler" singleton="true"/>
</beans>

8.Add your flex destination configuration for the components you want to expose to
flex clients. Since these components use the spring factory we define, we add the
additional tag <factory>spring</factory> and the <source> attribute is used to refer
to the spring component's bean name, not the class name as with the default factory.

For Remote object destinations you place your destinations inside of the
<service> tag which refers to the flex.messaging.services.RemotingService,
(by convention this may be in WEB-INF/flex/remoting-config.xml). For example, your
remote destination configuration might look like:

<destination id="WeatherService">
<properties>
<factory>spring</factory>
<source>weatherBean</source>
</properties>
</destination>

9.Use a simple client and set your remote object destination to the one you created on your remoting-config.xml

10.Restart your server.Test. Off you go!!

Set up blazeds on tomcat with eclipse for FLEX .

2008-11-30T03:45:00.000-08:00

Alright,

This is a quick post on how to setup your first blazeds environment for eclipse on your existing tomcat installation.

By the end of this short tutorial you will be able to have a simple flex page that can call your remote object using blazeds on tomcat.

Note:I use eclipse 3.3 with the flex builder plugin installed. Steps will probably remain the same for flex builder with wtp installed too.

1.Download blazeds from adobe.com. Extract the blazeds.war file onto a folder.I will tell you how to use this in a few steps.

2.Create your tomcat server on eclipse. If you had not added your existing tomcat as a runtime in eclipse , this is a good time to do so.

3.Create a new "Dynamic web project " on eclipse. Call it BlazeAllinOne. Now go back to the folder where you had extracted blazeds.war and copy the META-INF and WEB-INF folders from there to the "Webcontent" folder that eclipse had created in the project. The WEB-INF should include lib,flex,classes,src folders. And most importantly the new web.xml file.

4.Right click on the project and change the build path such that the java classes will be compiled into the classes folder.RightClick->properties->java build path->Source tab.

NOtice the "Default output folder" entry that is pointing to the classes folder we copied from blazeds.war

5.Open the services-config.xml file within WEB-INF/Flex folder and change entries from this

endpoint url="http://{host}:{port}/{context-root}/messagebroker/amf" class="flex.messaging.endpoints.AMFEndpoint"

TO

endpoint url="http://localhost:8080/BlazeAllinOne/messagebroker/amf" class="flex.messaging.endpoints.AMFEndpoint"

Note BlazeAllinOne was how my project was deployed. Note.Do not WebContent or anythng after your project's name.

6.Build your project, if you have not set Build-Automatically on the project menu.By this point you have generic blazeds-tomcat setup that can invoke remote objects.

Verify your setup by testing if the amf links are active . Paste the endpoint url you changed on services.xml onto your browser. something like this http://localhost:8080/BlazeAllinOne/messagebroker/amf should return you a blank page and not a 404 or 500 error.

If you get 404 error,Somethings wrong!

Now some clarifications. Why did I create a dynamic web project and copy my blazeds files? Because only of its a DWP , eclipse will deploy it in tomcat container. If you had created a simple java project and pointed to your blazeds WEB-INF folder, eclpse will not deploy the app, everytime you start the server through eclipse.

7.Let us now see how we tie up flex to the server side environment we just created..

8.Create a simple java classes on your blaze-server project .Something like this


package test;

public class tester {
public String getData() {
return "hi";
}
}

9.Build the project again. The test.tester.class file should now be generated within the WEB-INF/classes folder.

10.Open your remoting-config.xml file and create a new destination pointing to the new class.
the entry goes like this

<destination id="testremote">
<properties>
<source>test.tester</source>
</properties>
</destination>

Now Lets create the client

11.NewProject-Flex-select J2ee in application server type.Unselect "Create combined flex/java src folder".Click next

12.Deselect the "Use default location for LCDS " and enter the following.

RootFolder :{youreclipseworkspace}\BlazeAllinOne\WebContent\
Root URL:http://localhost:8080/BlazeAllinOne/
Context_Root:BlazeAllinOne/. Click finish

13.Create a simple mxml and paste this code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:RemoteObject id="test" destination="testremote">

</mx:RemoteObject>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
private function getData():void {
test.addEventListener(ResultEvent.RESULT,resultHandler);
test.addEventListener(FaultEvent.FAULT,faultHandler);
test.getData();
}
private function resultHandler(eve:ResultEvent):void{
Alert.show(eve.message.body.toString());
}
private function faultHandler(eve:FaultEvent):void{
Alert.show(eve.message.toString());
}

]]>
</mx:Script>
<mx:Button label="click" click="getData()">

</mx:Button>
</mx:Application>

Note:The remote object destination I use is testremote.The one I created in remoting-config.xml file.

14.Build all and restart the server if its neccessary. RIght click on your mxml and select "Run as Flex application"

15.Click on the button. You should be getting a pleasant "hi" from your server setup :-)

16.Note that you can setup break points on flex and java and debug them parallely.

There you go. You have the power of flex,blazeds,tomcat on your hands.

Make the world a better place :-)

Hope it helps!

What Adobe Air Should be able to do but does'nt!

2008-11-25T04:20:00.001-08:00

Alright, after working with adobe air for sometime, I find myself longing for the following features.

1.Ability to execute system processes - I do understand that this poses a security riskl, but what the hell.? The user is installing AIR as an administrator after all. Adobe should learn from SUN here and do what java does best. Even though java is meant to be cross platform, it does provide developers with options like JNI API to use native code whenever required.

2.Ability to add options to context menu on file/folder icons – Remember how svn or winzip can add multiple options to context menus that comes when you right click on a file?? This is something I would really love to have in my air application . And no its not there! Cant believe they missed it.

3.AIR can have an API to parse EXCEL/WORD files – What I am trying to say is something like apache POI that helps AIR apps to read and write binary data from files in the files ystem and make sense out of it. Even a bridge between Apache POI and air might do the trick

4.Auto Sync API – Synching the built in sqlite database can be simpler. Some kind of an auto sync api to update the local db will be very helpful .Right now its just possible to detect a change in network connectivity and you are on your own to do what is to be done.

That’s it for now. I will add as soon as I find myself wanting more. Still love AIR/FLEX though! J

Flex Specific security considerations

2008-11-19T01:29:00.000-08:00

When it comes to security there is no end to what one can do , but the basic techniques that an attacker remains the same. In case of a RIA built with flex, there are a

few important and unique considerations.

It’s very very simple to decompile a Flex or Flash file. The file format is public and many decompilers are already in place. The Same can be said about javascript too, but the thing is that with flex based RIA’s a lot of context and logic is saved on the client side. If you are a fan of saving sensitive data on client side,watch out! Its too easy to know what you are doing on the client.
It’s equally easy to monitor requests and results from a Flex app to and from the server. This and the above make it a breeze to get the URI’s and expected parameters for your PHP scripts.Softwarre like ETHEREAL do a great job in finding out what is being sent and received.
Most Flex/PHP/JSP architected applications will expect and return clean, simple XML data. This data can be parsed easily to see if any security holes can be exploited.Thats why you will have to seriously consider the binary protocol AMF and start using its implementation in the form of Blazeds.LCDS or AMFPHP

Hope it helps!

How to test if an object is of a given type?

2008-11-18T01:59:00.001-08:00

When dealing with typeCasting its essential to test if the objects are compatible before having a
typecast statement.Forgetting to do this results in fragile code that might throw a type cast error anytime.
Here is an example that shows you how to test this.
Note:A child is a type of parent and the vice versa is not true.

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

<mx:Application

            creationComplete="test()"

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

            <mx:Script>

                        <![CDATA[

                                    import mx.controls.Alert;

                                    import mx.events.CollectionEvent;

                                    import mx.collections.ArrayCollection;

                                    private function test():void {

                                                var parent:Parent = new Parent();

                                                var child:Child = new Child();                                              

                                                if (child is Parent) {

                                                            Alert.show("Yes");

                                                } else {

                                                            Alert.show("No");

                                                }

                                    }

                        ]]>

            </mx:Script>    

            </mx:Application>

   }

Flex - Check if a property exists in an Object

2008-11-18T01:51:00.001-08:00

When dealing with typeCasting its essential to test if the objects are compatible before having a
typecast statement.Forgetting to do this results in fragile code that might throw a type cast error anytime.
Here is an example that shows you how to test this.

Note:A child is a type of parent and the vice versa is not true.


 <?xml version="1.0" encoding="utf-8"?>
<mx:Application
            creationComplete="test()"
             xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
            <mx:Script>
                        <![CDATA[
                                    import mx.controls.Alert;
                                    import mx.events.CollectionEvent;
                                    import mx.collections.ArrayCollection;

                                    private function test():void {
                                                var parent:Parent = new Parent();
                                                var child:Child = new Child();                                               

                                                if (child is Parent) {

                                                            Alert.show("Yes");

                                                } else {

                                                            Alert.show("No");

                                                }

                                    }

                        ]]>

            </mx:Script>    

            </mx:Application>

   }

Understanding [Bindable]

2008-11-17T02:54:00.000-08:00

One of the most tricky and less understood features of flex is Binding.

Sure binding on first sight, is a very simple concept to grasp , but when one tries to apply it practically , one can have himself pulling his hair out.

Read this before you become a virendar sehwag look alike J.

My first doubts on the way [Bindable] arouse when I tried to use the bindable variable on an expression .

I was just wondering if having an expression based on a bindable variable would recompute itself , whenever the variable changed?

I had something like this

[Bindable]

private var test:Number = new Number();

private function changeText():void {

this.test=new Number(nameInput.text);

}

And I set the value of the bindable variable on button click

<mx:HBox width="100%">

<mx:Form>

<mx:FormItem label="valueOfTest">

<mx:TextInput id="nameInput" width="100"/>

</mx:FormItem>

<mx:FormItem label="Check the Binding effect here">

<mx:TextInput id="valueAfterChange" text="{test > 1}" width="100"/>

</mx:FormItem>

<mx:FormItem>

<mx:Button label="Set" click="changeText()"/>

</mx:FormItem>

The value of the second text input did change and the expression was recomputed.

Cool enough. When I removed the [Bindable] metatag the value did not change.That was expected~.

The fact is that the events are not triggered on components that use the variable.Simple.

Now, what if you have an function that is assigned to the text attribute of the second text input?

See this,

I changed the second text inputs definition to

<mx:TextInput id="valueAfterChange" text="{getTextForMe() }" width="100"/>

And I added the function which goes like this

private function getTextForMe():Number {

return test + 10;

}

My first instinct was that the value would automatically be recomputed , but it did not.

It turns out that the function should be declared as [Bindable] too, so that the property would be recomputed too.

[Bindable]

private function getTextForMe():Number {

return test + 10;

}

Alright so here is the moral of the story.

Have your variables annotated with [Bindable] meta tag whenever the changes to it has to reflect elsewhere.

Changes to variables that are bindable will reflect even if the variable was used in an arithematic expression. I mean any property that uses the bindable variable to compute, its value will be recomputed.

If you are using functions to determine value for any property that uses the bindable variable , have the function declared as bindable.

Hope it helps I did actually stop you from becoming a virendar sehwag llok alike J

Watch for Changes in an ArrayCollection

2008-11-14T03:14:00.001-08:00

ArrayCollection is one of the most beautiful aspects of flex which makes it what it is. When dealing with ArrayCollections, one may want to have some kind of a callback when the items are changed.

This is how you can do it.

The magic lies in flash.events.Event.CollectionEvent. To detect a change just add a listener to the CollectionEvent.COLLECTION_CHANGE on the arrayCollection.

Even if your array collection is not bindable, this is a sure shot way to get notified of changes made to the array collection.

NOTE:The event will be triggered only when you add or delete items from the array collection and not when it is re assigned or re initialized and not when you change the values of item within.

Here is the example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    creationComplete="setUpListeners()"
    xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.CollectionEvent;
            import mx.collections.ArrayCollection;
            private var testAC:ArrayCollection = new ArrayCollection();

            private function setUpListeners():void {
                testAC.addEventListener(CollectionEvent.COLLECTION_CHANGE,showChange);
            }
            private function changeArrayCollection():void{
                var obj:Object = new Object();
                obj.name=nameInput.text;
                obj.age=ageInput.text;
                testAC.addItem(obj);
                //var temp:ArrayCollection = new ArrayCollection();
                //temp.addItem(new Object());
                //testAC=temp; Will not trigger!
                //Note:testAC=new ArrayCollection(); Will not trigger!

            }
            private function showChange(eve:CollectionEvent):void {
                Alert.show("Collection Changed.Operation was of type->"+ eve.kind
                + "at location-> " + eve.location);

            }
        ]]>
    </mx:Script>
    <mx:HBox width="100%">
        <mx:Form>
            <mx:FormItem label="name">
                <mx:TextInput id="nameInput" width="100">

                </mx:TextInput>
            </mx:FormItem>
            <mx:FormItem label="age">
                <mx:TextInput id="ageInput" width="100">

                </mx:TextInput>
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button label="change" click="changeArrayCollection()">

                </mx:Button>
            </mx:FormItem>
        </mx:Form>

    </mx:HBox>
</mx:Application>

Hope it helps!!

Hide Show a Tab on Tab Navigator

2008-11-13T23:11:00.000-08:00

Right, just a short code-snippet I'd like to share for those who have been searching for a solution for ages (like I have). I was looking for a way to hide specific tabs in a TabNavigator in Flex 3 without removing a child form the ViewStack.

This is not possible by simply hiding a child in the viewstack (child.hide = true) or by setting its visibility to false (child.visible = false).

With an easy workaround you can set the visiblity of a specific tab to false:

tabNavigator.getTabAt(1).visible = false;

Probably more people have found this solution, but I couldn't find it on the web so here it is.

How to copy an ArrayCollection

2008-11-13T21:00:00.001-08:00

There are many ways to copy an arrayCOllection to another one.Here is a couple of them

Initialize the new array with the older arrayCollection's source.

Example :var a : ArrayCollection = new ArrayCollection(array); var b : ArrayCollection = new ArrayCollection(a.source);

Use mx.utls.ObjectUtil.Copy

Example :var arrayCollection1 : ArrayCollection = ObjectUtil.copy(arrayCollection2)

Hope it helps!

Proper Form Validation in flex

2008-11-13T05:05:00.000-08:00

Validators in flex have always been a mystery and I happened to encounter one of those really upsetting quirks in one of my projects.What I am talking about is the un invited red borders that get visible when you tab out of fields which have validators assigned.One would expect that the error tooltip would also appear when the red borders come.But you know, flex throws some unpleasant surprises at you at times and this is one such thing.Don't contemplate harrikiri yet :-). Every problem has a solution hidden inside it.

This is how it looks

Turns out that the ToolTipManager can help one hiding and showing tooltips as and when requried.

Here is some sample code.

<mx:FormItem label="Your name">

<mx:HBox>

<mx:TextInput id="yourName" change="onChangeText(event);" focusOut="onChangeText(event);"/>

</mx:HBox>

</mx:FormItem>

private function onChangeText(eve:Event):void {

var target:TextInput = eve.currentTarget as TextInput;

if (target.text == "")

{

// Has the error message ToolTip already been created?

// (A reference to created ToolTip instances is saved in a hash called errorMessageToolTips.)

// Create the ToolTip instance.

var pt:Point = new Point(target.x, target.y);

pt = target.contentToGlobal(pt);

var errorTip:ToolTip = ToolTipManager.createToolTip(errorMessages[target.name] + " cannot be empty", pt.x + target.width + 5, pt.y) as ToolTip;

errorTip.setStyle("styleName", "errorTip");

errorTip.visible=true;

}

Comments Welcome .. As always.

FlEX = UI + LOT MORE!

2008-08-27T09:54:00.000-07:00

It infuriates me when I hear people say flex is Just another UI technology.Even the most tech savvy people have no clue what flex can do , but assume that its just about looks .. well good looks.. Though creating a cool UI is a very important part of flex's capablities, it can do much more.. I mean much much more!

Here is a short summary of capabilities that flex can bring to your next application.

Consistent behaviour across browsers: How many times have we abused bill gates and his IE team for not being standards compliant when it comes to browser behaviour?? The flash runtime is probably the most matured runtime that can run on a browser. Code once written will never require a change no matter which browser you intend to use it on.Please note that by behaviour I am not trying to mean the look and feel alone.Many times HTML based applications just cant work on all intendedd browsers
A stateful client : Flex allows an application to have a stateful client. When a client understands the state of itself , it saves a lot of server memory wasted in maintaining the state.Imagine something like ebay in which millions are logged in and are amidst a chekout process. SERVER MEMORY = MONEY and flex can save lots of it when you build your next web application
Real time data: This is something that traditional web applications really suck at and flex is pretty darn good at. Flash supports sockets which is the only way to have the server push data on to multiple clients. For enterprise applications flex data services or cocomo can help one achieve PUSH .. Its just impossible to achieve with plain AJAX. Direct web remoting is an option many developers opt to but one review with firebug says its just as good as polling :-)
MVC: Flex plays amazingly well in a system that uses MVC or MVP. Adobe backs up this aspect of flex with great support for "Cairngorm" the mvc micro architecture which is very widely used. PureMVC is another option that one would want to check out.
Event Model: Flex works on an event model that will be very very similar for java swing developers. In flex every communication is done via events. What this really means is that your components don't really have to know anything about the callers. True component reuse :-)
Multimedia: Youtube got sold for a few billions.. All by leveraging flex/flash multimedia capabilities.
Remoting: Flex data services and blaze data services helps you bypass the xml/html layer that makes traditional applications horribly slow. The real magic here is the protocol called AMF that makes your apps render server side data in a whizzy.
WEB TO DESKTOP in a minute: Your flex applications can be converted into desktop applications and vice versa in a matter of minutes.. Adobe AIR combines the connectivity of web apps with the responseiveness of desktop! Converting you flex applications to desktop application is a matter of changing the root tag from mx:application to mx:windowedapplication in most cases..
Checkout adobe air here
Compoenent Architecture: Last but not the least the component architecture built into flex is what makes flex what it is. One can opt to deliver components as closed source(think .swc) if required. Flex components do not suffer from DLL hell or the much talked about JAR hell that traditional apps suffer from

Now stop saying flex is just about UI!!!!
As always.. Comments are welcome.. :-)

MVC with FLEX

2008-08-24T03:00:00.000-07:00

There has been a lot of talk about flex being the next generation development tech for enterprise solutions. Whenever one gets to think about the idea of building enterprise solutions , one word can never be ignored "DESIGN PATTERNS". When you think of a MVC implementation with flex Caingorm and pureMVC frameworks are the ones all developement teams will consider.
I havent used pureMVC but worked with Cairngorm and havent felt too good with it. The problem I face with Cairngorm is that there is need to use observers to detect the change in the model. I mean the the view really has no idea when the model it consumes would change.
The problem here is when multiple UI components are trying to detect a change to the model, you have no idea about the order in which the views react. So cairngirm became a sure shot way of getting into trouble for me.

So I had to find other approaches. And a different approach find did I. :-) . Here is a brief description of my little MVC implementation.

Create an interface that acts a contract between the view and the controller(handler)

2. Have the view implement the interface. This helps you create a handler that doesnt need to know much about the view that is consuming it.

Ex: -- > mx:Application implements="com.simplemvc.IsampleInterface"

3.Create a reference to the handler in the view . The handler should also hold a refernce to tghe view. Have something like

Ex:--> handler:SampleHandler id="myHandler" view="{this}" myData="{this.gridData}"

4. Call the methods in handlers/controllers when you need to .
Ex: handler.getData();

5.Have the handler call your remote Object/web service/httpservice and call back the view using the reference
Ex:view.updateCollection(data:ArrayCollection)

Checkout the source code here

Comments welcome.

How to set Up Flex Builder for JAVA

2008-08-11T09:57:00.000-07:00

Quick post on how to set up flex builder for editing and debugging java code in parallel.

You must have flex builder 3 installed for this.

1. Install WTP using Help->Software updates->Find and Install.

2. Create a new flex project .

3. Select the J2ee project type.

4. Select the create a combined flex using WTP option. Click Next

5. Select your tomcat home .

6.Select the location of your flex.war on the next screen. (Note: You can download flex.war and flex data services from adobe.com)

7. Click finish.

Flex builder would have create all the necccessary code structure and xml files create for you

To create a simple remote object project follow this tutorial.

http://livedocs.adobe.com/livecycle/8.2/programLC/programmer/lcds/help.html?content=rpc_remoteobject_2.html

There goes your first java enabled flex project.

Comments welcome!

Will be posting on and soon!

who is the ideal flex developer? Flash dev or Java dev or DHTML/Ajax dev?

2008-05-29T03:08:00.000-07:00

Alright!! I know the topic is a little stupid , May be I should-phrase it to "who should I hire ?"

Whatever it be , I am just trying to figure out who would be my flex developer ??! . Is it the graphics guy Joe who had done numerous animations for web sites based on flash MX, spendign time on the timelines and frames using action script just a little to prevent the headaches that can happen later OR is it the java guy who was creating windows/Desktop applications with java swings and felt miserable with lack of flexibility (Think UI,colors,themes,god looking apps). Thank you sun! OR Is it the web developer who was toiling and moiling with the ugly browser quirks and the so called Ajax hacks and frameworks that are growing at tons per second.

Who would I hire If I had to ?

Well.Lemme try to summarize what command over flex really means and my opinion on who excels in which aspects?

1. OOPs principles

Java Guy - It goes without saying that the java guys excels here.The java masters know how to apply a structured approach to problem solving. Picking up somethign like Cairnghorm will be a piece of cake if one is a proper Java developer. The event model is something that all java developers would find to be very very inituitive. Last but not the least, Java guys are almost always familiar with design pattenrs.Though these folks may have a tendency to write really large code, they structure the solution properly!! They Scale.
Flash guys - Well ..How Object Oriented is actionscript? Most flash guys of 2000 - 2005 were working with actionscript2.0 which really did not have much to offer from an OO perspective
Web Developer - Web developers are so to hacks that they are never really allowed to do oops with javascript . Thanks to lack of Mature Object Oriented aspects in javascript, no web developer really knows to crack a tough problem by breaking it into objects, if not rare.

2. Interface Design

Java Guys: These folks are a little dumb here.. They never value the coolness that a tool like flex can bring to ones interface. They like simple interfaces lot more! Though using mxml will be very easy thanks to their familiarity with xml based frameworks like jsf
Flash Guys: These folks will harness the power of flash animations to the fullest.just try giving them a login page as a sample. You will fall in love with flex on first sight. :-)
Web Developer: These folks can do a decent enough job , but will surely take more time.. Reason. They are so to frameworks like prototype , SCriptaculous that it takes a bit of time for em to get rid of that "div" thing :-)

3. Product Engineering Capablities

(Will be continued)

Problems with High end phones

2008-03-28T01:04:00.000-07:00

Source: Wikipedia
I switched from a low end nokia 1100 to a much advanced Nokia N72 recently.

Though N series comes power packed with a lot of features, typing SMS on it is a pain.

Why is it that all these high end phones make life difficult for users?? Another bizzare effect of this is that Application developers who want to develop applications that will require a bit of typing.

Say for instance mobile versions of EQO,EBuddy, HeySan..
These clowns had made it so painfull to type for a long time on the mobile...

With the mobile phones market fetting more competitive,
I am sure that the company that makes it easy for one to type sms withiut hurting one's fingers will have an edge..

Not the one that targets to make science fictions come ttue with that little device..

Vengu!

Flex Interview Questions

2008-03-27T07:31:00.000-07:00

A few interview questions on flex,

1. Is it possible to make httpService Requests synchronous?
2. I need to load an image from flickr into my application. Do I need a crossdomain.xml file on flickr?
3. What is the difference between httpService and Data Service?
4. How do you generate random numbers within a given limit with actionscript?
5. Have you built any components with actionscript? If so explain how you did it?
6. How do you implement push on a flex applications?
7.I am going to add images into a tag. How will it resize itself?
8. What is a resource Manager??
9.What are the similarities between java and flex
10. What is the dynamic keyword used for?
11.How do you implement push with flex data services?
12. What are the methods called when a UI component is intialized?
13. How do you implement drag and drop on components that do not support ondrag and ondrop?
14.Can you write to the file system from flex?
15. What is a drag manager?
16 . HOw do you call javascript from Flex?
17. How do you use a repeater?
18. what are three ways to skin a component in flex?
19. How do you use css styles in flex?
20. What is the difference between sealed class and dynamic classes?
21.what is MVC and how do you relate it to flex apps?
22.what is state? what is the difference between states and ViewStack?
23.how does item renderer work? How do I add item renderer at runtime?
24.what keyword allows you to refer to private variables of a class?
25.how polymorphism works on actionscript?
26.how do you overload functions in actionscript?
27.what is dynamic keyword used for?
28.what are sealed classes ?
29 what are runtime shared libraries?
30.What is caringhorm ? how do you use it?Have you worked with Cairnghorn?
31.What keyword allows you to implement abstraction better?
32.What design patterns have you used? in Actionscript and java?

Try to get answers for these.
You can be me :-)

How meebo works? (My guess of how they might be doing it!!)

2008-03-14T23:08:00.000-07:00

We all know how useful and good meebo is.

The web based instant messaging client is a big brand now on its own and has been growing exponentially after it received funding a few months back.

Just out of curiosity, I started digging into the possible ways that meebo might have been implemented.

After a few minutes of research I think I have a vague idea of the components involved.

1. At the heart of meebo's backend is the open source API called libgaim which is under the pidgin project now. So technically anything that pidgin can support will be supported by meebo too :-)

2. Wrappers that write to a socket. The libgaim api sends signals that can be registered to callbacks that handle the signals. I believe the signals are being written to a port.

3. Direct Web remoting / Flash based remoting. This is the layer that perfoms the task of the web based client getting the messages that are being written to the socket from the wrappers that listen to gaim signals.

4.A small UI layer with Ajax frameworks like dojo/scriptaculous that gives you that cool look and feel.

Off course there might be hundred of tweaks that meebo would have done , but this I see is the core engine

There you go. :-) If you can do this , you can have your own version of meebo for your company, office.

Thanks,
Venkat

Push without Flex Data Services

2008-02-21T23:58:00.000-08:00

We all know that flex data services is good but is it really neccesary to implement push on flex page?? As a developer with very little money to spend on tools, I was looking out for alternatives.

And Alternative I did find!! The magic is called "XMLSocket"

Though the xmlsocket implementation is depicted as a way for the client and server to talk with xml , there is nothing potentially stopping us from sending just plain text ...

So this is how I did it..

1. Create a java based service that runs on a port (5976 in my case) that spits out content on the port when ever it is available. (This can easily be replaced by a JMS). This includes setting up a thread to write to the socket whenever data is available.

2.Open a xml socket to the server from the flash client.

3. create an ondata handler in the flex part that updates your interface .

There you have it.. :-)

I will be posting the code sample and explanation shortly .. watch out.

Happy flexing.

FEAR NOT FLASH!!

2007-12-03T02:11:00.000-08:00

Ever since the RIA world was taken over with the advent of tools like Adobe Flex and Adobe AIR, one of the major hassles for developers/businesses in adopting these flash based technologies has been SEO - Search Engine Optimization.
As many of the search engines cannot really index the contents of a flash widget/resource it left the technology found wanting.. Well, not any more.
Gooogle had announced that it can in fact index flash content .
You can read about this on an interview with Michael Marshall here.

The key here is the tool developed by adobe called swf2html
As true fans/users of Adobe's flash based development , I would like to welcome this effort from adobe to help folks like us develop with flex fearlessly.

So go ahead, flex your muscles and flash em all!!

Global Messaging System

2007-12-03T00:01:00.000-08:00

Folks,

A few weeks earlier, me and my good friend ashraff(affectionately called "dead body") thought of changing the way people use SMS.
Why is it that you have to pay 6rs per international sms, when you have a GPRS enabled phone??
Is there a way to make it cheaper?? Well we thought about it and created solmething which will help you communicate for almose free (depending on your service provider.) internationally.

So we came up with a small prototype of what we call GMS (global messaging system) which you can see here(Look it up on your mobile browser and not the PC!!)

http://zz121.freewebhosting360.com/index.html

Out of out testing results , we had found that one will be able to send arounf 1000 messages at almost 3 INR.

The only pre-requisite being that the receiver will need to have a GPRS enabled fone and that he has to have an account with us , and that he should see his messages through his/her mobile browser..

We have some pretty interesting services lined up with this.. More on my next post.