RadioButton

RadioButton

The RadioButton control is a single choice in a set of mutually exclusive choices. A RadioButton group is composed of two or more RadioButton controls with the same group name. Only one member of the group can be selected at any given time. Selecting an unselected group member deselects the currently selected RadioButton control in the group.

RadioButton user interaction

If a Radiobutton control is enabled, when the user moves the mouse pointer over an unselected RadioButton control, the button displays its rollover appearance. When the user clicks an unselected RadioButton control, the input focus moves to the control and the button displays its false pressed appearance. When the mouse button is released, the button displays the true state appearance. The previously selected RadioButton control in the group returns to its false state appearance.

coding:

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

<mx:Script>
<![CDATA[

import mx.controls.Alert;
import  mx.events.ItemClickEvent;

// Event handler function to display the selected button
// in an Alert control.
private function handleCard(event:ItemClickEvent):void {
if (event.currentTarget.selectedValue == "AmEx") {
Alert.show("You selected American Express")
}
else {
if (event.currentTarget.selectedValue == "MC") {
Alert.show("You selected MasterCard")
}
else {
Alert.show("You selected Visa")
}
}
}
]]>
</mx:Script>

<mx:Panel title=”RadioButtonGroup Control Example” height=”75%” width=”75%”
paddingTop=”10″ paddingLeft=”10″>

<mx:Label width=”100%” color=”blue”
text=”Select a type of credit card.”/>

<mx:RadioButtonGroup id=”cardtype” itemClick=”handleCard(event);”/>
<mx:RadioButton groupName=”cardtype” id=”americanExpress” value=”AmEx”
label=”American Express” width=”150″ />
<mx:RadioButton groupName=”cardtype” id=”masterCard” value=”MC”
label=”MasterCard” width=”150″ />
<mx:RadioButton groupName=”cardtype” id=”visa” value=”Visa”
label=”Visa” width=”150″ />

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

validators

validators:
The Validator class is the base class for all Flex validators. This class  implements the ability for a validator to make a field required, which means  that the user must enter a value in the field or the validation fails.

Coding:
<?xml version="1.0"?>
<!-- Simple example to demonstrate the Validator class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            // Import necessary classes.
            import mx.controls.Alert;
            import mx.events.ValidationResultEvent;

            // Event listener for the valid and invalid events.
            private function handleValid(eventObj:ValidationResultEvent):void {
                if(eventObj.type==ValidationResultEvent.VALID)    
                    // Enable Submit button.
                    submitButton.enabled = true;
                else
                    submitButton.enabled = false;
            }

            // Submit form is everything is valid. 
            private function submitForm():void {
                Alert.show("Form Submitted!");
            }

        ]]>
    </mx:Script>

    <!-- The Validator class defines the required property and the validator events
         used by all validator subclasses. -->
    <mx:Validator id="reqValid" required="true"
        source="{fname}" property="text" 
        valid="handleValid(event)" invalid="handleValid(event)"/>

    <mx:Panel title="Validator Example" width="100%" height="100%" 
            paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">

        <mx:Form>
            <mx:Text width="100%" color="blue"
                text="Enter a value in the Name field before you can submit. The E-mail field is optional."/>

            <mx:FormItem label="Name: " required="true">
                <mx:TextInput id="fname" width="100%"/>
            </mx:FormItem>

            <mx:FormItem label="E-mail address: " required="false">
                <mx:TextInput id="email" width="100%"/>
            </mx:FormItem>

            <mx:FormItem>
                <mx:Button id="submitButton" enabled="false" 
                    label="Submit" click="submitForm();"/>
            </mx:FormItem>
        </mx:Form>

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

Alert control

Alert control:

All Flex components can call the static show() method of the Alert class to open a pop-up modal dialog box with a message and an optional title, buttons, and icons. The following example shows an Alert control pop-up dialog box:

The Alert control is a pop-up dialog box that can contain a message, a title, buttons (any combination of OK, Cancel, Yes, and No) and an icon. The Alert control is modal, which means it will retain focus until the user closes it.

