Dynamically populate Tree control with XMLListCollection

For those who think it a tough thing to bind controls to hierarchical data (like me) I am posting my source code to dynamically populate hierarchical data in Tree control using an XMLListCollection object.

First of all, create a Tree object in markup

<mx:Tree height="100%"  labelField="@label" width="175" showRoot="false"  id="treeMenu"  > </mx:Tree>

Next, create a private variable myTreeCollectionof XMLListCollection and set dataProvider property of the Tree to 'myTreeCollection'

[Bindable] public var myTreeCollection:XMLListCollection;

<mx:Tree height="100%" dataProvider="{myTreeCollection}"...

Now, we are ready to add hierarchical to the XMLListCollection object.

import mx.collections.XMLListCollection;
[Bindable]
private var myTreeCollection:XMLListCollection;
private function init():void
{
 if(myTreeCollection == null)
 myTreeCollection = new XMLListCollection();
       
 var xmlString:String = "<Item label='Level-1'>"   
         "<Item label='Level-2'/>" "</Item>";
 var item:XMLList = new XMLList(xmlString);
 myTreeCollection.addItem(item);
}

Note that in markup of Tree, we have set labelField propperty to '@label'. It tells the runtime to bind the tree node with 'label' attribute of corresponding dataprovider XML node. An XML attribute is indicated with "@" prefix.

TabBar with multicolored tabs

Tabs of TabBar component can be a tweaked to produce tabs of different colors.
The trick is to iterate through the datasource of TabBar, pick the tabs one by one and set the properties - backgroundColor, fillAlphas and fillColors.

Here is the quick code

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

Canvas
{
borderStyle: applicationControlBar; 
fillColors:  #FFB600,#FFFFFF; 
fillAlphas: 0.4, 1.0; 
highlightAlphas: 0, 0;  
} 





 






import mx.events.ItemClickEvent;
private function onItemClick(event:ItemClickEvent):void
{
var colorArray:Array = ["#FFB600", "#FFFF00", "#80FF4D"];
canvasMain.setStyle("backgroundColor", colorArray[event.index]);
}
private function onTabCreated():void
{
var colorArr:Array = ["haloOrange", "yellow", "haloGreen"];
var len:int = tabContainer.dataProvider.length;
var tab:Object;

for(var i:int = 0; i< len; i++)
{
tab = tabContainer.getChildAt(i);
tab.setStyle("fillColors", [colorArr[i], "white"]);
tab.setStyle("fillAlphas", [1.0, 1.0]);
tab.setStyle("backgroundColor", colorArr[i]);
tab.width = 200;
}
}

Opaque background with gradient

Using fillAphas with fillColors we can create attractive opaque gradient backgrounds backgrounds in Flex.

While I am still in the middle of my googling for the precise documentation of fillAlphas property, I could have learn that fillAlphas perpery is an array of two numeric elements between 0 and 1 which indicates opacity of the two parts of the correspoding Flex component . fillAlphas works hand-to-hand with fillColors as if there is no gradient, we do not need to adjust the opacity of different parts of the component.

Here is an example:

 
  Canvas
  {
   fillAlphas: 1, 1; 
   fillColors:  #FFFFFF,#D00808;  
   borderStyle: applicationControlBar;    
  } 
 
 
  

and here's how it looks like-

Calculate Google Page Rank with Flex/AIR

While working on the development of an SEO tool in AIR, I needed to calculate Google Page Rank for a website with given URL.
This article was what I started with. But mimicking the hashing algorithm developed by Bob Jenkins from C# to ActionScript was not a good idea that my deadlines could allow.

