Unit-IV

- Flash Player - Flex framework

- MXML introduction - Action script introduction

- Working with Action script - Flex data binding

- Common UI components using Data grids - Tree controls

- Pop-up controls

Building RIA

• Supports ActionScript 3.0

■ Object-oriented scripting programming language■ Compliant with ECMAScript standard– In 2005 Macromedia chaired the ECMAScript committeeand Adobe continues to drive evolution of ECMAScript

Flash Player 9

• Includes new, optimized ActionScript Virtual Machine (AVM) to execute the ActionScript code

■ Built from the ground up to work with ActionScript 3.0

■ Significantly faster than earlier versions

■ Full runtime error reporting

– In earlier versions many runtime errors would fail in agraceful, but silent fashion■ Industry standard debugging■ Stronger compile-time type checking

• New language elements added

■ E4X (ECMAScript for XML), which adds XML as a native dataType

■ Regular expressions

■ Implements event handling based on W3C DOM Events standard

TOOLS USED-> Flex Builder 2

-> Flex Builder 3

-> Flex Builder 4 ((code named Gumbo) will be released in 2009 )

File Format: Shockwave Flash

Benefits of using Flex-> Enhanced user experience

-> A complete environment

-> Common deployment environment

-> Enterprise-class features

-> Eliminate page loads

-> Standards-based architecture-> Cross- browser Compatibility

List of RIA Platforms/Approaches

-> Adobe Flash, Adobe Flex and Adobe AIR-> Backbase-> Curl-> Google's GWT framework-> Java applets-> Java applications-> JavaFX-> JavaScript / Ajax-> Microsoft ActiveX controls-> Microsoft Silverlight-> Mozilla Prism-> OpenLaszlo-> REBOL 2.6 and Seaside for Smalltalk

Comparison between AJAX and Flex

When a project is created, a number of files and folders are automatically created

■ bin-debug folder: Where your compiled application resides

■ html-template folder: Where the html wrapper page resides

■ .settings folder: Where some project configuration files reside

■ .actionScriptPoperties, .flexProperties and .project files: Project configuration files

■ src folder: Where MXML files and other asset folders reside

■ libs folder: Where custom class files can reside

■ A main application file

Creating data bindings between components

• Data binding is the process of binding the data of one object to another object

• Two ways to perform a binding:

■ Curly braces syntax ( { } )■ <mx:Binding> tag

Assigning instance names:

• Most MXML tags refer to classes■ When you use the tag, you create an instance of the class

• Use the id property to assign an instance name■ Allows you to refer to the object created

Creating data bindings

• Using the curly braces syntax

■ Assigns a property a dynamic instead of literal value■ Uses a broadcast/listener method

<mx:Label id="labelOne" text="hello"/><mx:Label text="{labelOne.text}"/>

• Using the <mx:Binding> tag

■ Specify the source and destination property values

<mx:Label id="labelTwo" text="hello"/><mx:Label id="labelThree"/><mx:Binding source="labelTwo.text"destination="labelThree.text"/>