Category: flex

Flex – Complex Controls ”; Previous Next Complex controls provide users with advanced capabilities to deal with large amount of data in an easier way and provides them interaction capability with the application. Every Complex UI control inherits properties from UIComponent class which in turn inherits properties from EventDispatcher and other top level classes. Sr.No Control & Description 1 Flex EventDispatcher Class The EventDispatcher class is the base class for all classes that can dispatch events. The EventDispatcher class allows any object on the display list to be an event target and as such, to use the methods of the IEventDispatcher interface. 2 Flex UIComponent The UIComponent class is the base class for all visual components, both interactive and noninteractive. Complex Controls Following are the few important Complex Controls − Sr.No Control & Description 1 DataGrid The DataGrid control displays a row of column headings above a scrollable grid. 2 AdvancedDataGrid The AdvancedDataGrid adds few additional functionality to the standard DataGrid control to add data visualization features. 3 Menu The Menu control creates a pop-up menu of individually selectable choices. 4 ProgressBar The ProgressBar control provides a visual representation of the progress of a task over time. 5 RichTextEditor The RichTextEditor control lets users enter and format text. 6 TileList The TileList control The TileList control displays a number of items laid out in tiles. 7 Tree The Tree control lets a user view hierarchical data arranged as an expandable tree. 8 VideoPlayer The VideoPlayer control is a skinnable video player that supports progressive download, multi-bitrate streaming, and streaming video. 9 Accordian An Accordian control has a collection of child MX containers or Spark NavigatorContent containers, but only one of them at a time is visible. 10 TabNavigator The TabNavigator control includes a TabBar container for navigating between its child containers. 11 ToggleButtonBar The ToggleButtonBar control defines a horizontal or vertical group of buttons that maintain their selected or deselected state. Print Page Previous Next Advertisements ”;

Flex – Visual Effects ”; Previous Next We can add behavior to flex application using the concept of Effects. For example, when a text box gets focus, we can make its text become bolder and make its size slight bigger. Every effect inherits properties from Effect class which in turn inherits properties from EventDispatcher and other top level classes. Sr.No Effect & Description 1 Flex Effect Class The Effect class is an abstract base class that defines the basic functionality of all Flex effects. This class defines the base factory class for all effects. Basic Effects Following are the few important Basic Visual Effects − Sr.No Effect & Description 1 Fade The Fade effect animates the alpha property of a component. 2 WipeLeft The WipeLeft class defines a wipe left effect. 3 WipeRight The WipeRight class defines a wipe right effect. 4 Move3D The Move3D class moves a target object in the x, y, and z dimensions. 5 Scale3D The Scale3D class scales a target object in three dimensions around the transform center. 6 Rotate3D The Rotate3D class rotate a target object in three dimensions around the x, y, or z axes. 7 Animate This Animate effect animates an arbitrary set of properties between values. Specify the properties and values to animate by setting the motionPaths property. Print Page Previous Next Advertisements ”;

