Adobe Flex Ria

8/3/2019 Adobe Flex Ria

http://slidepdf.com/reader/full/adobe-flex-ria 1/36

The Adobe Flex Framework



Contents

• Rich Internet Applications

• Why Flex

• Flex Framework

• Flex Products

• How Flex works

• Components



Why we are interested in Dynamic Graphics

To clearly disseminate statistical data as knowledge such that it should beevidently presentable on Web.

• Graphics that help us to understand and digest knowledge in a simpleand 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 informationin more detail, if so required.

Rich Internet Applications (RIAs)



Why FLEX?

When accessing the Web these days, people expect a universal experience – regardless of what operating system or browser they use. Since commercialRich Internet Applications (RIAs) cost a lot to build such applications, itmatters 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 Adobe‟s development toolset that enables developers to create expressive RichInternet 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-builtcomponent and a command-line complier. Users can develop and deployFlex 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 interactiveeasy debugging, and visual components. It also promotes goodmaintainable coding practices. This helps users to quickly build RIAsusing the ActionScript and MXML.

Unlike PHP, ColdFusion, ASP.NET, and JSP applications, Flex applicationsare run on the client-side, and not on the server.



The Adobe Flex suite represents following major products:

Flex SDK – A compiler that turns source code into SWF (FlashPlayer) files (FREE!)

Flex Builder – A GUI built on the Eclipse platform that allowsdevelopers 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 itsthree best-known dialects, JavaScript, ActionScript, and JScript.

Flex Products



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.



You do not necessary need to add any server software to your web-server 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.

Do I need to install any server software?



Eclipse View



• When project is created, Flex Builder will setup your development environment.

• You will then be presented with a blank Application template.

Project Properties

<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;

fieldLbl.text = "Enter Name";

fieldLbl.setStyle("color","#234567");

this.addChild(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 is Flex XML-based tag library. MXML for visual layout.

Flex developers will use the XML-based tag library MXML programminglanguages to build the user-interface visual layout. The components of MXML are MXML files that you import by using MXML tags from withinother MXML files. An important use of MXML components is to extendexisting Flex component by adding new functionality.

MXML components

Acronym Definition

MXML Macromedia Flex Markup Language

MXML Maximum Experience Markup Language (Macromedia)

MXML Magic eXtensible Markup Language



• 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 API‟s generally in the form of classes.

• There are three tiers of AS API‟s:1) Flash Player APIs2) Flex Frame work APIs

3) Custom APIs

ActionScript (AS)



ActionScript (AS)

You have four basic options to place the code:

1) Inline within MXML tags – which appears with in the MXML tags

2) Nested with in MXML tags – you can nest the values for event handlers.

You must place the code with in the CDATA block.3) In MXML scripts – place a code within an MXML script.

4) ActionScript classes – These are the most sophisticated and powerfuluse of ActionScript.



MXML

Components are implicitly initialized when the user runs theapplication.

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 explicitcall to the initAddControl() function when the user runs the application.

You need to add an initialize listener to the application object to callthe function that adds the components (initialize=„initAddControl()‟) .

You need to explicitly attach the components to application object(this.addChild(saveButton))

MXML vs ActionScript 3.0



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 codeis 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 upbased on user request. This makes Flex application completely cross-platform.

How do I build Flex applications?



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 thecontainer 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 formonitoring the download progress of the main application, gathering the list of runtimeshared libraries and starting to download them.

Application Instance: Application object begins to start up and the user can start to interactwith it.



Designing a UI - Layout

Flex's built-in MXML components and containers

Components (also called controls) are interface widgets that areeither 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 ordata 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 thelayout 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 theApplication container



At the root of a Flex application is a single container, called the Applicationcontainer, that holds all other containers and components. The Applicationcontainer lays out all its children vertically by default (when the layoutproperty 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 theapplication to the right in the specified order. absolute - Absolute positioning does no automatic layout and requires youto explicitly define the location of each child component.

Application Container

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 FlexStart.mxml file to begin layingout 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 orderthey 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 objectswithin them.

– Sub-item‟s percentages are based on 100%, not screen real-estate.

• VDividedBox, HDividedBox allows for visible handle that the user can dragto 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 tovertical (default), horizontal or absolute.



Any user interaction with your application can generate events. You

can handle these events in your code by adding an eventhandler.

Event handlers / listeners are the functions or methods that youwrite to respond to specific events.

The Flex framework provides many built-in Flex events, which aredivided into two types of events:

User events are fired as users interact with the applicationEx: 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 addeddynamically, or when data is returned from an external datasource.

Flex Events



Drag and Drop provides flexible set of characteristics that let you control

and configure components that are necessary to meet yourapplication's requirements.

The list-based controls have built-in support for drag-and-drop feature, butyou can use drag-and-drop with any Flex component. To support dragand drop operations with components, you must handle the drag anddrop events.

Drag and Drop Usage



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 anddisplayed 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

Displaying lists of items



Item Renderers - Each list-based control has a default item renderer. Thereare 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 inheritfrom the List control



MXML / AS define non-visual aspects of an application, such as access to

server-side data sources. Data access components bring data from varioussources (PHP, Adobe ColdFusion, Microsoft ASP.NET and Java) using remoteprocedure calls into your Flex application and check its integrity, and howbest to display and interact with it.

Three types of Flex data access components (RPC services):

The MXML components that provide data access are called RPCcomponents. 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).

Accessing Data using RPC services





<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute” initialize=“fruitId.send() “ />

<mx:HTTPService id=“fruitId" useProxy="false" method="POST” url=“FruitData.xml" resultFormat="e4x"

result=“fruitRSHandler(event);" fault=“fruitFaultHandler(event);" />

//AS

private function fruitRSHandler(event:ResultEvent):void{

var frtsXML:XML = evt.result as XML;

}

private function fruitFaultHandler(evt:FaultEvent):void{Alert.show("ERROR..."+evt.fault.message);

}

HTTPService





<mx:WebService

id="blogService"

useProxy="false"wsdl="http://10.11.201.70:8080/Service/EmpPersonalInfo?wsdl">

<mx:operation name="getAllEmpInfo"

resultFormat="object"

result="bsResultHandler(event);" ></mx:operation></mx:WebService>

WebService

http://10.11.201.70:8080/Service/EmpPersonalInfo?wsdl

http://10.11.201.70:8080/Service/EmpPersonalInfo?wsdl



//In remoting-config.xml specify the Java class file

<destination id="vjService" >

<properties><source>test.GetEmployee</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/blazeds.war"serverContextRoot="/DatabaseTest“ …. Etc />

//Java - GetEmployee.java

package test;

public class GetEmployee {public void fetchValues(String value){

System.out .println("Value is ..."+value);

}

}

RemoteObject





<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{

vjtest.fetchValues(txtareaId.text);

}

RemoteObject Cont…



CSS



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

Advantages of the Technology



http://www.adobe.com/products/flex/

http://learn.adobe.com/wiki/display/Flex/Getting+Started

http://www.adobe.com/devnet/flex/videotraining/

http://www.adobe.com/products/flex/systemreqs/

http://www.flex.org (Flex Resource center)

Resources





http://www.flex.org/

http://www.flex.org/

Documents

Adobe Flex Ria