SlideShare a Scribd company logo
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

http://sensaran.wordpress.com
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
http://sensaran.wordpress.com
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
http://sensaran.wordpress.com
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
http://sensaran.wordpress.com
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

http://sensaran.wordpress.com
Widest Reach in the World
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

http://sensaran.wordpress.com

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

http://sensaran.wordpress.com
What does it contain ?
Action Script
Mxml

Framework and
Class Lib..

Flex Charting
Flex data Service

http://sensaran.wordpress.com
Introducing the Flex 3 Product Line

http://sensaran.wordpress.com
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
http://sensaran.wordpress.com

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

http://sensaran.wordpress.com

SAP…
Types of Flex Apps.
Flex

Browser Application  SWF
Desktop Application  AIR

Desktop Application

Browser Application

http://sensaran.wordpress.com
“
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
http://sensaran.wordpress.com

 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

http://sensaran.wordpress.com

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)
http://sensaran.wordpress.com
How does it works

Flex Builder IDE

Flash Player

Flex SDK
MXML

Browser

Action Script

Flex Class Library

Web Server
Compile

.swf

http://sensaran.wordpress.com
Where Flex is Used
Product
Configuration

Rich Media
Applications

Line of Business
Applications

Data
Visualization

Complex, Multi-Step
Processes

Product
Selection

http://sensaran.wordpress.com
Developing RIAs…
10 reasons to
use Adobe Flex

http://sensaran.wordpress.com
# Flex delivers the Rich
Internet Application
(framework,components and
service)

http://sensaran.wordpress.com
#2 – Flex applications
overcome browser limitations
• Create a new generation of
expressive, high performance
and collaborative
online applications.

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

http://sensaran.wordpress.com
#4 – Flash Player has
widest
reach in the World
We can easily build, test and deploy

http://sensaran.wordpress.com
#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

http://sensaran.wordpress.com
#6 – Flex plays well
with others

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

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

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

http://sensaran.wordpress.com
#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.

http://sensaran.wordpress.com
#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.

http://sensaran.wordpress.com
Configure Flex plugin in eclipse
Requirements
(i) Eclipse (INDIGO)
(ii) Adobe Flex SDK (3.0.0)

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

http://sensaran.wordpress.com
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”.

http://sensaran.wordpress.com
Cont.,
 Now eclipse folder directory should be like below snap shot.

http://sensaran.wordpress.com
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.

http://sensaran.wordpress.com
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.

http://sensaran.wordpress.com
Cont.,
 Eclipse IDE will loads the welcome screen. When you will using first time.

http://sensaran.wordpress.com
Cont.,
 Go to Window -> Open Perspective -> Other

http://sensaran.wordpress.com
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.

http://sensaran.wordpress.com
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.

http://sensaran.wordpress.com
http://sensaran.wordpress.com
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
http://sensaran.wordpress.com

More Related Content

What's hot

The complete ASP.NET (IIS) Tutorial with code example in power point slide show
The complete ASP.NET (IIS) Tutorial with code example in power point slide showThe complete ASP.NET (IIS) Tutorial with code example in power point slide show
The complete ASP.NET (IIS) Tutorial with code example in power point slide show
Subhas Malik
 
Industrial training seminar ppt on asp.net
Industrial training seminar ppt on asp.netIndustrial training seminar ppt on asp.net
Industrial training seminar ppt on asp.net
Pankaj Kushwaha
 
Ibm connections docs 2 install guide
Ibm connections docs 2 install guideIbm connections docs 2 install guide
Ibm connections docs 2 install guide
Roberto Boccadoro
 
ASP
ASPASP
ASP.NET Lecture 1
ASP.NET Lecture 1ASP.NET Lecture 1
ASP.NET Lecture 1
Julie Iskander
 
Creating Dynamic Web Application Using ASP.Net 3 5_MVP Alezandra Buencamino N...
Creating Dynamic Web Application Using ASP.Net 3 5_MVP Alezandra Buencamino N...Creating Dynamic Web Application Using ASP.Net 3 5_MVP Alezandra Buencamino N...
Creating Dynamic Web Application Using ASP.Net 3 5_MVP Alezandra Buencamino N...Quek Lilian
 
