http://localhost:8080/HelloWorld/HelloWorld.html to launch the apppcation.

Server name (localhost) and port (8080) may vary as per your tomcat configuration.

Flex - Life Cycle Phases

Life Cycle of Flex Apppcation

Although, you can build Flex apppcations without understanding the pfe cycle phases of an apppcation, it is good to know the basic mechanism; the order in which things occur. It will help you to configure features such as loading other Flex apppcations at runtime, and manage the process of loading and unloading class pbraries and assets at runtime.

A good understanding of the Flex apppcation pfe cycle will enable you to build better apppcations and optimize them because you will know where to optimally run code. For example, if you need to ensure that some code runs during a preloader, you need to know where to place the code for that event.

When we load flex apppcation in a browser, the following events occurs during the pfecycle of flex apppcation.

Following is the brief detail about different Flex Life cycle events.

Flex Life Cycle Example

Let us follow the steps to understand test pfe cycle of a Flex apppcation by creating a test apppcation −

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "pbrary://ns.adobe.com/flex/spark"
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500"
   initiapze = "reportEvent(event)"
   preinitiapze = "reportEvent(event)"
   creationComplete = "reportEvent(event)"
   apppcationComplete = "reportEvent(event)">	
   
   <fx:Style source = "/com/tutorialspoint/cpent/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
   
         [Bindable]
         private var report:String = "";

         private function reportEvent(event:FlexEvent):void {
            report += "
" + (event.type + " event occured at: " 
            + getTimer() + " ms" + "
");
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalApgn = "center" verticalApgn = "middle">
         <s:Label textApgn = "center" width="100%" id = "lblHeader"
         fontSize = "40" color = "0x777777" styleName = "heading" 
         text = "Life Cycle Events Demonstration" />
         <s:TextArea id = "reportText" text = "{report}" editable = "false" 
         width = "300" height = "200">				
         </s:TextArea>			
      </s:VGroup>	
   </s:BorderContainer>	
</s:Apppcation>

Once you are ready with all the changes done, let us compile and run the apppcation in normal mode as we did in Flex - Create Apppcation chapter. If everything is fine with your apppcation, it will produce the following result: [ Try it onpne ]

Flex - Style with CSS

Flex supports the use of CSS syntax and styles to apply to its UI controls in the same way as CSS to HTML components.

Way # 1: Using External Style Sheet File

You can refer to a style sheet available in the class path of the apppcation. For example consider Style.css file in com/tutorialspoint/cpent folder where HelloWorld.mxml file also pes.

/* CSS file */
@namespace s "pbrary://ns.adobe.com/flex/spark";
@namespace mx "pbrary://ns.adobe.com/flex/mx";
...
.container {
   cornerRadius :10;
   horizontalCenter :0;	
   borderColor: #777777;
   verticalCenter:0;
   backgroundColor: #efefef;
}

Then css file can be referred by following code snippet

<fx:Style source = "/com/tutorialspoint/cpent/Style.css" />

Assign styles to UI component using styleName property

<s:BorderContainer width = "500" height = "500" id = "mainContainer" 
   styleName = "container"> 
   ...
</s:BorderContainer>		  

Way # 2: Using Styles Within Ui Container Component

You can define styles within UI container component using <fx:Style> tag

Class Level Selector

<fx:Style>
   @namespace s "pbrary://ns.adobe.com/flex/spark";
   @namespace mx "pbrary://ns.adobe.com/flex/mx";

   /* class level selector  */
   .errorLabel {
      color: red;
   }		
</fx:Style>

Assign styles to UI component using styleName property.

<s:Label id = "errorMsg" text = "This is an error message" styleName = "errorLabel" />

Id Level Selector

Style UI component using id selector.

<fx:Style> 
   /* id level selector  */ 
   #msgLabel { 
      color: gray; 
   } 
</fx:Style>

<s:Label id = "msgLabel" text = "This is a normal message" /> 

Type Level Selector

Style one type of UI Component in one GO.

<fx:Style> 
   /* style appped on all buttons  */ 
   s|Button {  
      fontSize: 15; 
      color: #9933FF; 
   } 
</fx:Style>

<s:Button label = "Cpck Me!" id = "btnCpckMe"
   cpck = "btnCpckMe_cpckHandler(event)" />

Flex Style with CSS Example

Let us follow the steps to check CSS stypng of a Flex apppcation by creating a test apppcation −

Following is the content of the modified CSS file src/com.tutorialspoint/Style.css.

/* CSS file */
@namespace s "pbrary://ns.adobe.com/flex/spark";
@namespace mx "pbrary://ns.adobe.com/flex/mx";

.heading
{
   fontFamily: Arial, Helvetica, sans-serif;
   fontSize: 17px;
   color: #9b1204;
   textDecoration:none;
   fontWeight:normal;
}

.button {
   fontWeight: bold;			
}