Flex – Environment Setup ”; Previous Next This tutorial will guide you on how to prepare a development environment to start your work with Adobe Flex Framework. This tutorial will also teach you how to setup JDK and Adobe Flash Builder on your machine before you setup Flex Framework. System Requirement FLEX requires JDK 1.4 or higher, so the very first requirement is to have JDK installed in your machine. JDK 1.4 Or above. Memory No minimum requirement. Disk Space No minimum requirement. Operating System No minimum requirement. Follow the given steps to setup your environment to start with Flex application development. Step 1 – Verify Java installation on your machine Now open the console and execute the following java command. OS Task Command Windows Open Command Console c:> java -version Linux Open Command Terminal $ java -version Mac Open Terminal machine:~ joseph$ java -version Let”s verify the output for all the operating systems − OS Generated Output Windows java version “1.6.0_21” Java(TM) SE Runtime Environment (build 1.6.0_21-b07) Java HotSpot(TM) Client VM (build 17.0-b17, mixed mode, sharing) Linux java version “1.6.0_21” Java(TM) SE Runtime Environment (build 1.6.0_21-b07) Java HotSpot(TM) Client VM (build 17.0-b17, mixed mode, sharing) Mac java version “1.6.0_21” Java(TM) SE Runtime Environment (build 1.6.0_21-b07) Java HotSpot(TM)64-Bit Server VM (build 17.0-b17, mixed mode, sharing) Step 2 – Setup Java Development Kit (JDK) If you do not have Java installed, then you can install the Java Software Development Kit (SDK) from Oracle”s Java site Java SE Downloads. You will find instructions for installing JDK in downloaded files, then follow the given instructions to install and configure the setup. Finally set PATH and JAVA_HOME environment variables to refer to the directory that contains java and javac, typically java_install_dir/bin and java_install_dir respectively. Set the JAVA_HOME environment variable to point to the base directory location where Java is installed on your machine. For example − OS Output Windows Set the environment variable JAVA_HOME to C:Program FilesJavajdk1.6.0_21 Linux export JAVA_HOME=/usr/local/java-current Mac export JAVA_HOME=/Library/Java/Home Append the Java compiler location to the System Path. OS Output Windows Append the string ;%JAVA_HOME%bin to the end of the system variable, Path. Linux export PATH=$PATH:$JAVA_HOME/bin/ Mac not required Step 3 – Setup Adobe Flash Builder 4.5 All the examples in this tutorial has been written using Adobe Flash Builder 4.5 Profession IDE Trial Version. Hence, suggest you to have latest version of Adobe Flash Builder installed on your machine. Also, check compatibility of operating system. To install Adobe Flash Builder IDE, download the latest Adobe Flash Builder binaries from https://www.adobe.com/in/products/flash-builder.html. Once you downloaded the installation, unpack the binary distribution into a convenient location. For example, in C:flash-builder on windows, or /usr/local/flash-builder on Linux/Unix and finally set PATH variable appropriately. Flash Builder will start, when you execute the following commands on windows machine, or when you can simply double click on FlashBuilder.exe %C:flash-builderFlashBuilder.exe Flash Builder can be started by executing the following commands on Unix (Solaris, Linux, etc.) machine − $/usr/local/flash-builder/FlashBuilder Adobe Flash Builder Trial Version can be used for 60 days. Just accept the terms and conditions, and skip the initial registration steps to continue with the IDE. For our understanding, we’re using the trial version for teaching purpose. After a successful startup, if everything is fine then it should display the following result − Adobe Flash Builder comes pre-configured with FLEX SDKs. We”re using FLEX SDK 4.5 in our examples which come bundled with Adobe Flash Builder 4.5. Step 4 – Setup Apache Tomcat You can download the latest version of Tomcat from https://tomcat.apache.org/. Once, you downloaded the installation, unpack the binary distribution into a convenient location. For example, in C:apache-tomcat-6.0.33 on windows, or /usr/local/apache-tomcat-6.0.33 on Linux/Unix and set CATALINA_HOME environment variable pointing to the installation locations. Tomcat can be started by executing the following commands on windows machine, or you can simply double click on startup.bat %CATALINA_HOME%binstartup.bat or C:apache-tomcat-6.0.33binstartup.bat Tomcat can be started by executing the following commands on UNIX (Solaris, Linux, etc.) machine − $CATALINA_HOME/bin/startup.sh Or /usr/local/apache-tomcat-6.0.33/bin/startup.sh After a successful startup, the default web applications included with Tomcat will be available by visiting http://localhost:8080/. If everything is fine, then it should display the following result − Further information about configuring and running Tomcat can be found in the documentation included here, as well as on the Tomcat web site: http://tomcat.apache.org Tomcat can be stopped by executing the following commands on windows machine − %CATALINA_HOME%binshutdown Or C:apache-tomcat-5.5.29binshutdown Tomcat can be stopped by executing the following commands on UNIX (Solaris, Linux, etc.) machine − $CATALINA_HOME/bin/shutdown.sh Or /usr/local/apache-tomcat-5.5.29/bin/shutdown.sh Print Page Previous Next Advertisements ”;

Flex – Data Binding ”; Previous Next 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_preinitializeHandler(event:FlexEvent):void { BindingUtils.bindProperty(txtInput2,”text”,txtInput1, “text”); } ]]> </fx:Script> <s:TextInput id = “txtInput1” /> <s:TextInput id = “txtInput2” preinitialize = “txtInput2_preinitializeHandler(event)” /> Flex Data Binding Example Let us follow the steps given below to see skinning in action in a Flex application by creating a test application − Step Description 1 Create a project with a name HelloWorld under a packagecom.tutorialspoint.client as explained in the Flex – Create Application chapter. 2 Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged. 3 Compile and run the application to make sure business logic is working as per the requirements. Following is the content of the modified HelloWorld.mxml filesrc/com/tutorialspoint/client/HelloWorld.mxml. <?xml version = “1.0” encoding = “utf-8”?> <s:Application xmlns:fx = “http://ns.adobe.com/mxml/2009” xmlns:s = “library://ns.adobe.com/flex/spark” xmlns:mx = “library://ns.adobe.com/flex/mx width = “100%” height = “100%” minWidth = “500” minHeight = “500”> <fx:Style source = “/com/tutorialspoint/client/Style.css” /> <fx:Script> <![CDATA[ import mx.binding.utils.BindingUtils; import mx.events.FlexEvent; protected function txtInput6_preinitializeHandler(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” horizontalAlign = “center” verticalAlign = “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” preinitialize = “txtInput6_preinitializeHandler(event)” /> </s:HGroup> </s:Panel> </s:VGroup> </s:BorderContainer> </s:Application> Once you are ready with all the changes done, let us compile and run the application in normal mode as we did in Flex – Create Application chapter. If everything is fine with your application, it will produce the following result: [ Try it online ] Print Page Previous Next Advertisements ”;