Asp .net web form fundamentals
Asp .net web form fundamentalsAsp .net web form fundamentals
Asp .net web form fundamentalsGopal Ji Singh
 
Web Servers: Architecture and Security
Web Servers: Architecture and SecurityWeb Servers: Architecture and Security
Web Servers: Architecture and Securitygeorge.james
 
Web Server-Side Programming Techniques
Web Server-Side Programming TechniquesWeb Server-Side Programming Techniques
Web Server-Side Programming Techniques
guest8899ec02
 
IBM Connect 2016: 1402 - Getting Technically Cozy with IBM Connections Cloud ...
IBM Connect 2016: 1402 - Getting Technically Cozy with IBM Connections Cloud ...IBM Connect 2016: 1402 - Getting Technically Cozy with IBM Connections Cloud ...
IBM Connect 2016: 1402 - Getting Technically Cozy with IBM Connections Cloud ...
David Simpson
 
.net training | learn .net | Microsoft dot net Course | Microsoft dot net onl...
.net training | learn .net | Microsoft dot net Course | Microsoft dot net onl....net training | learn .net | Microsoft dot net Course | Microsoft dot net onl...
.net training | learn .net | Microsoft dot net Course | Microsoft dot net onl...
Nancy Thomas
 
The World Needs an Alternative to SharePoint
The World Needs an Alternative to SharePointThe World Needs an Alternative to SharePoint
The World Needs an Alternative to SharePoint
Alfresco Software
 
ASP.NET - Introduction to Web Forms and MVC
ASP.NET - Introduction to Web Forms and MVCASP.NET - Introduction to Web Forms and MVC
ASP.NET - Introduction to Web Forms and MVC
Bilal Amjad
 

What's hot (20)

The complete ASP.NET (IIS) Tutorial with code example in power point slide show
The complete ASP.NET (IIS) Tutorial with code example in power point slide showThe complete ASP.NET (IIS) Tutorial with code example in power point slide show
The complete ASP.NET (IIS) Tutorial with code example in power point slide show
 
Tutorial asp.net
Tutorial  asp.netTutorial  asp.net
Tutorial asp.net
 
Industrial training seminar ppt on asp.net
Industrial training seminar ppt on asp.netIndustrial training seminar ppt on asp.net
Industrial training seminar ppt on asp.net
 
Ibm connections docs 2 install guide
Ibm connections docs 2 install guideIbm connections docs 2 install guide
Ibm connections docs 2 install guide
 
ASP
ASPASP
ASP
 
Asp.net
 Asp.net Asp.net
Asp.net
 
ASP.NET Web form
ASP.NET Web formASP.NET Web form
ASP.NET Web form
 
Introduction to asp.net
Introduction to asp.netIntroduction to asp.net
Introduction to asp.net
 
ASP.NET Lecture 1
ASP.NET Lecture 1ASP.NET Lecture 1
ASP.NET Lecture 1
 
Creating Dynamic Web Application Using ASP.Net 3 5_MVP Alezandra Buencamino N...
Creating Dynamic Web Application Using ASP.Net 3 5_MVP Alezandra Buencamino N...Creating Dynamic Web Application Using ASP.Net 3 5_MVP Alezandra Buencamino N...
Creating Dynamic Web Application Using ASP.Net 3 5_MVP Alezandra Buencamino N...
 
Asp .net web form fundamentals
Asp .net web form fundamentalsAsp .net web form fundamentals
Asp .net web form fundamentals
 
Web Servers: Architecture and Security
Web Servers: Architecture and SecurityWeb Servers: Architecture and Security
Web Servers: Architecture and Security
 
Web Server-Side Programming Techniques
Web Server-Side Programming TechniquesWeb Server-Side Programming Techniques
Web Server-Side Programming Techniques
 
Introduction to asp
Introduction to aspIntroduction to asp
Introduction to asp
 