I still Googled and fortunately found this one. Here is a summary of the article from Louis Lee (not sure he's the original author).

1. Download FetchPR.as
2. Add it to your project.
3. Initialize the FetchPR’s instance.
4. Set the callback function of FetchPR
5. Call FetchPR’s getPR function to get a url’s PR.

Sample code

import scripts.FetchPR;
import mx.managers.CursorManager;
private var fetchprinstance:FetchPR = new FetchPR();

private function getPageRank():void
{
 CursorManager.setBusyCursor();
 fetchprinstance.callback = setResult;
 fetchprinstance.getPR(urlbox.text);
}

public function setResult(pr:Number):void
{
 result.text = "PageRank is: " + pr.toString();
 CursorManager.removeBusyCursor();
}

Flex accordion with multiple color tabs

I thought it would be good to start with sharing my recent research on coloring the Accordion tabs. Here is the MXML:

<mx:style>
     AccordionHeader
     {
       fillAlphas: 1, 1;
       cornerRadius: 4;
       downSkin: ClassReference("mx.skins.halo.ButtonSkin");
       overSkin: ClassReference("mx.skins.halo.ButtonSkin");
       upSkin: ClassReference("mx.skins.halo.ButtonSkin");
       selectedDownSkin: ClassReference("mx.skins.halo.ButtonSkin");
       selectedOverSkin: ClassReference("mx.skins.halo.ButtonSkin");
       selectedUpSkin: ClassReference("mx.skins.halo.ButtonSkin");
       disabledSkin: ClassReference("mx.skins.halo.ButtonSkin");
       selectedDisabledSkin: ClassReference("mx.skins.halo.ButtonSkin");
    }
</mx:style>


<mx:accordion x="0" id="accMain" width="88%" height="88%" backgroundalpha="0" creationcomplete="accordionInit()"
 rotation="0">
<mx:VBox label="Google Page Rank" width="100%" height="100%" backgroundAlpha="0" backgroundColor="#FFFFFF" paddingTop="10" paddingLeft="10">

 <mx:HBox width="100%"  >
    <mx:Text  text="URL:"/> <mx:TextInput  id="urlbox" backgroundAlpha="0.1"  width="345"/>
 </mx:HBox>
 <mx:HBox width="100%">
  <mx:Button label="Get PR!" click="getPageRank();" />
 </mx:HBox>
 <mx:HBox width="100%" >
   <mx:Text text="PageRank is:"  id="result"/>
 </mx:HBox>

</mx:VBox>
<mx:VBox label="Other" width="100%" height="100%" backgroundColor="#FFFFFF">

</mx:VBox>
<mx:VBox label="Other" width="100%" height="100%" backgroundColor="#FFFFFF">

</mx:VBox>
<mx:VBox label="Other" width="100%" height="100%" backgroundColor="#FFFFFF">

</mx:VBox>
<mx:VBox label="Other" width="100%" height="100%" backgroundColor="#FFFFFF">

</mx:VBox>
<mx:VBox label="Other" width="100%" height="100%" backgroundColor="#FFFFFF">

</mx:VBox>
<mx:VBox label="Other" width="100%" height="100%" backgroundColor="#FFFFFF">

</mx:VBox>
</mx:accordion>

Here is the actionscript:

private function accordionInit():void
{
accMain.getHeaderAt(0).setStyle("fillColors", ["#6E0404", "#6E0404"]);
accMain.getHeaderAt(0).setStyle("themeColor", "#6E0404");
accMain.getHeaderAt(0).setStyle("color", "#FFFFFF");

accMain.getHeaderAt(1).setStyle("fillColors", ["#A30505", "#A30505"]);
accMain.getHeaderAt(1).setStyle("themeColor", "#A30505");
accMain.getHeaderAt(1).setStyle("color", "#FFFFFF");

accMain.getHeaderAt(2).setStyle("fillColors", ["#E30707", "#E30707"]);
accMain.getHeaderAt(2).setStyle("themeColor", "#E30707");
accMain.getHeaderAt(2).setStyle("color", "#FFFFFF");

accMain.getHeaderAt(3).setStyle("fillColors", ["#F93737", "#F93737"]);
accMain.getHeaderAt(3).setStyle("themeColor", "#F93737");
accMain.getHeaderAt(3).setStyle("color", "#FFFFFF");

accMain.getHeaderAt(4).setStyle("fillColors", ["#FB6F6F", "#FB6F6F"]);
accMain.getHeaderAt(4).setStyle("themeColor", "#FB6F6F");
accMain.getHeaderAt(4).setStyle("color", "#FFFFFF");

accMain.getHeaderAt(5).setStyle("fillColors", ["#FC9898", "#FC9898"]);
accMain.getHeaderAt(5).setStyle("themeColor", "#FC9898");
accMain.getHeaderAt(5).setStyle("color", "#FFFFFF");

accMain.getHeaderAt(6).setStyle("fillColors", ["#FDC9C9", "#FDC9C9"]);
accMain.getHeaderAt(6).setStyle("themeColor", "#FDC9C9");
accMain.getHeaderAt(6).setStyle("color", "#FFFFFF");
}