Hemakumar'S Blog

Definition

The DataGrid control provides the following features:

• Resizable, sortable, and customizable column layouts,

including hidable columns

• Optional customizable column and row headers,

including optionally wrapping header  text

• Columns that the user can resize and reorder at run time

• Selection events

• Ability to use a custom item renderer for any column

• Support for paging through data

• Locked rows and columns that do not scroll

Source Code

<?xml version=”1.0″ encoding=”utf-8″?>

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

layout=”absolute”>

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

private var DP: ArrayCollection = new ArrayCollection([

{ OrderId:'01',OrderDescription:'Laptops',

DateofOrder:'03/02/2008',

ShippingDate:'04/02/2008',Amount:'40000',Remove:'dddfdf'},

{OrderId:'02',OrderDescription:'DvD players',

DateofOrder:'04/02/2008',

ShippingDate:'05/02/2008',Amount:'10000',Remove:'dfcc'},

{OrderId:'03',OrderDescription:'TVs',

DateofOrder:'05/02/2008',

ShippingDate:'06/02/2008',Amount:'15000',Remove:'dffhdd'}

]);

public function removePerson():void {

if (DG1.selectedIndex >= 0)

{

DP.removeItemAt(DG1.selectedIndex);

}

}

]]>

</mx:Script>

<mx:Canvas  width=”100%” height=”100%”>

<mx:TabNavigator width=”100%” height=”100%”>

<mx:Canvas backgroundColor=”green” label=”Order”

width=”100%” height=”100%”>

<mx:Panel width=”50%” height=”50%”

horizontalCenter=”0″

verticalCenter=”0″>

<mx:DataGrid id=”DG1″ dataProvider=”{DP}”>

<mx:columns>

<mx:DataGridColumn dataField=”OrderId”

headerText=”OrderId”/>

<mx:DataGridColumn dataField=”OrderDescription”

headerText=”OrderDescription”/>

<mx:DataGridColumn dataField=”DateofOrder”

headerText=”Date of Order”/>

<mx:DataGridColumn dataField=”ShippingDate”

headerText=”Shipping Date”/>

<mx:DataGridColumn dataField=”Amount”

headerText=”Amount”/>

<mx:DataGridColumn dataField=”Remove”

headerText=”Remove”>

<mx:itemRenderer>

<mx:Component>

<mx:CheckBox click=”data.Remove=!data.Remove”/>

</mx:Component>

</mx:itemRenderer>

</mx:DataGridColumn>

</mx:columns>

</mx:DataGrid>

<mx:Button label=”Remove” color=”blue”

stickyHighlighting=”true” click=”removePerson()”/>

</mx:Panel>

</mx:Canvas>

</mx:TabNavigator>

</mx:Canvas>

</mx:Application>

With Regards

Hemakumar.S

About Referencing Guide

In This Referencing Guide

* Iam using two text boxes for website and comments.

* The website i used regular expression validation

* The comment i used string validation.

* And also i used view state to preview link

Source code

<?xml version=”1.0″ encoding=”utf-8″?>

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

layout=”vertical”>

<mx:Script>

<![CDATA[

import mx.controls.Alert;

import mx.events.ValidationResultEvent;

import mx.validators.RegExpValidator;

import mx.validators.StringValidator;

[Bindable]public var urlValue : String;

[Bindable]public var descripValue : String;

[Bindable] public var result : Boolean = true;

[Bindable]public var regval:RegExpValidator=new RegExpValidator();

[Bindable]public var stringval:StringValidator= new StringValidator();

public function switchState():void

{

urlValue = text1.text;

descripValue = text2.text;

currentState = “preview”;

}

public function poststate():void

{

var eventobject:ValidationResultEvent;

regval.source=text1;

regval.property=”text”;

regval.flags=”gmi”;

regval.expression=”http(s)?://”;

regval.triggerEvent=”change”;

regval.required=true;

stringval.source=text2;

stringval.property=”text”;

stringval.required=true;

stringval.triggerEvent=”change”;

stringval.minLength=20;

stringval.tooShortError=”your Description must

be atleast 20 characters”;

eventobject=regval.validate();

if(eventobject.type==”invalid”)

{

Alert.show(“please fill correct url”);

}

if(eventobject.type==”valid”)

{

eventobject=stringval.validate();

if(eventobject.type==”invalid”)

{

Alert.show(“please give description minimum of 20 characters”);

}

else

{

currentState = “thankYou”;

}

}

}

public function SHKhide():void

{

text1.text=””;

text2.text=””;

}

]]>

