The Adobe Flex Framework

Contents

Rich Internet Applications Why Flex Flex Framework Flex Products How Flex works Components

Rich Internet Applications (RIAs)

Why we are interested in Dynamic Graphics To clearly disseminate statistical data as knowledge such that it should be evidently presentable on Web. Graphics that help us to understand and digest knowledge in a simple and intelligent way. Graphics that can show moving pictures Graphics that speak clearly to all audiences Graphics that can use time-series Graphics that can show multidimensional pictures Graphics where it is possible to go further into the depths of the data. To be able to go directly behind the graph to interrogate the information in more detail, if so required.

Why FLEX?
When accessing the Web these days, people expect a universal experience regardless of what operating system or browser they use. Since commercial Rich Internet Applications (RIAs) cost a lot to build such applications, it matters which technology is most productive to work with. Flex is a free, open source framework for building highly interactive, flexible, responsive, expressive web applications that deploy consistently on all major browsers, desktops, and operating systems. Flex technology is Adobes development toolset that enables developers to create expressive Rich Internet Applications. Flex is one of the WEB 2.0 technologies.

Flex Framework

Adobe Flex Framework is available for free in an open source SDK that includes extensive ActionScript and MXML class libraries, pre-built component and a command-line complier. Users can develop and deploy Flex applications using an IDE of their choice. Alternatively, Adobe Flex technology also provides developers an IDE, called Flex Builder, an Eclipse based developer tool, which includes Flex SDK, intelligent coding, and other development tools like an interactive easy debugging, and visual components. It also promotes good maintainable coding practices. This helps users to quickly build RIAs using the ActionScript and MXML. Unlike PHP, ColdFusion, [Link], and JSP applications, Flex applications are run on the client-side, and not on the server.

Flex Products

The Adobe Flex suite represents following major products: Flex SDK A compiler that turns source code into SWF (Flash Player) files (FREE!) Flex Builder A GUI built on the Eclipse platform that allows developers to easily create files that can be compiled by the SDK ECMAScript is a scripting language, standardized by Ecma International. The language is widely used on the web, especially in the form of its three best-known dialects, JavaScript, ActionScript, and JScript.

Flex Builder

A GUI built on the Eclipse platform that allows developers to easily create files that can be compiled by the SDK. When you install Flex Builder, you have two options: Flex Builder IDE Use this version if you do not already have Eclipse installed. Flex Builder Plugin Use this version if you already have Eclipse 3.4 installed on your machine There is no functionality difference between these versions. Provides context-sensitive code hinting.

Do I need to install any server software?

You do not necessary need to add any server software to your webserver to use Flex. Flex can deploy as a .SWF file, which is no more than an image file, according to the Web Server. However, if you want to interact with data, you will need to connect to some middleware application such as Java, .NET, ColdFusion, or PHP.

Eclipse View

Project Properties
When project is created, Flex Builder will setup your development environment. You will then be presented with a blank Application template.

<!-- To Add Canvas and child components() for this --> <mx:Canvas x="156" y="63" width="200" height="200" borderColor="#342167" borderStyle="solid" verticalScrollPolicy="off"> <mx:Label x="54.5" y="10" text="In side Canvas"/> <mx:Text x="19" y="46" text="Welcome"/> <mx:CheckBox x="96" y="44" label="Checkbox"/> <mx:Button x="66.5" y="72" label="Button"/> </mx:Canvas>

Scripting Block
Next, we will need to switch to the source code view. Take a look at our generated code! Before the first HBox but after the Application tags, add some line-feeds Create a new scripting block by typing in <mx:Script> Flex Builder will correctly open and close the block for you.

Adding script functions

This scripting block will allow us to interact with the Web Service, HTTP Services etc and also to write business logic. Create a new function called addLabel() that has no parameters and a void return type. //Function to add Label private function addLabel():void{ var fieldLbl:Label = new Label(); fieldLbl.x = 0; fieldLbl.y = 30; [Link] = "Enter Name"; [Link]("color","#234567"); [Link](fieldLbl); }

Running the application

Click on Run image icon and select Run As and then Flex Application.

Running the application

Right Click on project and select Run As and then Flex Application.