Import the mx.controls.Alert class into your application, and then call the static show() method in ActionScript to display an Alert control. You cannot create an Alert control in MXML.

The Alert control closes when you select a button in the control, or press the Escape key.

coding:

<?xml version=”1.0″?>

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

<mx:Script>
<![CDATA[

import mx.events.ItemClickEvent;

private function clickHandler(event:ItemClickEvent):void {
myTA.text="Selected button index: " + String(event.index) +
"\n" + "Selected button label: " + event.label;
}
]]>
</mx:Script>

<mx:Panel title=”ButtonBar Control” height=”75%” width=”75%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>

<mx:Label width=”100%” color=”blue”
text=”Select a button in the ButtonBar control.”/>

<mx:TextArea id=”myTA” width=”100%” height=”100%”/>

<mx:ButtonBar horizontalGap=”5″ itemClick=”clickHandler(event);”>
<mx:dataProvider>
<mx:Array>
<mx:String>Flash</mx:String>
<mx:String>Director</mx:String>
<mx:String>Dreamweaver</mx:String>
<mx:String>ColdFusion</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ButtonBar>
</mx:Panel>
</mx:Application>

PopUpButton

PopUp  Button control

The PopUpButton control consists of two horizontal buttons: a main button, and a smaller button called the pop-up button, which only has an icon. The main button is a Button control.

The pop-up button, when clicked, opens a second control called the pop-up control. Clicking anywhere outside the PopUpButton control, or in the pop-up control, closes the pop-up control

The PopUpButton control adds a flexible pop-up control interface to a Button control. One common use for the PopUpButton control is to have the pop-up button open a List control or a Menu control that changes the function and label of the main button, as the following example shows by using a Menu control:

Codings:

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

<mx:Script>
<![CDATA[

import mx.controls.*;
import mx.events.*;

private var myMenu:Menu;

private function initMenu():void {
myMenu = new Menu();
var dp:Object = [{label: "New Folder"}, {label: "Sent Items"}, {label: "Inbox"}];
myMenu.dataProvider = dp;
myMenu.selectedIndex = 0;
myMenu.addEventListener(“itemClick”, itemClickHandler);
popB.popUp = myMenu;
popB.label = “Put in: ” + myMenu.dataProvider[myMenu.selectedIndex].label;
}

private function itemClickHandler(event:MenuEvent):void {
var label:String = event.item.label;
popTypeB.text=String(“Moved to ” + label);
popB.label = “Put in: ” + label;
popB.close();
myMenu.selectedIndex = event.index;
}

]]>
</mx:Script>

<mx:Panel title=”PopUpButton Control Example” height=”75%” width=”75%”
paddingTop=”10″ paddingBottom=”10″ paddingRight=”10″ paddingLeft=”10″>

<mx:Label width=”100%” color=”blue”
text=”Button label contains the name of the last selected menu item.” />
<mx:PopUpButton id=”popB” label=”Edit” creationComplete=”initMenu();” width=”135″ />

<mx:Spacer height=”50″ />
<mx:TextInput id=”popTypeB” />

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

Blur Effect

Blur effect

The Blur effect lets you apply a blur visual effect to a component. A Blur effect softens the details of an image. You can produce blurs that range from a softly unfocused look to a Gaussian blur, a hazy appearance like viewing an image through semi-opaque glass.

The Blur effect uses the Flash BlurFilter class as part of its implementation. For more information, see flash.filters.BlurFilter.

If you apply a Blur effect to a component, you cannot apply a BlurFilter or a second Blur effect to the component.

coding:

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Simple example to demonstrate the Blur effect. –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Blur id=”blurImage” duration=”1000″
blurXFrom=”0.0″ blurXTo=”10.0″
blurYFrom=”0.0″ blurYTo=”10.0″/>
<mx:Blur id=”unblurImage” duration=”1000″
blurXFrom=”10.0″ blurXTo=”0.0″
blurYFrom=”10.0″ blurYTo=”0.0″/>

<mx:Panel title=”Blur Effect Example” width=”75%” height=”75%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>

