Flex2 Intro Web20

8/8/2019 Flex2 Intro Web20

1/39

FLEXFLEX--2 Introduction2 Introduction

Web 2.0 and Rich Internet Applications

Prof. Suthikshn Kumar


2/39

ContentsContents

Building Rich Internet Applications with Flex-1 and Flex-2

Flash Player

Flex Framework

MXML

ActionScript Working with Data Services

Understanding Diff with HTML and Flex

Understanding how flex applications work

Understanding Flex and Flash Authoring

MXML Language

A simple example Using ActionScript

MXML and ActionScript correlations


3/39

Programming Flex2Programming Flex2

Chap 1: Introduction to Flex

Chap 2: Building Applications with Flex Framework Chap 3: MXML

Chap 4: ActionScript

Chap 5: Framework Fundamentals

Chap 6: Managing Layout Chap 7: Working with UI Components

Chap 12: Working with Data


4/39


5/39

FlexFlex

Flex is a collection of technologies thatenables you to rapidly build applicationsdeployed to Flash Player, a runtimeenvironment for delivering sophisticated user

interfaces and interactivity. Flex is simple and easy

It significantly lowers learning curve in that itallows you to compose applications rapidly byassembling off-the shelf components,including UI controls, layout containers, datamodels, and data communication components.

Flex 2 content relies on Flash Player 9


6/39

Flash PlayerFlash Player

Flex is a part of Adobe Flash Platform

Flex applications are deployed to Flash Player

Flash player runs all Flex applications

The popularity of Flash Player is due to : More compelling and engaging than static HTML

Flash player is capable of providing integrated solutions that utilizedata services, interactive UI design, media elements such as audioand video, and even real time communication

Drag and drop, doubel click: metaphors from desktop computing

Very small ( download < 1MB) Stability and Security

Cross platform: runs on Windows, OS X, Linux and on all majorbrowsers: firefox, IE, safari, opera


7/39

.swf format.swf format

Using flex framework, you can build and compile to

the .swf format

The .swf file is an intermediate bytecode format that

Flash player can read.

Flash Player 9 introduces a new virtual machine

called AVM2.

With AVM2, longer interpreted. Rather it iscompiled, thus runs faster.

.swf is platform independent.


8/39

Flex FrameworkFlex Framework

Written using ActionScript

Defines controls, containers and managers designed tosimplify building rich internet applications.

The Flex class library consists of following categories: Form Controls: buttons, text inputs, text areas, lists, radio buttons,

checkboxes, combo boxes

Menu controls: popup menus and menu bars

Meda components: images, audio, vide

Layout containers: User layout containers to place contents within a

screen . Build sophisticated layouts with grids, forms, boxes,canvases and more.

Data components and Data binding: connectors that simplifyremote procedure calls, data models to hold the data that isreturned, and data binding to associate form control data with datamodels.


9/39

Flex FrameworkFlex Framework

Formatters and Validators

Cursor Management: Cursor appearance is changedinorder to notify users of waiting on a response from dataservice

State Management:

Effects: Animations such as fades, zooms, blurs andglows

History management: back and forward buttons

Drag and drop management Tool tips: Add tool tips to user elements

Style Management: Directly or using CSS


10/39


11/39

Flex Builder 2Flex Builder 2

Is an official Adobe IDE for building and

debugging Flex applications

Built on Eclipse IDE Flex builder has built-in tools for

Writing

Debugging Building applications using Flex technologies

such as MXML and ActionScript


12/39

Flex ElementsFlex Elements

Flex framework includes core set oflanguages and libraries that are the basis pfany flex application.

MXML: is an XML based markup language thatdescribes the screen layout. Form controls,media playback controls, effects, transistions,data models, data binding

ActionScript: Programming languageunderstood by Flash Player. ActionScript canrespond to events such as mouseclicks.


13/39

Flex Application FrameworkFlex Application Framework


14/39

How Flex WorksHow Flex Works


15/39

Data ServicesData Services

Flex applications are generally distributed

applications

Flex applications can have :

Client tier : .swf running in Flash Player

Client tier communicates with server(s) inorder to send

and retrieve data. The server provides data services.

Data services are programs with APIs whereby

client can make a request to a method of that

program. RPC, Flash Remoting using AMF


16/39


17/39

Data servicesData services


18/39

Flex target applicationsFlex target applications

While countless types of applications can be enhanced throughRIA technology,Flex is particularly well suited for applicationswith a distinct set of characteristics, ncluding those that: Automate a multistep process, particularly where the teps are nonlinear

or recursive

Combine graphical or multimedia content with data and application logic,articularly where users must interact with data or media locally

Require server push or access to real-time streaming data, uch asoperational data or stock quote information

Must operate in a disconnected fashion, or either short or extended

periods of time Can benefit from complex client-side validation, uch as logic that

depends on previous user entries or sophisticated validation logic Involvelarge data sets, articularly where client-side data manipulation isimportant


19/39

Interactive Data VisualizationInteractive Data Visualization


20/39

Product Configuration andProduct Configuration and

SelectionSelection

For example,Harley

Davidson is using Flex

to allow customers to

configure their own

motorcycle

online. s users select amodel, ptions, nd

colors, hey can

immediately preview

the ike s

appearance and the

otal cost of their

selections.


21/39

Flex and AJAXFlex and AJAX Ajax is an acronym that stands for Asynchronous JavaScript and XML. e term was coined to describe the

use of browser technologies to deliver RIAs

Ajax is associated with a set of application design patterns as well as a variety of open source projects andcommercial products.

Flex and Ajax both promote an architecture that enables applications to take greater advantage of the clientruntime to provide richer application functionality.

As a result,the approaches used to expose business logic to Ajax clients (web services, EST APIs, and soon) re similar to those used in Flex applications.