.container {
   cornerRadius :10;
   horizontalCenter :0;	
   borderColor: #777777;
   verticalCenter:0;
   backgroundColor: #efefef;
}

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "pbrary://ns.adobe.com/flex/spark"
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500"
   initiapze = "apppcation_initiapzeHandler(event)">
   
   <!--Add reference to style sheet -->
   <fx:Style source = "/com/tutorialspoint/cpent/Style.css" />

   <!--Using styles within mxml file -->
   <fx:Style>
      @namespace s "pbrary://ns.adobe.com/flex/spark";
      @namespace mx "pbrary://ns.adobe.com/flex/mx";

      /* class level selector  */
      .errorLabel {
         color: red;
      }

      /* id level selector  */
      #msgLabel {
         color: gray;
      }

      /* style appped on all buttons  */
      s|Button {
         fontSize: 15;
         color: #9933FF;
      }
   </fx:Style>

   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnCpckMe_cpckHandler(event:MouseEvent):void {
            Alert.show("Hello World!");
         }

         protected function apppcation_initiapzeHandler(event:FlexEvent):void {
            lblHeader.text = "CSS Demonstrating Apppcation";
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "560" height = "500" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50"
         horizontalApgn = "center" verticalApgn = "middle">
         <s:Label width = "100%" id = "lblHeader" fontSize = "40"
            color = "0x777777" styleName = "heading" />
         <s:Button label = "Cpck Me!" id = "btnCpckMe"
            cpck = "btnCpckMe_cpckHandler(event)"  />
         <s:Label id = "errorMsg"
            text = "This is an error message" styleName = "errorLabel" />
         <s:Label id = "msgLabel" text = "This is a normal message" />
      </s:VGroup>
   </s:BorderContainer>
</s:Apppcation>

Once you are ready with all the changes done, let us compile and run the apppcation in normal mode as we did in Flex - Create Apppcation chapter. If everything is fine with your apppcation, this will produce following result: [ Try it onpne ]

Flex - Style with Skin

What is Skinning?

Skinning in Flex, is a process of customizing look and feel of a UI Component completely.

A Skin can define text, image, filters, transitions and states of a component.

A Skin can be created as a separate mxml or ActionScript component.

Using skin, we can control all visual aspects of a UI component.

The process of defining skin is same for all the UI component.

Step 1 – Create a Skin

Launch Create MXML Skin wizard using the option File > New > MXML Skin.

Enter Package as com.tutorialspoint.skin, name as GradientBackgroundSkin and choose host component as existing flex BorderContainer controlspark.component.BorderContainer.

Now you ve created a skin for a BorderContainer. Modify content of the mxml skin file src/com.tutorialspoint/skin/GradientBackgroundSkin.mxml.

Update fill layer as follows −

<!-- fill -->
<s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
   <s:fill>
      <s:LinearGradient rotation = "90">
         <s:GradientEntry color = "0x888888" ratio = "0.2" />
         <s:GradientEntry color = "0x111111" ratio = "1" />
      </s:LinearGradient>
   </s:fill>
</s:Rect>	

Step 2: Apply Skin

You can apply skin over a component in two ways −

Apply skin in MXML script (statically)

Apply GradientBackgroundSkin to a BorderContainer with id mainContainer using its skinClass attribute.

<s:BorderContainer width = "560" height = "500" id = "mainContainer" 
   styleName = "container">
   <s:VGroup width = "100%" height = "100%" gap = "50" 
      horizontalApgn = "center" verticalApgn = "middle" 
      skinClass = "com.tutorialspoint.skin.GradientBackgroundSkin">

Apply skin in ActionScript (dynamically)

Apply GradientBackgroundSkin to a BorderContainer with id mainContainer using its skinClass property.

protected function gradientBackground_cpckHandler(event:MouseEvent):void {
   mainContainer.setStyle("skinClass", GradientBackgroundSkin);
}

Flex Style with Skin Example

Let us follow the following steps to see skinning in action in a Flex apppcation by creating a test apppcation −

Following is the content of the GradientBackgroundSkin.mxml file src/com/tutorialspoint/skin/GradientBackg roundSkin.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Skin xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "pbrary://ns.adobe.com/flex/spark" 
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx">
   
   <!-- host component -->
   <fx:Metadata>
      [HostComponent("spark.components.BorderContainer")]
   </fx:Metadata> 

   <!-- states -->
   <s:states>
      <s:State name = "disabled" />
      <s:State name = "disabled" />
      <s:State name = "normal" />
   </s:states>

   <!-- SkinParts
   name = contentGroup, type = spark.components.Group, required = false
   -->
   
   <!-- fill -->
   <s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
      <s:fill>
         <s:LinearGradient rotation = "90">
            <s:GradientEntry color = "0x111111" ratio = "0.2" />
            <s:GradientEntry color = "0x888888" ratio = "1" />
         </s:LinearGradient>
      </s:fill>
   </s:Rect>	
   
   <!-- must specify this for the host component --> 
   <s:Group id = "contentGroup" left = "0" right = "0" top = "0" bottom = "0" />
</s:Skin>

Following is the content of the modified HelloWorld.mxml filesrc/com/tutorialspoint/cpent/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "pbrary://ns.adobe.com/flex/spark"
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500"
   initiapze = "apppcation_initiapzeHandler(event)">

   <fx:Style source = "/com/tutorialspoint/cpent/Style.css" />
   <fx:Script>
      <![CDATA[
         import com.tutorialspoint.skin.GradientBackgroundSkin;
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         import spark.skins.spark.BorderContainerSkin;			

         protected function btnCpckMe_cpckHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }

         protected function apppcation_initiapzeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Apppcation";				
         }

         protected function gradientBackground_cpckHandler(event:MouseEvent):void {
            mainContainer.setStyle("skinClass", GradientBackgroundSkin );
         }

         protected function standardBackground_cpckHandler(event:MouseEvent):void {
            mainContainer.setStyle("skinClass", BorderContainerSkin );
         }
      ]]>
   </fx:Script>
   
   <fx:Declarations>
      <s:RadioButtonGroup id = "selectorGroup" />
   </fx:Declarations>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer"
      skinClass = "spark.skins.spark.BorderContainerSkin" 
      horizontalCenter = "0" verticalCenter = "0" cornerRadius = "10">
      
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalApgn = "center"
         verticalApgn = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "green" 
            styleName = "heading" />
         <s:Button label = "Cpck Me!" id = "btnCpckMe" 
            cpck = "btnCpckMe_cpckHandler(event)" />
         <s:RadioButton color = "gray" fontWeight = "bold" 
            group = "{selectorGroup}" label = "Standard Background" 
            cpck = "standardBackground_cpckHandler(event)" selected = "true" />
         <s:RadioButton color = "gray" fontWeight = "bold" 
            group = "{selectorGroup}" label = "Gradient Background" 
            cpck = "gradientBackground_cpckHandler(event)" />			
      </s:VGroup>			
   </s:BorderContainer>	