<mx:Text width=”100%” color=”blue”
text=”Click and hold the mouse on the image to see blurImage effect. Release the mouse to see the unblurImage effect.”/>

<mx:Image id=”flex” source=”@Embed(source=’assets/Nokia_6630.png’)”
mouseDownEffect=”{blurImage}”
mouseUpEffect=”{unblurImage}”/>

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

printing using job class

printing using job class

You use the FlexPrintJob class to print one or more Flex objects, such as a Form or VBox container. For each object that you specify, Flex prints the object and all objects that it contains. The objects can be all or part of the displayed interface, or they can be components that format data specifically for printing. The FlexPrintJob class lets you scale the output to fit the page, and automatically uses multiple pages to print an object that does not fit on a single page.

You use the FlexPrintJob class to print a dynamically rendered document that you format specifically for printing. This capability is especially useful for rendering and printing such information as receipts, itineraries, and other displays that contain external dynamic content, such as database content and dynamic text.

Coding:

<?xml version=”1.0″?>

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

<mx:Script>
<![CDATA[
import mx.printing.*;

private function doPrint():void {

var printJob:FlexPrintJob = new FlexPrintJob();

if (printJob.start() != true) return;

printJob.addObject(myDataGrid, FlexPrintJobScaleType.NONE);

printJob.send();
}
]]>
</mx:Script>

<mx:VBox id=”myVBox”>
<mx:DataGrid id=”myDataGrid” width=”300″>
<mx:dataProvider>
<mx:Object Product=”Flash” Code=”1000″/>
<mx:Object Product=”Flex” Code=”2000″/>
<mx:Object Product=”ColdFusion” Code=”3000″/>
<mx:Object Product=”JRun” Code=”4000″/>
</mx:dataProvider>
</mx:DataGrid>
<mx:Button id=”myButton”
label=”Print”
click=”doPrint();”/>
</mx:VBox>
</mx:Application>

printing using flex classes

Printing Using flex classes:

The Flex mx.printing package contains classes that facilitate the creation of printing output from Flex applications:

FlexPrintJob A class that prints one or more objects. Automatically splits large objects for printing on multiple pages and scales the output to fit the page size.

PrintDataGrid A subclass of the DataGrid control with a default appearance that is customized for printing. The class includes properties and a method that provide additional sizing and printing features.

PrintAdvancedDataGrid A subclass of the AdvancedDataGrid control with a default appearance that is customized for printing. The class includes properties and a method that provide additional sizing and printing features.

PrintOLAPDataGrid A subclass of the OLAPDataGrid control with a default appearance that is customized for printing. The class includes properties and a method that provide additional sizing and printing features.

FlexPrintJobScaleType Defines constants used in the FlexPrintJob addObject() method.

Together, these classes give you control over how the user prints information from the application. For example, your application can print only a selected subset of the information on the screen, or it can print information that is not being displayed. Also, your application can reformat the information and optimize its layout and appearance for printing.

Codings:

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

<mx:Script>
<![CDATA[
import mx.printing.*;
private function doPrint():void {
var printJob:FlexPrintJob = new FlexPrintJob();
if (printJob.start() != true) return;
printJob.addObject(myDataGrid, FlexPrintJobScaleType.NONE);
printJob.send();
}
]]>
</mx:Script>
<mx:VBox id=”myVBox”>
<mx:DataGrid id=”myDataGrid” width=”300″>
<mx:dataProvider>
<mx:Object Product=”Flash” Code=”1000″/>
<mx:Object Product=”Flex” Code=”2000″/>
<mx:Object Product=”ColdFusion” Code=”3000″/>
<mx:Object Product=”JRun” Code=”4000″/>
</mx:dataProvider>
</mx:DataGrid>
<mx:Button id=”myButton”
label=”Print”
click=”doPrint();”/>
</mx:VBox>
</mx:Application>

Animation

Animation Property:

The AnimateProperty effect animates a property or style of a component. You specify the property name, start value, and end value of the property to animate. The effect sets the property to the start value, and then updates the property value over the duration of the effect until it reaches the end value.

