Tip on Panel Class in Flex

Often hear questions on Alert Control like, remove default Button(OK),add new Button’s and so on.., and on TitleWindow like, re-arrange close Button to top-left,add new Buttons and so on..

One thing we got to notice at first is that TitleWindow and Alert are Classes which are derived from Panel Class, which in turn is derived from Container Class, so Alert and TitleWindow are sub-classes of Panel Class, they are created by addding new functionality[methods and properties] to the Panel Class.And the final tip is that, look in to the code,look in to the Class Diagram and if you dont have one then download it here , make a print and stick to a wall near you.

So, having said that you need to decide an appropriate implementation based of your requirements.Example, if you dont want to show OK(default Button) Button on the Alert Control,then better not to use Alert Control, go for a Panel,which is appropriate.

Below fig shows the Relational Diagram of Container,Panel,Alert and TitleWindow Classes.

Enjoy the Post.

Sorting Date’s on ArrayCollection in Flex

First things first, read about the mx.collections.Sort Class before going in to the code below.

About the Post,suppose i have a AC[ArrayCollection] like below;

[Bindable]
private var arrClldetails:ArrayCollection = new ArrayCollection([
{Fname:"Kranthi", Lname:"Kata", dob:"21 Sep 79"},
{Fname:"Vasanth", Lname:"Lola", dob:"11 Jun 80"},
{Fname:"Manoj", Lname:"Pati", dob:"16 July 81"},
{Fname:"John McClain", Lname:"Mela", dob:"15 Feb 72"},
{Fname:"Ross", Lname:"Geller", dob:"02 Jan 74"},
{Fname:"Chandler", Lname:"Bing", dob:"18 Oct 76"}
]);

Now i want to Sort the “dob” Date field in the AC.,so for this i need to
write a compareFunction for Sort which in turn is applied to the AC like below,

//Compare Function
private function fnCompareFunction(ObjA:Object,ObjB:Object,fields:Array = null):int
{
//fnDtfParceFunct is a Date parse function avail in DownloadCode.
var dateA:Date=fnDtfParceFunct(ObjA.dob,”DD/MM/YY”);
var dateB:Date=fnDtfParceFunct(ObjB.dob,”DD/MM/YY”);
return ObjectUtil.dateCompare(dateA, dateB);
}

Now apply this CompareFunction to Sort and then apply that to AC like below,

var sort:Sort=new Sort();
sort.compareFunction=fnCompareFunction;
arrClldetails.sort=sort;

Now refresh the AC for Sort to take effect,

arrClldetails.refresh();

Run Demo

Download Code

Enjoy the post.

Tracing Childrens of a Container in Flex

A Container in Flex is one that controls the layout characteristics of child components and which extends the Container base Class like the famous Panel,Canvas,ViewStack,TabNavigator,…

Container contains childrens or Sub Components or Sub Containers[Container in a Container], and so on.Childrens/child components in a Container are all are created using the creationPolicy setting of that Container.In case of sub containers, outer Containers are created before the inner one’s.And creation can be altered by setting the creationPolicy.

So now we know some basics of Container its time for the Topic.

Tracing..
We can manage the child components of a Container by using its predefined methods,like below..
1.Container.getChildren() – returns an Array of child components.
var arr:Array=Container.getChildren();
2.Container.getChildAt(index:int) – returns an instance of the DisplayObject at that creation index,which we can cast to required.
var obj:Object=Container.getChildAt(0);
3.Container.removeChildAt(index:int) – removes child at that creation index
var disObj:DisplayObject=Container.removeChildAt(0);
4.Container.removeAllChildren() – as the name specifies
….so on

In the below download code i have implemented all these methods with a Panel.Enjoy the Post.

Download code.

Assign a menu item(on right click menu list) to DataGrid control in Flex.

OK, First thing to do, read about flash.ui.ContextMenu Class.
Some points..
->In SWF content, any object that inherits from InteractiveObject can be given a context menu by assigning a menu object to its contextMenu property.
->In Flex, only top-level components in the application can have context menus.
->Flash Player has three types of context menus:standard menu ,the edit menu and an error menu.Only the standard and edit menus can be modified with the ContextMenu class.
…
so first create a ContextMenu for the DataGrid like below..

private function fnDgContextMenu():ContextMenu
{
var newContextMenu:ContextMenu = new ContextMenu();
var newContextMenuItem:ContextMenuItem=new ContextMenuItem(“Sort”);
newContextMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,fnSortSelect);
newContextMenu.customItems.push(newContextMenuItem);
return newContextMenu;
}

