Does size matter?

Gone are those days where we used to tightly stuff a lot of files & folders - setup's, dvd's copies, music collection and some movies into the 20GB HDDs.... These days everything comes in larger sizes. So is Flash Catalyst Beta 1. I was stunned to see the size of it after installation, (is it still a bug? or for real?) - 5.36GB? Wish the number is wrong... wow...

Wondering why its showing "Adobe Flash Catalyst" instead of "Adobe Flash Catalyst Beta 1", hmm... thats a bug... Icon overriding is also a bug...

Continue reading the complete post here....

Auto doc snippet generation in IDE's...

What is Auto doc snippet generation? Its a very simple feature that i think should atleast be optionally be provided in every IDE tool to enhance overall project coding experience. Let me describe what this simple feature should do (I am not aware of any tool/plugin which is already available so far)...

     Just as you declare a variable, and just as you are done, ';' should auto generate the doc skeleton, create a //TODO:write comment snippet auto-select it and get you ready to just type what it is supposed to do.

        

    Just as you write a function and as you "}" (close) the function, it should auto generate the doc skeleton, create a //TODO:write comment snippet auto-select it and get you ready to just type what it is suppsed to do. As you change your function signature it should introspect existing doc skeleton and alter the argument types, return types etc. without having to manually go and edit it.

   

    

    Just as you close a loop (ex: for, while etc.), it should auto generate the doc skeleton, create a //TODO:write comment snippet auto-select it and get you ready to just type what the logic is for..

     

    Just as you write an if condition, it should auto generate the doc skeleton, create a //TODO:write comment snippet auto-select it and get you ready to just type what this condition is for..

      

     I've worked on a lot of projects but none of the projects were fully documented. Every developer has his/her own way of writing a piece of code. Even when you have a code monitoring tool, peer code review process, strict code guidelines to follow on every project (which is predominently seen in product based companies than services based companies and a less often in some companies who just want to get things working without having to bother much about spending time in writing code comments), there is always a scope of the code being written is left undocumented. There are some companies who enforce strict documentation on the code written but at the end they see themselves doing just 50-60% of it overall. I would say there are atleast 70% or more of the larger audience who concentrate on putting their brain at work by writing the actual code and get things working and leave their baby code undocumented unintensionally due to other work priorities. Developers may change and a new developer joining in is always targetted to face the tough time with the gaint code. Even the developer who wrote the code 4 months ago doesnt completely remember what's written unless he spends some time by going through the code again.

    How does a fully-documented code look like? Many people like to read the lines of code as they glance it and seeing a lot of comments written due to auto-doc snippet generation sometimes might disturb them. I do agree, but we can always have preference options to show/hide doc snippets, fold/unfold doc snippets.. everything is possible. As the application code grows larger and larger with tons of frameworks out there, the code is crying out loud - "If you dont document me now, i'll kill you or someone in the long run"...

Continue reading the complete post here....

Life Cycle Data Services 3 - New !!

With Adobe's showering a bunch of products into beta (almost at the same time), CF9, CFBuilder, FlashBuilder, FlashCatalyst, Flex4, LCDS3... wow..thats a lot.... Yesterday i had a chance to look at the video tutorials posted on the labs for the new lcds 3 beta features. Adobe's Romania team scores high in delivering these server spice into flex. From my LCDS 2.5+ experience, this was really a new ball game. Here are some of the highlights -

• Model driven development brought into Flex with Fiber (language?)... Model View perspective in flash builder (earlier flex builder), create models from the RDS View connected to db from within flash builder, create services for the operations, generating model driven forms from within flash builder to quick test your model
• Easy creation of filters from within flash builder
• Annotations
• localization, validation, data formats
• Reliable messaging - this is one of the best features. Having AdvancedChannelSet, AdvancedMessaging This feature ensures that messages sent over the wire do not get dropped out due to network fluctuations (on and off). Before it tries to give you a feedback saying message sending error it does try to resend it for some time (configured) so it gets around the problem of fluctuating networks.
• Message Throttling - Video streams for bad network are always hit. With this feature, you have more control on how your data messages can be handled with care to ensure to fit it in your network. You have options to pamper the inbound messages and outbound messages. InBound Messages have policy options - ERROR, IGNORE, NONE and OutBound Messages have policy to ERROR, BUFFER, NONE..