While t is possible to develop rich clients using only client-side JavaScript and HTML (as many Ajaxvendors promote), flash Player provides additional capabilities not available in HTML,

including a high-performance, just-in-time compiled execution engine, integrated APIsfor graphics manipulation and vector drawing, and the robust, real-time messagingand integration services provided by Flex Data Services.

Also, because Flash Player is integrated with the browser runtime environment, developers can easilydeliver applications that combine user interface logic written in JavaScript with components r entireapplications written in Flex. for example, google s taking advantage of both JavaScript and Flash as part ofits Google finance site.


22/39

AJAX ad FlexAJAX ad Flex


23/39

Difference between TraditionalDifference between Traditional

(HTML ) and Flex Web Applications(HTML ) and Flex Web Applications

In traditional applications, the presentation tierconsists of HTML, CSS, JavaScript, JSP, ASP,PHP or similar documents. It is stateless and fairlynon responsive. ( exception of Ajax applications)

Flex applications generally reside embedded withinthe presentation tier. In addition, Flex applicationscan integrate with the presentation tier to createtightly coupled client side system.

Flex applications use Flash player to run

sophiscticated client tier portions of applications. Flex application cleint is stateful, responsive


24/39

How Flex Applications WorkHow Flex Applications Work

Source

Action Script

MXML

Assets ( PNG,

GIF etc.)

ActionScript +

Generated

ActionScript

Assets (PNG,

GIF)

Code Gen Flash Player

AVM2

Bytecode +

Assets


25/39

MXMLMXML

Like HTML, XML is a markup language that describes userinterfaces that expose content and

functionality. nlike HTML, XML provides declarativeabstractions for client-tier logic and

bindings between the ser interface and application data.

XML helps maximize developer productivity and application reusability by cleanly

separating presentation and business logic.


26/39

ComponentsComponents

Flex Applications are largely composed of components or modularelements.

A component is an Actionscript class or an MXML componentdocument that has been mapped to an identifier via a manifest fileso that ite can be instantiated via MXML.

There are two basic categories of Flex Framework components:Visual and non-visual

Visual Components consists of Containers: componets that can hold other components

User Interface controls: visible interface elements such as buttons,text inputs, lists, data grids

The non-visual componets consist of the following: Data components: create data structures such as arrays and

collections Utility Components: Achieve functionality such as looping

Component properties can be set using tag attributes oractionScript


27/39

MXML ExampleMXML Example


28/39

Flex ApplicationFlex Application

click event handler

mx.controls.Alert.show


29/39

MXML BasicsMXML Basics Visual TagsVisual Tags

Layout

Canvas, Form, VBox, HBox, ControlBar

Navigation Accordion, LinkBar, MenuBar, ViewStack

Controls

Button, CheckBox, ComboBox, DataGrid,

TextInput, List, Label, Tree

Charts

BarChart, PieChart, LineChart


30/39

MXML BasicsMXML Basics Misc. TagsMisc. Tags

Data Connectivity HTTPService, RemoteObject, WebService, XML

Validation

EmailValidator, DateValidator, ZipCodeValidator Effects

Zoom, Resize, Move, Fade

Style

Either inline or source set to external .css

Script Either inline or source set to external .as


31/39

MXML BasicsMXML Basics Data BindingData Binding

Glues data from source to destination

When source data changes, destination

auto-updates

Define with { and }

Use [Bindable] meta-data to mark

properties as able to be bound Explicit because performance implications


32/39

ContainersContainers

VBox is a container that automatically arranges the child elements sothey are stacked vertically


33/39

MXML to Handle click eventMXML to Handle click event


34/39

Data BindingData Binding


35/39

ActionScript BasicsActionScript Basics

Familiar syntax Similar to C++, Java, C#, JavaScript

Dynamic Language, Weak Typing Similar to ColdFusion

Variables can hold any type

Support for Strong Typing Can bind variable to specific data type

Faster code execution

Easier to develop More help from compiler

Easier to find bugs via Flash Debug Player and typeerrors


36/39

ActionScript BasicsActionScript Basics Part 2Part 2

Strong typing

Uses strict compilation mode

Enabled by default

Best practice

var value:Number;

function f( param1:String ):Number { }

The * datatype

Any type

http://www.darronschall.com/weblog/archives/00

0210.cfm


37/39

ActionScript BasicsActionScript Basics part 3part 3

Visibility Modifiers

public Accessible to anyone

private Only accessible inside the class (current

.mxml file)

protected

Accessible inside the class and subclasses

internal Only accessible to classes in the same

package

Default value (when visibility is omitted)


38/39

ActionScriptActionScript

ActionScript is the object-oriented programming language used forFlexdevelopment.

Like JavaScript,ActionScript 3.0 is an implementation of ECMAScript,theinternational standardized

programming language for scripting.

However, because it is an implementation of the latest ECMAScript proposal,actionScript provides many capabilities not common in the versions of JavaScript

supported by most browsers. At development time, actionScript 3.0 adds support for strong

typing,interfaces,delegation,namespaces,error handling,and ECMAScript for XML(E4X).

At runtime,the most significant difference between JavaScript and ActionScript isthat ActionScript is just-in-time compiled to native machine code by Flash Player.

As a result, it can provide much higher performance and more efficient memorymanagement than interpreted JavaScript.

Flex developers use ActionScript to write client-side logic, such as event listenersand call-back functions, r to define custom types for the client application.


39/39

SummarySummary

Basics of Flex

Texhnologies and products that are used forcreating Flex applications

Flex 2 consists of a framework ( a classlibrary) and a compiler that allow you to

rapidly create Flex applications. These applications are .swf files which you

can run using Flahsh Player 9

Documents

Flex2 Intro Web20