For example, to change the width of a Button control, you can specify width as the property to animate, and starting and ending width values to the effect.

coding:

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

<mx:Sequence id=”animateScaleXUpDown” >
<mx:AnimateProperty property=”scaleX” fromValue=”1″ toValue=”1.5″ duration=”1000″ />
<mx:AnimateProperty property=”scaleX” fromValue=”1.5″ toValue=”1″ duration=”1000″ />
</mx:Sequence>
<mx:Image id=”flex” source=”@Embed(source=’assets/rose.jpg’)”
mouseDownEffect=”{animateScaleXUpDown}”/>
</mx:Application>

Image control

Image control:

Adobe Flex supports several image formats, including GIF, JPEG, PNG, SVG, and SWF files. You can import these images into your applications by using the image control.

Flex supports importing GIF, JPEG, PNG, and SWF files at run time, and embedding GIF, JPEG, PNG, SVG, and SWF at compile time. The method you choose depends on the file types of your images and your application parameters.

Embedded images load immediately, because they are already part of the Flex SWF file. However, they add to the size of your application and slow down the application initialization process. Embedded images also require you to recompile your applications whenever your image files change. For an overview of resource embedding, see embeding assets

The alternative to embedding a resource is to load the resource at run time. You can load a resource from the local file system in which the SWF file runs, or you can access a remote resource, typically though an HTTP request over a network. These images are independent of your Flex application, so you can change them without causing a recompile operation as long as the names of the modified images remain the same. The referenced images add no additional overhead to an application’s initial loading time. However, you might experience a delay when you use the images and load them into Adobe Flash Player or AIR.

A SWF file can access one type of external resource only, either local or over a network; it cannot access both types. You determine the type of access allowed by the SWF file by using the use-network flag when you compile your application. When use-network flag is set to false, you can access resources in the local filesystem, but not over the network. The default value is true

, which allows you to access resources over the network, but not in the local filesystem.

Codings:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Panel id=”myPanel” title=”Image Control Example”
height=”1127″ width=”75%” horizontalAlign=”center”
paddingTop=”10″ paddingLeft=”10″>

<mx:Label color=”blue” text=”Image embedded in the application.”/>
<mx:Image source=”@Embed(‘assets/image.jpg’)” height=”517″/>
</mx:Panel>
</mx:Application>

Button control

Button control:

The Button control is a commonly used rectangular button. Button controls look like they can be pressed, and have a text label, an icon, or both on their face. You can optionally specify graphic skins for each of several Button states.

You can create a normal Button control or a toggle Button control. A normal Button control stays in its pressed state for as long as the mouse button is down after you select it. A toggle Button controls stays in the pressed state until you select it a second time.

Buttons typically use event listeners to perform an action when the user selects the control. When a user clicks the mouse on a Button control, and the Button control is enabled, it dispatches a click event and a buttonDown event. A button always dispatches events such as the mouseMove, mouseOver, mouseOut, rollOver, rollOut, mouseDown, and mouseUpevents whether enabled or disabled.

coding:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
import flash.events.Event;
private function printMessage(event:Event):void  {
message.text += event.target.label + " pressed" + "\n";
}
]]>
</mx:Script>

<mx:Panel title=”Button Control Example”
height=”75%” width=”75%” layout=”horizontal”
paddingTop=”10″ paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″>

<mx:VBox>
<mx:Label width=”100%” color=”blue”
text=”Select a Button control.”/>
<mx:Button id=”iconButton” icon=”@Embed(‘assets/icon.jpg’)” label=”Button with Icon”
labelPlacement=”right” color=”#993300″ click=”printMessage(event);”/>
<mx:Button label=”Customized Button” color=”#993300″ toggle=”true” selected=”true”
textAlign=”left” fontStyle=”italic” fontSize=”13″ width=”{iconButton.width}”
click=”printMessage(event);”/>
<mx:Button label=”Default Button” click=”printMessage(event);”/>
</mx:VBox>
<mx:TextArea id=”message” text=”" editable=”false” height=”100%” width=”100%”
color=”#0000FF”/>
</mx:Panel>
</mx:Application>