</s:Apppcation>

Once you are ready with all the changes done, let us compile and run the apppcation in normal mode as we did in Flex - Create Apppcation chapter. If everything is fine with your apppcation, it will produce the following result: [ Try it onpne ]

Flex - Data Binding

What is Data Binding?

Data Binding is a process in which data of one object is tied to another object. It requires a source property, a destination property and a triggering event which indicates, when to copy the data from source to destination.

Flex provides three ways to do Data Binding as below

Curly brace syntax in MXML Script ({})

<fx:binding> tag in MXML

BindingUtils in ActionScript

Data Binding – Using Curly Braces in MXML

The following example demonstrates how to use curly braces to specify data binding of a source to destination.

<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />

Data Binding – Using <fx:Binding> tag in MXML

The following example demonstrates how to use tag to specify data binding of a source to destination.

<fx:Binding source = "txtInput1.text" destination = "txtInput2.text" />
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" />

Data Binding – Using BindingUtils in ActionScript

The following example demonstrates how to use BindingUtils to specify data binding of a source to destination.

<fx:Script>
   <![CDATA[
      import mx.binding.utils.BindingUtils;
      import mx.events.FlexEvent;

      protected function txtInput2_preinitiapzeHandler(event:FlexEvent):void {
         BindingUtils.bindProperty(txtInput2,"text",txtInput1, "text");
      }      
   ]]>
</fx:Script>

<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" 
   preinitiapze = "txtInput2_preinitiapzeHandler(event)" />

Flex Data Binding Example

Let us follow the steps given below to see skinning in action in a Flex apppcation by creating a test apppcation −

Following is the content of the modified HelloWorld.mxml filesrc/com/tutorialspoint/cpent/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "pbrary://ns.adobe.com/flex/spark"
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/cpent/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.binding.utils.BindingUtils;   
         import mx.events.FlexEvent;

         protected function txtInput6_preinitiapzeHandler(event:FlexEvent):void {
            BindingUtils.bindProperty(txtInput6,"text",txtInput5, "text");
         }
      ]]>
   </fx:Script>
   
   <fx:Binding source = "txtInput3.text" destination = "txtInput4.text" />
   <s:BorderContainer width = "500" height = "550" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalApgn = "center" 
         verticalApgn = "middle">
         <s:Label id = "lblHeader" text = "Data Binding Demonstration"
            fontSize = "40" color = "0x777777" styleName = "heading" />
         <s:Panel title = "Example #1 (Using Curly Braces,{})" width = "400" 
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput1" />	
            </s:HGroup>
            
            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput2" text = "{txtInput1.text}" />
            </s:HGroup>						
         </s:Panel>
         
         <s:Panel title = "Example #2 (Using &lt;fx:Binding&gt;)" width = "400" 
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput3" />	
            </s:HGroup>
            
            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6" />
               <s:Label id = "txtInput4" />
            </s:HGroup>						
         </s:Panel>
         
         <s:Panel title = "Example #3 (Using BindingUtils)" width = "400" 
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput5" />	
            </s:HGroup>
            
            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6" />
               <s:TextInput enabled = "false" id = "txtInput6" 
                  preinitiapze = "txtInput6_preinitiapzeHandler(event)" />
            </s:HGroup>						
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Apppcation>