Flex – Style with Skin ”; Previous Next 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” horizontalAlign = “center” verticalAlign = “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_clickHandler(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 application by creating a test application − Step Description 1 Create a project with a name HelloWorld under a packagecom.tutorialspoint.client as explained in the Flex – Create Application chapter. 2 Create skin GradientBackgroundSkin.mxml under a packagecom.tutorialspoint.skin as explained above. Keep rest of the files unchanged. 3 Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged. 4 Compile and run the application to make sure business logic is working as per the requirements. 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 = “library://ns.adobe.com/flex/spark” xmlns:mx = “library://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/client/HelloWorld.mxml. <?xml version = “1.0” encoding = “utf-8”?> <s:Application xmlns:fx = “http://ns.adobe.com/mxml/2009” xmlns:s = “library://ns.adobe.com/flex/spark” xmlns:mx = “library://ns.adobe.com/flex/mx” width = “100%” height = “100%” minWidth = “500” minHeight = “500” initialize = “application_initializeHandler(event)”> <fx:Style source = “/com/tutorialspoint/client/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 btnClickMe_clickHandler(event:MouseEvent):void { Alert.show(“Hello World!”); } protected function application_initializeHandler(event:FlexEvent):void { lblHeader.text = “My Hello World Application”; } protected function gradientBackground_clickHandler(event:MouseEvent):void { mainContainer.setStyle(“skinClass”, GradientBackgroundSkin ); } protected function standardBackground_clickHandler(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” horizontalAlign = “center” verticalAlign = “middle”> <s:Label id = “lblHeader” fontSize = “40” color = “green” styleName = “heading” /> <s:Button label = “Click Me!” id = “btnClickMe” click = “btnClickMe_clickHandler(event)” /> <s:RadioButton color = “gray” fontWeight = “bold” group = “{selectorGroup}” label = “Standard Background” click = “standardBackground_clickHandler(event)” selected = “true” /> <s:RadioButton color = “gray” fontWeight = “bold” group = “{selectorGroup}” label = “Gradient Background” click = “gradientBackground_clickHandler(event)” /> </s:VGroup> </s:BorderContainer> </s:Application> Once you are ready with all the changes done, let us compile and run the application in normal mode as we did in Flex – Create Application chapter. If everything is fine with your application, it will produce the following result: [ Try it online ] Print Page Previous Next Advertisements ”;

Flex – Style with CSS ”; Previous Next 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 application. For example consider Style.css file in com/tutorialspoint/client folder where HelloWorld.mxml file also lies. /* CSS file */ @namespace s “library://ns.adobe.com/flex/spark”; @namespace mx “library://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/client/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 “library://ns.adobe.com/flex/spark”; @namespace mx “library://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 applied on all buttons */ s|Button { fontSize: 15; color: #9933FF; } </fx:Style> <s:Button label = “Click Me!” id = “btnClickMe” click = “btnClickMe_clickHandler(event)” /> Flex Style with CSS Example Let us follow the steps to check CSS styling of a Flex application by creating a test application − Step Description 1 Create a project with a name HelloWorld under a packagecom.tutorialspoint.client as explained in the Flex – Create Application chapter. 2 Modify Style.css, HelloWorld.mxml as explained below. Keep rest of the files unchanged. 3 Compile and run the application to make sure business logic is working as per the requirements. Following is the content of the modified CSS file src/com.tutorialspoint/Style.css. /* CSS file */ @namespace s “library://ns.adobe.com/flex/spark”; @namespace mx “library://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:Application xmlns:fx = “http://ns.adobe.com/mxml/2009” xmlns:s = “library://ns.adobe.com/flex/spark” xmlns:mx = “library://ns.adobe.com/flex/mx” width = “100%” height = “100%” minWidth = “500” minHeight = “500” initialize = “application_initializeHandler(event)”> <!–Add reference to style sheet –> <fx:Style source = “/com/tutorialspoint/client/Style.css” /> <!–Using styles within mxml file –> <fx:Style> @namespace s “library://ns.adobe.com/flex/spark”; @namespace mx “library://ns.adobe.com/flex/mx”; /* class level selector */ .errorLabel { color: red; } /* id level selector */ #msgLabel { color: gray; } /* style applied on all buttons */ s|Button { fontSize: 15; color: #9933FF; } </fx:Style> <fx:Script> <![CDATA[ import mx.controls.Alert; import mx.events.FlexEvent; protected function btnClickMe_clickHandler(event:MouseEvent):void { Alert.show(“Hello World!”); } protected function application_initializeHandler(event:FlexEvent):void { lblHeader.text = “CSS Demonstrating Application”; } ]]> </fx:Script> <s:BorderContainer width = “560” height = “500” id = “mainContainer” styleName = “container”> <s:VGroup width = “100%” height = “100%” gap = “50” horizontalAlign = “center” verticalAlign = “middle”> <s:Label width = “100%” id = “lblHeader” fontSize = “40” color = “0x777777” styleName = “heading” /> <s:Button label = “Click Me!” id = “btnClickMe” click = “btnClickMe_clickHandler(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:Application> Once you are ready with all the changes done, let us compile and run the application in normal mode as we did in Flex – Create Application chapter. If everything is fine with your application, this will produce following result: [ Try it online ] Print Page Previous Next Advertisements ”;

Adobe Flex Tutorial PDF Version Quick Guide Resources Job Search Discussion Flex is a powerful, open source application framework that allows you to build mobile applications for iOS, Android, and BlackBerry Tablet OS devices, as well as traditional applications for browsers and desktops using the same programming model, tool, and codebase. You can build Flex applications using Adobe Flash Builder which is an enterprise-class Eclipse based IDE. This tutorial will provide you an in-depth understanding on Flex concepts needed to get a web and mobile application up and running. Audience This tutorial is meant for software professionals who would like to learn Flex Programming in simple and easy steps. After completing this tutorial successfully, you should be at an intermediate level of expertise from where you can take yourself to higher level of proficiency. Prerequisites Before proceeding with this tutorial, it is advisable to have a basic understanding of other web technologies like HTML, CSS, or AJAX for better understanding. Print Page Previous Next Advertisements ”;

Flex – Overview ”; Previous Next What is Flex? Flex is a powerful, open source application framework that allows you to build traditional applications for browser, mobile and desktop using the same programming model, tool, and codebase. Flex provides FLEX SDK consisting of the Flex class library (ActionScript classes), the Flex compilers, the debugger, the MXML and ActionScript programming languages, and other utilities to build expressive and interactive rich internet applications (RIA) Flex takes care of the user interface (UI) or the client-side functionality of a web application. Server-side functionality is dependent on server-side components written in a traditional scripting language (Java/ PHP etc.) A Flex based application actually delivered as a SWF file and it closely resembles the HTML / JavaScript portion of a traditional web application. Flex application is deployed as SWF file(s) plus an HTML wrapper, the CSS file(s) and any server-side script files (i.e. Java, .CFM, .PHP, etc.) to the server. Like traditional web applications. These resources are delivered from a server to the client’s browser using the customary HTTP request / response fashion and Flash Player which runs the application in a browser. Advantages of Flex Flex applications are usually Flash Player based which can access device capabilities like GPS, camera, local database, graphics accelerometer. Flex applications can run on Android, BlackBerry Tablet OS, and iOS devices. Flex applications can run on Browsers as well as on Desktop. Flex applications are platform independent. UI can be native to platform or can be made same on each platform. Flex applications can interact with server with all major server side technologies like Java, Spring, Hibernate, PHP, Ruby, .NET, Adobe ColdFusion, and SAP using industry standards such as REST, SOAP, JSON, JMS, and AMF. Flex Applications assures rich user experience through intuitive interaction with the application and presenting information in a visually richer interface. Flex application is a single page application where states can transition from one state to other state without having to fetch a new page from the server or to refresh the browser. Flex application reduces the load on the server to great extent because it is only required to return the application once, rather than a new page every time when the user changes views. Disadvantages of Flex Flex applications are single threaded applications but Flex provides an asynchronous programming model to mitigate this concern. Flex is ActionScript and XML based. Learning of these two is a must to work in Flex. Print Page Previous Next Advertisements ”;