Its amazing to see the new developments...

Continue reading the complete post here....

Converting AS Objects to XML and reading the same XML into AS Objects...

One of the requirements i had was to write down the Action Script object returned from the Coldfusion webservice call into a flat xml file. This was a temporary solution i had to provide seamless integration between flex app and AIR app..

I had a huge bunch of query object data returned through CF webservice call and i needed to persist the data into an xml file without having to write a whole bunch of code to navigate to each and every property of the object (introspect)...

    This simple code here lets you write the crude CF returned object into a nice XML

   And this code below converts the XML into an action script object that can be used during your persistence..

Continue reading the complete post here....

Invoking JavaScript from Flex AIR App (in FlexBuilder)

This is with FlexBuilder3. If you have a lot of javascript source files made on another project of yours (presuming to have used another technology like CF, .NET, Java) and you are intending to use those javascript source files while porting to Flex based AIR Application, then here is a sample to load all your javascripts and invoke the functions from With in the Flex application.

"Note: Adobe AIR currently does not support the ExternalInterface class" is clearly indicated in the API. So whats the alternative to this.

The API link for ExternalInterface.as (Search in AllClasses for ExternalInterface.as) also clearly indicates the following are possible:

From ActionScript, you can do the following on the HTML page:

• Call any JavaScript function.
• Pass any number of arguments, with any names.
• Pass various data types (Boolean, Number, String, and so on).
• Receive a return value from the JavaScript function.

So What we are going to do is "Load a dummy html page carrying links to all the javascript files to be invoked from the Flex AIR Application"...

Step 1: Get your js files into a directory

Step 2: Create a dummy html file and include your scripts as here

Step 3: use <mx:HTML /> tag of Adobe AIR to reference it in your app

Step 4: On Creation complete handler of your Adobe AIR application, load the html file which contains your js files, so you can reference it later on to invoke javascript functions...

Step 5: Use the reference as below and invoke a javascript function from within flex. You can pass arguments to the js function and retrieve return values as well.

Continue reading the complete post here....

Reading .sol (SharedObjects) created by Browser Flex App in a new AIR Application - Seamless integration? Web & Desktop?

    One of the requirements was to provide seamless integration between the browser flex application serving the client needs when the network is on vs an AIR Application as an offline system when the network turns off. But the requirement isnt straight as you think. What it says is, When network is connected the end user will be using flex browser application by navigating to the URL which downloads a lot of data on to the client machine from the server which periodically gets updated based on the data-change on the server. This is stored as client side SharedObjects through the browser ran flex app. Now when the network turns off, the end user would launch the offline system that should read through earlier created sharedobjects while network was on and work through it. AIR App should also be able to write a shared object containing data required to be parsed through the browser flex app when launched (when network is back)...

    This kind of sounds so wierd to me. After hearing the requirement, i was like WHAT?? But then i started to see through different ways of achieving it. With Browser Sandbox Security, browser flex app always can get hold of SO (Shared objects) created through SharedObject.getLocal(). Even if we were to understand and agree to one common location that AIR Could understandably read, keeping the location parameter excluded for a whole lot of argument... The Important thing is to consider serialize and de-serialize a FileStream read ByteArray into AS Objects that can be natively used in the code. Well, more to that is the SharedObjects written through the browser flex app could also carry complex data structures which could carry more information rather than a simple data->name/value

   While doing the research, i went through a lot of google search - .minerva was exactly doing what i was looking for but its not open to go through the bits of it and tweak to get it working !!

• Link to AMF 3 Specification document
• Format of a Shared Object
• Open Source Flash
• Storing Custom AMF Objects for AIR App Storage

• Reading ByteArrays either from Web or AIR app (I couldnt connect through it well)

• Reading and Writing a ByteArray - Flex Docs (on zip file formats) & also here
• AIR App Named .minerva (this is exactly what i was intending to do, but after installing .minerva i didnt open up some of my other .sol files even though they were good)
• Link to AMF-PHP Open Source porting link

• Persistence Storage with .SOL (shared objects), a just like that content.

• SharedObject API doc
• AMF Serializer/deserializer for java/flex - Google Code
• Granite DS (what they claim is alternative to LCDS)

Here is a sample code demoing the problem:

 

