Happy New Year 2009.

December 31, 2008

Happy New Year 2009. OK I am not good at writing quotes so here’s the image.

happy new year 2009

happy new year 2009

Note : This post is not related to Flex or any Technology just best wishes for the new year ahead.Enjoy yourself and let others too enjoy.:-)


Custom Component : Indicator Label or ILabel

December 29, 2008

First i must tell that using the Form and its children components like the FormItem,FormHeader are very use full as they touch our requirement in all means, like they control the layout,validating the fields,mark/unmark fields.. and many more.So while working on i came across a requirement to mark my Label as a symbol of Compulsory Field[a RED asterisk] for the TextInputs next to it,more or like the indicator in the FormItem which is a child component of the Form Container. So i thought of using the FormItem itself but its not possible, its only a child component in the Form Container, means i cannot individually use that.I just want a Label With the Indication as Compulsory field[asterisk].So how to achieve this ??.

My second thought was to search the WEB ,may be some one might had the same requirement and done a Custom Component for it. But believe me i found nothing and nothing.

Then my Third thought was to make one. I Called It “Indicator Label” or ILabel.

So i created one , it came out very clean and as i required and its very much similar to the FormItem which is a sub-Class of Container Class and my ILabel is just sub-Class of the Label Class. There is much difference between the Container and the Label.

Description:

It has the following properties with Label Component Properties:

indicatorSkin –>refers to the skin used for the indication, Programmatic Skin or Graphical Skin.

indicatorGap–>refers to the Gap between the indicator and the Label text.

required–>indicator is required or not.default value true.

requiredChanged–>Event for the required property value change.

That’s my requirement.Just a Label with all these properties.Finally made it.

Now just sit back and enjoy this example.

Run demo.

Enjoy the Post. :-) , Leave any Comments for queries.


Using the Repeater Component in Flex.

December 13, 2008

Before going through explore the basic concepts about them.,few lines from the  Flex Builder help are below.

Repeater components are useful for repeating a small set of simple user interface components, such as RadioButton controls and other controls typically used in Form containers. Repetition is generally controlled by an array of dynamic data, such as an Array object returned from a web service, but you can use static arrays to emulate simple for loops.

Ok now you got a little info about them I will show you one example and let’s work with them.

Here I am using a TextArea component in the Repeater and reading the dataProvider for the Repeater from the HttpService. To manipulate the Repeater and its components it’s better to provide an ArrayCollection to the Repeater as dataProvider and its bindable will reflect the changes made.

Hence I will use an HttpService to read the data in to the ArrayCollection from an XML file and provide this to the Repeater Component as the dataProvider. As the below lines shows us.

<mx:HTTPService id=”srvMain” url=”data.xml” useProxy=”false” result=”readRes(event)”
showBusyCursor=”true” />

<mx:VBox verticalAlign=”middle” horizontalAlign=”center”>
<mx:Repeater id=”rpt” dataProvider=”{arrCll}”>
<mx:TextArea id=”txta” text=”{rpt.currentItem.NAME}”/>
</mx:Repeater>
</mx:VBox>

And my script block contains the code to read my dataProvider in to an ArrayCollection and this goes in to the result of the HttpService.

This will repeat the TextArea components based on the dataProvider to the Repeater.

And observe the line I am using for assigning the text to the TextArea component from the dataProvider.

text=”{rpt.currentItem.NAME}”

Similarly we can use any component in the Repeater component. And they are very use full in large Applications where in you want many similar components in series, for example in a Login/signup form I may need the user to fill in multiple TextInput’s, a few of them is ok just use the individual components ,but what if there are many TextInputs the user needs to fill in and this screen/view is created at runtime which in turn reduces the Application size , because the components are not created at compile time they are laid out at runtime [That is it's just a separate view and loaded when necessary].

Now let’s just stay back and enjoy this Example.

Run the Demo.

Download the source Code.

As you can see the components are created at Runtime using the Repeater component.This is the charm of the Repeater Component,Enjoy the post.


A Tip while using Effects in Flex.

December 11, 2008

Here I will give you a tip on when to use Move Effect and Resize Effect.

Move Effect :

When you move [as the name specifies] your control in position you got to use this effect. Like if you alter the co-ordinates [x,y], then to smoothen this movement you can use this Move Effect.

Resize Effect:

When you resize [as the name specifies] your control in dimensions you got to use this effect. Like if you alter the dimensions [width,height] of a control, then to smoothen this movement you can use this Resize Effect.

Hope this helps some one out there. Enjoy the Post.


Comparing Dates in Flex.

December 10, 2008

They are many versions out there to do this, but my version is here. It’s pretty simple, clean and easy.

Check the code Example below::

var strDate1:String=”01/04/2008″;
var strDate2:String=”31/03/2009″;
var strMyDate:String=”10/12/2008″;
if(DateField.stringToDate(strMyDate,’DD/MM/YYYY’)>=DateField.stringToDate(strDate1,’DD/MM/YYYY’)
&& DateField.stringToDate(strMyDate,’DD/MM/YYYY’)<=DateField.stringToDate(strDate2,’DD/MM/YYYY’))
{
trace(“Date is in Financial Year Range”);
}
else
{
trace(“Date is not in Financial Year Range”);
}

Here iam using the DateField Class and its methods.

Enjoy the Post.



Follow

Get every new post delivered to your Inbox.