</mx:Script>

<mx:states>

<mx:State>

<mx:RemoveChild target=”{text1}”/>

<mx:RemoveChild target=”{text2}”/>

<mx:RemoveChild target=”{previewlink}”/>

<mx:RemoveChild target=”{resetbutton}”/>

<mx:SetProperty target=”{panel1}” value=”Referencing Preview”/>

<mx:AddChild relativeTo=”{label1}” >

<mx:Text text=”{urlValue}”  />

</mx:AddChild>

<mx:AddChild relativeTo=”{label2}” >

<mx:Text text=”{descripValue}”  />

</mx:AddChild>

<mx:AddChild relativeTo=”{spacer1}” position=”before”>

<mx:LinkButton label=”Return to back” click=”currentState=””/>

</mx:AddChild>

</mx:State>

<mx:State>

<mx:AddChild>

<mx:Panel x=”71″ y=”331″ width=”250″ height=”200″

layout=”absolute” title=”Thank You for Contacting Us”>

<mx:Text x=”10″ y=”10″

text=”you have successfully posted” width=”198″/>

<mx:Button x=”82″ y=”73″ label=”OK” click=”currentState = ””/>

</mx:Panel>

</mx:AddChild>

</mx:State>

</mx:states>

<mx:Panel title=”Referencing”>

<mx:Form>

<mx:FormItem label=”URL:”  >

<mx:TextInput width=”264″/>

</mx:FormItem>

<mx:FormItem label=”Description:”>

<mx:TextInput height=”63″ width=”265″/>

</mx:FormItem>

</mx:Form>

<mx:ControlBar>

<mx:LinkButton label=”Preview” click=”switchState()”/>

<mx:Spacer width=”100%”/>

<mx:Button label=”Reset” click=”suryahide()”/>

<mx:Button label=”Post” click=”poststate()” />

</mx:ControlBar>

</mx:Panel>

</mx:Application>

With Regards

Hemakumar.S

Rating (*****) in e-store

1. Rating scales are used widely online in an attempt to provide

indications of consumer opinions of products.

2. It is the evaluation or assessment of something, in terms of quality,

quantity or some combination of both.

3. In almost all cases, online rating scales only allow one rating per user

per product, though there are exceptions such as Ratings.net,

which allows users to rate products in relation to several qualities.

4. Most online rating facilities also provide few or no qualitative

descriptions of the rating categories.

5. Qualitative description of categories is an important feature

of a rating scale

Example

If only the points 1-10 are given without description, some people may

select 10 rarely whereas other may select the category often. If, instead,

“10″is described as “near flawless”, the category is more likely to mean

the same thing to different people.

This applies to all categories, not just the extreme points.

User ratings (*****) are best to validate the product in Social retail 2.0

Feed back

Function

* Rating is the process which attempts the verification of the

product in online store.

* It has the number of styles in rating at the pursuit the identity

of product.

* Rating can ranges from 1-10 otherwise it can be categories between

A to Z.

* User can rate a product only once after he/she purchase the product.

* Sampling is one factor which can lead to results which have a

specific bias or are only relevant to a specific subgroup.

Advantages

* Improve the sales of the product by suggesting customers to

get the right product for their need.

* Increase the reputation of clients by providing a service which gives

the freedom to choose the right product on their own with the

help of expert advice.

* Rectify the defects of the product from the rating (*****).

Benefits

* One-stop place to purchase a product online

* Consumers can get awareness from another user due to rating

(*****) of the product.

* Consumers can share their product experience

* Consumers can get the right product for their needs

* Consumers can discuss about the product with expert/product

user in the forums

Examples of sites which employ ratings scales in

social networking

* IMDb (Internet Movie Database)

* Internet Book List