Browser Flex App creates a shared object (typed ClazzTest.as containing two public variables value1 and value2 of type string)

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import com.arun.ClazzTest; import flash.net.registerClassAlias; private function generateWebFlexSharedObjects():void { var clazzTest:ClazzTest = new ClazzTest(); clazzTest.value1 = 'Value1'; clazzTest.value2 = 'Value2'; registerClassAlias('com.arun.ClazzTest',ClazzTest); var so:SharedObject = SharedObject.getLocal("cachename"); var b:ByteArray = new ByteArray(); b.objectEncoding = ObjectEncoding.AMF3; b.writeObject(clazzTest); so.data.clazzTest = clazzTest; so.flush(); } ]]> </mx:Script> <mx:Button label="Generate SO" click="generateWebFlexSharedObjects()"/> </mx:Application>

AIR App code that tries to read the shared object created by the browser flex app above.. (for now assume that the object location is hardcoded)

<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="422"> <mx:Script> <![CDATA[ import flash.utils.getQualifiedClassName; import flash.utils.describeType; import mx.controls.Alert; import mx.utils.ObjectUtil; private function readBrowserFlexCache():void { var path:String = "C:\\Documents and Settings\\amadas\\Application Data\\Macromedia\\Flash Player\\#SharedObjects\\5RP3MMUQ\\#localhost\\BrowserFlexSharedObjects\\bin-debug\\BrowserFlexSharedObjects.swf\\cachename.sol"; var solFile:File = new File(path); txtOutput.htmlText = 'File Exists ? ' + solFile.exists + '\n'; var fileStream:FileStream = new FileStream(); fileStream.openAsync(solFile, FileMode.READ); txtOutput.htmlText += 'File Bytes Available : ' + fileStream.bytesAvailable + '\n'; var bytes:ByteArray = new ByteArray(); fileStream.readBytes(bytes, 0, fileStream.bytesAvailable); txtOutput.htmlText += 'Bytes Read = ' + bytes.bytesAvailable; bytes.objectEncoding = ObjectEncoding.AMF3; //trace(describeType(bytes.readObject()).toXMLString()); //var objInfo:Object = ObjectUtil.getClassInfo(bytes); var obj:Object = bytes.readObject(); //trace(getQualifiedClassName(obj)); if(obj != null) { Alert.show('Object retrieved !! '); } fileStream.close(); } ]]> </mx:Script> <mx:Button label="Read SO" click="readBrowserFlexCache()" x="23" y="30" width="146"/> <mx:TextArea x="23" y="80" width="452" height="259" id="txtOutput"/> </mx:WindowedApplication>

The above AIR App code doesnt work. Its just the way i wish it would. But i believe we need to go through the entire signature of SharedObject and read the bytestream in the way SharedObject is defined as an entirety like header, body etc. I just looked at the Serializer and Deserializer in AMF-PHP and that just gives me some idea. Trying to do this entirely might take a long time than to get it just working quickly... I am still on a hunt !! ------------------------------------------ If someone is looking out for a quick solution where in you wont have enough time to write an AMF object parser, you can follow my quick solution. We lowered the IE settings to allow scripting, there by i invoke a javascript function which writes the data to the flat xml file in the client machine from the flex application through ActiveXObject(), and these flat .xml files are read by the AIR app later on. Atleast this seems to work fine for me until i converge on a right solution !!

Continue reading the complete post here....

Flashplayer ScriptTimeOutError, A Script has executed longer than 15 seconds

While doing Load testing of the flex application we've developed, we hit upon this scenario where our test load data was so huge that optimizing DB queries, webservice logic, client logic took us more than 60 seconds which is the maximum timeout limit Flashplayer can be increased to.

To find a solution to the problem, I have googled around and found some interesting articles.

• Arno Van Oordt (Joy with script timeout period),
• flex coders emailing list archives, and more,
• some other forums,
• Tallest on switchonthecode
• Flash Player API for ScriptTimeOutError
• etc..

When the load data is so huge, and you are tired of optimizing code just to fit in the 60 seconds time intervel before the timeout error is thrown by flash player... I tried to workaround it with a solution that will run for enough time without freezing / breaking your load data...

Here is the sample Flex code that would throw the Flashplayer script timeout error.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ private var i:Number = 0; private function startInfinite():void { while(++i > 0) { //txtArea.htmlText = i + '\n'; } } ]]> </mx:Script> <mx:VBox> <mx:Button label="hang me" click="startInfinite()" /> <mx:TextArea id="txtArea" /> </mx:VBox> </mx:Application>

Error message -

My Solution to this problem is to workaround by giving flashplayer a breathing time. This is however not a full-fledged code but would completely give you an idea on what i am trying to achieve. The below code would run a timer for say 100 milli-seconds and execute your piece of code which you think is consuming more time... say if you are iterating over 10,000 items with a lot of data or something similar... This solution would run a timer and call it over and over until your job execution is done, when you delete the listener and proceed further with your logic. This way flashplayer break due to heavy load is taken care of. Flash player would get a breathing time to perform any UI operations if any meanwhile. In my actual code at work, i display a popup modal window before the timeconsuming operation begins that displays - "Please wait, while we are processing the data", and i remove the modal dialog once the entire process is done. This way end user feels that he has a feedback from the app and even if it were to take a bit more time, this solution will scale for you even if your load were to increase in more numbers...

See the Solution here (Iterating based on a timer until execution is complete)...

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ private var i:Number=0; private var mytimer:Timer=new Timer(100); private var isCodeRunning:Boolean=true; private var testIterateCount:Number = 0; private function timeBasedLoading():void { isCodeRunning=false; mytimer.addEventListener(TimerEvent.TIMER, startInfinite, false, 0, true); mytimer.start(); } private function startInfinite(event:TimerEvent):void { try { if (!isCodeRunning) { isCodeRunning=true; while (++i > 0) { //txtArea.htmlText = i + '\n'; } } } catch (e:ScriptTimeoutError) { isCodeRunning=false; //trace(e); // ScriptTimeoutError: Error #1502: A script has executed for longer // than 15 seconds testIterateCount++; //Arun:Break your logic after 5 iterations, //just a test... if(testIterateCount==5) { mytimer.stop(); mytimer.removeEventListener(TimerEvent.TIMER, startInfinite); } txtArea.htmlText+=i + '\n'; } } ]]> </mx:Script> <mx:VBox> <mx:Button label="hang me" click="timeBasedLoading()"/> <mx:TextArea id="txtArea"/> </mx:VBox> </mx:Application>

Continue reading the complete post here....

First Look at Flash Builder 4 (Beta1)

I wanted to list down my first feel of launch of FlashBuilder4-Beta1 and how it made different from FlexBuilder3. This post is not intended to list down all the differences between FlexBuilder4Beta1 and FlashBuilder3 but however, it is only intended to get the FIRST FEEL DIFFERENCE of your regular FlexBuilder3 and FlashBuilder4 Beta1

Name Change of FlexBuilder perspective to Flash - (Flash vs Flex Development, Flash Debug vs Flex Debugger, Flex Profiling vs Flash Profile)

New Start Page

First thing, you do is to right click on the Package Explorer and create a new project. As you rightclick you see new entry "Execute FlexUnit Tests". FlexUnit integrated into flex builder... New->Test Case Class, New-> Suite Class are also new entries.

New Panels - Data/Services, Network Monitor...

New Data-Connect wizards...

Blaze DS (integrated option)

Fx icon changed to f with new Flex 4 libraries

New Enhanced Package Explorer, Shows package view, Flex4 lib....

 AS Doc as soon as you try to open up type on the tag name through the code hinting dialog. ASDoc panel which shows docs. Its one of the best features that has been missing for a long time (ofcourse driven from java perspective - eclipse)

<mx:script> changed to <fx:script>

Auto-Generation of event handlers from within flex builder...auto-generated click event handler for the button..

AsDoc comment....

and a lot more....

Continue reading the complete post here....

Installing FlashBuilder4 Beta1 (Earlier FlexBuilder)

Step by Step - Installing Flash Builder Beta 1 (Earlier Flex Builder)

 

 

Continue reading the complete post here....

Flex SDK 4, Flash Builder 4, Flash Catalyst (earlier Thermo) - Beta1 Launch

     Well, old news first - Flex SDK 4, Flash Builder 4 (Earlier Flex Builder 3) and Flash Catalyst (Earlier called Thermo) are now available on labs.adobe.com for BETA1. I've atleast waited for this release since long. With Flash Catalyst, Adobe brings a lot to the community in terms of new roles - Flex Designer, Sr. Flex Designer, Flex Designer - Architect etc. - new opportunities adding new jobs to the market sunk in recession and above all, it takes Flex/Flash to a whole new dimension enchanting that no two applications in the market should look alike with the default halo theme... Explore the richness of each application, design appealing UIs that make your application uniquely shiny, and extra-ordinary... A lot is already said about already about whats new and all... some of them i came across are - sujit, tim buntel , matt chotin, whats new flex 4 - dev specs with examples, sean moore etc.

Continue reading the complete post here....

Slide Move Effects to your Flex Components

I was just playing around with a simple effect in flex that gives you a slider feeling... how you slide your closet? This is pretty simple and many starters would already know. I was just playing with it to see how i can create dynamic elements and have those dynamically created elements play this effect.

Simple Plain code

 

 

      private function onClickNext():void
      {
       var xByValue:Number = -455;
       loopNavigator.xBy = xByValue; 
       
       loopNavigator.play([panel1, panel2, panel3, panel4]);
      }
      
      private function onClickPrevious():void
      {
       var xByValue:Number = 455;
       loopNavigator.xBy = xByValue; 
       
       loopNavigator.play([panel1, panel2, panel3, panel4]);
      }

This is how the output would look like (crude form)

 

Dynamically added Elements will now animate with this code (crude form)

   import mx.controls.Text;
   import mx.containers.Panel;
   import mx.effects.easing.Bounce;
   
   public var tmpPanelElements:Array = new Array();
   
   private function onCreationComplete():void
   {
    var tempArray:Array = getTempArray();
    for(var i:int = 0; i < tempArray.length; i++)
    {
     var panel:Panel = new Panel();
     panel.width = 400;
     panel.height = 400;
     panel.id = 'panel' + i;
     
     var text:Text = new Text();
     text.text = 'text' + i;     
     panel.addChild(text);     

     panelContainer.addChild(panel);
     tmpPanelElements.push(panel); 
    }
   }
   
   private function getTempArray():Array
   {
    var tempArray:Array = ['one', 'two', 'three', 'four'];
    
    return tempArray;
   }
   
      private function onClickNext():void
      {
       var xByValue:Number = -455;
       loopNavigator.xBy = xByValue; 
       
       loopNavigator.play(tmpPanelElements);
      }
      
      private function onClickPrevious():void
      {
       var xByValue:Number = 455;
       loopNavigator.xBy = xByValue; 
       
       loopNavigator.play(tmpPanelElements);
      }

Continue reading the complete post here....

Show No Leaf, Parent Nodes in grouped Flex Advanced data grid

   I hit upon this scenario which is unique to one of my project. I would like to describe it in my own words taking a simple example. This example is targetted at showing the empty PARENT nodes (as empty folders) of the advanced data grid when the LEAF node is not present.

  There is a reservation system where the reservation is made for 4 nights. Each night can contain an optional vehicle (can contain one or more vehicles). Lets take a scenario where the first three nights of the reservation object having vehicles, but the fourth reservation does not have vehicles. Now you are asked to provide a dynamic-UI in the flex Advanced data grid to show the fourth night (a parent node) of a grouped data whose child does not exist. So when they want to add a vehicle later they can select the button to add vehicles for the fourth night.

  I am not sure if i had made it clear when i described above (here i go with an example).. I have "1" and "2" grouped as they are grouped by the property "id" and that internally contains children. So they look fine. Look at the code below:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()" width="241" height="214"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var flatData:ArrayCollection = new ArrayCollection(); private function onCreationComplete():void { var obj1:Object = new Object(); obj1.id = 1; obj1.name = 'One'; flatData.addItem(obj1); var obj11:Object = new Object(); obj11.id = 1; obj11.name = 'Another One'; flatData.addItem(obj11); var obj2:Object = new Object(); obj2.id = 2; obj2.name = 'Two'; flatData.addItem(obj2); } ]]> </mx:Script> <mx:AdvancedDataGrid x="24" y="15" id="adg1" designViewDataType="tree" sortExpertMode="true" width="187"> <mx:dataProvider> <mx:GroupingCollection id="gc" source="{flatData}"> <mx:grouping> <mx:Grouping> <mx:GroupingField name="id"/> </mx:Grouping> </mx:grouping> </mx:GroupingCollection> </mx:dataProvider> <mx:columns> <mx:AdvancedDataGridColumn headerText="ID" dataField="id"/> <mx:AdvancedDataGridColumn headerText="Name" dataField="name"/> </mx:columns> </mx:AdvancedDataGrid> <mx:Button x="24" y="179" label="Add to Selected Row of ADG"/> </mx:Application>

Here is how the current code output looks like... Its traditionally grouped by id as long as they have their children (name) fine with them.

Now all i want is - Have a parent with id = "3" shown as a folder on the grouped collection, so i now have an option to select the id="3" empty folder and add something to it (assuming there is no name already to it and user wants to add names dynamically by clicking on the button by selecting the row with id="3")

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()" width="325" height="218"> <mx:Script> import mx.collections.IHierarchicalCollectionView; import mx.collections.ArrayCollection; [Bindable] private var flatData:ArrayCollection = new ArrayCollection(); private function onCreationComplete():void { var obj1:Object = new Object(); obj1.id = 1; obj1.name = 'One'; flatData.addItem(obj1); var obj11:Object = new Object(); obj11.id = 1; obj11.name = 'Another One'; flatData.addItem(obj11); var obj2:Object = new Object(); obj2.id = 2; obj2.name = 'Two'; flatData.addItem(obj2); } private function addDummyParentNode(dummyValue:Number = 5):void { var dp:IHierarchicalCollectionView = groupedADG.dataProvider as IHierarchicalCollectionView; var groupedData:ArrayCollection = (dp.source as GroupingCollection).source as ArrayCollection; for(var j:int = 0; j < groupedData.length; j++) { var item:Object = groupedData[j] as Object; if(dummyValue == Number(item.id)) { break; } else { var dummyParentNode:Object = {"id":3, children:[]}; dp.addChild(null, dummyParentNode); groupedADG.dataProvider = dp; groupedADG.validateNow(); groupedADG.dataProvider.refresh(); break; } } } </mx:Script> <mx:AdvancedDataGrid id="groupedADG" x="10" y="15" designViewDataType="tree" sortExpertMode="true" width="305"> <mx:dataProvider> <mx:GroupingCollection id="gc" source="{flatData}"> <mx:grouping> <mx:Grouping> <mx:GroupingField name="id"/> </mx:Grouping> </mx:grouping> </mx:GroupingCollection> </mx:dataProvider> <mx:columns> <mx:AdvancedDataGridColumn headerText="ID" dataField="id"/> <mx:AdvancedDataGridColumn headerText="Name" dataField="name"/> </mx:columns> </mx:AdvancedDataGrid> <mx:Button x="10" y="179" label="Add a grouped parent id=3 folder with no child" width="305" click="addDummyParentNode()"/> </mx:Application>

In the above, i have just tried to check if the data already has a item or not.. I am just adding this for someone to know that it could be done...

Here is how the output will look like:

Continue reading the complete post here....

Refreshing the Binded dataprovider based on Custom Event in the Model

   Say you have an array of (Object) Sites shown in the data grid with labels Site Name. Also you have a column to delete the site as an item renderer in your sites list. There are easier ways to handle this scenario.

  onItemDelete(); => removeTheSiteFromTheDataProvider(); => refreshTheDataProvider();

Imagine if you were to bind the array as an instance of an object. Say applicationData.sites is a getter function that is bindable and returns a custom array of sites handled through the instance applicationData object. Also, you dont have a simpler deletion logic now. Now on deleting the site from the data grid, i would want you to process a few operations, based on the result of the same, either proceed to refresh or not. To write this whole logic outside the view in the applicationData (class/Model), you may have to do the following:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()"> <mx:DataGrid id="simpleSitesDG" x="10" y="10" width="199" height="104" dataProvider="{simpleSites}"> <mx:columns> <mx:DataGridColumn headerText="ID" dataField="id"/> <mx:DataGridColumn headerText="Name" dataField="name"/> <mx:DataGridColumn headerText="Delete"> <mx:itemRenderer> <mx:Component> <mx:HBox horizontalAlign="center"> <mx:Image source="@Embed('assets/cancel2.png')" buttonMode="true" click="outerDocument.deleteSite(data)"/> </mx:HBox> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </mx:Application>

Here is the MX-Script part of it...
import mx.collections.ArrayCollection; private var dp:ArrayCollection = new ArrayCollection(); private function onCreationComplete():void { //Contains a large data of site objects var site1:Object = new Object(); site1.id = 100; site1.name = 'Land'; site1.area = 300; site1.height = 30; site1.width = 10; site1.owner = 'Arun'; dp.addItem(site1); //contains a large data of site object var site2:Object = new Object(); site2.id = 101; site2.name = 'Air'; site2.area = 400; site2.height = 40; site2.width = 10; site2.owner = 'Kiran'; dp.addItem(site2); dispatchEvent(new Event('dataChange')); } [Bindable(event="dataChange")] public function get simpleSites():ArrayCollection { var simpleSitesCollection:ArrayCollection = new ArrayCollection(); for(var i:int = 0; i < dp.length; i++) { //Just to mimic a slim object var newSlimObject:Object = new Object(); newSlimObject.id = dp[i].id; newSlimObject.name = dp[i].name; simpleSitesCollection.addItem(newSlimObject); } return simpleSitesCollection; } // Called when deletion is invoked... Assume you are writing this as a part of ApplicationData and not in the same view // As a simpler case, you can always remove the item from dp and say simpleSitesDG.dataprovider.refresh() assuming the dataprovider is directly set // But this is a dynamic event public function deleteSite(obj:Object = null):void { if(obj != null) { for(var i:int = 0; i < dp.length; i++) { if(dp[i] != null && dp[i].id == obj.id) { dp.removeItemAt(i); dispatchEvent(new Event('dataChange')); break; } } } }
Here is how the output will look like, when you delete the item, it throws up the event. This kind of dispatch is typically done in framework code and recommended practice.

Continue reading the complete post here....

Advanced Data Grid, Grouping based on Id but displaying Name

I had a small requirement to work up on the advanced data grid as below:

  a) There are a few vehicles (objects of type Vehicle)
  b) All these vehicles are to be grouped by their ID (there is a property by name id in the vehicle obj)
  c) But the grouping in the flex advanced data grid should be displayed with the vehicle name and not the vehicle id

  This is the simple example of using the "groupingFunction" on the grouping Field of the flex advanced data grid.

 

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()" width="233" height="186"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var flatData:ArrayCollection = new ArrayCollection(); private function onCreationComplete():void { var obj1:Object = new Object(); obj1.id = 1; obj1.name = 'One'; flatData.addItem(obj1); var obj11:Object = new Object(); obj11.id = 1; obj11.name = 'Another One'; flatData.addItem(obj11); var obj2:Object = new Object(); obj2.id = 2; obj2.name = 'Two'; flatData.addItem(obj2); var obj22:Object = new Object(); obj22.id = 2; obj22.name = 'Another Two'; flatData.addItem(obj22); } private function getName(item:Object, field:GroupingField):String { var result:String = ''; //If you have loaded objects of multiple types you can check like this at runtime and have custom values sent out if(item is Object) { result = item.name; //item[field.name].toString().substr(0, 1); } else { result = ''; } return result; } ]]> </mx:Script> <mx:AdvancedDataGrid x="24" y="10" id="adg1" designViewDataType="tree" sortExpertMode="true" width="187"> <mx:dataProvider> <mx:GroupingCollection id="gc" source="{flatData}"> <mx:grouping> <mx:Grouping> <mx:GroupingField name="id" groupingFunction="getName"/> </mx:Grouping> </mx:grouping> </mx:GroupingCollection> </mx:dataProvider> <mx:columns> <mx:AdvancedDataGridColumn headerText="Name" dataField="name"/> </mx:columns> </mx:AdvancedDataGrid> </mx:Application>
Here is how it looks like as an output: (grouped by ID but shown as names)

Continue reading the complete post here....

Back to Basics - Event Propagation by Simple Example

    Its very common to ask this question in interviews related to flex but some on the application development background dont even bother to know these minor things. It doesnt deny them from getting onboard as well. But this has been the most favorite topic of Ananth (my Ex-director @ Flex Team). Okay, here is the glimpse of it in few words:

Capture phase: Flash Player checks every node from the root of the tree to the direct parent of the target node to see whether it has a listener registered to
handle the event.
Target phase: The event is dispatched to the target node.
Bubbling phase: Flash Player carries out a check in a reverse manner with respect to that of the capturing phase (starting from the direct parent of the target node to the root of the tree).

Here is a lay-man's sample:

There is obviously a lot more to it, but this is only a basic...

Continue reading the complete post here....