IBM Connect 2016: 1402 - Getting Technically Cozy with IBM Connections Cloud ...
IBM Connect 2016: 1402 - Getting Technically Cozy with IBM Connections Cloud ...IBM Connect 2016: 1402 - Getting Technically Cozy with IBM Connections Cloud ...
IBM Connect 2016: 1402 - Getting Technically Cozy with IBM Connections Cloud ...
 
.net training | learn .net | Microsoft dot net Course | Microsoft dot net onl...
.net training | learn .net | Microsoft dot net Course | Microsoft dot net onl....net training | learn .net | Microsoft dot net Course | Microsoft dot net onl...
.net training | learn .net | Microsoft dot net Course | Microsoft dot net onl...
 
The World Needs an Alternative to SharePoint
The World Needs an Alternative to SharePointThe World Needs an Alternative to SharePoint
The World Needs an Alternative to SharePoint
 
Web servers
Web serversWeb servers
Web servers
 
Learn ASP
Learn ASPLearn ASP
Learn ASP
 
ASP.NET - Introduction to Web Forms and MVC
ASP.NET - Introduction to Web Forms and MVCASP.NET - Introduction to Web Forms and MVC
ASP.NET - Introduction to Web Forms and MVC
 

Similar to Flex Introduction

Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2Shyamala Prayaga
 
Adobe flex an overview
Adobe flex  an overviewAdobe flex  an overview
Adobe flex an overview
Subin Sugunan
 
Flex 3 - Introduction
Flex 3 - IntroductionFlex 3 - Introduction
Flex 3 - Introduction
rakhtar
 
Introduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - ZaloniIntroduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - Zaloni
Joseph Khan
 
DIY Flex
DIY FlexDIY Flex
Afik Gal @alphageeks: Flex Intro
Afik Gal @alphageeks: Flex IntroAfik Gal @alphageeks: Flex Intro
Afik Gal @alphageeks: Flex Intro
Alphageeks
 
Flex and .NET Integration
Flex and .NET IntegrationFlex and .NET Integration
Flex and .NET Integration
icaraion
 
Introduction To Adobe Flex And Semantic Resources
Introduction To Adobe Flex And Semantic ResourcesIntroduction To Adobe Flex And Semantic Resources
Introduction To Adobe Flex And Semantic Resources
keith_sutton100
 
Flex3
Flex3Flex3
Flex3
SaurabhIT
 
Adobe Flex builder by elmagnif
Adobe Flex builder  by elmagnifAdobe Flex builder  by elmagnif
Adobe Flex builder by elmagnif
mbaye camara
 
Adobe flex
Adobe flexAdobe flex
Flex Rails Pres
Flex Rails PresFlex Rails Pres
Flex Rails Pres
philipsexton
 
SharePoint Framework SPFx
SharePoint Framework SPFxSharePoint Framework SPFx
SharePoint Framework SPFx
Vladimir Medina
 
Developing RIAs... 10 reasons to use Adobe Flex
Developing RIAs... 10 reasons to use Adobe FlexDeveloping RIAs... 10 reasons to use Adobe Flex
Developing RIAs... 10 reasons to use Adobe Flex
Matthias Zeller
 
Flex And Ria
Flex And RiaFlex And Ria
Flex And Riaravinxg
 
Flex RIA
Flex RIAFlex RIA
Flex RIA
rssharma
 

Similar to Flex Introduction (20)

Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2
 
Adobe flex an overview
Adobe flex  an overviewAdobe flex  an overview
Adobe flex an overview
 
Flex 3 - Introduction
Flex 3 - IntroductionFlex 3 - Introduction
Flex 3 - Introduction
 
Introduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - ZaloniIntroduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - Zaloni
 
DIY Flex
DIY FlexDIY Flex
DIY Flex
 
DIY Flex
DIY FlexDIY Flex
DIY Flex
 
Afik Gal @alphageeks: Flex Intro
Afik Gal @alphageeks: Flex IntroAfik Gal @alphageeks: Flex Intro
Afik Gal @alphageeks: Flex Intro
 
