dataProvider for Tree control requires an Object of tree data or ArrayCollection or XMLListCollection. But many times we need to display the GroupingCollection object into Tree. Below example how can we do that using the root object of GroupingCollection.

1. Create a Tree.
2. Instantiate a flat data source (arcData)
3. Create GroupingCollection2 (Flex 4), as pre required Grouping Fields.
4. Whenever arcData, the base collection, changes; call refreshTree() function.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="windowedapplication1_creationCompleteHandler(event)" xmlns:local="*" width="318" height="400">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            import mx.events.CollectionEvent;
            import mx.events.FlexEvent;

            protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
            {
                refreshTree();    
            }

            private function refreshTree():void{
                gc.refresh();
                myTree.dataProvider = gc.getRoot();
            }

        ]]>
    </fx:Script>
    <fx:Declarations>

        <s:ArrayCollection id="arcData">
                <local:TestItem year="2009" month="Jan" label="Jan Report 1"/>
                <local:TestItem year="2009" month="Jan" label="Jan Report 2"/>
                <local:TestItem year="2009" month="July" label="July Report 1"/>
                <local:TestItem year="2009" month="July" label="July Report 2"/>
                <local:TestItem year="2010" month="Feb" label="Feb Report 1"/>
                <local:TestItem year="2010" month="Feb" label="Feb Report 2"/>
                <local:TestItem year="2010" month="Dec" label="Dec Report 1"/>
                <local:TestItem year="2010" month="Dec" label="Dec Report 2"/>
        </s:ArrayCollection>

        <mx:GroupingCollection2 id="gc" source="{arcData}">
            <mx:grouping>
                <mx:Grouping>
                    <mx:fields>
                        <mx:GroupingField name="year"/>
                        <mx:GroupingField name="month"/>    
                    </mx:fields>
                </mx:Grouping>
            </mx:grouping>
        </mx:GroupingCollection2>
    </fx:Declarations>

    <mx:Tree id="myTree" dataProvider="{gc.getRoot()}" labelField="GroupLabel" width="100%" height="100%">

    </mx:Tree>

</s:WindowedApplication>

Hope this helps.

Flex Tree and GroupingCollection2

Reference error 1056 :Cannot create property myname on mycustomobject.

You will get this error if you are setting/accessing any property that dose not exist on any object which is not declared as dynamic.The base class ‘Object’ is a dynamic class.

What is dynamic class? – below declaration will make mycustomeobject as dynamic and allows addition/deletion of properties at runtime.

Public dynamic class mycustomeobject{

}

You can do -
mycustomeobject['prop1'] = value1;

Prop1 need not be present at compile time. Same statemne will give us this reference error if we do not declare that class as dynamic.

Also you can delete the properties at runtime-

delete mycustomeobject.prop1;

If you are planning to use dynamic objects, its always good you check property existance before you use it -

mycustomobject.hasOwnProperty(‘prop1′)

Hope this helps … Have fun!

I am sick of such news now. Should this really be called Spirit? is this not look like we are now used to for this? We react like these are no unusual events and tend to forget on next day!! Unfortunately this gives power and inspiration to terrorists and the useless and careless government as they know ‘Common man tend to forget quickly’!

We always feel proud that common man is not afraid of such terrorist activities, but neither do we force our govt to take harsh steps against this. Unless someone of our own dies in such event, we don’t feel the heat and need. By the time we would understand this, it would be too late individually for us. We should understand next could be any one of us or our own loved one!

It’s very easy for to say ‘I appeal to people to stay calm’ as they never loose anything there and they will never as terrorists will always attack the common places where high profile so called leaders will never go and hence will always remain out of danger. When parliament was attacked, 14 people died but none was the politician.

This is how our ‘honorable’ guests are being treated -

1. 1993 bomb blast – Hr. Supreme court Final hearing in 2011. It took 18 yrs to prove the guilty.

2. Maulana Masood Azhar arrested in 1994 by India for terrorist act should have been awarded death for his activities but he was not. In 1995 six foreign tourists kidnapped by his organization for a demand to release him. Eventually they killed all everyone except one who succeeded to escape. Still govt praised our lovely guest. In 1999 IA 814 hijacked for demand of his release. One passenger was killed in this. Finally he was set free.

