Adobe Flex Overview and Developing RIA Application using Flex - Day 1

8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1

1/32

Adobe Flex Overview and Developing RIA Application using Flex Day 1

Presented by Web 2.0 CoE (NTDG)

CONFIDENTIAL

September, 2009


2/32

- 2 -INTERNAL

Agenda

Flex SDK and Builder

Adobe Flex Overview

Working of Flex

Creating Flex Project

Data Binding

Demo / Assignment

Flex Components

Event Handling

MXML / Action Script


3/32

- 3 -INTERNAL

Introduction

Adobe Flex is a software development kit released by Adobe Systems for thedevelopment and deployment of cross-platform rich Internet applications based on the

Adobe Flash platform.

The initial release in March 2004 by Macromedia included a software development kit, anIDE, and a J2EE integration application known as Flex Data Services. Since Adobeacquired Macromedia in 2005, subsequent releases of Flex no longer require a license forFlex Data Services, which has become a separate product rebranded as LiveCycle DataServices.

In February 2008, Adobe released the Flex 3 SDK under the open source Mozilla PublicLicense. Adobe Flash Player, the runtime on which Flex applications are viewed, andAdobe Flex Builder, the IDE built on the open source Eclipse platform and used to buildFlex applications, remain proprietary.


4/32

- 4 -INTERNAL

Flex Architecture


5/32

- 5 -INTERNAL

Flex Architecture Cont

Flash and Flex frame works are used for creating applications. Flash player and AIR are

the runtimes for the compiled flash and flex application and are integrated to the browser

and desktop, respectively.

Flex technology provides developers with a frame work of extendable classes and an IDE

called Flex Builder which allow programmers to quickly build RIA using the Action Script

and MXML programming language

Flex provides users with a frame work of classes, including visual components, and two

programming languages ; MXML for the visual layout and ActinScript for the business

logic.

Flex is more concentrated to wards Developers where Flash for designers.


6/32

- 6 -INTERNAL

MXML and ActionScript

XML/HTTPREST

SOAP Web Services

How Flex Works

Browser

J2EE Application Server

LC Data Services

Flash Player

Web Server

Existing Applications and Infrastructure

Flex Builder IDE

Flex SDK

MXML ActionScript

Flex Class Library

.swf

Compile

.swf

HTTP/S AMF/S RTMP/SSOAP

Adobe AIR


7/32

- 7 -INTERNAL

Flex Application Process Cont

MXML and Action Script Code in a Flex Application, are translated into ActionScript and

then also compiled into .SWF file.

Once the .swf file is placed on the server user can request the application from the server.

Flex application can also dynamically request data.

The request will go through the application to the database, back to the application server

and then finally to the browser.

Flash and Flex can also work together. One can develop application in flash compile them

into .swf file and can integrate it with flex framework.


8/32

- 8 -INTERNAL

Flex Builder

Adobe flex framework is available for free in an open source SDK that includes extensive

Action Script 3 and MXML class libraries.

Adobe Flex SDK

Free

Rich AS3 and MXML class libraries

Pre-built components

Compiler for creating swf. Adobe flex builder

Contains everything in SDK

Accelerated design , development, testing


9/32

- 9 -INTERNAL

Flex Builder Cont...

Flex Builder has two versions

Standard

Professional

Flex 3 builder is available for 60 days trial and the professional version has the all thefeatures of standard version with rich charting dashboards and advance DataGrid options.

The flex builder work bench contained the following

Menu bar

Toolbar

Views

perspective


10/32

- 10 -INTERNAL

Flex Builder Image


11/32

- 11 -INTERNAL

Flex Builder Cont...

Flex navigator shows the projects and associated files.

The main coding area is called the editor. The editor has two views source and design. In

design mode all the properties of a component can be explored.

The outline shows all the components associated with the project.

You can create your won workspace and switch workspace. Flex builder provides views asflex development/debugging etc

Demo Example 1 (Creating New Project).


12/32

- 12 -INTERNAL

Creating New project