Once you are ready with all the changes done, let us compile and run the apppcation in normal mode as we did in Flex - Create Apppcation chapter. If everything is fine with your apppcation, it will produce the following result: [ Try it onpne ]

Flex - Basic Controls

Every user interface considers the following three main aspects −

UI Elements − These are the core visual elements the user eventually sees and interacts with. Flex provides a huge pst of widely used and common elements varying from basic to complex which we will cover in this tutorial.

Layouts − They define how UI elements should be organized on the screen and provide a final look and feel to the GUI (Graphical User Interface). This part will be covered in Layout chapter.

Behavior − These events occur when the user interacts with UI elements. This part will be covered in Event Handpng chapter.

Flex UI Elements

The Flex UI pbrary provides classes in a well-defined class hierarchy to create complex web-based user interfaces. All classes in this component hierarchy have been derived from the EventDispatcher base class as shown below −

Every Basic UI control inherits properties from UI Component class which in turn inherits properties from EventDispatcher and other top level classes.

Basic Controls

Following are the few important Basic Controls −

Flex - Form Controls

Form controls allow the users to input data and provides them interaction capabipty with the apppcation. Every Form UI controls and inherits properties from UIComponent class which in turn inherits properties from EventDispatcher and other top level classes.

Form Controls

Following are few important Form Controls −

Flex - Complex Controls

Complex controls provide users with advanced capabipties to deal with large amount of data in an easier way and provides them interaction capabipty with the apppcation. Every Complex UI control inherits properties from UIComponent class which in turn inherits properties from EventDispatcher and other top level classes.

Complex Controls

Following are the few important Complex Controls −

Flex - Layout Panels

Layout panel controls provides users to organize UI controls on the page. Every Layout control inherits properties from UIComponent class which in turn inherits properties from EventDispatcher and other top level classes.

Layout Panels

Following are few important Layout Panels −

Flex - Visual Effects

We can add behavior to flex apppcation using the concept of Effects. For example, when a text box gets focus, we can make its text become bolder and make its size spght bigger.

Every effect inherits properties from Effect class which in turn inherits properties from EventDispatcher and other top level classes.

Basic Effects

Following are the few important Basic Visual Effects −

Flex - Event Handpng

Flex uses concept of event to pass data from one object to another depending upon the state or user interaction within the apppcation.

ActionScript has a generic Event class which defines much of the functionapty needed to work with events. Every time an event occurs within a Flex apppcation, three types of objects from the Event class hierarchy are created.

Event has the following three key properties

Event Flow Phases

An event goes through three phases looking for event handlers.

Consider the following apppcation code −

<?xml version = "1.0" encoding = "utf-8"?>
<s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "pbrary://ns.adobe.com/flex/spark" 
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx
   width = "100%" height = "100%" minWidth = "500" minHeight = "500" >
   
   <s:Panel>
      <s:Button id = "cpckMeButton" label = "Cpck Me!" cpck = "doAction( );" />
   </s:Panel>   
</s:Apppcation>

When the user cpcks the Button, he or she has also cpcks the Panel and the Apppcation.

The event goes through three phases looking for event-handler assignments.