Adobe® Flex™
Adobe® Flex™Adobe® Flex™
Adobe® Flex™
 
What is Adobe Flex ?
What is Adobe Flex  ?What is Adobe Flex  ?
What is Adobe Flex ?
 
Adobe Flex
Adobe FlexAdobe Flex
Adobe Flex
 
Flex and .NET Integration
Flex and .NET IntegrationFlex and .NET Integration
Flex and .NET Integration
 
Introduction To Adobe Flex And Semantic Resources
Introduction To Adobe Flex And Semantic ResourcesIntroduction To Adobe Flex And Semantic Resources
Introduction To Adobe Flex And Semantic Resources
 
Flex3
Flex3Flex3
Flex3
 
Adobe Flex builder by elmagnif
Adobe Flex builder  by elmagnifAdobe Flex builder  by elmagnif
Adobe Flex builder by elmagnif
 
Adobe flex
Adobe flexAdobe flex
Adobe flex
 
Flex Rails Pres
Flex Rails PresFlex Rails Pres
Flex Rails Pres
 
SharePoint Framework SPFx
SharePoint Framework SPFxSharePoint Framework SPFx
SharePoint Framework SPFx
 
Developing RIAs... 10 reasons to use Adobe Flex
Developing RIAs... 10 reasons to use Adobe FlexDeveloping RIAs... 10 reasons to use Adobe Flex
Developing RIAs... 10 reasons to use Adobe Flex
 
Flex And Ria
Flex And RiaFlex And Ria
Flex And Ria
 
Flex RIA
Flex RIAFlex RIA
Flex RIA
 

More from senthil0809

First look on python
First look on pythonFirst look on python
First look on python
senthil0809
 
Enterprise search with apache solr
Enterprise search with apache solrEnterprise search with apache solr
Enterprise search with apache solr
senthil0809
 
Get started with R lang
Get started with R langGet started with R lang
Get started with R lang
senthil0809
 
Big data with HDFS and Mapreduce
Big data  with HDFS and MapreduceBig data  with HDFS and Mapreduce
Big data with HDFS and Mapreduce
senthil0809
 
Big data - Apache Hadoop for Beginner's
Big data - Apache Hadoop for Beginner'sBig data - Apache Hadoop for Beginner's
Big data - Apache Hadoop for Beginner's
senthil0809
 
Exploring Layouts and Providers
Exploring Layouts and ProvidersExploring Layouts and Providers
Exploring Layouts and Providers
senthil0809
 
Multi Touch presentation
Multi Touch presentationMulti Touch presentation
Multi Touch presentationsenthil0809
 

More from senthil0809 (7)

First look on python
First look on pythonFirst look on python
First look on python
 
Enterprise search with apache solr
Enterprise search with apache solrEnterprise search with apache solr
Enterprise search with apache solr
 
Get started with R lang
Get started with R langGet started with R lang
Get started with R lang
 
Big data with HDFS and Mapreduce
Big data  with HDFS and MapreduceBig data  with HDFS and Mapreduce
Big data with HDFS and Mapreduce
 
Big data - Apache Hadoop for Beginner's
Big data - Apache Hadoop for Beginner'sBig data - Apache Hadoop for Beginner's
Big data - Apache Hadoop for Beginner's
 
Exploring Layouts and Providers
Exploring Layouts and ProvidersExploring Layouts and Providers
Exploring Layouts and Providers
 
Multi Touch presentation
Multi Touch presentationMulti Touch presentation
Multi Touch presentation
 

Recently uploaded

The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
CatarinaPereira64715
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
Paul Groth
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Product School
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
Bhaskar Mitra
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 

Recently uploaded (20)

The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 