* Yahoo! Movies

* Amazon.com

* BoardGameGeek

* TV.com and Ratings.net.

* The Criticker website uses a rating scale from 0 to 100 in order

to obtain “personalized film recommendations”.

With Regards

Hemakumar.S

I just tried this concept hopefully you all shared your idea

for our evolution in this field.

Source Code

<?xml version=”1.0″ encoding=”utf-8″?>

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

layout=”vertical”backgroundAlpha=”0″ backgroundColor=”#FFFFFF”>

<mx:Script>

<![CDATA[

import mx.validators.*;

import mx.controls.Alert;

import mx.controls.TextInput;

private function resetForm() :void

{

btnLogin.enabled = false;

}

private function validateUs() :void

{

btnLogin.enabled = (Validator.validateAll([val1,val2]).length == 0);

}

private function loginUser()  :void

{

Alert.show(“loginSucessful”);

txtEmail.text=””;

txtPassword.text=””;

}

]]>

</mx:Script>

<mx:EmailValidator id=”val1″ source=”{txtEmail}” property=”text”

required=”true” />

<mx:StringValidator id=”val2″ source=”{txtPassword}” property=”text”

required=”true” minLength=”2″ />

<mx:Form x=”0″ y=”90″ width=”814″ height=”631″ id=”form1″

creationComplete=”resetForm()”>

<mx:FormItem label=”Email” width=”100%”>

<mx:TextInput width=”215″ id=”txtEmail” change=”validateUs()” />

</mx:FormItem>

<mx:FormItem label=”Password” width=”100%”>

<mx:TextInput width=”216″ id=”txtPassword” displayAsPassword=”true”

change=”validateUs()”/>

</mx:FormItem>

<mx:FormItem width=”100%”>

<mx:Button id=”btnLogin” label=”Login” width=”85″ height=”25″

click=”loginUser()” />

</mx:FormItem>

</mx:Form>

</mx:Application>

With Regards

Hemakumar.S

Friends,

I just learn about this jumble colours concept

and wants to share you all.

SourceCode

<mx:Application

xmlns:mx=”http://www.adobe.com/2006/mxml”

layout=”vertical”>

<mx:Style>

VBox {

backgroundColor: #CCCCCC;

verticalAlign: ‘middle’;

horizontalAlign: ‘center’;

}

.header {

font-family: ‘Arial’;

font-size: 15px;

font-weight: ‘bold’;

color: #FFFFFF;
}

</mx:Style>

<mx:Script>

<![CDATA[

// reset color properties with random values.

private function jumbleColors():void

{

holder.setStyle( "backgroundColor", getRandomColor() );

labelField.setStyle( "color", getRandomColor() );

}

private function getRandomColor():uint

{

return randomValue() << 16 ^ randomValue() << 8 ^ randomValue();

}

private function randomValue():Number

{

return (Math.random() * 512) - 255;

}

]

]>

</mx:Script>

<mx:VBox id=”holder”

width=”200″ height=”200″>

<mx:Label id=”labelField” text=”Hello Flex!” styleName=”header” />

<mx:Button label=”jumble colors” click=”jumbleColors();” />

</mx:VBox>

</mx:Application>

With Regards

Hemakumar.S

Guys,

I want to share you this button changing property

Source Code

<?xml version=”1.0″ encoding=”utf-8″?>

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

xmlns:local=”*” xmlns:SimpleComponents=”SimpleComponents.*”

creationComplete=”init()”>

<local:RedButton/>

<SimpleComponents:MyLabel fontSize=”24″ id=”display”

textValue=”Hello, World!” click=”timer.stop()” />

<mx:Script>

<![CDATA[

private var timer:Timer = new Timer(1000);

private function init():void {

timer.addEventListener(TimerEvent.TIMER, display.onClick);

timer.start();

}

]]>

</mx:Script>

</mx:Application>

MyLabel.as

package SimpleComponents {

import mx.controls.Label;

import flash.events.Event;

public class MyLabel extends Label {

public var labelStates:Array = ["TeamNeptune", "Chipkidz", "9th Team"];

private var state:uint = 0;

public function set textValue(newValue:String):void {

text = newValue;

}

public function get textValue():String {

return text;

}

public function onClick(event:Event = null):void {

text = labelStates[state++ % labelStates.length];

}

}

}

