Category: flex

Flex – Basic Controls ”; Previous Next 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 list 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 Handling chapter. Flex UI Elements The Flex UI library 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. 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 non-interactive. Basic Controls Following are the few important Basic Controls − Sr.No Controls & Description 1 Label Label is a low-level UIComponent that can render one or more lines of uniformly-formatted text. 2 Text The Text control lets you display HTML content as well as normal text in your application. 3 Image The Image control lets you import JPEG, PNG, GIF, and SWF files at runtime. 4 LinkButton The LinkButton control is a borderless Button control whose contents are highlighted when a user moves the mouse over it. Print Page Previous Next Advertisements ”;

Flex – Useful Resources ”; Previous Next The following resources contain additional information on Flex. Please use them to get more in-depth knowledge on this topic. Useful Video Courses Adobe XD Mobile & Web UI/UX Crash Course 31 Lectures 3.5 hours Abhilash Nelson More Detail Adobe Illustrator from beginner to expert 16 Lectures 15 hours Sanjeev More Detail Adobe Xd Course – UI / UX Design, Prototype And Getting A Job 128 Lectures 11.5 hours Aleksandar Cucukovic More Detail Adobe Xd Animation – Complete Guide From Icons To UI 104 Lectures 11.5 hours Aleksandar Cucukovic More Detail Adobe Xd Masterclass – UI / UX Design From Scratch 75 Lectures 20 hours Aleksandar Cucukovic More Detail Android Material UI Design Masterclass with Adobe Xd 36 Lectures 6.5 hours Stevdza-San More Detail Print Page Previous Next Advertisements ”;

Flex – Debug Application ”; Previous Next Flex provides excellent capability of debugging flex code and Flash Builder 4 has an excellent built-in debugger and debugging perspective support. During debug mode, Flex Application runs on Flash Player Debugger version built in Flash Builder 4 which supports debugging capability. So developers get an easy and inbuilt debugging configuration in Flash Builder In this article, we”ll demonstrate usage of debugging Flex Client 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 line by line 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 Step Description 1 Create a project with a name HelloWorld under a package com.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 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)”> <fx:Style source = “/com/tutorialspoint/client/Style.css” /> <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 = “My Hello World Application”; } ]]> </fx:Script> <s:BorderContainer width = “500” height = “500” id = “mainContainer” styleName = “container”> <s:VGroup width = “100%” height = “100%” gap = “50” horizontalAlign = “center” verticalAlign = “middle”> <s:Label id = “lblHeader” fontSize = “40” color = “0x777777” styleName = “heading” /> <s:Button label = “Click Me!” id = “btnClickMe” click = “btnClickMe_clickHandler(event)” styleName = “button” /> </s:VGroup> </s:BorderContainer> </s:Application> Once you are ready with all the changes done, let us compile in normal mode as we did in Flex – Create Application chapter. Step 1 – Place Breakpoints Place a breakpoint on the first line of application initialize Handler of HelloWorld.mxml Step 2 – Debug Application Now click on Debug application menu and select HelloWorld application to debug the application. If everything is fine, application will launch in the browser and you will see following debug logs in Flash Builder console. [SWF] HelloWorldbin-debugHelloWorld.swf – 181,509 bytes after decompression [SWF] HelloWorldbin-debugHelloWorld.swf[[DYNAMIC]]1 – 763,122 bytes after decompression [SWF] HelloWorldbin-debugHelloWorld.swf[[DYNAMIC]]2 – 1,221,837 bytes after decompression [SWF] HelloWorldbin-debugHelloWorld.swf[[DYNAMIC]]3 – 1,136,788 bytes after decompression [SWF] HelloWorldbin-debugHelloWorld.swf[[DYNAMIC]]4 – 2,019,570 bytes after decompression [SWF] HelloWorldbin-debugHelloWorld.swf[[DYNAMIC]]5 – 318,334 bytes after decompression As soon as Application launches,you will see the focus on Flash Builder breakpoint as we”ve placed the breakpoint on first line of application_initialize Handler method. You can see the stacktrace for suspended threads. You can see the values for expressions. You can see the list of breakpoints placed. Now keep pressing F6 until you reach the last line of application_initializeHandler() method. As reference for function keys, F6 inspects code line by line, F5 steps inside further and F8 will resume the application. Now you can see the list of values of all variables of application_initializeHandler() method. Now you can see the flex code can be debugged in the same way as a Java Application can be debugged. Place breakpoints to any line and play with debugging capabilities of flex. Print Page Previous Next Advertisements ”;

