This document provides an overview of Rich Internet Applications (RIA) and the Adobe Flex software development kit. It discusses how Flex uses MXML and ActionScript to create RIA applications that interact with the Flash plugin. It also covers related technologies like Adobe AIR, BlazeDS, and LifeCycle Data Services that allow Flex applications to communicate with backend services. Examples of MXML code and Flex application architecture are provided.

1. AppSec (By Rich Helton) Flex 4 (Rev 1) State of Colorado Office of Cyber Security

2. The Case for RIA Since RIA keeps most of the work on the browser and less on the backend. Very strong graphics are a good case for RIA. For example a Map Viewer, that doesn’t have to go back to the database very often, but does require a lot of interaction with an image that is already loaded in the browser. RIA acts on a plugin, as long as the plugin is installed, the code is browser agnostic.

3. Adobe Flex Adobe Flex is a Software Development Kit from Adobe to create Rich Internet Applications (RIA) that plug into the Web Browser’s Flash plugin. Flex uses MXML, the Macromedia XML, as a declarative layout of the interfaces to compile into the SWF file that is deployed. To extend the MXML, Flex uses a language called ActionScript, which is similar to JavaScript. ActionScript can be called from the MXML file using the <mx:script> tag. <mx:script source = “code.as”/>

4. Adobe AIR The purpose of Adobe Flex is to provide a framework to interact with the Adobe AIR plugin for GUI implementation of a product. There are other SDK’s that could be used instead instead of ADOBE FLEX, for instance the GWT 4 AIR SDK, found at http://code.google.com/p/gwt4air/ , that may provide more Java like components.

