Kasiruby's Blog

LinkButton using ActionScript

Introduction:

From this simple Flex Example, one can easily understand about ActionScript. Try this in your own way and learn more.

Source Code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”absolute” creationComplete=”createbutton();”>
<mx:Script>
<![CDATA[

import mx.controls.LinkButton;
import mx.controls.Image;

var link:LinkButton;
var image1:Image;

public function createbutton():void{
link=new LinkButton;
link.label= “Pa.Vijay”;
link.width=100;
link.height=25;
link.x=50;
link.y=50;
this.addChild(link);
link.addEventListener(MouseEvent.CLICK,showimage);
}
public function showimage(event:MouseEvent):void{
image1=new Image;
image1.source=”../Assets/Pa.Vijay.jpg”;
image1.maintainAspectRatio=false;
image1.width=50;
image1.height=50;
image1.x=60;
image1.y=80;
this.addChild(image1);
}
]]>
</mx:Script>
</mx:Application>

Screenshots:

If you run the source code in Flex Builder, You will see this kind of screen.

If you click that linkbutton named Pa.Vijay, his image will be displayed.

Thanks & Regards,
Kasi Ruby.R

Basic AnimateProperty Effect

Definition:

It will come under the Package of mx.effects. It animates a property or style of a component. For this, we have to specify the property name, start value, and end value of the property to animate. For example, to change the width of a Button control, we have to specify width as the property to animate, and starting and ending width values to the effect.

Source Code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” backgroundAlpha=”0.5″ backgroundGradientColors=”[0x00ffff,0xff00ff]” alpha=”0.6″>
<mx:Sequence id=”animate”>
<mx:AnimateProperty property=”scaleX” fromValue=”1″ toValue=”5″ duration=”1000″ />
<mx:AnimateProperty property=”scaleX” fromValue=”5″ toValue=”1″ duration=”1000″ />
<mx:AnimateProperty property=”scaleY” fromValue=”1″ toValue=”5″ duration=”1000″ />
<mx:AnimateProperty property=”scaleY” fromValue=”5″ toValue=”1″ duration=”1000″ />
</mx:Sequence>
<mx:Button mouseDownEffect=”{animate}” width=”5%” x=”414.5″ y=”276″ cornerRadius=”10″ alpha=”0.88″ />
</mx:Application>

Thanks & Regards,
R.Kasi Ruby

Viewstack Navigator Container

Definition:

              It defines as a collection of child containers that are stacked on top of each other. It does not provide a user interface for selecting which child container is currently visible. We must use a Link bar,  Tabbar, Buttonbar or Togglebuttonbar control or build logic ourself in ActionScript to change the current child.

Source Code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
 <mx:TabBar dataProvider=”{viewstack1}” />
 <mx:ViewStack x=”242″ y=”142″ id=”viewstack1″ width=”200″ height=”200″>
  <mx:Canvas label=”View 1″ width=”100%” height=”100%” backgroundColor=”haloblue”>
  <mx:Text text=”dgghfd” />
  </mx:Canvas>
  <mx:Canvas label=”A” width=”100%” height=”100%” backgroundColor=”halogreen”>
  <mx:Text text=”dghyjd” />
  </mx:Canvas>
  <mx:Canvas label=”B” width=”100%” height=”100%” backgroundColor=”haloorange”>
  <mx:Text text=”dggmjj” />
  </mx:Canvas>  
 </mx:ViewStack>
 
</mx:Application>

Thanks & Regards,
R.Kasi Ruby

TabNavigator Container

Definition:

               It creates and manages a set of tabs. It creates one tab for each child and displays the associated child. Only one child will be visible at a time.  All tabs are visible, unless they do not fit onto a single screen. We can disable a child of a TabNavigator container by using the disable property.

Source Code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

 <mx:TabNavigator x=”105″ y=”111″ width=”200″ height=”200″>
  <mx:Canvas label=”AA” width=”100%” height=”100%” >
  <mx:ColorPicker  x=”88″ y=”53″/>
  </mx:Canvas>
  <mx:Canvas label=”A” width=”100%” height=”100%”>
  <mx:DateField  x=”54″ y=”50″/>
  </mx:Canvas>
  <mx:Canvas label=”B” width=”100%” height=”100%”>
  <mx:DateChooser  x=”10″ height=”157″/>
  </mx:Canvas>
  <mx:Canvas label=”C” width=”100%” height=”100%”>
  <mx:HSlider  x=”19″ y=”59″/>
  </mx:Canvas>
 </mx:TabNavigator>
  
</mx:Application>

Thanks & Regards,
R.Kasi Ruby

Accordion Navigator Container

Definition:

             Forms are a basic component in all the applications.  It is very difficult to navigate through the complex forms or multipage forms. If it is a multipage form, it doesn’t fit onto a single screen. In order to improve the look and navigation of a form, we are moving to Accordion navigator container. It contains a sequence of  child panels, but displays only one at a time.  It creates and manages navigator buttons (accordion headers). Each and every navigator button is associated with their corresponding child containers. It does not extend the ViewStack container. But, it is an implementation of ViewStack container, such as selectedIndex and selectedChild.