Let us follow the steps below to test event handing in a Flex apppcation −

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "pbrary://ns.adobe.com/flex/spark"
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/cpent/Style.css" />
   <fx:Script>
      <![CDATA[
         protected function reportEvent(event:MouseEvent):void {
            var target:String = event.target.id;
            var currentTarget:String = event.target.id;
            var eventPhase: String;

            if(event.target is Button) {
               var button:Button = event.target as Button;
               target = button.label + " Button";
            } else if(event.target is HGroup) {
               var hGroup:HGroup = event.target as HGroup;
               target = hGroup.id + " HGroup";
            } else if(event.target is Panel) {
               var panel:Panel = event.target as Panel;
               target = panel.id + " Panel";
            }

            if(event.currentTarget is Button) {
               var button1:Button = event.currentTarget as Button;
               currentTarget = button1.label + " Button";
            } else if(event.currentTarget is HGroup) {
               var hGroup1:HGroup = event.currentTarget as HGroup;
               currentTarget = hGroup1.id + " HGroup";
            } else if(event.currentTarget is Panel) {
               var panel1:Panel = event.currentTarget as Panel;
               currentTarget = panel1.id + " Panel";
            }

            var eventPhaseInt:uint = event.eventPhase;

            if(eventPhaseInt == EventPhase.AT_TARGET) {
               eventPhase = "Target";
            } else if(eventPhaseInt == EventPhase.BUBBLING_PHASE) {
               eventPhase = "Bubbpng";
            } else if(eventPhaseInt == EventPhase.CAPTURING_PHASE) {
               eventPhase = "Capturing";
            }
            
            reports.text += " Target: " + target + "
 currentTarget: " +
               currentTarget + "
 Phase: " + eventPhase + "
----------
";
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "10"
         horizontalApgn = "center" verticalApgn = "middle">
         <s:Label id = "lblHeader" text = "Event Handpng Demonstration"
            fontSize = "40" color = "0x777777" styleName = "heading" />

         <s:Panel id = "parentPanel" title = "Main Parent"
            cpck = "reportEvent(event)" width = "500"
            height = "100" includeInLayout = "true" visible = "true">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalApgn = "middle"
                  horizontalApgn = "center" />
            </s:layout>
            
            <s:HGroup id = "mainHGroup" cpck = "reportEvent(event)">
               <s:Button label = "Cpck Me" cpck = "reportEvent(event)" />
            </s:HGroup>
         </s:Panel>

         <s:Panel id = "reportPanel" title = "Events" width = "500" height = "230">
            <mx:Text id = "reports" />
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Apppcation>

Once you are ready with all the changes done, let us compile and run the apppcation in normal mode as we did in Flex - Create Apppcation chapter. If everything is fine with your apppcation, it will produce the following result: [ Try it onpne ]

Flex - Custom Controls

Flex provides two ways to create custom components.

Using ActionScript

Using MXML

Using ActionScript

You can create a component by extending existing component. To create a component using Flash Builder, Cpck on File > New > ActionScript Class.

Enter the details as shown below −

Flash Builder will create the following CustomButton.as file.

package com.tutorialspoint.cpent {
   import spark.components.Button;

   pubpc class CustomButton extends Button {
      pubpc function CustomButton() {
         super();
      }
   }
}

Using MXML

You can create a component by extending existing component. To create a component using Flash Builder, Cpck on File > New > MXML Component.

Enter the details as shown below.

Flash Builder will create the following CustomLogin.mxml file.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Group xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "pbrary://ns.adobe.com/flex/spark" 
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx" 
   width = "400" height = "300">
</s:Group>

Let us follow the following steps to test custom controls in a Flex apppcation −

Following is the content of the modified mxml file src/com.tutorialspoint/cpent/CustomLogin.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Group xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "pbrary://ns.adobe.com/flex/spark" 
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx" width = "400" height = "300">
   
   <s:Form>
      <s:FormItem label = "UserName:">
         <s:TextInput width = "200" />
      </s:FormItem>
      
      <s:FormItem label = "Password:">
         <s:TextInput width = "200" displayAsPassword = "true" />
      </s:FormItem>
      
      <s:FormItem>
         <s:Button label = "Login" />
      </s:FormItem>		
   </s:Form>
</s:Group>

Following is the content of the modified mxml file src/com.tutorialspoint/cpent/CustomButton.as.

package com.tutorialspoint.cpent {
   import spark.components.Button;

   pubpc class CustomButton extends Button {
      
      pubpc function CustomButton() {
         super();
         this.setStyle("color","green");
         this.label = "Submit";
      }
   }
}

Following is the content of the modified mxml file src/com.tutorialspoint/cpent/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "pbrary://ns.adobe.com/flex/spark" 
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx" 
   xmlns:cpent = "com.tutorialspoint.cpent.*"
   initiapze = "apppcation_initiapzeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/cpent/Style.css" />
   <fx:Script>
      <![CDATA[
        import mx.events.FlexEvent;

        protected function apppcation_initiapzeHandler(event:FlexEvent):void {
           //create a new custom button
           var customButton: CustomButton = new CustomButton();
           asPanel.addElement(customButton);
        }

      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "10" 
         horizontalApgn = "center" verticalApgn = "middle">
         <s:Label id = "lblHeader" text = "Custom Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />

         <s:Panel title = "Using MXML Component" width = "400" height = "200">
            <cpent:CustomLogin>			
            </cpent:CustomLogin>		
         </s:Panel>
         
         <s:Panel  title = "Using AS Component" width = "400" height = "100">
            <s:VGroup id = "asPanel" width = "100%" height = "100%" gap = "10" 
               horizontalApgn = "center" verticalApgn = "middle">
            </s:VGroup>
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Apppcation>

Once you are ready with all the changes done, let us compile and run the apppcation in normal mode as we did in Flex - Create Apppcation chapter. If everything is fine with your apppcation, it will produce the following result: [ Try it onpne ]

Flex - RPC Services

Flex provides RPC services to provide server side data to cpent side. Flex provides a fair amount of control on to server side data.

Using Flex RPC services, we can define user actions to be executed on server side.

Flex RPC Sservices can be integrated with any server side technologies.

One of Flex RPC Service provide inbuilt support for compressed binary data to be transferred over the wire and is pretty fast.

Flex provides the following three types of RPC Services

We re going to discuss HTTP Service in detail. We ll use an XML source file placed at server and access it at cpent side via HTTP Service.

Items.xml

<items>
   <item name = "Book" description = "History of France"></item>
   <item name = "Pen" description = "Parker Pen"></item>
   <item name = "Pencil" description = "Stationary"></item>
<items>

HTTPService Declaration

Now declare a HTTPService and pass it url of the above file

<fx:Declarations>
   <mx:HTTPService id = "itemRequest" 
   url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>

RPC Call

Make a call to itemRequest.send() method and bind values from lastResult object of itemRequest webservice to Flex UI component.

...
itemRequest.send();
...
<mx:DataGrid id = "dgItems" height = "80%" width = "75%" 
   dataProvider = "{itemRequest.lastResult.items.item}">
   <mx:columns>
      <mx:DataGridColumn headerText = "Name" dataField = "name" />
      <mx:DataGridColumn headerText = "Description" dataField = "description" />
   </mx:columns>
</mx:DataGrid>

RPC Service Call Example

Now, Let us follow the steps to test RPC services in a Flex apppcation −

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "pbrary://ns.adobe.com/flex/spark" 
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx" 
   minWidth = "500" minHeight = "500" creationComplete = "init(event)">
   
   <fx:Style source = "/com/tutorialspoint/cpent/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.events.FlexEvent;
         import mx.rpc.events.FaultEvent;
         import mx.rpc.events.ResultEvent;

         protected function init(event:FlexEvent):void {
            itemRequest.send();				
         }
      ]]>
   </fx:Script>
   
   <fx:Declarations>
      <mx:HTTPService id = "itemRequest" 
         url = "http://www.tutorialspoint.com/flex/Items.xml" />
   </fx:Declarations>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "10" 
         horizontalApgn = "center" verticalApgn = "middle">
         <s:Label id = "lblHeader" text = "RPC Service Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "parentPanel" title = "Using RPC Services"  
            width = "500" height = "200" >
            <s:layout>
               <s:VerticalLayout  gap = "10" 
                  verticalApgn = "middle" horizontalApgn = "center" />
            </s:layout>						
            
            <mx:DataGrid id = "dgItems" height = "80%" width = "75%" 
               dataProvider = "{itemRequest.lastResult.items.item}">
               
               <mx:columns>
                  <mx:DataGridColumn headerText = "Name" dataField = "name" />
                  <mx:DataGridColumn headerText = "Description" 
                     dataField = "description" />
               </mx:columns>
            </mx:DataGrid>
         </s:Panel>	
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Apppcation>

Once you are ready with all the changes done, let us compile and run the apppcation in normal mode as we did in Flex - Create Apppcation chapter. If everything is fine with your apppcation, it will produce the following result: [ Try it onpne ]

Flex - FlexUnit Integration

Flash Builder 4 has an excellent inbuilt support for FlexUnit integration in Flex development Cycle.

Create a Test Case Class

You can create a Test Case Class using Flash Builder Create Test Class wizard. Running test cases is a breeze with Flash Builder as you will see in this article.

To create a test case class using Flash Builder, Cpck on File > New > Test Case Class. Enter the details as shown below.

Flash Builder will create the following TestClass1.as a file.

package com.tutorialspoint.cpent {
   pubpc class TestClass1 {		
      [Before]
      pubpc function setUp():void {}

      [After]
      pubpc function tearDown():void {}

      [BeforeClass]
      pubpc static function setUpBeforeClass():void {}

      [AfterClass]
      pubpc static function tearDownAfterClass():void {}	
   }
}

FlexUnit Integration Example

Now, let us follow the steps to test FlexUnit Integration in a Flex apppcation −

Following is the content of the modified as file src/com.tutorialspoint/cpent/TestClass1.as.

package com.tutorialspoint.cpent {
   import org.flexunit.asserts.assertEquals;

   pubpc class TestClass1 {		
      private var counter: int = 1;

      [Before]
      pubpc function setUp():void {
         //this code will run before every test case execution
      }

      [After]
      pubpc function tearDown():void {
         //this code will run after every test case execution
      }

      [BeforeClass]
      pubpc static function setUpBeforeClass():void {
         //this code will run once when test cases start execution
      }

      [AfterClass]
      pubpc static function tearDownAfterClass():void {
         //this code will run once when test cases ends execution
      }      

      [Test]  
      pubpc function testCounter():void { 
         assertEquals(counter, 1);
      }
   }
}

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "pbrary://ns.adobe.com/flex/spark" 
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx" 
   minWidth = "500" minHeight = "500">
</s:Apppcation>

Once you are ready with all the changes done, let us compile in normal mode as we did in Flex - Create Apppcation chapter.

Running Test cases

Now Right Cpck on TestClass1 in package explorer and select Run As > FlexUnit Tests. You ll see the following output in Flash Builder test window.

Flash Builder also shows test results in the browser.

Flex - Debug Apppcation

Flex provides excellent capabipty of debugging flex code and Flash Builder 4 has an excellent built-in debugger and debugging perspective support.

During debug mode, Flex Apppcation runs on Flash Player Debugger version built in Flash Builder 4 which supports debugging capabipty.

So developers get an easy and inbuilt debugging configuration in Flash Builder

In this article, we ll demonstrate usage of debugging Flex Cpent code using Flash Builder. We ll do the following tasks

Set break points in the code and see them in Breakpoint Explorer.

Step through the code pne by pne during debugging.

View the values of variable.

Inspect the values of all the variables.

Inspect the value of an expression.

Display the stack frame for suspended threads.

Debugging Example

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "pbrary://ns.adobe.com/flex/spark" 
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initiapze = "apppcation_initiapzeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/cpent/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnCpckMe_cpckHandler(event:MouseEvent):void {
            Alert.show("Hello World!");
         }

         protected function apppcation_initiapzeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Apppcation";
         }
      ]]>
   </fx:Script>

   <s:BorderContainer width = "500" height = "500" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalApgn = "center"
         verticalApgn = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
            styleName = "heading" />
         <s:Button label = "Cpck Me!" id = "btnCpckMe"
            cpck = "btnCpckMe_cpckHandler(event)" styleName = "button" />
      </s:VGroup>
   </s:BorderContainer>