5. MXML Hello World Example <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; layout=&quot;absolute&quot; backgroundGradientColors=&quot;[#000011, #333333]&quot;> <mx:Label text=&quot;Hello World!&quot; verticalCenter=&quot;0&quot; horizontalCenter=&quot;0&quot; fontSize=&quot;48&quot; letterSpacing=&quot;1&quot;> <mx:filters> <mx:GlowFilter color=&quot;#ffffdd&quot;/> </mx:filters> </mx:Label> </mx:Application>

6. FlexBuilder 3 Example

7. Example <mx:CreditCardValidator> tag

8. Sample 1

9. MXML Example In this example, it will display a control button called “Click on Me” that once clicked will display an Alert called “Event Handler”:

10. BlazeDS

11. BlazeDS With RIA, many of the pieces will run on the Browser environment, for this reason, a transport is need to the Server environment. BlazeDS is an interface for Java Web and Java Remoting. It can be found at http://opensource.adobe.com/wiki/display/blazeds/BlazeDS With BlazeDS, the backend to Flex could be a Web Service, Java Spring or even Java Hibernate. The BlazeDS backend could be a multitude of Application Servers, including Tomcat, Jboss, WebLogic, and WebSphere. BlazeDS is Open Source and can be freely used. A Feature set can be found at http://opensource.adobe.com/wiki/display/blazeds/Features

12. BlazeDS Services BlazeDS has a Remoting, Proxying and Messaging Service. Remoting allows a connection to Server Side Java through a binary Action Message Format (AMF). AMF uses the “RemoteObject” class for remoting which is fasted than WebServices. The HTTP Proxying Service will provide a cross domain proxy when direct communication is restricted through HTTP. The Messaging Service can broadcasts messages to other clients. The crossdomain.xml is required to be used for Service invocations to other sub-domains. The “send()” method call will invoke a HTTP Service request.

13. BlazeDS Installation BlazeDS download has a turnkey download that comes preloaded with Tomcat 6. This requires that JDK 1.5 is installed. After the turnkey installation, just run the samples as “catalina.bat run” from the /tomcat/bin directory. The samples can be accessed from the http://localhost:8400/samples/ :

14. BlazeDS Installation BlazeDS sample message broker at http://localhost:8400/samples/traderdesktop/index.html :

15. BlazeDS Installation BlazeDS ds-console http://localhost:8400/ds-console/ :

16. Config files Several Config files can be found ~\tomcat\webapps\blazeds\WEB-INF\flex:

17. Config files messaging-config.xml - The messaging-config.xml file contains configuration settings for the Messaging Service. services-config.xml - The services-config.xml file is the top-level configuration file for BlazeDS. Generally, you reference configuration files for specific services, such as messaging, in this file. You also define system-wide settings such as messaging channels and security contraints in this file. remoting-config.xml - The BlazeDS RemotingService has traditionally been configured by the inclusion of a remoting-config.xml file in the BlazeDS XML configuration. proxy-config.xml - The Proxy Service configuration file, which defines Proxy Service destinations for working with web services and HTTP services (REST services). See http://livedocs.adobe.com/blazeds/1/blazeds_devguide/help.html?content=lcarch_4.html

18. WAR files There are several Web Archive (WAR) files that make up BlazeDS. blazeds.war – This is the starting copy of BlazeDS. ds-console.war - Contains the management console application that provides runtime information about BlazeDS. sample.war – Contains sample BlazeDS applications, configurations and documentation.

19. AMF There are many Open Source versions of the AMF protocol, that may not even be from Adobe, one reference for the Java Flash Remoting is http://sourceforge.net/projects/openamf/ for the OpenAMF project that is a free open-source alternative to Macromedia's Java Flash Remoting. The specification for AMF version 3 can be found at http://opensource.adobe.com/wiki/download/attachments/1114283/amf3_spec_05_05_08.pdf

20. Sandbox Bridge You can use a sandbox bridge when content in the application sandbox must access properties or methods defined by content in a non-application sandbox, or when non-application content must access properties and methods defined by content in the application sandbox. Create a bridge with the childSandboxBridge and parentSandboxBridge properties of the window object of any child document. This will allow you to expose methods that are defined in your AIR application to your SWF and load remote SWF with HTTP.

21. RemoteClass The Data Transfer Object uses the [RemoteClass] metadata tag. This is part of Flex Remoting. This is part of AMF Binding from Java to ActionScript through BlazeDS. Example ActionScript: Example Java:

22. LifeCycle Data Services (LCDS)

23. AMF and RTMP BlazeDS includes Adobe’s Action Message Format (AMF). Both are open source, and AMF is a binary remote format that is fast. Life Cycle Data Services (LCDS) is not open source and has a license cost. LCDS includes the Real Time Messaging Protocol (RTMP) which uses J2EE and the Java Transaction API. LCDS ES is an Enterprise Server for J2EE support. LCDS uses RTMP T (Tunneling) for HTTP tunneling to traverse firewalls. LCDS uses RTMP S (SSL Protocol) to encrypt the connection. See http://en.wikipedia.org/wiki/Real_Time_Messaging_Protocol

24. LCDS Information for LCDS can be found at http://www.adobe.com/products/livecycle/ Allows you to receive data just as you need it for data paging. Is not open source and requires a license fee. Some of the features include a SQL and Hibernate Adaptor as well as RTMP. Note: Both LCDS and BlazeDS support JMS.

25. MXML Component Architecture

26. MXML Pieces Events – Events determine the flow of the application. For example, a user clicking on the Mouse Button. There are user and system events. Controls -- Controls are user-interface components such as Button, TextArea, and ComboBox controls. Adobe Flex has two types of controls: basic and data provider. Layouts -- In Adobe Flex, layout containers provide a hierarchical structure to arrange and configure the components, such as Button and ComboBox controls, of a Flex application. Navigators – Navigators are a hybrid component designed to handle content visibility. They work much like a layout container and a control mixed together. Nonvisual Components – Flex also provides nonvisual components that handle functionality, such as an Array or XMLList.

27. An Event A very typical even is a button click on a form. This can be done with with a Mouse click. All Buttons dispatch a MouseEvent of type click, it defined in code as MouseEvent.CLICK. To extend the Event class, you need to invoke the superclass constructor within your custom constructor. The Event class properties hold the basic information about an event. The Event class methods can be used in event listener functions for affecting the behavior of the Event object. The currentTarget, eventPhase, and bubbles are properties of the Event class.

28. MXML Pieces Functions – Named functions should be placed within a Script/CDATA block, and they can be called from inline script as well as other functions. Named functions can receive parameters and/or return typed values. Variables -- Variables allow you to store values that you use in your program. To declare a variable, you must use the var statement with the variable name. Data Types – The primitive data types include Boolean, int, Null, Number, String, uint, and void. The ActionScript core classes also define the following complex data types: Object, Array, Date, Error, Function, RegExp, XML, and XMLList.

29. MXML Pieces Classes – A class is like a blueprint for an object. Classes define the properties and methods an object will have. Object -- The Object class is at the root of the ActionScript class hierarchy. Objects are created by constructors using the new operator syntax, and can have properties assigned to them dynamically. Objects can also be created by assigning an object literal, as in:var obj:Object = {a:&quot;foo&quot;, b:&quot;bar&quot;} Comments -- An ASDoc comment consists of the text between the characters /** that mark the beginning of the ASDoc comment, and the characters */ that mark the end of it. The text in a comment can continue onto multiple lines. MXML uses <!-- and -->.

30. ActionScript

31. ActionScript The Adobe reference to ActionScript http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/ To extend the MXML, Flex uses a language called ActionScript, which is similar to JavaScript. ActionScript can be added inline into the MXML code.

32. UIComponent The UIComponent class is the base class for all Flex visual components. For example, the Button inherits its “click” event from the UIComponent. In order to control the layout of the UIComponent within Spark containers, the BasicLayout container is required. The validateNow() method of the UIComponent class is used to validate and update the layout of a custom component and redraw it on screen. The UIComponent is a preloader of a Flex application. When creating a custom component, for example MyComp, based on a UIComponent class, it is best to declare the class using: public class MyComp extends UIComponent { }

33. UIComponent The commitProperties, updateDisplayList, and createChildren are the protected methods of the UIComponent class.

34. Sample program Here’s a simple program to print out the Mouse Coordinates as they move:

35. Sample program Mouse Move is the inline ActionScript:

36. Another Sample Here is example that moves a circle with a mouse:

37. Another Sample This sample uses an event Listener to listen for the events that are defined by constants:

38. addEventListener The ItemResponder class handles and dispatches event objects to ActionScript event handler functions and can be used instead of attribute-based event listeners or the addEventListerner() method.

39. Data Binding See http://livedocs.adobe.com/flex/3/html/help.html?content=databinding_2.html Data Binding is the process of tying the data in one object into another object. It provides a convenient way to pass data between the different layers of the application. Data binding requires a source property, a destination property, and a triggering event that indicates when to copy the data from the source to the destination. You can define a data binding in ActionScript by using the mx.binding.utils.BindingUtils class.

40. Binding Watcher See http://livedocs.adobe.com/flex/3/html/help.html?content=databinding_7.html Flex includes the mx.binding.utils.ChangeWatcher class to define a data-binding watcher. Typically, a data-binding watcher invokes an event listener when a binding occurs. To set up a data-binding watcher, use the static watch ( ) method of the ChangeWatcher class.

41. Spark Component Architecture

42. Layouts Spark is a new component in Flex 4 for skinning and Layouts. See http://www.adobe.com/devnet/flex/articles/spark_layouts.html and http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/layouts/package-detail.html Spark layouts use layout classes, while MX layouts do not use layout classes.

43. Skinnable Container The skinClass is a MXML attribute that specifies the visual implementation of a Spark component. It is used to apply skins to the Skinnable Container. the SkinnableComponent is the superclass of all Spark components. If making a custom component that extends the Skinnable Container, you should define the SkinPart metadata to make the component required to ensure that the skin of your component uses the layout. A SparkSkin class for Button Component is defined such as : <s:Button styleName=“ButtonSkin”/>

44. ItemRenderers Three ItemRenderers in Flex are Inline, Component and Drop-In. You can create a custom ItemRenderer to display data that does affect the underlying data. The showCaret, label, and data properties of the ItemRenderer class are used by the host component to pass information to the renderer. The normalAndShowCaret, hovered and normal are the view states defined for the item renderers.

45. Layout Containers

46. ViewStack The ViewStack is a navigator container that is made up of a collection of child containers. Only one container is visible at a time. The “selectedChild” component will indicate the position of the current selected child to display. The layout property of the Groupcomponent will define the children’s orientation. Implement the IVisualElement interface to ensure a Spark Group can take the components as child objects. If the ViewStack has multiple children, and the children need to be loaded before the application is available for use, then the creationPolicy and each NavigatorContent on the children has to be set. The TabNavigator is the container child class of ViewStack having a collection of child containers in which only one can be visible at a time.

47. LayoutBase LayoutBase is a superclass used to create custom layouts. One use is to display a number of images in a carousel. See http://livedocs.adobe.com/flex/3/html/help.html?content=layouts_10.html for Layout containers.

48. DataGrid Control The features of the DataGrid control include customizable column headers, resizing the columns at runtime, and re-ordering of the columns at runtime. See http://livedocs.adobe.com/flex/3/html/help.html?content=dpcontrols_6.html The createItemEditor method of the DataGrid class is used to create the item editor for the item renderer at the editedItemPosition.

49. ViewState The currentState property is used to get the name of the view state that a user wants to display while the click event occurs. See http://livedocs.adobe.com/flex/3/html/help.html?content=using_states_4.html

50. Collections Collections are objects that provide a uniform way to access and represent the data/items contained in a source object, such as an Array or and XMLList. Collections can provide a level of abstaraction between Flex components and the source objects that populate them. They provide a mechanism to handle paged data from remote data sources. They use collection methods to access data in the primary data source. It can provide a specific view of the data to be sorted or filtered by a developer-supplied method.

51. ArrayCollection The filterFunction property of an ArrayCollection returns a Boolean data type. One of the characteristics related to the ArrayColleciton class is that the elements of the ArrayCollection class are monitored and used in bindings.

52. ICollectionView The refresh() method of the ICollectionView class can be used to update any control or container bound to data. The filterFunction property is used by the ICollectionView class to remove items that do not match the function’s criteria.

53. URLLoader class The URLLoader has the following public functions: addEventListener, URLLoader, and close. URLLoader, and URLStream, classes are used for loading XML or text files.

54. URLRequest class The URLRequest class has the following properties: cacheResponse, followRedirects, and manageCookies.

55. Files The FileMode.UPDATE mode specifies that the file will be opened for read and write operations. The creationDate, creator, and downloaded properties of the File class are used to provide information about a file or directory.

56. FXG (Flash XML Graphics)

57. FXG FXG is a XML based language used to describe vector graphics elements and bitmap graphics FXG can be embedded in MXML FXG can be treated as ActionScript classes Flex is Adobe, and Adobe has several graphics applications, FXG files can be exported, and imported, from Adobe Photoshop, Illustrator and Fireworks. FXG blend modes include overlay, darken and invert. See http://en.wikipedia.org/wiki/FXG and http://opensource.adobe.com/wiki/display/flexsdk/FXG+2.0+Specification

58. SVG Explorer http://www.tarasnovak.com/lab/FlexSVGExplorer/01/FlexSVGExplorer.html#

59. Flex Validation

60. Flex Validation There are many standard validators that come standard with the Flex framework. Some of the standard Flex 3 Validators can be found at http://livedocs.adobe.com/flex/3/html/help.html?content=validators_7.html Flex can use a Regular Expression Validator to build upon the validation rules. Some of the standard validators include Date, Email, Phone numbers, String, Number, Currency, ZipCode and SSNs. In Flex validation, the “source” class specifies the property of the object to be validated. Validators are subclasses of mx.validators.Validator and return True for a valid input format.

61. Flex Validation The removeListenerHandler method, of the Validator class, is used to disconnect all of the listeners for the valid and invalid events dispatched from the validator. The matchedString property of the RegExpValidationResult class is used to contain the substring of the input String that matches the regular expression. To invoke the validator programmatically, the Validator.validate() method is called.

62. Flex Formatter The Formatter will format the output of the data. All formatters are subclasses of mx.formatters.Formatter. The subclasses of Formatter that come with Flex 4 are CurrencyFormatter, DateFormatter, NumberFormatter, PhoneFormatter, and ZipCodeFormatter. The Formatter class defines a format() method, which must be overridden by its subclasses. The defaultInvalidFormatterError property of the Formatter class generates an error message for a worthless format string that is specified to the formatter.

63. FlexUnit

64. FlexUnit I have taught many classes on NUnit and JUnit. FlexUnit is the Flex equivalent for Unit testing Flex applications. Some websites to visit for the open source software http://www.flexunit.org/ and http://opensource.adobe.com/wiki/display/flexunit/FlexUnit