Flex Introduction

  • 1. Day 1. Adobe Flex Introduction. Name of Senthil Kumar presentation • Company name Srinivasan
  • 2. 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
  • 3. 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
  • 4. Most common tools – AJAX ,OpenLaszlo ,Flex /Flash, AIR , Silver Light and Java http://sensaran.wordpress.com
  • 5. 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 http://sensaran.wordpress.com
  • 6. 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 http://sensaran.wordpress.com
  • 7. 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 http://sensaran.wordpress.com
  • 8. 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 http://sensaran.wordpress.com
  • 9. Widest Reach in the World
  • 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 http://sensaran.wordpress.com 10
  • 11. 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 http://sensaran.wordpress.com
  • 12. What does it contain ? Action Script Mxml Framework and Class Lib.. Flex Charting Flex data Service http://sensaran.wordpress.com
  • 13. Introducing the Flex 3 Product Line http://sensaran.wordpress.com
  • 14. 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 http://sensaran.wordpress.com 14
  • 15. 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 http://sensaran.wordpress.com SAP…
  • 16. Types of Flex Apps. Flex Browser Application  SWF Desktop Application  AIR Desktop Application Browser Application http://sensaran.wordpress.com
  • 17. “ 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 http://sensaran.wordpress.com  Deploy to desktop with double click install  Distribute as standalone or packaged with runtime  Remember JWS? 17
  • 18. 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 http://sensaran.wordpress.com 18
  • 19. 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) http://sensaran.wordpress.com
  • 20. How does it works Flex Builder IDE Flash Player Flex SDK MXML Browser Action Script Flex Class Library Web Server Compile .swf http://sensaran.wordpress.com
  • 21. Where Flex is Used Product Configuration Rich Media Applications Line of Business Applications Data Visualization Complex, Multi-Step Processes Product Selection http://sensaran.wordpress.com
  • 22. Developing RIAs… 10 reasons to use Adobe Flex http://sensaran.wordpress.com
  • 23. # Flex delivers the Rich Internet Application (framework,components and service) http://sensaran.wordpress.com
  • 24. #2 – Flex applications overcome browser limitations • Create a new generation of expressive, high performance and collaborative online applications. http://sensaran.wordpress.com
  • 25. #3 – Flex leverages your existing skills • HTML, XML, JavaScript, Ajax, J2EE and .NET developers will be productive with Flex in no time. http://sensaran.wordpress.com
  • 26. #4 – Flash Player has widest reach in the World We can easily build, test and deploy http://sensaran.wordpress.com
  • 27. #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 http://sensaran.wordpress.com
  • 28. #6 – Flex plays well with others With XML/SOAP support and J2EE integration, Flex unifies disparate data services on the client. http://sensaran.wordpress.com
  • 29. #7 – Flex makes you (and your applications) look good • Transitions, effects, skinning and visual component states deliver immersive user experiences. http://sensaran.wordpress.com
  • 30. #8 – Flex will make you go faster • Flex transforms the developer experience - with productive coding tools, integrated debugging and automated testing support. http://sensaran.wordpress.com
  • 31. #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. http://sensaran.wordpress.com
  • 32. #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. http://sensaran.wordpress.com
  • 33. Configure Flex plugin in eclipse Requirements (i) Eclipse (INDIGO) (ii) Adobe Flex SDK (3.0.0) http://sensaran.wordpress.com
  • 34. Eclipse Installation Instruction  Download the zipped eclipse folder from http://www.eclipse.org/downloads/.  Extract the Zipped folder should have the following files http://sensaran.wordpress.com
  • 35. Flex Plugin Installation Instruction  Download the zipped Flex SDK folder from following link https://www.adobe.com/cfusion/tdrc/index.cfm?product=flex_eclipse
  • 36. 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”. http://sensaran.wordpress.com
  • 37. Cont.,  Now eclipse folder directory should be like below snap shot. http://sensaran.wordpress.com
  • 38. 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. http://sensaran.wordpress.com
  • 39. 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. http://sensaran.wordpress.com
  • 40. Cont.,  Eclipse IDE will loads the welcome screen. When you will using first time. http://sensaran.wordpress.com
  • 41. Cont.,  Go to Window -> Open Perspective -> Other http://sensaran.wordpress.com
  • 42. 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. http://sensaran.wordpress.com
  • 43. Cont.,  Now the Flex IDE is Configured with our eclipse IDE.
  • 44. 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. http://sensaran.wordpress.com
  • 46. 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