Create your own workspace to work. A simple flex project has the follwong folder structure

Bin-debug

Html-template

Libs

Src

In the main folder structure in the workspace .settings folder contains the mainconfiguration files.

The bin-debug folder is where the complied swf file and related application files arecreated. In html-template the html wrapper page resides

The libs folder is for any optional classes that are needed by the application

Src file is where the main source files and other assets are placed.


13/32

- 13 -INTERNAL

Flex Components

The inbuilt components that are available with flex builder are

Visual components

Containers

Navigators

DataGrid and Charts

Validators and formatters

All the components are available in the outline view in the design mode. One can choose

the desired components and drag them on to the application.


14/32

- 14 -INTERNAL

Visual Components

These components contains

General controls

Button controls

Date controls

Loader controls

Menu controls

Text controls

Repeater controls

We can use the prebuilt visual components included with Flex, extend components to add

new properties and methods, and create components as required by application.


15/32

- 15 -INTERNAL

Components Cont

Point of reuse in the Flex Framework for UI components

Mostly written in AS but can be created in MXML

Skinable through CSS


16/32

- 16 -INTERNAL

Components Cont

Characteristics of visual components:

Size : Height and width of a component. All visual components have a default size.

we can use the default size, specify own size, or let Flex resize a component aspart of laying out the application.

Events: Application or user actions that require a component response. Events

include component creation, mouse actions such as moving the mouse over a

component, and button clicks.

Styles: Characteristics such as font, font size, and text alignment. These are the

same styles that we define and use with Cascading Style Sheets (CSS).

Behaviors: Visible or audible changes to the component triggered by an

application or user action. Examples of behaviors are moving or resizing acomponent based on a mouse click.

Skins: Classes that control a visual component's appearance.


17/32

- 17 -INTERNAL

Introduction to MXML

MXML is a xml based tag library or xml Markup language. The source view of the

application provides you with a bunch of code with different tags.

MXML is used mainly to declarative lay out the interface of applications, and can also be

used to implement business logic and internet application behaviors.

Like HTML, MXML provides tags that define user interfaces. MXML is more structured

than HTML, and it provides a much richer tag set.

You can write MXML code in plain text file or in a IDE.


18/32

- 18 -INTERNAL

Simple MXML Code

1.

2.

3.

4.

7.

9.

10.


19/32

- 19 -INTERNAL

Flex Application Structure

Flex application / MXML application in a single file or multiple files. Main file is defined

inside file. Additional files (Action Script or MXML files) can be accessed

or referenced from the main application.

Best practice is to divide the application in to smaller modules depending on their discrete

work. Call or load the module with appropriate user action or events. Modular archiotecture

has the following advantages

Ease Of development

Re usability

Maintainability.


20/32

- 20 -INTERNAL

Action Script

ActionScript is the programming language for the Adobe Flash Player and Adobe AIR

run-time environments.

Is a Object Oriented Programming.

ActionScript is executed by the ActionScript Virtual Machine (AVM), which is part of

Flash Player and AIR. ActionScript code is typically compiled into bytecode format by a

compiler. The bytecode is embedded in SWF files, which are executed by Flash Player

and AIR.

Some of the data types user in AS3 are

String: a textual value, like a name or the text of a book chapter

Numeric: ActionScript 3.0 includes three specific data types for numeric data:

Number: any numeric value, including values with or without a fraction int: an integer (a whole number without a fraction)

uint: an "unsigned" integer, meaning a whole number that can't be negative

Boolean: a true-or-false value, such as whether a switch is on or whether two

values are equal


21/32

- 21 -INTERNAL

Action Script Cont...

Flex developers use ActionScript to implement custom behaviour with in the flex

application.

Simple script block can be implemented in the application file using the block.

For complex or modular files the can be moved to indivitual AS files.

1.

2.

3. 4.

5.

6. Private function test():void {

7. }

8. ]]>

9.

10.

11.


22/32

- 22 -INTERNAL

Handling Events

An event-handling system allows programmers to respond to user input and system