Flex – Event Handling ”; Previous Next Flex uses concept of event to pass data from one object to another depending upon the state or user interaction within the application. ActionScript has a generic Event class which defines much of the functionality needed to work with events. Every time an event occurs within a Flex application, three types of objects from the Event class hierarchy are created. Event has the following three key properties Sr.No Property & Description 1 Type The type states about what kind of event just happened. This may be click, initialize, mouseover, change, etc. The actual values will be represented by constants like MouseEvent.CLICK. 2 Target The target property of Event is an object reference to the component that generated the event.If you click a Button with an id of clickMeButton, the target of that click event will be clickMeButton 3 CurrentTarget The currentTarget property varies container hierarchy. It mainly deals with flow of events. Event Flow Phases An event goes through three phases looking for event handlers. Sr.No Phase & Description 1 Capture In the capture phase, the program will start looking for event handlers from the outside (or top) parent to the innermost one. The capture phase stops at the parent of the object that triggered the event. 2 Target In the target phase, the component that triggered the event, is checked for an event handler. 3 Bubble The Bubble phase is reverse of capture phase, working back through the structure, from the target component”s parent on up. Consider the following application code − <?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” > <s:Panel> <s:Button id = “clickMeButton” label = “Click Me!” click = “doAction( );” /> </s:Panel> </s:Application> When the user clicks the Button, he or she has also clicks the Panel and the Application. The event goes through three phases looking for event-handler assignments. Let us follow the steps below to test event handing in a Flex application − Step Description 1 Create a project with a name HelloWorld under a package com.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 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”> <fx:Style source = “/com/tutorialspoint/client/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 = “Bubbling”; } else if(eventPhaseInt == EventPhase.CAPTURING_PHASE) { eventPhase = “Capturing”; } reports.text += ” Target: ” + target + “n currentTarget: ” + currentTarget + “n Phase: ” + eventPhase + “n———-n”; } ]]> </fx:Script> <s:BorderContainer width = “630” height = “480” id = “mainContainer” styleName = “container”> <s:VGroup width = “100%” height = “100%” gap = “10” horizontalAlign = “center” verticalAlign = “middle”> <s:Label id = “lblHeader” text = “Event Handling Demonstration” fontSize = “40” color = “0x777777” styleName = “heading” /> <s:Panel id = “parentPanel” title = “Main Parent” click = “reportEvent(event)” width = “500” height = “100” includeInLayout = “true” visible = “true”> <s:layout> <s:VerticalLayout gap = “10” verticalAlign = “middle” horizontalAlign = “center” /> </s:layout> <s:HGroup id = “mainHGroup” click = “reportEvent(event)”> <s:Button label = “Click Me” click = “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: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 – Deploy Application ”; Previous Next This tutorial will explain you how to create an application war file and how to deploy that in Apache Tomcat Web server root. If you understood this simple example then you will also be able to deploy a complex Flex application following the same steps. Let us follow the following steps to create a Flex 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. Follow the steps given below to create a release build of a Flex application and then deploy it to tomcat server − The first step is to create a release build using Flash Builder IDE. Launch release build wizard using the option File > Export > Flash Builder > Release Build. Select project as HelloWorld using the wizard window as follows Leave other default values as such and click Finish Button. Now, Flash Builder will create a bin-release folder containing the project”s release build. Now our release build is ready, let us follow the following steps to deploy a Flex application − Step Description 1 Zip the content of the bin-release folder of the application in the form of HelloWorld.war file and deploy it in Apache Tomcat Webserver. 2 Launch your web application using appropriate URL as explained below in the last step. Following is the content of the modified mxml file table table-bordered/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)”> <fx:Style source = “/com/tutorialspoint/client/Style.css” /> <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 = “My Hello World Application”; } ]]> </fx:Script> <s:BorderContainer width = “500” height = “500” id = “mainContainer” styleName = “container”> <s:VGroup width = “100%” height = “100%” gap = “50” horizontalAlign = “center” verticalAlign = “middle”> <s:Label id = “lblHeader” fontSize = “40” color = “0x777777” styleName = “heading” /> <s:Button label = “Click Me!” id = “btnClickMe” click = “btnClickMe_clickHandler(event)” styleName = “button” /> </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, then it will produce the following result: [ Try it online ] Create WAR File Now our application is working fine and we are ready to export it as a war file. Follow the following steps − Go into your project”s bin-release directory C:workspaceHelloWorldbinrelease Select all the files & folders available inside bin-release directory. Zip all the selected files & folders in a file called HelloWorld.zip. Rename HelloWorld.zip to HelloWorld.war. Deploy WAR file Stop the tomcat server. Copy the HelloWorld.war file to tomcat installation directory > webapps folder. Start the tomcat server. Look inside webapps directory, there should be a folder HelloWorld got created. Now HelloWorld.war is successfully deployed in Tomcat Webserver root. Run Application Enter a URL in web browser − http://localhost:8080/HelloWorld/HelloWorld.html to launch the application. Server name (localhost) and port (8080) may vary as per your tomcat configuration. Print Page Previous Next Advertisements ”;