RedButton.mxml

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Button xmlns:mx=”http://www.adobe.com/2006/mxml”

fillColors=”['red', 'blue']” toolTip=”A Red Button” click=”clicked()”>

<mx:Script>

<![CDATA[

private function clicked():void {

label = "Quite Red";

setStyle("fillColors", ['red', 'red']);

}

]]>

</mx:Script>

</mx:Button>

With Regards

Hemakumar.S

Folks,

Iam recollecting my knowledge on basic effects

Source Code

<?xml version=”1.0″ encoding=”utf-8″?>

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

layout=”vertical”>

<mx:Script>

<![CDATA[

import mx.effects.Blur;

private var blur:Blur;

private function applyBlur():void {

blur = new Blur(glowingTI);

blur.blurXFrom = 0;

blur.blurXTo = 20;//the amount of blur in pixels

blur.blurYFrom = 0;

blur.blurYTo = 20;//the amount of blur in pixels

blur.duration = 1000;

blur.play();

}

]]>

</mx:Script>

<!– the properties of the Glow effect set here are the color of the Glow

and the length of time that the Glow will be displayed –>

<mx:Glow id=”glowEffect” duration=”1000″ color=”#ff0f0f”

target=”{glowingTI}”/>

<mx:TextInput id=”glowingTI”/>

<mx:Button click=”applyBlur()” toggle=”true” id=”glowToggle”

label=”Play theBlurEffect”/>

<mx:Button click=”glowEffect.play()” label=”Play the Glow Effect”/>

</mx:Application>

With Regards

Hemakumar.S

 

Friends,

I learned this wonderful concept and happy to share with you all

Source Code

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application backgroundColor=”white”

xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

<mx:Script>

<![CDATA[

public function add():void

{
var amt:Number=0;

amt=(Number(text1.text)+Number(text2.text));

text4.text=String(amt-(amt*(Number(text3.text)/100)));

}

public function clear():void

{

text0.text=text1.text="";

text2.text="";

text3.text="";

text4.text="";

}

import mx.controls.Alert;

public function check():void

{

if(text01.text=='')

Alert.show('pls enter the customer number');

else if(text01.text=='666')

currentState='two';

}

]]>

</mx:Script>

<mx:Panel x=”10″ y=”57″ width=”449.5″ height=”435″

layout=”absolute” backgroundColor=”white” barColor=”green”

borderColor=”green” id=”panel2″>

<mx:Button label=”TOTAL” x=”58″ y=”315″ click=”{add()}”/>

<mx:Button label=”Clear” x=”353″ y=”353″ click=”{clear()}”

id=”button1″/>

<mx:Label x=”115″ y=”256″ text=”discount” fontWeight=”bold”

height=”19″ id=”label1″/>

<mx:Label x=”133″ y=”131″ text=”Price” width=”35″

fontWeight=”bold” height=”29″/>

<mx:Label x=”133″ y=”195″ text=”Tax” width=”42″

fontWeight=”bold” height=”17″/>

<mx:Label x=”156.75″ y=”10″ text=”NET BILL” width=”109″

fontSize=”20″ fontWeight=”bold” textDecoration=”underline”/>

<mx:Label x=”92.75″ y=”68″ text=”No of Iteam” width=”75.25″

fontWeight=”bold” height=”29″/>

<mx:Label x=”145″ y=”317″ text=”Rs,” fontWeight=”bold”

height=”19″/>

<mx:VBox x=”176″ y=”68″ height=”277″ width=”103″

backgroundAlpha=”0.0″>

<mx:TextInput id=”text0″ width=”80″ height=”29″

borderColor=”blue” borderStyle=”solid” borderThickness=”1″

cornerRadius=”5″ focusAlpha=”1″ focusThickness=”1″

fontSharpness=”50″ fontStyle=”normal” fontWeight=”bold”

fontAntiAliasType=”advanced”/>

<mx:VRule width=”0″ height=”19″/>