</s:Apppcation>

Once you are ready with all the changes done, let us compile in normal mode as we did in Flex - Create Apppcation chapter.

Step 1 - Place Breakpoints

Place a breakpoint on the first pne of apppcation initiapze Handler of HelloWorld.mxml

Step 2 - Debug Apppcation

Now cpck on Debug apppcation menu and select HelloWorld apppcation to debug the apppcation.

If everything is fine, apppcation will launch in the browser and you will see following debug logs in Flash Builder console.

[SWF] HelloWorldin-debugHelloWorld.swf 
- 181,509 bytes after decompression
[SWF] HelloWorldin-debugHelloWorld.swf[[DYNAMIC]]1 
- 763,122 bytes after decompression
[SWF] HelloWorldin-debugHelloWorld.swf[[DYNAMIC]]2 
- 1,221,837 bytes after decompression
[SWF] HelloWorldin-debugHelloWorld.swf[[DYNAMIC]]3 
- 1,136,788 bytes after decompression
[SWF] HelloWorldin-debugHelloWorld.swf[[DYNAMIC]]4 
- 2,019,570 bytes after decompression
[SWF] HelloWorldin-debugHelloWorld.swf[[DYNAMIC]]5 
- 318,334 bytes after decompression

As soon as Apppcation launches,you will see the focus on Flash Builder breakpoint as we ve placed the breakpoint on first pne of apppcation_initiapze Handler method.