Flex – Create Application ”; Previous Next We”ll use Flash Builder 4.5 to create Flex Applications. Let”s start with a simple HelloWorld application. Step 1 – Create Project The first step is to create a simple Flex Project using Flash Builder IDE. Launch project wizard using the option File > New > Flex Project. Now name your project as HelloWorld using the wizard window as follows − Select Application Type Web (runs in Adobe Flash Player). However, if this is not selected, then leave other default values as such and click Finish Button. Once your project is created successfully, then you will have the following content in your Project Explorer − Here is a brief description of all the important folders − Folder Location table table-bordered Source code (mxml / as classes) files. We”ve created com/tutorialspoint/client folder structure containing the client-side specific java classes responsible for client UI display. bin-debug This is the output part, it represents the actual deployable web application. History folder contains support files for history management of Flex application. framework_xxx.swf, flex framework files should be used by flex application. HelloWorld.html, wrapper/host HTML File for flex application. HelloWorld.swf, our flex based application. playerProductInstall.swf, flash player express installer. spark_xxx.swf, library for spark component support. swfobject.js, JavaScript responsible to load HelloWorld.swf in HelloWorld.html. It checks flash player version and passes initialization parameter to HelloWorld.swf file. textLayout_xxx.swf, library for text component support. html-template This represents the configurable web application. Flash Builder compiles files from html-template to bin-debug folder. History folder contains support files for history management of Flex application. index.template.html, wrapper/host HTML File for flex application having place holders for Flash Builder specific configuration. Gets compiled to HelloWorld.html in bin-debug folder during build. playerProductInstall.swf, flash player express installer gets copied to bin-debug folder during build. swfobject.js, JavaScript responsible to load HelloWorld.swf in HelloWorld.html. It checks flash player version and passes initialization parameter to HelloWorld.swf file gets copied to bindebug folder during build. Step 2 – Create External CSS File Create a CSS file styles.css for Wrapper HTML page in html-template folder. html, body { height:100%; } body { margin:0; padding:0; overflow:auto; text-align:center; } object:focus { outline:none; } #flashContent { display:none; } .pluginHeader { font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#9b1204; text-decoration:none; font-weight:bold; } .pluginInstallText { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000; line-height:18px; font-style:normal; } .pluginText { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000; line-height:18px; font-style:normal; } Step 3 – Modify Wrapper HTML page template Modify Wrapper HTML page template index.template.html in htmltemplate folder. Flash Builder will create a default Wrapper HTML page template html-template/index.template.html, which will be compiled to HelloWorld.html. This file contains placeholders which Flash Builder replaces during the compilation process. For example, flash player version, application name, etc. Let us modify this file to display custom messages in case flash plugin is not installed. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns = “http://www.w3.org/1999/xhtml” lang = “en” xml:lang = “en”> <head> <title>${title}</title> <meta name = “google” value = “notranslate” /> <meta http-equiv = “Content-Type” content = “text/html; charset = utf-8” /> <link rel = “stylesheet” href = “styles.css” type = “text/css”></link> <link rel = “stylesheet” type = “text/css” href = “history/history.css” /> <script type = “text/javascript” table table-bordered = “history/history.js”> </script> <script type = “text/javascript” table table-bordered = “swfobject.js”></script> <script type = “text/javascript”> // For version detection, set to min. required Flash Player version, //or 0 (or 0.0.0), for no version detection. var swfVersionStr = “${version_major}.${version_minor}.${version_revision}”; // To use express install, set to playerProductInstall.swf, //otherwise the empty string. var xiSwfUrlStr = “${expressInstallSwf}”; var flashvars = {}; var params = {}; params.quality = “high”; params.bgcolor = “${bgcolor}”; params.allowscriptaccess = “sameDomain”; params.allowfullscreen = “true”; var attributes = {}; attributes.id = “${application}”; attributes.name = “${application}”; attributes.align = “middle”; swfobject.embedSWF ( “${swf}.swf”, “flashContent”, “${width}”, “${height}”, swfVersionStr, xiSwfUrlStr, flashvars, params, attributes); // JavaScript enabled so display the flashContent div in case //it is not replaced with a swf object. swfobject.createCSS(“#flashContent”, “display:block;text-align:left;”); </script> </head> <body> <div id = “flashContent”> <p style = “margin:100px;”> <table width = “700” cellpadding = “10” cellspacing = “2” border = “0”> <tr> <td class = “pluginHeader”>Flash Player Required</td> </tr> <tr> <td class = “pluginText”>The Adobe Flash Player version 10.2.0 or greater is required.</td> </tr> <tr> <td class = “pluginInstallText” align = “left”> <table border = “0” width = “100%”> <tr class = “pluginInstallText” > <td>Click here to download and install Adobe Flash Player:</td> <td> </td> <td align = “right”> <script type = “text/javascript”> var pageHost = ((document.location.protocol == “https:”) ? “https://” : “http://”); document.write(“<a target = ”_blank”” +” href = ”http://get.adobe.com/flashplayer/”><” +”img style = ”border-style: none” table table-bordered = ”” +pageHost +”www.adobe.com/images/shared/download_buttons/get_flash_player.gif”” +” alt = ”Get Adobe Flash player” /></a>” ); </script> </td> </tr> </table> </tr> </table> </p> </div> <noscript> <object classid = “clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” width = “${width}” height = “${height}” id = “${application}”> <param name = “movie” value = “${swf}.swf” /> <param name = “quality” value = “high” /> <param name = “bgcolor” value = “${bgcolor}” /> <param name = “allowScriptAccess” value = “sameDomain” /> <param name = “allowFullScreen” value = “true” /> <!–[if !IE]>–> <object type = “application/x-shockwave-flash” data = “${swf}.swf” width = “${width}” height = “${height}”> <param name = “quality” value = “high” /> <param name = “bgcolor” value = “${bgcolor}” /> <param name = “allowScriptAccess” value = “sameDomain” /> <param name = “allowFullScreen” value = “true” /> <!–<![endif]–> <!–[if gte IE 6]>–> <p> <p style = “margin:100px;”> <table width = “700” cellpadding = “10” cellspacing = “2” border = “0”> <tr> <td class = “pluginHeader”>Flash Player Required</td> </tr> <tr> <td class = “pluginText”>The Adobe Flash Player version 10.2.0 or greater is required.</td> </tr> <tr> <td class = “pluginInstallText” align = “left”> <table border = “0” width = “100%”> <tr class = “pluginInstallText” > <td>Click here to download and install Adobe Flash Player:</td> <td> </td> <td align = “right”> <script type = “text/javascript”> var pageHost = ((document.location.protocol == “https:”) ? “https://” : “http://”); document.write(“<a target = ”_blank”” +” href = ”http://get.adobe.com/flashplayer/”><” +”img style = ”border-style: none” table table-bordered = ”” +pageHost +”www.adobe.com/images/shared/download_buttons/get_flash_player.gif”” +” alt = ”Get Adobe Flash