now assign it to DataGrid.
dg.contextMenu=fnDgContextMenu(); // here dg is the “id” of the DataGrid.check the code below.

Download code.

Enjoy the post.

Tips on MenuBar control and its dataProvider in flex

Suppose we have a MenuBar and its dataPovider as below.

<mx:MenuBar id=”myMenu” dataProvider=”{xmlLst}” labelField=”@label” itemClick=”fnItemClick(event)” />

<mx:XMLList id=”xmlLst”>
        <root label=”year”>
            <menuitem label=”2001″ enabled=”true”/>
            <menuitem label=”2002″ enabled=”false”/>
            <menuitem label=”2003″ enabled=”true”/>
            <menuitem label=”2004″ enabled=”false”/>
            <menuitem label=”2005″ enabled=”true”/>
        </root>
</mx:XMLList>

and the itemClick handler below
private function fnItemClick(event:MenuEvent):void
{
//code goes here on itemClick
}
Desc: The MenuBar displays the XMLList dataProvider with all the years as menuitems[because labelField="@label"], and has a handler for itemClick “fnItemClick”.

Now the tips..

1.To set enabled=true for the year 2002.
xmlLst.menuitem.(@label==”2002″).@enabled=true;
//this is like traversing the XMLList.
//this will reflect changes both to XMLList and MenuBar
2.To set for all enabled=true.
//here we got to traverse the XMLList and change the data.
for each(var xml:XML in xmlLst.menuitem)
{
 xml.@enabled=true; 
}
3.To set enabled=false for selected Item.
//in the itemClick handler use the below code
event.item.@enabled=false;

Things to remember:- while accessing attributes of XML we got to use ‘@’ before the attribute name, not neccessary if it is an Object.

Download code.

Note:- Examples or code you have seen on this blog so far are related to Flex 3 SDK.

why so serious?

For all those programmers and developers who are all seriously coding and can’t find time to listen to or tell a joke, here’s a video of your kind.I did laugh out loud.

Technology:open source media framework[link]

source : http://dougmccune.com/blog/2009/08/15/hitler-goes-to-cfunited/

Custom Component: Indicator Label for download

As you all know that i made a custom component called Indicator Label from this post.Now its time for me to release the component, so follow this link and fill out the form and then i will send you the component through mail.I need this information only to keep track of my downloads, nothing less and nothing more.

Enjoy the component.

Adobe devsummit, i was there too.

On 4th Aug 09 i attended the Adobe devsummit at Bangalore.This was my first experience with huge crowd of Flex users.Few years back this wasn’t the situvation.If i recall,,,..if i ask someone “there’s Flex Meet you wanna go” then the  reply would be like “Flex??,what’s Flex?”. But a lot has changed now, Adobe Flex is clearly visible everywhere on the internet.There were around 1200 people at the event.And the event was good.There were sessions on FX4,CF,FXB4,FC,…, it was good, you could actually get a good picture on these technologies.Flash Builder 4 was cool with good set of features,Flex sdk4 again with new shapes,and a new product called Adobe Catalyst, this is really amazing product from Adobe.Everything was cool and hot.

Then I met few Adobe people, it was great talking to them,i shared my thoughts on Flex and they were quite interested in listening to me too.:-).And guess what, the lunch was great too, and it was very uncomfortable for me to sit there after a great meal like that, but i managed somehow.:-)

I was very much interested on one particular session “Flash on Mobile”, and there was good insight given on this topic.And i know this will be big in the future.

There were employees from top IT major like Infosys,Wipro,cognizant… who attended the event.I even talked to an employee from Infosys, he says the company has just began showing interest on Adobe Flex and has recruted a team on Flex.And there were students also at the event interested in this domain and a great number attended the event.They were very energitic and they love this platform.

I was spotted and recognized by few people, and they all thanked me for this blog and the effort i make on the blog.Well folks i love sharing my knowledge.

Finally good going Adobe.Time will only answer your calls.Enjoy the post.

Close the browser window from Flex App.

Using two lines of javascript code we can actually close the Browser window.But not all the Browser’s support this feature[works on IE], they only give limit access through javascript.But as the question is made here is the solution.

function closeme()
{
 window.close();
}

this is the js code.So how you gonna make this function call from the Flex App?.Simple use ExternalInterface.

Follow this Post on the ExternalInterface.

Enjoy the post.

A Tip on Alert Control in Flex

Question:

