Upload
stefano-virgilli
View
113
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems. While Flex applications can be built using only the free Flex SDK, developers can use Adobe® Flex® Builder™ 3 software to dramatically accelerate development.
Citation preview
ADOBE FLEX 4
Peter Andreas Moelgaard
About Me
Adobe Certified Professional (Flex)
About Me
Adobe Community Professional (Flex)
About Me
Adobe Advisory Board for Flash Builder
Adobe Advisory Board for Flash Catalyst
Adobe Advisory Board for Flex SDK
About Me
I’m Peter Andreas Moelgaard I’m 35 years old I’m
About Me
Adobe MAX Award x 2 (2008) Adobe MAX Award Semifinalist (2009) Author of Flash Catalyst 2.0 Unleashed
(Addison Wesley, 2011)
Agenda Introduction to Flex
First Things First - What Is Flex ?How Does Flex Work ?What Can You Do with Flex ?The Flex Ecosystem
Build your First Application (Bootcamp)Build the User InterfaceConnect to DataCreate PagesCode Your Interactions
About Me
Twitter: @petermoelgaard Blog:blog.petermoelgaard.com
Introduction to Flexbefore we get our hands dirty…
Introduction to RIA’s
Rich Internet Applications (RIA) are desktop-like applications running in the browser.Overcome many limitations of traditional web technologies:Stateless architectureUser interaction is mostly point-and-clickNon-responsive (click > load > wait > click >
load > wait > ...)
Introduction to RIA’s
BenefitsRich user experience, like desktop applicationsNo cumbersome installations, or upgradesSingle point management, leading to the concept
of Software as a Service (SaaS)
Introduction to RIA’s
Engaging, informative, self-service-oriented RIAs encourage customers to Stay on your site longer Explore more options Complete more online transactions Spend more money Recommend the site to others Return more often
Introduction to RIA’s
Well-designed customer-facing RIAs can Increase online sales up to 30%* Increase conversions, cross-channel sales,
and upsells by up to 40%* Reduce contact center / telephone agent
calls up to 20% annually*
* Forrester: “The Business Case for Rich Internet Applications” (Ron Rogowski, March 12, 2007)
Introduction to RIA’s
“…even modest improvements in online customer experiences can boost revenue gains by $117 million to $311 million per year -- due to additional purchases, reluctance to switch, and likelihood of recommending to colleagues and friends.”
Forrester “Customer Experience Boosts Revenue” by Bruce D. Temkin, June 22, 2009
First Things First - What Is Flex ?
Flex is an open source software development toolkit for building Rich Internet Applications (RIAs) on the Flash Platform.
To build a Flex application, you write object-oriented code using ActionScript 3, MXML and CSS languages.
The Flex SDK includes a compiler, debugger, profiler and hundreds of ready-to-user components and ActionScript classes that accelerate development.
First Things First - What Is Flex ?
To help us rapidly develop applications and content using the Flex framework, Adobe offers an Eclipse based IDE.
Adobe Flash BuilderIt includes support for intelligent coding,debugging, visual design as well aspowerful testing and monitoring tools.
Alternative IDEsFDT, FlourineFX, FlashDevelop,Amethyst, FlexBean, etc.
How Does Flex Work ?
Flex source code is first compiled into ActionScript classes and then eventually Flash bytecode, which is executed at the client side by the ActionScript Virtual Machine in Adobe Flash Player or Adobe AIR.
Flash Flex
ActionScript
Flash Platform
What Can You Do With Flex ? You can use Flex to build anything from
multimedia-rich consumer experiences to functional line-of-business applications that run behind the firewall.
You can use Flex to deliver an entire application experience, or you can embed Flex-based components and widgets within existing HTML websites.
You can use Adobe AIR to run an enhanced, standalone version of your application across Windows, MAC OS X, Linux and Android operating systems.
RIAs help businesses save money by enhancing employee productivity
Used internally, RIAs can help the enterprise Unite key data from disparate sources Increase employee productivity Reduce data entry time up to 40% Improve accuracy Save time Reduce operating expenses
Common use cases for RIAs across various industries
Customer self-service applications Intuitive, guided self-service applications lower
costs, increase visibility and usage while increasing overall customer satisfaction
Guided selling applications increase ASP and revenues, while reducing errors and returns driving down costs
Data visualization Rich, interactive data visualization simplifies
complex data and leads to faster decision making
Dashboards enable real time pulse of critical business metrics
NASDAQ
Challenge Manage and deliver trading data in
relevant, interactive ways Give users instant insight into extremely
detailed trading activity in the market at any time during the day
Solution: Market Replay RIA Adobe AIR Adobe Flex Amazon S3
Results Delivers valuable data analysis at a lower
cost to everyone involved Enables investors and brokers to replay
market events and review historical data in simulated real-time
“There’s no doubt that working in Adobe AIR is a huge benefit. The ability to process trading data on the desktop enables NASDAQ to deliver valuable data analysis at a lower cost to everyone involved.”
Randall Hopkins Vice president, NASDAQ Market Data
Enabling stock market participants to replay, understand, and explain market events at any point in time
SAP
Challenge Accelerate new product innovation and
user adoption of Business Intelligence (BI) tools through dynamic, impactful user experiences
Solution: Xcelsius software Adobe AIR Adobe Flash Builder Adobe LiveCycle Data Services ES
Results Accelerated product development from
years to months Improved BI analysis Drove increased adoption of BI
solutions across enterprises
Transforming business data into rich, interactive dashboards and data presentations– without programming
“With BI tools based on the Flash Platform, business users can quickly access and analyze enterprise data to better understand the business without assistance from IT or business analysts.”
James ThomasVice President of Product Marketing, SAP
BusinessObjects
FedEx
Challenge Improve customer access to
shipment tracking information, online as well as on the desktop
Solution Adobe AIR Adobe Flex
Results Delivered consistent customer
experience online and offline Enabled easy-to-use, always on,
branded tracking method Increased development productivity
by almost 50%
All external content and images pending approvals.
Connecting customers to shipment tracking information online and offline
“… individual shippers, consignees, and small businesses will benefit most from the new, easy-to-use Adobe AIR application because they will have immediate access to critical information about their shipping and supply chain activities.”
Aitza Anderson, product manager, FedEx
The Flex Ecosystem
Flex
ColdFusion
Flash Media Server Family
Flash PlatformServices
AIR
Flash Player
Flash Builder
FlashCatalyst
FlashProfessional
Creative Suite Analytics &Optimization
TOOLS FRAMEWORK CLIENTSSERVICESSERVERS
LiveCycle
The Flex Ecosystem
The Flex Ecosystem Adobe Flash Platform
Is an entire family of technologies you can use to create, run and provide data to RIAs, including client runtimes, tools, frameworks, servers and cloud services.
Flash Platform RuntimesAt the center of the Flash Platform are the
client runtimes. Adobe Flash Player for the browser and Adobe AIR for outside the browser.
The Flash Player is the world’s most pervasive software
98%of Internet-connected PCs worldwide have Flash Player installed
of top 20 smart phones will support Flash Player this year
develop using the Flash Platform
3.5 millionof Alexa 100 top websites use Flash Player
85%
of web games are delivered using Flash Player
70%
95%
98%penetration rate in enterprises - Forrester
of enterprise professionals will seek Flash Platform development skills in 2011 (Society of Digital Agencies)
75%
The Flex Ecosystem Adobe Flash Player
Adobe Flash Player is a browser plugin or Active-X control with a rich object model and rendering engine that allows developers to include highly expressive and interactive content in web-applications
To include this richer content, you create a SWF file using Developer tools and then reference this SWF file in your HTML page.
When the browser parses the HTML page, the flash player downloads the SWF file and runs in the browser.
The Flex Ecosystem Adobe AIR
Is a cross-operating-system runtime and set of tools that allow developers to deploy HTML, Ajax, and Flash Platform applications (SWF files) to the desktop.
An emerging design pattern is to deliver a browser-based version for all users and a desktop version for the more active or power users-
Companies use Adobe AIR to deliver RIAs outside the browser
AIR runtime installations
AIR SDK installations
Installations of Adobe AIR within one year of release
300 million2.5 million1 million
Applications in the Adobe AIR Marketplace
840
The Flex Ecosystem Flash Platform Tools
Adobe Flash Builder (FB)Is an Eclipse-based development tool targeted at developers. With this IDE you use the Flex framework to create SWF files.
Adobe Flash Catalyst (FC)Is a new interaction design tool for rapidly creating expressive interfaces and interactive content without writing code.
Adobe Flash Professional (FL)Is the industry standard for interactive authoring.
Supported across the Board
CAIRNGORM
ADOBE OPEN SOURCE (opensource.adobe.com)
Frameworks
Performance and load testing
Tooling plug-ins
Pre-built components
Product extensions, functions and code
1,000+ global and regional system integrators, ISVs, and VARs
52 Adobe Agency Partners, including the top digital agencies
250+ training partners
More than 70 Open Screen Project members
337 User Groups worldwide
PARTNERS PROGRAMSTECHNOLOGIES COMMUNITIES
3.5 million developers
150+ supporting technologies to help in application and project development
The Flex Ecosystem Flash Platform Languages
ActionScriptIs an inheritance-based object-oriented scripting language based on the ECMAscript standard. The syntax and features are very similar to Java.
MXMLIs a convenience language, it provides an alternate way to generate ActionScript using a declarative tag-based XML syntax. When you compile an application, the MXML is parsed and converted to ActionScript.
Flex integrates with
Browsers
RESOURCE TIEREIS Databases Directories
ECM Repository
MessageQueues
SAP…
DESIGN &DEVELOPMENTTOOLS
HTTP/S, Sockets, AMF, RTMP,SOAP, WS*, SMTP, REST, …
Flash Catalyst
FlashProfessional
Flash Builder
Creative Suite
3rd PartyServices
SERVICES TIER
CLIENT APPLICATION TIER
AIRFlash Player
Flex Framework
Flash PlatformServices
Flash Media Server Family
LiveCycle
The Flex Ecosystem Flash Platform Services
A set of hosted and managed services.
Collaboration ServiceReal-time collaboration service featuring chat, audio, video and simple data.
Distribution Servicefor distributing, promoting, tracking, and monetizing applications on e.g. social networks, mobile devices and desktops.
Social Servicefor integrating with multiple social networks including Facebook, MySpace, Twitter, Yahoo, Google, AOL and many more…
Flash and HTML5 Adobe actually supports HTML
The Flash Platform has integrated with HTML for 14 years.
AIR 2.0 (desktop) includes support for HTML5. Adobe is committed to supporting HTML5
The Flash Platform delivers cross-platform, cross-browser, cross-device consistency.
HTML5 implementations will differ and hinder content adoption of rich features, including video tag support.
No consistency in codec support for video is yet visible.
Build Your First Application
now lets get our hands dirty…
Build Your First Application Build The User Interface Connect to Data Create Pages Code Your Interactions
What We’re Building ?
An simple staff management system
Build Your First Application
Build The User Interface
Create a New Flex Project Use Design Mode to Add Components Use Design Mode to Set Properties Change Component Attributes in MXML Browse and Run the Application
Build Your First Application
Connect to Data
Create a Flex Data Service Connect the getEmployees() Service
Operation to a DataGrid Configure DataGrid Columns Browse and Debug the Application
Build Your First Application
Create Pages
Create Employees and Departments States Retrieve and Display Department Data in the
Departments DataGrid Change Property Values in Different States Change a Property or Style Value in All States Create a New EmployeeDetails State Add Objects to Specific States
Build Your First Application
Code Your Interactions
Generate an Event Handler Change to the Departments State on a Button
click Event Change the Employees State on a Button click
event Change the EmployeeDetails State on a DataGrid
change Event Clear the TextInput Component on a focusIn
Event Change Styles on a click Event
Great Resources
Adobe Developer Connection Flex Developer Center Learn Flex in a Week More than 335 user groups Adobe TV Tour de Flex Training Partners and Support Centres 1000’s of active bloggers and forums
Conclusion on 1. Day Setting up Environment Design Mode of Flex Using Source Mode of Flex Introduction to ActionScript 3.0 Interactivity and Events in Flex Using Data Binding in Flex Laying out in Flex and Flex Containers Creating Forms in Flex Displaying Data in Flex Application Flow and Visibility Working with View States