Flex – Life Cycle Phases ”; Previous Next Life Cycle of Flex Application Although, you can build Flex applications without understanding the life cycle phases of an application, 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 applications at runtime, and manage the process of loading and unloading class libraries and assets at runtime. A good understanding of the Flex application life cycle will enable you to build better applications 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 application in a browser, the following events occurs during the lifecycle of flex application. Following is the brief detail about different Flex Life cycle events. Sr.No Event & Description 1 preInitialize: mx.core.UIComponent.preinitialize Event Type: mx.events.FlexEvent.PREINITIALIZE This event is dispatched at the beginning of the component initialization sequence. The component is in a very raw state when this event is dispatched. Many components, such as Button control creates internal child components to implement functionality. For example, the Button control creates an internal UI TextField component to represent its label text. When Flex dispatches the pre-initialize event, the children, including all the internal children, of a component have not yet been created. 2 initialize: mx.core.UIComponent.initialize Event Type: mx.events.FlexEvent.INITIALIZE This event is dispatched after pre-initialize phase. Flex framework initializes the internal structure of this component during this phase. This event automatically fires when the component is added to a parent. You do not need to call initialize() generally. 3 creationComplete: mx.core.UIComponent.creationComplete Event Type: mx.events.FlexEvent.CREATION_COMPLETE This event is dispatched when the component has finished its construction, property processing, measuring, layout, and drawing. At this point, depending on its visible property, the component is not visible even though it has been drawn. 4 applicationComplete: spark.components.Application.applicationComplete Event Type:mx.events.FlexEvent.APPLICATION_COMPLETE Dispatched after the Application has been initialized, processed by the LayoutManager, and attached to the display list. This is the last event of the application creation life cycle and signifies that application has been loaded completely. Flex Life Cycle Example Let us follow the steps to understand test life cycle 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 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 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 = “reportEvent(event)” preinitialize = “reportEvent(event)” creationComplete = “reportEvent(event)” applicationComplete = “reportEvent(event)”> <fx:Style source = “/com/tutorialspoint/client/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 += “n” + (event.type + ” event occured at: ” + getTimer() + ” ms” + “n”); } ]]> </fx:Script> <s:BorderContainer width = “500” height = “500” id = “mainContainer” styleName = “container”> <s:VGroup width = “100%” height = “100%” gap = “50” horizontalAlign = “center” verticalAlign = “middle”> <s:Label textAlign = “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: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 – FlexUnit Integration ”; Previous Next 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, Click 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.client { public class TestClass1 { [Before] public function setUp():void {} [After] public function tearDown():void {} [BeforeClass] public static function setUpBeforeClass():void {} [AfterClass] public static function tearDownAfterClass():void {} } } FlexUnit Integration Example Now, let us follow the steps to test FlexUnit Integration in a Flex application − Step Description 1 Create a project with a name HelloWorld under a package com.tutorialspoint.client as explained in the Flex – Create Application chapter. 2 Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged. 3 Create TestClass1.as test case as described above and Modify TestClass1.as as explained below. 4 Compile and run the application to make sure business logic is working as per the requirements. Following is the content of the modified as file src/com.tutorialspoint/client/TestClass1.as. package com.tutorialspoint.client { import org.flexunit.asserts.assertEquals; public class TestClass1 { private var counter: int = 1; [Before] public function setUp():void { //this code will run before every test case execution } [After] public function tearDown():void { //this code will run after every test case execution } [BeforeClass] public static function setUpBeforeClass():void { //this code will run once when test cases start execution } [AfterClass] public static function tearDownAfterClass():void { //this code will run once when test cases ends execution } [Test] public 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: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” minWidth = “500” minHeight = “500”> </s:Application> Once you are ready with all the changes done, let us compile in normal mode as we did in Flex – Create Application chapter. Running Test cases Now Right Click 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. Print Page Previous Next Advertisements ”;

Flex – Applications ”; Previous Next Before we start creating actual “HelloWorld” application using Flash Builder, let us see what the actual parts of a Flex application are − A Flex application consists of the following four important parts, out of which last part is optional but first three parts are mandatory. Flex Framework Libraries Client-side code Public Resources (HTML/JS/CSS) Server-side code Sample locations of different parts of a typical Flex application like HelloWord will be as shown below − Name Location Project root HelloWorld/ Flex Framework Libraries Build Path Public resources html-template Client-side code table table-bordered/com/tutorialspoint/client Server-side code table table-bordered/com/tutorialspoint/server Application Build Process To start with, Flex application requires Flex framework libraries. Later, Flash Builder automatically adds the libraries to build path. When we build our code using Flash builder, Flash builder will do the following tasks − Compiles the source code to HelloWorld.swf file. Compiles a HelloWorld.html (a wrapper file for swf file) from a file index.template.html stored in html-template folder Copies HelloWorld.swf and HelloWorld.html files in target folder, bin-debug. Copies swfobject.js, a JavaScript code responsible to load swf file dynamically in HelloWorld.html in target folder, bin-debug Copies framework libraries in form of swf file named frameworks_xxx.swf in target folder, bin-debug Copies other flex modules (.swf files such as sparkskins_xxx.swf, textLayout_xxx.swf) in target folder. Application Launch Process Open the HelloWorld.html file available in HelloWorldbin-debug folder in any web-browser. HelloWorld.swf will load automatically and application will start running. Flex Framework Libraries Following is the brief detail about few important framework libraries. Please note that, Flex libraries are denoted using .swc notation Sr.No Nodes & Description 1 playerglobal.swc This library is specific to FlashPlayer installed on your machine and contains native methods supported by flash player. 2 textlayout.swc This library supports the text layout related features. 3 framework.swc This is the flex framework library contains the core features of Flex. 4 mx.swc This library stores the definitions of mx UI controls. 5 charts.swc This library supports the charting controls. 6 spark.swc This library stores the definitions of spark UI controls. 7 sparkskins.swc This library supports the skinning of spark UI controls. Client-side Code Flex application code can be written in MXML as well as ActionScript. Sr.No Type & Description 1 MXML MXML is an XML markup language that we”ll use to lay out user interface components. MXML is compiled into ActionScript during build process. 2 ActionScript ActionScript is an object-oriented procedural programming language and is based on the ECMAScript (ECMA-262) edition 4 draft language specification. In Flex, we can mix ActionScript and MXML, to do the following − Layout user interface components using MXML tags Use MXML to declaratively define nonvisual aspects of an application, such as access to data sources on the server Use MXML to create data bindings between user interface components and data sources on the server. Use ActionScript to define event listeners inside MXML event attributes. Add script blocks using the Include external ActionScript files. Import ActionScript classes. Create ActionScript components. Public Resources These are help files referenced by Flex application, such as Host HTML page, CSS or images located under html-template folder. It contains following files − Sr.No File Name & Description 1 index.template.html Host HTML page, with place holders. Flash Builder uses this template to build actual page HelloWorld.html with HelloWorld.swf file. 2 playerProductInstall.swf This is a flash utility to install Flash Player in express mode. 3 swfobject.js This is the JavaScript responsible to check version of flash player installed and to load HelloWorld.swf in HelloWorld.html page. 4 html-template/history This folder contains resources for history management of the application. HelloWorld.mxml This is the actual MXML/AS (ActionScript) code written implementing the business logic of the application and that the Flex compiler translates into SWF file which will be executed by flash player in the browser. A sample HelloWorld Entry class will be as follows − <?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: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 = “My Hello World Application”; } ]]> </fx:Script> <s:VGroup horizontalAlign = “center” width = “100%” height = “100%” paddingTop = “100” gap = “50”> <s:Label id = “lblHeader” fontSize = “40” color = “0x777777” /> <s:Button label = “Click Me!” id = “btnClickMe” click = “btnClickMe_clickHandler(event)” /> </s:VGroup> </s:Application> Following table gives the description of all the tags used in the above code script. Sr.No Node & Description 1 Application Defines the Application container that is always the root tag of a Flex application. 2 Script Contains the business logic in ActionScript language. 3 VGroup Defines a Vertical Grouping Container which can contain Flex UI controls in vertical fashion. 4 Label Represents a Label control, a very simple user interface component that displays text. 5 Button Represents a Button control, which can be clicked to do some action. Server-side code This is the server side part of your application and it’s very much optional. If you are not doing any backend processing within your application, then you do not need this part but if there is some processing required at backend and your clientside application interacts with the server, then you will have to develop these components. In the next chapter, we will use all the above-mentioned concepts to create a HelloWorld application using Flash Builder. 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 ”;