FLEX 3.0

T-111.5360 presentation

Challenge in web application

• Web vs desktop application (cons)

– Lack of client-side intelligence

– Lack of usability and responsiveness

– Lack of error checking, Validation – Lack of error checking, Validation

– Lack of event handling

– Lack of advanced controls

– Professional look and feel

– Not cost efficient to develop

– Security issue

Benefit of web application

• Easy to deploy

• Operating system independent (basic XHTML,

css, Javascript)

• Question: is it possible to merge web and

desktop application, so that we gain the

advantage of both

Solution of RIA

• Real Design pattern

• Responsiveness and interactivity

• Simplifying and improving user interaction

• Broad reach and ease of distribution• Broad reach and ease of distribution

• Better usability, complete tasks quickly and

accurately.

• Use rich data visualization to make better

decisions.

What is Adobe Flex?

• Rich internet application (RIA)

• OOP, ActionScript 3

• Creates swf files, like Flash

• For programmers rather than designers

Reusable and extendable UI components• Reusable and extendable UI components

• Data retrieval and event handling

• Flash and Flex can work together

• Integrate with animation, video and sound

• Designers and programmers can intergrate their work

What is Adobe Flex?

Why Flex?

• Human-centered UI without worrying about browser limitations

• A runtime environment with almost 100% deployment to all Internet users

• Service-oriented client (SOC)• Service-oriented client (SOC)

– enhanced usability promised

– reliable and secure connectivity to back-end systems

• High-performance, cross-platform runtime

• Enterprise data integration

• Support for disconnected computing

• High performance on data transfer

Where can Flex be used

• Business application

• Analysis report (graphical)

• Geography maps

• Web store• Web store

• Rich media application

• Mobile phone, camera, TV and etc

How Flex works? Is it free?

• Flex SDK is open source, free.

– The Flex Framework

– The standalone compiler

• What cost money?

– Flex Builder – Eclipse-based IDE

– Flex Charting – A library of interactive charting

– Flex Charting – A library of interactive charting components

– LiveCycle Data Services –built in data managment, Flex-Ajax bridge, Java Message Service adapter, enterprise.

Flex Component

� Visual� Alert, colorPicker, comboBox, grid, scrollBar,

tabBar, progressBar, etc.

� Button, checkbox, linkBar, popup, radio.

� Date, loader, menu, text, containers.� Date, loader, menu, text, containers.

� Effect� AddItemAction, blur, move, pause, rotate.

� Validators and Formatters� User input validation, date, phone, etc.

� Charts, OLAPDataGrid, Print

Designing a UI - Layout

• "Components“: mostly use built-in components and containers, but we can build our own.

• "Containers" are layout tools that position the interface widgets or data in the application.

• Components defined within a container are called • 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.

• Containers provide a hierarchical structure that lets us control the layout characteristics of child components.

Flex Event

• Events let a programmer know when the user

interacts with an interface component

• You define event listeners, also called event

handlers, in ActionScript to process events. handlers, in ActionScript to process events.

Registering an event handler in MXML

Create an inline event handler in the MXML definition

Registering an event listener through ActionScript

Positioning components

• 3 ways to position components in a Flex

application:

– Using automatic positioning viewSourceURL="src/LayoutAutomatic/index.html" viewSourceURL="src/LayoutAutomatic/index.html"

– Using absolute positioning viewSourceURL="src/LayoutAbsolute/index.html"

– Using constraint-based layout viewSourceURL="src/LayoutConstraintsBottomRight/index.html"

Flex Demo