<mx:TextInput id=”text2″ width=”80″ height=”29″ borderColor=”blue”

borderStyle=”solid” borderThickness=”1″ cornerRadius=”5″

focusAlpha=”1″ focusThickness=”1″ fontSharpness=”50″

fontStyle=”normal” fontWeight=”bold” fontAntiAliasType=”advanced”/>

<mx:VRule width=”0″ height=”19″/>

<mx:TextInput id=”text1″ width=”80″ height=”29″ borderColor=”blue”

borderStyle=”solid” borderThickness=”1″ cornerRadius=”5″

focusAlpha=”1″ focusThickness=”1″ fontSharpness=”50″

fontStyle=”normal” fontWeight=”bold” fontAntiAliasType=”advanced”/>

<mx:VRule width=”0″ height=”19″/>

<mx:TextInput id=”text3″ width=”80″ height=”29″ borderColor=”blue”

borderStyle=”solid” borderThickness=”1″ cornerRadius=”5″

focusAlpha=”1″ focusThickness=”1″ fontSharpness=”50″

fontStyle=”normal” fontWeight=”bold” fontAntiAliasType=”advanced”/>

<mx:VRule width=”0″ height=”19″/>

<mx:TextInput id=”text4″ width=”80″ height=”29″ borderColor=”blue”

borderStyle=”solid” borderThickness=”1″ cornerRadius=”5″

focusAlpha=”1″ focusThickness=”1″ fontSharpness=”50″

fontStyle=”normal” fontWeight=”bold” fontAntiAliasType=”advanced”/>

</mx:VBox>

<mx:Button label=”Cutomer Details” x=”153.75″ y=”363″

click=”currentState=’one’;” width=”122″/>

</mx:Panel>

<mx:states>

<mx:State name=”one”>

<mx:AddChild relativeTo=”{panel1}” position=”lastChild”>

<mx:Button label=”GO” x=”337.25″ y=”87″ click=”check()”/>

</mx:AddChild>

<mx:SetProperty target=”{button1}” name=”x” value=”305″/>

<mx:SetProperty target=”{button1}” name=”y” value=”315″/>

<mx:AddChild relativeTo=”{panel2}” position=”lastChild”>

<mx:Button label=”TOTAL” x=”58″ y=”315″ click=”{add()}”/>

</mx:AddChild>

<mx:AddChild relativeTo=”{panel1}” position=”lastChild”>

<mx:Label x=”115.25″ y=”10″ text=”Customer Details” width=”203″

fontSize=”20″ fontWeight=”bold” textDecoration=”underline”/>

</mx:AddChild>

<mx:AddChild relativeTo=”{panel1}” position=”lastChild”>

<mx:Label x=”67″ y=”91″ text=”Cutomer no” width=”83″/>

</mx:AddChild>

<mx:AddChild relativeTo=”{panel1}” position=”lastChild”>

<mx:TextInput x=”158″ y=”87″ id=”text01″/>

</mx:AddChild>

<mx:AddChild relativeTo=”{label1}” position=”before”>

<mx:Button label=”add” x=”305″ y=”254″ click=”{clear()}”

id=”button0″/>

</mx:AddChild>

<mx:AddChild relativeTo=”{panel2}” position=”lastChild”>

<mx:Button label=”Clear” x=”305″ y=”315″ click=”{clear()}”

id=”button2″/>

</mx:AddChild>

</mx:State>

<mx:State name=”two”>

<mx:AddChild relativeTo=”{panel1}” position=”lastChild”>

<mx:Form x=”63.25″ y=”71″>

<mx:FormItem label=”Name” fontWeight=”bold”>

<mx:TextInput/>

</mx:FormItem>

<mx:FormItem label=”Address” fontWeight=”bold”>

<mx:TextInput/>

</mx:FormItem>

<mx:FormItem label=”Balance amount” fontWeight=”bold”>

<mx:TextInput/>

</mx:FormItem>

</mx:Form>

</mx:AddChild>

</mx:State>

</mx:states>

<mx:Panel x=”511.5″ y=”57″ width=”449.5″ height=”435″

layout=”absolute” backgroundColor=”white” barColor=”green”