MXML components
MXML is Flex XML-based tag library. MXML for visual layout. Flex developers will use the XML-based tag library MXML programming languages to build the user-interface visual layout. The components of MXML are MXML files that you import by using MXML tags from within other MXML files. An important use of MXML components is to extend existing Flex component by adding new functionality.

Acronym MXML MXML MXML

Definition Macromedia Flex Markup Language Maximum Experience Markup Language (Macromedia) Magic eXtensible Markup Language

ActionScript (AS)

AS (ActionScript) is a standard based, object oriented language where data model and client side sophisticated business logic are written.

AS is compliant with ECMA-262 specification.

AS supports wide range of features, including formalized classes, interfaces, packages, runtime exception handling, reflection and more. Because AS is an OO language, it can be viewed as a collection of APIs generally in the form of classes. There are three tiers of AS APIs: 1) Flash Player APIs 2) Flex Frame work APIs 3) Custom APIs

ActionScript (AS)

You have four basic options to place the code: 1) 2) 3) 4) Inline within MXML tags which appears with in the MXML tags Nested with in MXML tags you can nest the values for event handlers. You must place the code with in the CDATA block. In MXML scripts place a code within an MXML script. ActionScript classes These are the most sophisticated and powerful use of ActionScript.

MXML vs ActionScript 3.0

MXML Components application. are implicitly initialized when the user runs the

The Application class is a container Components are added to an application as children objects. MXML is compiled to ActionScript ActionScript 3.0 Components are created and added to the display though an explicit call to the initAddControl() function when the user runs the application.

You need to add an initialize listener to the application object to call the function that adds the components (initialize=initAddControl()).
You need to explicitly attach the components to application object ([Link](saveButton))

How do I build Flex applications?

You can compile applications using an open source SDK or Flex Builder. While compiling, your MXML code is translated into AS code and then all the AS code is compiled into binary Shockwave Flash (SWF) files. A typical SWF file contains MXML AS

Runtime-Shared-Libraries (RSLs)
Shock Wave Control (SWC) Asset files.

The SWF file can be uploaded to the web server, where it is then served up based on user request. This makes Flex application completely cross-platform.

Pictorial representation

How Flex applications are structured

3 major pieces of a complete Flex application :
System Manager Preloader Application.

SystemManager Instance : is responsible for managing application startup. It is also the container for not only application but also for all the tool tips and popups in the application Preloader : System Manager creates a Preloader instance. Preloader object is responsible for monitoring the download progress of the main application, gathering the list of runtime shared libraries and starting to download them. Application Instance: Application object begins to start up and the user can start to interact with it.

Designing a UI - Layout
Flex's built-in MXML components and containers Components (also called controls) are interface widgets that are either part of the Flex framework or are created using ActionScript 3.0. Ex: Button, Label, Text, Progress Bar etc. Containers are layout classes that position the interface widgets or data in the application. Ex: Application, Canvas, Panel, Title etc.

Use Flex Builder's design view to layout child components. Containers provide a hierarchical structure that lets you control the layout characteristics of child components. There are two types of containers: layout and navigator. Components defined within a container are called children of the container. At the root of a Flex application is a single container, called the Application container

Application Container
At the root of a Flex application is a single container, called the Application container, that holds all other containers and components. The Application container lays out all its children vertically by default (when the layout property is not specifically defined). There are 3 possible values for the Application's layout property: vertical - lays out each child component vertically from the top of the application to the bottom in the specified order. horizontal - lays out each child component horizontally from the left of the application to the right in the specified order. absolute - Absolute positioning does no automatic layout and requires you to explicitly define the location of each child component. Vertical Horizontal Absolute

Laying out the application

Before we begin any programming, we need to layout the application Remember the layout that was drawn earlier We will click on the Design tab within our [Link] file to begin laying out the application. Canvas is the only container that lets you explicitly specify the location of its children within the container. Vertical layout - Items will be stacked on top of each other in the order they were added. Think: Microsoft Word Horizontal layout - Items will be stacked from left to right as space permits HBox, VBox, Canvas are invisible containers that just hold the objects within them. Sub-items percentages are based on 100%, not screen real-estate. VDividedBox, HDividedBox allows for visible handle that the user can drag to resize the child objects. The Panel container consists of title bar, a caption, a status message, border and content area for its children's. Layout property can be set to vertical (default), horizontal or absolute.