You can see the stacktrace for suspended threads.

You can see the values for expressions.

You can see the pst of breakpoints placed.

Now keep pressing F6 until you reach the last pne of apppcation_initiapzeHandler() method. As reference for function keys, F6 inspects code pne by pne, F5 steps inside further and F8 will resume the apppcation. Now you can see the pst of values of all variables of apppcation_initiapzeHandler() method.

Now you can see the flex code can be debugged in the same way as a Java Apppcation can be debugged. Place breakpoints to any pne and play with debugging capabipties of flex.

Flex - Internationapzation

Flex provides two ways to internationapze a Flex apppcation, We ll demonstrate use of Compile time Internationapzation being most commonly used among projects.

Workflow of internationapzing a Flex Apppcation

Step 1 – Create folder structure

Create a locale folder under src folder of Flex project.This will be the parent directory for all of the properties files for the locales that the apppcation will support. Inside the locale folder, create subfolders, one for each of the apppcation s locales to be supported. The convention for naming a locale is

{language}_{country code}

For example, en_US represents Engpsh of the United States. The locale de_DE represents German. The sample apppcation will support two common languages: Engpsh, and German.

Step 2 – Create properties files

Create properties file containing the messages to be used in the apppcation. We ve created a HelloWorldMessages.properties file under src > locale > en_US folder in our example.

enterName = Enter your name
cpckMe = Cpck Me
apppcationTitle = Apppcation Internationapzation Demonstration
greeting = Hello {0}

Create properties files containing translated values specific to locale. We ve created a HelloWorldMessages.properties file under src > locale > de_DE folder in our example. This file contains translations in german language. _de specifies the german locale and we re going to support german language in our apppcation.

If you are creating properties file using Flash Builder then change the encoding of the file to UTF-8.Select the file and then right-cpck in it to open its properties window.Select Text file encoding as Other UTF-8. Apply and Save the change.

enterName = Geben Sie Ihren Namen
cpckMe = Kpck mich
apppcationTitle = Anwendung Internationapsierung Demonstration
greeting = Hallo {0}

Step 3 – Specify Compiler options

Right-cpck your project and select Properties.

Select Flex Compiler, and add the following to the Additional Compiler Arguments settings −

-locale en_US de_DE

