Flex Introduction

Day 1.
Adobe Flex Introduction.
Name of
Senthil Kumar
presentation
• Company name
Srinivasan

Road Map

Rich Internet Application

How does it works

RIA - Architecture

Why we need to Use Flex

About Flex
Introducing the Flex 3 Product
Line
Flex -Designer / Developer

Flex and Eclipse Integration

RIA – Rich Internet Applications
• Rich Internet Application ( RIA ) is an web based application that
function as desktop application.
• It generally split the process that is User Interaction and related
activity will be on the client side
• Data Manipulation/Operation on the Application Server side.
• What we need to follow
 More connected
 More alive
 More Interactive
 More Responsive

http://sensaran.wordpress.com

3

Most common tools – AJAX ,OpenLaszlo ,Flex /Flash,
AIR , Silver Light and Java


RIA Architecture

Html

Services

Rich Internet Application

Browser
Presentation
Logic

Network

App
Logic

Data Access
Layer

DB

Ease of Use
Enhanced User Experience
Reduced Server Load
Lost Data
Light Weight
Faster Processing time

Anatomy of a Rich Internet Application
Menus & NavigationControls

Bi-Directional
Audio & Video
Data
Visualization &
Collaboration

Real Time
Data Push
& Alerting

Resizable
Views/Effects/
Transitions

Chat

Rich Data Entry

Mapping,
Geo-Coding,
Annotations &
White
boarding

Data
Synchronization
& Conflict
Resolution

Offline

Where did it came from – Flash Back
Early 1990’s.

1.Flash was first originated by
SmartSketch Application

Flash

Smart
Sketch

2. In 1995 it was acquired by
Macromedia and it called as
Flash .
3. In 2004 it was acquired by
Adobe Systems in the same year
they had released the Adobe
Flex 1.0
Drawing Application using pen
computer
by
Pen point OS

Where did it came from

Flex 1.0 & 1.5 (2004 Macromedia)
Primarily for enterprise market, Flex Builder IDE based on Dreamweaver

Flex 2 (2006 Adobe)
Flex SDK was free (compiler + class library), AS3 and Flash Player 9, Flex
Builder based on open source Eclipse platform.

Flex 3 (2008 Adobe)
Flex 3 SDK open sourced, Flex Builder enhancement, AIR

Flex 4 (2009 – present, Adobe)
Biggest change in skinning and component architecture- sparks, targets
flash player 10


What is Flex?
• Client-side, deployed as Flash .swf
• Flex Framework
– MXML (Macromedia XML)
• Declarative language to
define User Interface
• Similar to XHTML
– User Interface Components
• Buttons, ComboBoxes,
Layout Managers,
Containers, Effects
– Class Libraries
• Everything in the mx.*
packages
• Validation Routines, Web
Services, DataTypes

Expressiveness

Rich Media
Performance
Real Time
Desktop and Offline


10

It’s a standards-based language and programming
model that supports common design patterns.
works with Adobe Air
create desktop applications
Browser-less runtime for RIA’s
Adobe AIR (Apollo)
Adobe Integrated Runtime
versatile runtime environment
allows use of Flash, Actionscript or HTML
and JavaScript code


What does it contain ?
Action Script
Mxml

Framework and
Class Lib..

Flex Charting
Flex data Service


Introducing the Flex 3 Product Line


Flex vs. Flash
•
•
•
•

Flex evolved from Flash
Flash was a complete animation tool
Flex is a development platform
Output of Flex is a compiled SWF file
Flex Builder (and SDK)

Flash Authoring

Library

AS2

AS3

Flash Compiler

MXML

CSS

Flex Compiler

SWF

14

Where does Flex fit in?
DESIGN &
DEVELOPMENT
TOOLS

CLIENT APPLICATION TIER

Flash Player

Creative
Suite
Flash
Professional

Browsers

HTTP/S, Sockets, AMF, RTMP,
SOAP, WS*, SMTP, REST, …

Flash
Catalyst
Flash
Builder

AIR

SERVICES TIER

Flex
Framework

Flash Platform Flash Media
Services Server Family

RESOURCE TIER

EIS

Databases

Directories

LiveCycle

3rd Party
Services

ECM
Repository

Message
Queues


SAP…

Types of Flex Apps.
Flex

Browser Application  SWF
Desktop Application  AIR

Desktop Application

Browser Application


“
12/27/2013

What’s AIR™?
 .air Packages

Adobe Integrated Runtime
(AIR) is a cross-platform
runtime that allows you to
leverage your existing web
applications skills to build
and deploy Rich Internet
Applications (RIAs) to the
desktop

 Deploy to desktop
with double click
install
 Distribute as
standalone or
packaged with
runtime
 Remember JWS?

17

Flex for designers
•
•
•
•