Flex Events

Any user interaction with your application can generate events. You can handle these events in your code by adding an event handler. Event handlers / listeners are the functions or methods that you write to respond to specific events. The Flex framework provides many built-in Flex events, which are divided into two types of events: User events are fired as users interact with the application Ex: Click on a button or mouseover an object System events are fired as a result of code execution Ex: When an application initializes, when a component is added dynamically, or when data is returned from an external data source.

Drag and Drop Usage

Drag and Drop provides flexible set of characteristics that let you control and configure components that are necessary to meet your application's requirements. The list-based controls have built-in support for drag-and-drop feature, but you can use drag-and-drop with any Flex component. To support drag and drop operations with components, you must handle the drag and drop events.

Displaying lists of items

Flex provides a number of sophisticated list controls that simplify the display of list data including List, HorizontalList, DataGrid, Menu, TileList, Tree. DataGrid Item renderers Lists TileList

DataGrid is a formatted table whose items can be edited and displayed via custom renderers.
Features include: Resizeable columns Customizable columns and row headers Editable Multiple modes of selection Use of custom item renderer Paging of data Drag and drop capability

Item Renderers - Each list-based control has a default item renderer. There are three types of custom item renderers Drop-in - Specify a control as the value for item renderer Inline - For complete control over item rendering. Use <mx:Component> tag Component - Custom components written in MXML or ActionScript used as Item renderer Lists - The List control displays a vertical list of items. Features include: Items displayed are contained within the dataProvider property Custom item renderers can be specified Custom item editors can also be used Single or multiple items can be selected The HorizontalList, TileList, DataGrid, Menu, and Tree controls all inherit from the List control

Accessing Data using RPC services

MXML / AS define non-visual aspects of an application, such as access to server-side data sources. Data access components bring data from various sources (PHP, Adobe ColdFusion, Microsoft [Link] and Java) using remote procedure calls into your Flex application and check its integrity, and how best to display and interact with it. Three types of Flex data access components (RPC services): The MXML components that provide data access are called components. MXML includes the following types of RPC components: WebService provides access to SOAP-based web services. HTTPService provides access to HTTP URLs that return data. RemoteObject provides access to Java objects using the AMF protocol (Adobe LiveCycle Data Services ES only). RPC

HTTPService
<!-- MXML --> <mx:Application xmlns:mx="[Link] layout="absolute initialize=[Link]() /> <mx:HTTPService id=fruitId" useProxy="false" method="POST url=[Link]" resultFormat="e4x" result=fruitRSHandler(event);" fault=fruitFaultHandler(event);" /> //AS private function fruitRSHandler(event:ResultEvent):void{ var frtsXML:XML = [Link] as XML; } private function fruitFaultHandler(evt:FaultEvent):void{ [Link]("ERROR..."+[Link]); }

WebService

<!-- MXML --> <mx:WebService id="blogService" useProxy="false" wsdl="[Link] <mx:operation name="getAllEmpInfo" resultFormat="object" result="bsResultHandler(event);" > </mx:operation> </mx:WebService>

RemoteObject
//In [Link] specify the Java class file <destination id="vjService"> <properties> <source>[Link]</source> <scope>request</scope> </properties> </destination> //In .flexProperties specify the MXML file name in serverContextRoot attribute <flexProperties flexServerType="8" flexWarLocation="D:/SpanInfotech/Web2.0/Flex/war/[Link]" serverContextRoot="/DatabaseTest . Etc /> //Java - [Link] package test; public class GetEmployee { public void fetchValues(String value){ [Link]("Value is ..."+value); } }

RemoteObject Cont

<!-- MXML --> <mx:RemoteObject id="vjtest" destination="vjService" result="headerRequest(event);" fault="faultValue(event)"/> <mx:Button x="10" y="20" label="Click ME" click="buttonclick();"/> <mx:TextArea id="txtareaId" x="10" y="50" text="Here we are..." /> //AS private function buttonclick():void{ [Link]([Link]); }

CSS

Advantages of the Technology

Rich set of control libraries Freesource Supports Webcam / Microphone Component size is considerably smaller Ease of develop and debug the module Reusability of modules in different application Validator components to validate data

Resources

[Link] [Link] [Link] [Link] [Link] (Flex Resource center)