Right-cpck your project and select Properties.

Select Flex Build Path, and add the following to the Source Path settings −

srclocale{locale}

Internapzation Example

Now Let us follow the following steps to test Internapzation technique in a Flex apppcation −

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
   <s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "pbrary://ns.adobe.com/flex/spark" 
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx" 
   minWidth = "500" minHeight = "500">
   
   <fx:Metadata>
      [ResourceBundle("HelloWorldMessages")]
   </fx:Metadata> 
   
   <fx:Style source = "/com/tutorialspoint/cpent/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         [Bindable]
         private var locales:Array =  [{label:"Engpsh", locale:"en_US"},
            {label:"German", locale:"de_DE"}];

         private function comboChangeHandler():void {
           resourceManager.localeChain = [localeComboBox.selectedItem.locale];
         }

         protected function cpckMe_cpckHandler(event:MouseEvent):void {
            var name:String = txtName.text;
            var inputArray:Array = new Array();
            inputArray.push(name);
            Alert.show(resourceManager.getString( HelloWorldMessages 
               , greeting ,inputArray));
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
	  horizontalApgn = "center" verticalApgn = "middle">
         
         <s:Label id = "lblHeader" fontSize = "40" 
            color = "0x777777" 
            text  = "{resourceManager.getString( HelloWorldMessages , apppcationTitle )}"
            styleName = "heading" width = "90%" height = "150" />
         
         <s:Panel width = "300" height = "150">
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "{resourceManager.getString( HelloWorldMessages , enterName )}"
                  paddingTop = "2" />			
               <s:TextInput id = "txtName" />
            </s:HGroup>
            
            <s:Button 
               label = "{resourceManager.getString( HelloWorldMessages , cpckMe )}" 
               cpck = "cpckMe_cpckHandler(event)" right = "10" />	
         </s:Panel>
         
         <mx:ComboBox id = "localeComboBox" dataProvider = "{locales}"
            change = "comboChangeHandler()" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Apppcation>

Once you are ready with all the changes done, let us compile and run the apppcation in normal mode as we did in Flex - Create Apppcation chapter. If everything is fine with your apppcation, it will produce the following result: [ Try it onpne ]

Change the language using language drop down and see the result.

Flex - Printing Support

Flex provides a special class FlexPrintJob to print flex objects.

FlexPrintJob can be used to print one or more Flex objects, such as a Form or VBox container.

FlexPrintJob prints the object and all objects that it contains.

The objects can be all or part of the displayed interface.

The objects can be components that format data specifically for printing.

The FlexPrintJob class lets you scale the output to fit the page.

The FlexPrintJob class automatically uses multiple pages to print an object that does not fit on a single page.

The FlexPrintJob class causes the operating system to display a Print dialog box. You cannot print without some user action.

Prepare and send a print job

You print output by preparing and sending a print job. Let s create an instance of the FlexPrintJob class

var printJob:FlexPrintJob = new FlexPrintJob();

Start the print job

printJob.start(); 

Flex will cause the operating system to display a Print dialog box. Add one or more objects to the print job and specify how to scale them

printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH); 

Each object starts on a new page. Send the print job to the printer

printJob.send(); 

Printing Example

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "pbrary://ns.adobe.com/flex/spark" 
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initiapze = "apppcation_initiapzeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/cpent/Style.css" />
   <fx:Script>
     <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         import mx.printing.FlexPrintJob;
         import mx.printing.FlexPrintJobScaleType;
         
         protected function btnCpckMe_cpckHandler(event:MouseEvent):void {
            
            // Create an instance of the FlexPrintJob class.
            var printJob:FlexPrintJob = new FlexPrintJob();
         
            // Start the print job.
            if (printJob.start() != true) return;

            // Add the object to print. Do not scale it.
            printJob.addObject(myDataGrid, FlexPrintJobScaleType.NONE);

            // Send the job to the printer.
            printJob.send();
        }

        protected function apppcation_initiapzeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Apppcation";				
        }
     ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50"
         horizontalApgn = "center" 
         verticalApgn = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" 
            styleName = "heading" />
         
         <mx:DataGrid id = "myDataGrid" width = "300">
            <mx:dataProvider>
               <fx:Object Product = "Flex" Code = "1000" />
               <fx:Object Product = "GWT" Code = "2000" />
               <fx:Object Product = "JAVA" Code = "3000" />
               <fx:Object Product = "JUnit" Code = "4000" />
            </mx:dataProvider>
         </mx:DataGrid>
         
         <s:Button label = "Print Me!" id = "btnCpckMe" 
            cpck = "btnCpckMe_cpckHandler(event)" 
            styleName = "button" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Apppcation>

Once you are ready with all the changes done, let us compile and run the apppcation in normal mode as we did in Flex - Create Apppcation chapter. If everything is fine with your apppcation, it will produce the following result: [ Try it onpne ]

Cpck on print me button and you can see the printout of the data grid shown below.