How to disable selectivity on Alert control display message?

(or)

Alert control display message should not be selectable.

Solution:

var alert:Alert=Alert.show(“Cannot select this text!!!”);
alert.mx_internal::alertForm.mx_internal::textField.selectable=false;

Enjoy the post.

A Tip on Alert Control in Flex.

Question:

How to make the defaultButton on Alert Control invisible?

Solution:

var a:Alert;
a = Alert.show(“where’s my defaultButton (OK)!”);
a.mx_internal::alertForm.mx_internal::defaultButton.visible = false;

Enjoy the Post.

A Tip on Panel Control in Flex.

Ok here is the Question to me, How to display html text for the title text of the Panel ?.

Solution:

var tfTitle:IUITextField=panel.mx_internal::getTitleTextField();
tfTitle.htmlText=”This is <B><FONT COLOR=’#FF0000′>Panel Title</FONT></B>”;

Here panel is the id of the Panel Control used. Enjoy the post.

A Tip on using XML Class methods on XMLList Objects.

For using the XML Class methods with an XMLList Object containing one or more XML Objects you have to iterate through the XMLList Collection and apply the XML Class methods to each XML Object in the Collection.

For example use the for each.. in statement to iterate through the XMLList Collection and access the individual XML Objects and apply the required XML Class methods to the individual XML Objects.

Example:

Suppose i have an XMLList Like below

<firstwife>

<name>Aish</name>

<age>35</age>

<dob>12/10/1974</dob>

</firstwife>

<secoundwife>

<name>Anu</name>

<age>25</age>

<dob>10/12/1984</dob>

</secoundwife>

then i would iterate this XMLList like below,

for each(var xml:XML in resultXMLList)

{

trace(“ ”+xml);//now apply XML Class methods to this XML Object.

}

[Here resultXMLList is my XMLList]

Observe the output now,it will print out the individual XML’s.Enjoy the post.

Tip on Formatting dates with the DateField Control in Flex.

We can specify a function to format the date displayed in the text field using labelFunction property of the DateField control. Function will take date and returns the string representation of the date, and in the function we can use the DateFormatter Class to format the date to our needs.

Now to parse the entered date as text we specify a parse function using the parseFunction property of the DateField control. Function takes two arguments, entered text and the formatString and returns a date object typically performing the reverse of the label function. DateField uses a default parse function DateField.stringToDate, but we can specify a custom one. If you don’t want to edit the DateField control then simply specify null to the property.

Example:

For example to represent dates in the editable DateField control in DD MMM YY [10 Feb 09] format, we make use of lableFunction, parseFunction properties of the DateField Control.

Solution:

Using two DateFormatters

<mx:DateFormatter id=”dtf1″ formatString=”DD MMM YY”/>
<mx:DateFormatter id=”dtf2″ formatString=”DD/MM/YY”/>

//the label function

private function fnDtfLblFunct(date:Date):String
{
return dtf1.format(date);
}

//the parse function

private function fnDtfPrsFunct(valueString:String,formatString:String):Date
{
return new Date(DateField.stringToDate(dtf2.format(valueString),”DD/MM/YY”));
}

Now observe these two above functions and their input,output.

Run Demo

Download Code

Explore more on  DateField Class and DateFormatter Class and just look in to the code, You will do great, because as always told “smart developers always view source”.

Enjoy the post.

Flex calls to Web services through Apache Axis2 engine.

There are quiet a few ways to create and deploy your Web services,the one best way to do this is by using Apache Axis2.Its easy,simple,efficient,flexible… [feature list can be found on their official website] and cost free. 

What is Apache Axis2?

In very simple terms “It is an implementation of SOAP[Simple Object Access Protocol]“.

[For more info...]

There are two implementations of the Apache Axis2 Web services engine – Apache Axis2/Java and Apache Axis2/C.

The below figure shows the flow for Apache Axis2/Java, which i have been working on now.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

It is very brief and the actuall internal flow and Architecture of the Apache Axis2 can be found on their website.

Flex framework uses WebService Class to access SOAP-based Web services on remote servers which define their interfaces in a WSDL document.As Apache Axis2 is an implementation of SOAP, acts as an intermediate layer or engine between service requester [Flex using WebService Class] and service provider.

Web services have been criticised for their complex Web structures for deployment and performance.But as these frameworks for Web services emerge with simplicity, they are no longer a concern.Soon i will come up with a post on creating and deploying Web services Using Apache Axis2/Java.

Enjoy the post.