Source Code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”100%”>
 <mx:Accordion label=”Parent” x=”49″ y=”101″ width=”80%” height=”80%”>
  <mx:Canvas label=”Child1″ width=”50%” height=”50%” >
   <mx:Image source=”../Assets/nokia1.JPG” />
  </mx:Canvas>
  <mx:Canvas label=”Child2″ width=”50%” height=”50%”>
   <mx:Image source=”../Assets/6555.jpg” />
  </mx:Canvas>
  <mx:Canvas label=”Child3″ width=”50%” height=”50%”>
   <mx:Image source=”../Assets/6500s.jpg” />   
  </mx:Canvas> 
  <mx:Canvas label=”Child4″ width=”50%” height=”50%” x=”10″ y=”76″>
   <mx:Image source=”../Assets/E51.jpg” />
  </mx:Canvas>
 </mx:Accordion>
</mx:Application>

Thanks & Regards,
R.Kasi Ruby

DividedBox Container

Definition:

             It measures & lays out its children horizontally or vertically in exactly the same way as a Box container. But, it inserts a draggable dividers in the gaps between the children. We can drag any divider to resize the children on each side. The direction property determines whether it is horizontal or vertical layout.

Source Code:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

    <mx:Panel title=”DividedBox Container ” width=”530″ height=”307″  paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″                        paddingBottom=”10″ x=”213.5″ y=”143″ borderColor=”#A56060″ fontSize=”12″>

        <mx:Text width=”100%” color=”#834355″ text=”Drag the divider side to side to resize the children.” fontWeight=”bold” fontSize=”11″/>

        <mx:HDividedBox width=”100%” height=”100%”>
           <mx:VDividedBox width=”100%” height=”100%” >
             <mx:Canvas label=”Canvas 0″ width=”100%” height=”100%” backgroundColor=”#868717″ >
                 <mx:Label text=”Add components here” fontWeight=”bold” color=”#E4BEE0″  fontSize=”12″  height=”22″/>
             </mx:Canvas>
             <mx:Canvas label=”Canvas 1″ width=”100%” height=”100%” backgroundColor=”#868717″ >
                 <mx:Label text=”Add components here” fontWeight=”bold” color=”#E4BEE0″ fontSize=”12″/>
            </mx:Canvas>
           </mx:VDividedBox>

            <mx:Canvas label=”Canvas 2″ width=”100%”  height=”100%” backgroundColor=”#2C6198″>
                <mx:Label text=”Add components here” fontWeight=”bold” color=”#CDDC28″ fontSize=”12″/>
            </mx:Canvas>

        </mx:HDividedBox>

    </mx:Panel>
</mx:Application>

Thanks & Regards,
R.Kasi Ruby

Zipcode Validator

Definition:

            This class validates that a string has the correct length and format for a five digit Zip code, a five digit + four digit united states Zip code, or canadian postal code.

Source Code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

    <mx:Script>
        import mx.controls.Alert;
    </mx:Script>

    <mx:ZipCodeValidator source=”{zip}” property=”text”
        trigger=”{myButton}” triggerEvent=”click” 
        valid=”Alert.show(‘Validation Succeeded!’);”/>

    <mx:Panel title=”ZipcodeValidator” width=”610″ height=”158″
        paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″ x=”174.5″ y=”254″
        borderColor=”#703E3E” color=”#115A27″ fontSize=”12″>

        <mx:Form>
            <mx:FormItem label=”Enter a 5 or 9 digit U.S. Zip code: “>
                <mx:TextInput id=”zip” width=”100%”/>
            </mx:FormItem>

            <mx:FormItem >
                <mx:Button id=”myButton” label=”Validate” />
            </mx:FormItem>
        </mx:Form>
    </mx:Panel>
</mx:Application>

Thanks & Regards,
R.Kasi Ruby

Date Validator

Definition:

            It validates that a string, Date or object contains a proper date & matches a specified format. We can use either a single digit or two digits for month, day & year. By default, the month is between 1 & 12. The day is between 1 & 31. The year is a number.

Source Code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

    <mx:Script>
        import mx.controls.Alert;
    </mx:Script>

    <mx:Model id=”CheckModel”>
        <dateInfo>
            <DOB>{dob.text}</DOB>
        </dateInfo>
    </mx:Model>

    <mx:DateValidator source=”{dob}” property=”text” allowedFormatChars=”/”
        trigger=”{myButton}” triggerEvent=”click”
        valid=”Alert.show(‘Validation Succeeded!’);”/>

    <mx:Panel title=”DateValidator” width=”605″ height=”157″
        paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″ x=”177″ y=”207″ borderColor=”#AB5959″ color=”#9D441C” fontSize=”12″>

        <mx:Form>
            <mx:FormItem label=”Enter date of birth (mm/dd/yyyy): “>
                <mx:TextInput id=”dob” width=”100%”/>
            </mx:FormItem>

            <mx:FormItem >
                <mx:Button id=”myButton” label=”Validate” />
            </mx:FormItem>
        </mx:Form>

    </mx:Panel>
</mx:Application>

Thanks & Regards,
R.Kasi Ruby