Adobe Flex - Foundation to Advanced (Bundle) [A-FX-103]

  • 1,120 views
Uploaded on

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 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,120
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
32
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. ADOBE Flex 4
    Peter Andreas Moelgaard
  • 2. About Me
    Adobe Certified Professional (Flex)
  • 3. About Me
    Adobe Community Professional (Flex)
  • 4. About Me
    Adobe Advisory Board for Flash Builder
    Adobe Advisory Board for Flash Catalyst
    Adobe Advisory Board for Flex SDK
  • 5. About Me
    I’m Peter Andreas Moelgaard
    I’m 35 years old
    I’m
  • 6. About Me
    Adobe MAX Award x 2 (2008)
    Adobe MAX Award Semifinalist (2009)
    Author of Flash Catalyst 2.0 Unleashed(Addison Wesley, 2011)
  • 7. 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 Interface
    Connect to Data
    Create Pages
    Code Your Interactions
  • 8. About Me
    Twitter: @petermoelgaard
    Blog: blog.petermoelgaard.com
  • 9. Introduction to Flex
    before we get our hands dirty…
  • 10. Introduction to RIA’s
    Rich Internet Applications (RIA) are desktop-like applications running in the browser.Overcome many limitations of traditional web technologies:
    Stateless architecture
    User interaction is mostly point-and-click
    Non-responsive (click > load > wait > click > load > wait > ...)
  • 11. Introduction to RIA’s
    Benefits
    Rich user experience, like desktop applications
    No cumbersome installations, or upgrades
    Single point management, leading to the concept of Software as a Service (SaaS)
  • 12. 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
  • 13. 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)
  • 14. 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
  • 15. 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.
  • 16. Adobe provides optimized Flash Player technology to Google
    Increases accuracy of web search results
    Enables top search engines to understand what's inside of RIAs
    Works with all existing SWF content, across all versions
  • 17. 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.
  • 18. 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
  • 19. 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.
  • 20. 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
  • 21. 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
  • 22. NASDAQ
    Enabling stock market participants to replay, understand, and explain market events at any point in time
    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
  • 23. SAP
    Transforming business data into rich, interactive dashboards and data presentations– without programming
    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
    “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
  • 24. FedEx
    Connecting customers to shipment tracking information online and offline
    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%
    “… 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
    All external content and images pending approvals.
  • 25. The Flex Ecosystem
    TOOLS
    FRAMEWORK
    CLIENTS
    SERVICES
    SERVERS
    Flash Player
    Flex
    Flash Media Server Family
    Flash
    PlatformServices
    FlashCatalyst
    FlashProfessional
    Flash Builder
    AIR
    LiveCycle
    ColdFusion
    Creative Suite
    Analytics &
    Optimization
  • 26. The Flex Ecosystem
  • 27. 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 Runtimes
    At the center of the Flash Platform are the client runtimes. Adobe Flash Player for the browser and Adobe AIR for outside the browser.
  • 28. The Flash Player is the world’s most pervasive software
    98%
    95%
    of Internet-connected PCs worldwide have Flash Player installed
    of top 20 smart phones will support Flash Player this year
    85%
    3.5 million
    of Alexa 100 top websites use Flash Player
    develop using the Flash Platform
    70%
    98%
    penetration rate in enterprises - Forrester
    of web games are
    delivered using Flash Player
    75%
    of enterprise professionals will seek Flash Platform development skills in 2011 (Society of Digital Agencies)
  • 29. 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.
  • 30. 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-
  • 31. Companies use Adobe AIR to deliver RIAs outside the browser
    300 million
    AIR runtime installations
    2.5 million
    AIR SDK installations
    1 million
    Installations of Adobe AIR within one year of release
    840
    Applications in the Adobe AIR Marketplace
  • 32. 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.
  • 33. Supported across the Board
    3.5 million developers
    PARTNERS
    PROGRAMS
    TECHNOLOGIES
    COMMUNITIES
    150+ supporting technologies to help in application and project development
    CAIRNGORM
    ADOBE OPEN SOURCE (opensource.adobe.com)
    • Frameworks
    • 34. Performance and load testing
    • 35. Tooling plug-ins
    • 36. Pre-built components
    • 37. Product extensions, functions and code
    • 38. 1,000+ global and regional system integrators, ISVs, and VARs
    • 39. 52 Adobe Agency Partners, including the top digital agencies
    • 40. 250+ training partners
    • 41. More than 70 Open Screen Project members
    • 42. 337 User Groups worldwide
  • 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.
  • 43. Flex integrates with
    CLIENT APPLICATION TIER
    DESIGN &DEVELOPMENTTOOLS
    Browsers
    Creative
    Suite
    Flash Player
    AIR
    FlashProfessional
    HTTP/S, Sockets, AMF, RTMP,
    SOAP, WS*, SMTP, REST, …
    Flash
    Catalyst
    Flash Builder
    SERVICES TIER
    3rd PartyServices
    Flex
    Framework
    Flash PlatformServices
    Flash Media Server Family
    LiveCycle
    RESOURCE TIER
    EIS
    Databases
    Directories
    ECM Repository
    MessageQueues
    SAP…
  • 44. The Flex Ecosystem
    Flash Platform ServicesA 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…
  • 45. 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.
  • 46. Build Your First Application
    now lets get our hands dirty…
  • 47. Build Your First Application
    Build The User Interface
    Connect to Data
    Create Pages
    Code Your Interactions
  • 48. What We’re Building ?
    An simple staff management system
  • 49. 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
  • 50. 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
  • 51. 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
  • 52. 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
  • 53. 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
  • 54. 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