3. Parliament attack – Maulana massod azhar release for IA 814 was the master mind behind this attack which killed 14 people. Afzal guru one of the important accused was convicted and sentenced to death penalty in 2002. As per our Home Minister Mr. P. Chidambarm, his ‘Mercy Petition’ is pending with Home Ministry and has not been sent to Hr. Prime Minister. Current status of the petition is ‘Under Examination’. I feel pity on our HM to entertain such petition, where was mercy when 14 people died during attack on parliament? Did he show mercy to anyone? [http://articles.timesofindia.indiatimes.com/2011-02-23/india/28626085_1_mercy-petition-mercy-plea-home-ministry]

4. 26/11 Mumbai – Worst in indian history. 10 terrorists attacked mumbai at different locations at peak hours killing 150+ and casualties 300+. 9 terrorists were killed by security forces and one Ajmal Kasab was caught live. This happened on 26/11/2008, 100 crore people saw him firing blindly at people and killing them, still our govt is finding difficulty to convict him and award death. Crores of rupees are being invested to protect the ‘Mass Killer’. No body knows why?

5. 11/07 Mumbai attack – Three blasts in mumbai again killing 21 people and 100+ injured. As usual our leaders have urged to remain calm and our honorable PM promised to catch the minds behind this. May be because there is still place available in our jails to nurture and nourish the terrorists.

This is not all but just few things which I could remember and mark. This all is happening because we are tolerating this. This is happening because we have weak memories. Does anyone remembers what was the death count in 1993 blast? or in train blasts? or in 26/11 attack? That’s the sorrow, we quickly forget and so our govt.

Like a great toppings on pizza they make statements ‘Not all terrorist attacks can be stopped’ … Great Leaders of Great India! Be it congress or BJP or any other party all are same! Time to show them their place has already passed and more we stay ‘calm’, more we will loose.

थोडा विचार केला कि खूप प्रश्न हि पडतात आणि अनेक प्रश्नांची उत्तरेपण मिळतात.

A week before I received my iPad2 and believe me it amazing. It has so many features. My iPad exploration is still continue.

While going through the ways to arrange my home screen, i found this cool feature about creating the folders on your home screens.

Follow the below steps to create the folders -
1. Tap and hold on any app icon until it starts to jiggle and you see cross icons on apps.
2. Now tap and hold on any one icon and drag it over the other app icon you wish to group with. This will automatically create a folder with the two apps in it. Now you can move other apps also in this folder.

Remember one folder can hold at max 20 items.

The best part of this is, it understands the apps you are dragging on each other first time for creating folder and names the folder accordingly. Eg. If I drag Facebook app onto skype, it creates a folder and renames it ‘social’ which sounds very logical. If I drag times of India app on ndtv India news app, it creates a folder with name ‘news’. You can obviously rename the folders. Tap on folder you wish to rename and do it.

This is applicable to iPhone too.

Enjoy!!!

I wanted to create a sample desktop application using Adobe AIR. Application was supposed to get the data from local oracle express edition database. I started working on it but soon i realize that I cannot connect to local database through AIR. I googled a lot but could not find anything. So i decided to create something new and then i started working on AirDBConnector.

AirDBConnector has three parts -

1. java4airdb – Local Java Server that sits between air application and database.
2. air-lib – flex library that provides API for DB communication.
3. sql-gen – An Air application to generate sql query configurations.

java4airdb:

Its a java application that uses ServerThread and listens on particular port for air application db requests.

• airdb.connector.port : Specifies port to be used for communication.
• airdb.connector.sql-config: Path to sql config file.
• java4airdb.bat : Batch file to start java server for db interaction.
• java4airdb.jar: Java jar file

Starting server is very simple just define the connector port in properties file, specify the sql-config file path and run the java4airdb.bat file.

*This requires Java5+. Set JAVA_HOME property. 

sql-gen:

Its a very simple utility air application to generate sql-config file in proper syntax.

1. Run AirDbConfigGenerator. Click on ‘New Config’. Enter DSN Name. If required username and password.

2. To add SQL queries, click on ‘+’ button in SQL queries. Add below fields and Save Query.

• Unique query id per config file.
• query type: Select, Insert/Update, Proc/Function
• SQL query
• Parameters

You can have any number of queries in config file.

3. Once you are done with adding all queries. Click on ‘Generate XML’ button on top to generate sql-config.xml file.

Thats It! you have successfully generated you sql-config.xml and you can find it on desktop.

Isn’t that easy. You do not need to know XML syntaxes.

Sample XML file -

<sql-config>

  <connection>

    <dsn password="password" name="MyDSN" username="user1"/>

  </connection>

  <queries>

    <select id="Query1">

      <sql>Select * from test_table1 where id=?</sql>

      <parameters>

        <parameter>

          <name>param1</name>

          <type>BIGINT</type>

          <typeVal>-5</typeVal>

        </parameter>

      </parameters>

    </select>

  </queries>

</sql-config>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

air-lib:

This provides flex API to communicate to JAVA server. Integration with your AIR application is very easy, you just need to add AirDBConnector.swc in you application.

Below code shows the sample usage of library API -

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

   2:  <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 

   3:      layout="vertical" xmlns:airdb="com.mm.apps.airdb.*"

   4:      creationComplete="airDB.init();">

   5:      

   6:      <mx:Script>

   7:          <![CDATA[

   8:              import com.mm.apps.airdb.AirConnectorEvent;

   9:              private function onIncomingData(event:AirConnectorEvent):void{

  10:                 dg.dataProvider = event.resultRows;

  11:              } 

  12:          ]]>

  13:      </mx:Script>

  14:      

  15:      <airdb:AirDBConnector id="airDB" serverPort="9000" 

  16:          serverAddress="localhost" 

  17:          dataReceived="onIncomingData(event)"/>

  18:      

  19:      <mx:Button label="Get Data" click="{airDB.executeQuery('get_frameworks');}"/>

  20:      

  21:      <mx:DataGrid id="dg" x="10" y="423" height="250" width="100%">

  22:          <mx:columns>

  23:              <mx:DataGridColumn dataField="framework_id"/>

  24:              <mx:DataGridColumn dataField="name"/>

  25:              <mx:DataGridColumn dataField="version"/>

  26:              <mx:DataGridColumn dataField="description"/>

  27:              <mx:DataGridColumn dataField="source_url"/>

  28:          </mx:columns>

  29:      </mx:DataGrid>        

  30:      

  31:  </mx:WindowedApplication>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Line 15: Create an instance of AirDBConnector. Specify serverPort, serverAddress and event handling method for dataReceived event.

Line 4: THE MOST IMPORTANT, CALL airDB.init()

Line 19: on button click, query with id ‘get_frameworks’ is executed by calling executeQuery method on airDB. Optionally you can also pass parameters and callback function to executeQuery method. Below are two flavours of execute query method. These two methods returns an unique string id for each method call. If required you can use this id to match with the result id in event object.

   1:  executeQuery(queryId:String, callback:Function = null):String

   2:   

   3:  executeQueryParams(queryId:String, params:Array, callback:Function = null):String

callback function must have below signature-

function (event:AirConnectorEvent) void

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

AirConnectorEvent has below set of properties -

• message – XML Response from java4db. Sample XML Response is –

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<transporter>
<message>Query with id end is processed.</message>
<status>100</status>
<data>
<result size="4">
<row>
<framework_id>1</framework_id>
<name>Spring</name>
<version>3.0.5</version>
<description>Spring Framework</description>
<source_url>http://www.springsource.com</source_url>
</row>
<row>
<framework_id>2</framework_id>
<name>Spring</name>
<version>2.0</version>
<description>Spring Framework</description>
<source_url>http://www.springsource.com</source_url>
</row>
<row>
<framework_id>3</framework_id>
<name>Hibernate</name>
<version>2.0</version>
<description>Hibernate</description>
<source_url>Hibernate.com</source_url>
</row>
<row>
<framework_id>4</framework_id>
<name>Hibernate</name>
<version>3.0</version>
<description>Hibernate</description>
<source_url>Hibernate.com</source_url>
</row>
</result>
</data>
<requestId>B540B76E-4433-46F5-64DF-459F46715E16</requestId>
</transporter>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

• resultId : Unique id for each db request
• resultRowCount: Number of row return by select query
• resultRow: XMLList containing <row> elements from response. You can use this property for assignment to dataProviders.

So that’s all. I hope this is easy to interact with local database.

Project home – http://code.google.com/p/air-db-connector/

Download Release 1.0 – http://code.google.com/p/air-db-connector/downloads/list

Please let me know your comments/issues/changes.

We come across lots of instances in our daily life where we waste water like anything. The best example could be water leakages at pipes in public places and our System is so efficient to act to these things that it takes days, months to fix.

Many times I see people using drinking water to wash vehicles, flooring but at same time they don’t share the water with poor needy peoples who don’t have municipal water connection. I don’t understand why do people behave like this. Is washing vehicle more important than sharing water for drinking purpose?

Countries like US are now re-using “Used water” for washrooms but many other countries still uses the pure drinking water in toilet flush and washroom. Why can’t all implement the same thing. Recently I saw usage of BIO BLOCKS in washrooms instead of water. It’s really good to have such products. But its yet to gain the popularity and usage.

If you want to know the importance of water, ask to farmers. They will tell you what happens if water would have not been available. But we don’t even care about them, though they are the one who provide us food, grain etc. Cities can get 24hrs water supply but urban areas, villages are still dependent on WELL, Water holes. Ground water level is decreasing so sharply and fast.

For this Holi, let’s decide not to waste WATER and play dry holi with GULAL (also that will be good for you skin and health) …

WATER IS LIFE … SAVE IT… USE IT CAUTIOUSLY … !!!

ActionScript API provide one class ObjectUtil. It contains some helper methods like compare, dateComapre etc for handling objects.

This class also has one very useful method getClassInfo(). Below code shows usage of this method to iterate through properties of an object -

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

   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

   3:     width="100%" height="100%" creationComplete="init(event)">

   4:     

   5:     <mx:Script>

   6:         <![CDATA[

   7:             import mx.utils.ObjectUtil;

   8:             

   9:             private function init(event:Event):void{

  10:                 printProperties1();

  11:                 printProperties2();

  12:             }

  13:             

  14:             private function printProperties1():void{

  15:                 var props:Object = ObjectUtil.getClassInfo(this);

  16:                 for each (var p:QName in props.properties){

  17:                     var propName:String = p.localName;

  18:                     var propValue:Object = this[propName];

  19:                     trace(propName +":"+ propValue);

  20:                 }    

  21:             }

  22:             private function printProperties2():void{

  23:                 var excludes:Array = ['x','y'];

  24:                 var props:Object = ObjectUtil.getClassInfo(this,excludes);

  25:                 for each (var p:QName in props.properties){

  26:                     var propName:String = p.localName;

  27:                     var propValue:Object = this[propName];

  28:                     trace(propName +":"+ propValue);

  29:                 }    

  30:             }

  31:         ]]>

  32:     </mx:Script>

  33: </mx:Application>

printProperties1() method should print all properties of Application class. Second implementation printProperties2() shows excluding certain properties from search.

Even though this introspection is not like java or any other language reflection but still its very useful since flex supports dynamic objects. To iterate through properties of dynamic objects this method can be used.

In the application mxml file, we will add two List components and two buttons.

   1: <mx:List id="sourceList"

   2:    width="100" height="200"/>

   3:  

   4: <mx:Button id="moveToLeft"

   5:    label="Add"/>

   6:   <mx:Button id="moveToRight"

   7:    label="Remove" />

   8:  

   9: <mx:List id="destList"

  10:    width="100" height="200"/> 

   
Now, in <mx:Script> create two variables of type ArrayCollection. We will declare these two variables as [Bindable] so that these can be used for dynamic binding in mxml code.

   1: [Bindable]

   2:   private var listData:ArrayCollection = new ArrayCollection(["Item A","Item B","Item C","Item D","Item E","Item F"]);

   3:      

   4:   [Bindable]

   5:   private var filteredData:ArrayCollection = new ArrayCollection();

  
We have initialized the listData variable to some String items. Now we will use these collections as data providers for our lists. Lets change the List declarations to use the bindings.

   1: <mx:List id="sourceList"

   2:  width="100" height="200"

   3:  dataProvider="{listData}"/>

   4:  

   5: x:List id="destList"

   6:  width="100" height="200"

   7:  dataProvider="{filteredData}"/>  

Great we are ready with lists populated with data. Now lets add a function calls to handle the button click events. Change the button declaration code and add the click event handlers for each button.

   1: <mx:Button id="moveToLeft"

   2:  label="Add"

   3:  click="addItems(event)"/>

   4:  

   5: <mx:Button id="moveToRight"

   6:  label="Remove"

   7:  click="removeItem(event)"/> 

 
but where are the functions addItems and removeItem?? We are yet to define them. In <mx:Script> lets write some action script to perform action.

   1: private function addItems(eventL:MouseEvent):void{

   2:    var obj:Object;

   3:    // Iterate through selected items collection and add it to filtered data collection object.

   4:    for each (obj in sourceList.selectedItems){

   5:     filteredData.addItem(obj);

   6:    }

   7:    // De-Select all selected items after adding each one to destination.

   8:    sourceList.selectedItems = [];

   9:   }

  10:  

  11: private function removeItem(event:MouseEvent):void{

  12:    var obj:Object;

  13:    for each (obj in destList.selectedItems){

  14:     filteredData.removeItemAt(filteredData.getItemIndex(obj));

  15:    }

  16:   }

  
You will see we are actully performing addition and removal on filteredData collection object, rather than List object. Remember, we have made filterData object as [Bindable], so whatever we do with filteredData, changes are immediately reflected in destination list.

Cool … we are ready to move!

Google Icon -

Wikipedia Icon -

Those tiny icons in browser’s address bar are called as “Favorites Icon” or “FavIcon”. These are also known as a website icon, shortcut icon, url icon, or bookmark icon that are associated with a particular website or webpage. These are the icons (.ico) files with size 16 X 16 pixels or larger.

How to put FavIcon in action?

In early age of FavIcon, developers use to put a favIcon.ico file in root directory of web application. This would be then automatically used by Internet Explorer for favorites display. But soon, another flexible approach is created for implementing FavIcon. This new system used HTML for embedding the FavIcon for website.  Later, HTML approach is revised to meet the standards of World Wide Web Consortium (W3C) and now all browsers supports this system.

Although IE supports only for .ico formats, Mozilla and other browser also provide support for PNG and GIF image formats.

There are two ways to add FavIcon to your website –

1.       Use of ‘rel’ attribute (Preferred)

2.       Put favicon.ico in predefined location in web app

·         Use of ‘rel’ attribute –

The first approach for specifying a favicon is to use the rel attribute value “icon”. In this HTML 4.01 example, the FavIcon identified via the URI http://localhost:8080/MyApp/favicon.ico as being a favicon:

<!DOCTYPE html
      PUBLIC “-//W3C//DTD HTML 4.01//EN”
      “http://www.w3.org/TR/html4/strict.dtd“>
<html lang=”en-US”>
<head profile=”http://www.w3.org/2005/10/profile“>
<link rel=”shortcut icon” href=”http://localhost:8080/MyApp/favicon.ico”/>
</head>
<body>
 FavIcon Example.
</body>
</html>

·         Putting FavIcon in predefined url:

A second method for specifying a FavIcon relies on using a predefined URI to identify the image: “/favicon”, which is relative to the server root. This method works because some browsers have been programmed to look for favicons using that URI. This approach is inconsistent with some principles of Web architecture and is being discussed by W3C’s Technical Architecture Group (TAG) as their issue siteData-36.

 Here is a FavIcon that i put to my site - 

References:

http://en.wikipedia.org/wiki/Favicon – Details the concept of FavIcon

http://www.html-kit.com/favicon/ – provides Utility to create FavIcon from gif and other formats.