Generate XML Data dynamically in Flex :: Reloaded

Few months back i made a post on this “Generate XML Data dynamically in Flex” and it needed some improvements. so here i am with the improvements. [ As few readers suggested ]

Lets talk whats are the things required here ::

1. Again explaining the previous post with example and populating DataGrid with that XML Data Generated.

2. Manipulating the Generated XML Data.

These two points will be covered and one in this Post and one in the next one.so stay tuned .

Covering the first One ::

To generate XML Data we got to use the Class XML and a bit of Action Script Coding.

First Create the Outer root for the XML in AS.

[Bindable]
public var xmlData:XML=<ROOTS></ROOTS>;

Now write a function where in you want to Add the Data of few controls to the XML.

Like for example i am having three controls.

<mx:TextInput x=”167″ y=”78″ id=”txt”/>
<mx:TextArea x=”167″ y=”153″ id=”txta”/>
<mx:DateField x=”167″ y=”114″ width=”160″ id=”dtf”/>

and i want to add the Data of these controls to the XML.So the Function would be like this on click of a Button here.

private function fnAddItem(e:Event):void
{
var newXmlRow:XML=<ROOT>
<TXT>{txt.text}</TXT>
<TXTA>{txta.text}</TXTA>
<DTF>{dtf.text}</DTF>
</ROOT>;
xmlData=xmlData.appendChild(newXmlRow);
dg.dataProvider=xmlData.ROOT;
}

appendChild() is the method to add a child element to the XML as the name suggests and its from the XML Class .And Here dg is the instance of a DataGrid. Like below. And observe the assingment of the XML to the DataGrid we got to mention the repeating nodes in the XML.Here its ROOT.

<mx:DataGrid x=”167″ y=”222″ id=”dg”>
<mx:columns>
<mx:DataGridColumn headerText=”Column 1″ dataField=”TXT”/>
<mx:DataGridColumn headerText=”Column 2″ dataField=”TXTA”/>
<mx:DataGridColumn headerText=”Column 3″ dataField=”DTF”/>
</mx:columns>
</mx:DataGrid>

So i am populting the Generated XMl data to my DataGrid.

Check out the example of this here. so this is about the first Point and the next one will be made soon.

Leave any comments for queries.Enjoy the Post .

Updated:-

Download Code

First and simple AIR App for Download.

Few months back i have made a post relating to my first simple AIR App. And the download to that AIR App is here.

Description About AIR App:

Its a window App with simple three controls. A Textinput , A Button and a Html Component. The TextInput takes the text to search and on press of search Button it seands the search text to the GooGle server and gets the result and displays it on the below Html component. The use of this is ??, you can figure it out as per the need.

finally DownLoad it here.

Enjoy my first Simple AIR App.

Amazing IDE Plugin For Flex Builder 3.

If you think you got everyting From Flex Builder 3 IDE , then you are in soup. There are some plugins which completes the Full Feature Functionality of the IDE’s, and such one plugin is the IDE Factory.There are really amazing features to Flex Applications Development in this IDE Factory Plugin.

Among them the Best features would be these ::

• Package Explorer.
• E4X Expression Builder.
• Extended Wizards for creating ActionScript class/interface and MXML components.
• UML Diagram generation for App.
• Flex unit test.
• AS Doc Generation.

And a lot more features and the steps to install this plugin is clearly given by them. A must try work. And there are in Beta release and will come up with lot more features. And sure its a hit. Enjoy the post.

Different positioning for different tooltips using ToolTip Manager Class.

my previous post tells the basic usage of the ToolTip Manager Class , here i am with an example where in you can give different positioning for different tooltips.This means if i have two controls and for the first control i want the tooltip on right and for the second control i want the tooltip on bottom of the control, so this can be achived using the ToolTip Manager class and iam going to tell you how that can be achived.

Here we got to use the method called createToolTip(), which takes the parameters.

syntax ::

createToolTip(text:String, x:Number, y:Number, errorTipBorderStyle:String,
context:IUIComponent):IToolTip

Here we will be usign the text,x,y parameters specifications only for our positioning.

First create an instance to the ToolTip Class and call the createToolTip method of the ToolTip Manager and asing the return value to the ToolTip Class instance.Like below.

private var tip:ToolTip;

tip = ToolTipManager.createToolTip(‘Right side tooltip’,
event.currentTarget.x + event.currentTarget.width + 10,
event.currentTarget.y)
as ToolTip;

Call these staments on an event of the control for exmaple on mouseOver and we got to destroy the ToolTip instance after the usage like on mouseOut.So that the instance can be used for other control in the Application.

And to destroy the ToolTip instance use the method destroyToolTip(tip) of the ToolTip Manager Class.

Similarly we can write code for any positioning of the tooltip for any control.

Click here to view the Example.

Enjoy the post and tune on to see the source code for this Exmaple.