borderColor=”green” id=”panel1″>

</mx:Panel>

</mx:Application>

Once you Done with the coding and looking for the output

you have to fill all the fields and click the total button.

Comment me for My Evolution as well as yours.

With Regards

Hemakumar.S

 

Definition

The ProgressBar control provides a visual representation of the

progress of a task over time.

There are two types of ProgressBar controls:

i.Determinate

ii.Indeterminate.

Determinate ProgressBar

* This control is a linear representation of the progress of a

task over time.

* You use a determinate ProgressBar when the scope of the

task is known.

Indeterminate ProgressBar

* This control represents time-based processes for which the scope is

not yet known.

* As soon as you can determine the scope, you should use a

determinate ProgressBar control.

Source Code

<?xml version=”1.0″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>

<![CDATA[

private var j:uint=10;

// Event handler function to set the value of the  ProgressBar control.

private function runit():void

{

if(j<=100)

{

bar.setProgress(j,100);

bar.label= "CurrentProgress" + " " + j + "%";

j+=10;

}

if(j>100)

{

j=0;

}

}

]]>

</mx:Script>

<mx:Panel title=”ProgressBar Control Example” height=”75%”

width=”75%” paddingTop=”10″ paddingBottom=”10″

paddingLeft=”10″  paddingRight=”10″>

<mx:Label width=”100%” color=”blue”

text=”Click the button to increment the progress bar.” />

<mx:Button id=”Speed” label=”Run” click=”runit();”/>

<mx:ProgressBar id=”bar” labelPlacement=”bottom”

themeColor=”#F20D7A”

minimum=”0″ visible=”true” maximum=”100″

label=”CurrentProgress 0%”direction=”right”

mode=”manual” width=”100%”/>

</mx:Panel>

</mx:Application>

With Regards

Hemakumar.S

Definition

The ApplicationControlBar container holds components,that provides

global navigation and application commands.An ApplicationControlBar

for an editor, could include Button controls for setting the font weight,

a ComboBox control to select the font,and a MenuBar control to

select the edit mode.

Typically, you place an ApplicationControlBar container at the top

of the application.

The ApplicationControlBar container can be in either of the

following modes:

Docked mode

The bar is always at the top of the application’s drawing area and

becomes part of the application chrome. To create a docked bar,

set the value of the dock property to true.

Normal mode

The bar can be placed anywhere in the application.

To create a normal bar, set the value of the dock property

to false (default).

Source Code

<?xml version=”1.0″?>

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

paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″

backgroundColor=”0xCCCCCC”>

<mx:ApplicationControlBar dock=”true” paddingTop=”0″

paddingBottom=”0″>

<mx:Label text=”Docked” color=”blue”/>

<mx:MenuBar id=”myMenuBar” labelField=”@label”>

<mx:XMLList>

<menuitem label=”MenuItem A” >

<menuitem label=”SubMenuItem A-1″ type=”check”/>

<menuitem label=”SubMenuItem A-2″ type=”check”/>

</menuitem>

<menuitem label=”MenuItem B”/>

<menuitem label=”MenuItem C”/>

<menuitem label=”MenuItem D” >

<menuitem label=”SubMenuItem D-1″ type=”radio” groupName=”one”/>

<menuitem label=”SubMenuItem D-2″ type=”radio” groupName=”one”/>

<menuitem label=”SubMenuItem D-3″ type=”radio” groupName=”one”/>

</menuitem>

</mx:XMLList>

</mx:MenuBar>

</mx:ApplicationControlBar>

<mx:Label text=”A docked ApplicationControlBar appears at the

top of the application window.”/>

<mx:Spacer height=”100%” />

<mx:ApplicationControlBar width=”80%”>

<mx:Label text=”Normal” color=”blue”/>

<mx:Label text=”Search:” />

<mx:TextInput width=”100%” maxWidth=”200″ />

<mx:Spacer width=”100%” />

<mx:Button label=”Go adobe.com” />

</mx:ApplicationControlBar>

<mx:Label text=”A normal ApplicationControlBar can appear anywhere in

the application.”/>

</mx:Application>

With Regards

Hemakumar.S