events in a convenient way. Events can be of any type

Simple mouse Event, Keyboard event

Complex data manipulation events

In Action Script 3.0, each event is represented by an event object, which is an instance of

the Event class or one of its subclasses

Event handling in flex

Step 1: When application detects an event(Mouse click) , it create event object

to represent that particular event.

Step 2: the Event object is dispatched to the target event.

We can "listen" for event objects in code using event listeners. Event listeners are thefunctions or methods that is written to respond to specific events.


23/32

- 23 -INTERNAL

Handling Events Cont...

A simple event listener code will look as follows

Example

function eventResponse(eventObject:EventType):void

{

// Actions performed in response to the event go here.

}

eventTarget.addEventListener(EventType.EVENT_NAME, eventResponse);

Event Object Event SpecificConstant

Event target


24/32

- 24 -INTERNAL

Data Binding

Data binding is the process of tying the data in one object to another object. It provides a

convenient way to pass data between the different layers of the application.

Data binding requires

Source property

Destination property

A triggering event ( dynamic binding)

Flex provides three ways for data binding

the curly braces ({ }) syntax in MXML

the tag in MXML

the BindingUtils methods in ActionScript
http://z/COE/Assets/langref/mxml/binding.htmlhttp://z/COE/Assets/langref/mx/binding/utils/BindingUtils.htmlhttp://z/COE/Assets/langref/mx/binding/utils/BindingUtils.htmlhttp://z/COE/Assets/langref/mxml/binding.html


25/32

- 25 -INTERNAL

Data Binding Cont...

(Option 1)

(Option 2)

The curly braces syntax and the tag both define a data binding at

compile time. We can also use Action Script code to define a data binding at run time

using Bindingutils.


26/32

- 26 -INTERNAL

Data Binding Cont...

import mx.binding.utils.*; // Define data binding.

public function initBindingHandler():void {

BindingUtils.bindProperty(myText, "text", myTI, "text"); }

]]>


27/32

- 27 -INTERNAL

[Bindable] Metadata tag

[Bindable] metadata tag is used to signal flex to perform copy from the source to

destination and overwrite the latest value on the destination.

[Bindable] metadata tag must be used to register the property with in flex and the source

property must dispatch an event.

The syntax is:

[Bindable][Bindable(event="eventname")]

[Bindable] metadata can be used in following places:

Before a public class definition.

Before a public, protected, or private property defined as a variable to make that

specific property support binding.


28/32

- 28 -INTERNAL

Flex Builder Controls

Controls are userinterface components or visual components as button, textarea,

checkbox..etc.

All the controls are kept inside a container it may be the application container or a form

container or some other container.

Flex controls are Action Script objects derived from the flash.display.Sprite and

mx.core.UIComponent classes

All the controls have some common properties as

Sizing controls: specifying the height and width

Positioning controls: specifying the x and y position

The appearance of a control can be changed by using styles (CSS) depending on useractions.


29/32

- 29 -INTERNAL

Examples of Controls

Button controls

Image in a button control

Button bar controls

Link bar control

Tab bar control

Check box and radio button control

All the controls are present in the outline of the flex builder.

SWF loader is a special control which lets load one flex application in to another flex

application as a swf file.

Image controls is used to embed image in to the application.


30/32

- 30 -INTERNAL

Demo Example 1

In this demo we will cover:

Creating a new flex project/switching workspace

Exploring the components

Working in design mode in flex builder

Designing a simple login form using the component

EXERCISE

Create a new flex project. Build a registration form for a xyz company. Having thefollowing field.

User name, password, confirm password, role of the employer (drop down HR,

admin, developer), DOB, about me test field, register button,

All fields should be correctly aligned and should be inside a form.

Alert success when user provides the correct user name and password


31/32

- 31 -INTERNAL

Your Turn! (Q&A)


32/32

32

Adobe Flex Overview and Developing RIA Application using Flex - Day 1

Documents

Transcript of Adobe Flex Overview and Developing RIA Application using Flex - Day 1