MXML ~ HTML, Actionscript ~ Javascript
CSS support/Runtime skinning support
States Management
Layout/Navigation
– Canvas, Form, VBox, HBox, ControlBar, Accordion, LinkBar,
MenuBar, ViewStack
• Controls
– Button, CheckBox, ComboBox, DataGrid, TextInput, List, Label,
Tree
• Charts
– BarChart, PieChart, LineChart


18

Flex for developers
• Actionscript ~ Javascript + Java.
• MXML ~ Actionscript
• Familiar syntax
– Similar to C++, Java, C#, JavaScript
• Dynamic Language, Strong/Weak Typing
– Variables can hold any type
– Can bind variable to specific data type
• Visibility Modifiers
– Public - Accessible to anyone
– Private - Only accessible inside the class (current .mxml or .as)
– Protected - Accessible inside the class and subclasses
– Internal - Only accessible to classes in the same package
• Default value (when visibility is omitted)

How does it works

Flex Builder IDE

Flash Player

Flex SDK
MXML

Browser

Action Script

Flex Class Library

Web Server
Compile

.swf


Where Flex is Used
Product
Configuration

Rich Media
Applications

Line of Business
Applications

Data
Visualization

Complex, Multi-Step
Processes

Product
Selection


Developing RIAs…
10 reasons to
use Adobe Flex


# Flex delivers the Rich
Internet Application
(framework,components and
service)


#2 – Flex applications
overcome browser limitations
• Create a new generation of
expressive, high performance
and collaborative
online applications.


#3 – Flex leverages
your existing skills
• HTML, XML, JavaScript,
Ajax, J2EE and
.NET developers will be
productive with
Flex in no time.


#4 – Flash Player has
widest
reach in the World
We can easily build, test and deploy


#5 – vector drawing
and two way audio/video
integration
Cross-platform vector drawing
API Integrated two-way audio/video
Advanced communication protocols
Performance Flash Player External API


#6 – Flex plays well
with others

With XML/SOAP support and J2EE
integration, Flex unifies disparate
data services on the client.


#7 – Flex makes you
(and your applications)
look good
• Transitions, effects, skinning
and visual component states
deliver immersive user experiences.


#8 – Flex will make
you go faster
• Flex transforms the developer
experience - with productive
coding tools, integrated debugging
and automated testing support.


#9 – Flex makes it easier
to work with data
• Data synchronisation,
offline storage, publish/subscribe
messaging and real-time
data push for
“data-rich” applications.


#10 – You can build
flex applications for free!
• Compile and deploy Flex
applications at no cost with
the Flex 2 SDK…
download it from Adobe.com.


Configure Flex plugin in eclipse
Requirements
(i) Eclipse (INDIGO)
(ii) Adobe Flex SDK (3.0.0)


Eclipse Installation Instruction
 Download the zipped eclipse folder from http://www.eclipse.org/downloads/.
 Extract the Zipped folder should have the following files


Flex Plugin Installation Instruction
 Download the zipped Flex SDK folder from following link
https://www.adobe.com/cfusion/tdrc/index.cfm?product=flex_eclipse

Configure Flex SDK in eclipse
 Go to Eclipse directory create the folder should be named as “links”.
 Inside links folder create “link” file name, that file name should be named
as “com.adobe.flexbuilder.feature.core.link”.

 The newly created file, should have the extension as a “link”.


Cont.,
 Now eclipse folder directory should be like below snap shot.


Cont.,
 Open the link file (com.adobe.flexbuilder.feature.core.link) using notepad
or some editor.
 In the editor you need to paste the Adobe Flex SDK director path. We
should need the file path like below
path=C:/Program Files/Adobe/Flex Builder 3 Plug-in(Let me

consider that, I have a Flex SDK in the above path).
Save & Close the file.


Cont.,
 Click “eclipse.exe”.
 When you open the eclipse IDE in first time, it will ask you to create the
workspace directory.
 Create workspace and click OK.


Cont.,
 Eclipse IDE will loads the welcome screen. When you will using first time.


Cont.,
 Go to Window -> Open Perspective -> Other


Cont.,
 We will get dialog box , when clicked the Other… option is available in the
Window menu. Now we will be able show a Flex Development Perspective.


Cont.,
 Now the Flex IDE is Configured with our eclipse IDE.

Flex SDK Configuration
 Click Window -> Preferences
 The Preference window dialog box will be appear.
 We will find the Flex -> Installed Flex SDK’s Option is In the left navigation

menu of the preference dialog box.
 Click Add button in the Right side.
 Give Adobe Flex SDK Location Path and name.
 The snap shot is in the following slide.
 Now we can type the flex code, compile(Build) and run using Eclipse IDE.


Flex Builder 3 Installation Instruction
Download the Flex builder 3 exe file using the below link
http://download.macromedia.com/pub/flex/flex_builder/FB3_
win.exe

Flex Introduction

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Flex Introduction

Similar to Flex Introduction (20)

More from senthil0809

More from senthil0809 (7)

Recently uploaded

Recently uploaded (20)

Flex Introduction