Flex 3 - Introduction

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    11 Favorites

    Flex 3 - Introduction - Presentation Transcript

    1. Flex ® 3 & Adobe ® Flex Builder ™ An introduction Rasheed Akhtar [email_address]
    2. About Me
      • Extensive experience with “normal” flash development using both AS2 and AS3
      • I’ve been working with Flex since Flex 2 was released (2006)
      • Started off primarily with data visualization and then moved on to developing apps for streamlining business processes using Flex, Flash Remoting, .NET and SQL Server 2005
      • LinkedIn – http://www.linkedin.com/in/rasheedakhtar
      • Twitter - http://twitter.com/rakhtar
      • Email – [email_address]
      Rasheed Akhtar [email_address]
    3. Flex 3
      • What is Flex?
        • It is a free, open source framework based on the Adobe Flash Runtime used to develop RIAs (rich Internet applications)
          • RIAs - new kind of web experience that offer the ease of use/experience of a desktop application while providing the broad reach of web applications
        • Flex application framework consists of MXML, ActionScript™ 3 (AS3), and the Flex class library.
        • Developers use MXML to declaratively define the application user interface elements and use ActionScript for client logic and procedural control.
      Rasheed Akhtar [email_address]
    4. Why Flex?
      • Business Case – Why RIAs?
        • People know them and like them. Fifty-two percent of online consumers have used highly interactive applications like Google Maps. More importantly, the overwhelming majority of those who tried RIAs say that rich applications greatly enhance their Web experience.
        • They enable tasks that HTML can’t. RIAs give companies a superior alternative to HTML for crafting customer interactions. That’s because RIAs provide a range of capabilities — like improved data visualization and streamlined processes — that go beyond the limitations imposed by HTML
        • They get results. Firms that measure the business impact of their RIAs say that rich applications meet or exceed their goals (see Figure 2). As the RIA success stories of these early adopters become more widely known, site owners at mainstream companies also look to RIAs to boost online effectiveness.
      • Source : “The Business Case For Rich Internet Applications” Forrester Research – March 12, 2007
      Rasheed Akhtar [email_address]
    5. Why Flex?
      • Business Case – Why RIAs (cont’d)?
      Rasheed Akhtar [email_address]
    6. Why Flex?
      • Finally – why flex?
        • Same reasons for using Flash over traditional HTML
          • Flex applications run consistently across all major browsers and on the desktop
          • Robust development environment (i.e. via Flex Builder 3 and Flex builder integration with Adobe Creative Suite)
      • Why not just use flash?
        • “ Traditional” programmers found it challenging to adapt to animation metaphor upon which the Flash Platform was originally designed (i.e. movieclips, frames, timeline, etc…)
        • Flex minimizes this problem by providing a workflow and programming model that is familiar to these developers
      Rasheed Akhtar [email_address]
    7. History
      • Flex 1.0 & 1.5 (2004 - Macromedia)
        • Primarily for enterprise market
        • Priced around $15,000USD per CPU
        • Java server based solution (J2EE, Tomcat, Jrun) that compiled MXML and Actionscript on-the-fly to SWF files
          • i.e. MXML files placed on server and users requested MXML files directly that would output SWFs
        • Flex Builder IDE based on Dreamweaver code base
      Rasheed Akhtar [email_address]
    8. History
      • Flex 2 (2006 – Adobe)
        • Licensing model overhauled
        • Flex SDK (compilers/class library) available as free download
        • Framework built upon AS3 and requires Flash Player 9
        • 2 versions: Standard & Professional (includes data visualization library)
        • No longer dependent on server side component
          • Apps compiled locally as SWFs and placed on web server
          • Server side software spun off as separate product called Flex Data Services 2 (LiveCycle Data Services)
        • Flex Builder based on open source Eclipse platform
      Rasheed Akhtar [email_address]
    9. History & Future
      • Flex 3 (2008 – Adobe)
        • Flex 3 SDK open sourced
        • Flex Builder enhancements included integration with Creative Suite, support for AIR (released at same time), and addition of profiling and refactoring tools
      • Flex 4 (2009* – Adobe)
        • Biggest change is to skinning/component architecture (i.e. Spark and FXG)
          • FXG is XML-based graphics interchange format for the Flash Platform
          • Foundation for Flash Catalyst
        • Targets Flash Player 10
      Rasheed Akhtar [email_address]
    10. Now building on Flex… Rasheed Akhtar [email_address]
    11. Now building on Flex…
      • Some quick sample sites:
        • http://www.iexpenseonline.com/
        • https://www.photoshop.com/express/landing.html
        • https://acrobat.com/
        • http://flex.org/showcase/
      Rasheed Akhtar [email_address]
    12. Flex SDK
      • MXML
        • XML based declarative language to define User Interface
        • Similar to XHTML
        • Primarily used for user interface design
      • Actionscript 3
      • Flex Class Library
        • Everything in the mx.* packages
          • Containers
          • Controls
          • Charting Components
      Rasheed Akhtar [email_address]
    13. How Flex works Rasheed Akhtar [email_address]
    14. Behind the Scenes
      • Flex SDK contains 2 compilers
        • mxmlc: application compiler (compiles to SWF)
        • compc: component compiler (compiles to SWC)
      • Compilers are invoked on MXML, Actionscript and asset files (images, SWF files, etc...) and result in respective file formats
      Rasheed Akhtar [email_address]
    15. Behind the Scenes
      • MXML tags correspond to ActionScript classes or properties of classes.
      • When compiler is invoked, Flex parses your MXMLtags and generates the corresponding ActionScript classes.
      • It then compiles these ActionScript classes along with the “other” (user defined) Actionscript classes and assets into SWF bytecode which it stores in a SWF file.
        • MXML:
        • Actionscript:
        • Result:
      <mx:Button id=&quot;myButton&quot; label=&quot;I'm a button!&quot; /> var myButton:Button; myButton = new Button(); myButton.label = &quot; I'm a button! &quot; ; addChild (myButton); Rasheed Akhtar [email_address]
    16. Flex Builder 3 Demo Rasheed Akhtar [email_address]
    17. MXML
      • MXML documents are plain-text documents
      • Should contain XML declaration
        • encoding should be set to UTF-8 for best compatibility
      • 2 types of root nodes available
        • Application: <mx:Application ...> </Application>
        • Components: any component tag other than application
          • <mx:Canvas ...> </Canvas>
          • <mx:Panel ...></Panel>
      Rasheed Akhtar [email_address]
    18. MXML
      • MXML uses namespaces (xmlns)
        • http://www.adobe.com/2006/mxml default namespace for flex (contains manifest file for flex class mappings
        • A namespace is a unique grouping of elements (flex libraries in this case)
        • Namespaces map library classes and components to tags
      <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot; http://www.adobe.com/2006/mxml &quot; xmlns:components=&quot;components.*“ /> //Flex button <mx:Button id=&quot;myButton&quot; label=&quot;I'm a button!&quot; /> //custom button <components:Button id=&quot;myButton&quot; label=&quot;I'm a button!&quot; /> </mx:Application> Rasheed Akhtar [email_address]
    19. Interactive MXML
      • Declaring UI elements via MXML is useful but need to make it interactive
      • 2 basic MXML features to create interactivity
        • Event Handling
          • Every component does “something” where it dispatches events
          • MXML allows inline event handlers
      <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot; http://www.adobe.com/2006/mxml &quot; /> //Flex button <mx:Button id=&quot;myButton&quot; label=&quot;I'm a button!&quot; click=“Alert(‘ STOP! ’)&quot; /> </mx:Application> Rasheed Akhtar [email_address]
    20. Interactive MXML
        • Data Binding
          • Used to link one component to another
          • Automates changing of values of one object when the value of another object changes
          • Several ways to utilize it. Simplest method is using curly brace {} syntax
      <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot; http://www.adobe.com/2006/mxml &quot; /> <mx:Vbox> <mx:Text id=&quot;output&quot; text=&quot; {input.text} &quot; /> <mx:TextInput id=&quot;input&quot; /> </mx:Vbox> </mx:Application> Rasheed Akhtar [email_address]
    21. Containers
      • Containers can hold other containers (nested containers) or controls
      • Components defined within a container are called children
      • 2 categories of containers:
        • Layout containers: control sizing/positioning of their children
        • Navigator containers: control user movement/navigation among multiple child containers
      • Flex offers wide variety of containers:
        • Canvas
        • Panel
        • Tile
        • TitleWindow
        • Hbox
        • Vbox
      Rasheed Akhtar [email_address]
    22. Containers - Layout
      • All containers except Canvas container support automatic (box-based) layout
        • Do not need to specify position for children of container
        • Layout handled by selecting container type, specifying properties on container and order of container’s children
          • Hbox does horizontal box layout, Vbox does vertical box layout, etc...
        • Layout rules executed when container created and when children are added or removed
      • Canvas container (and optionally Application/Panel containers) use absolute layout
        • Explicitly set x,y positions of container’s children
        • Support constraint based layout
      • Containers support scroll bars
      Rasheed Akhtar [email_address]
    23. Controls
      • Flex natively provides approx 34+ controls
        • Many open source custom controls (and control libraries) available from the community
      • Controls are UI components
      • Most controls have
        • MXML API for declaring control, properties and events
        • Actionscript API for calling methods and setting properties at runtime
        • Customizable appearance (styles/skinning)
      Rasheed Akhtar [email_address]
    24. Controls
      • Data entry controls
        • Used to enter data or display plain text or HTML formatted text
        • Examples: Label, Text, TextInput, TextArea, RichTextEditor, etc...
      • Buttons
        • Examples: Button, LinkBar, ButtonBar, etc...
      • List Controls
        • Examples: List, Horizontal List, TileList, etc...
      • Tree and Grid Controls
        • Examples: Tree, DataGrid, OLAPDataGrid
      • Other Controls
        • Examples: Alert, SWFLoader, ColorPicker, etc...
      Rasheed Akhtar [email_address]
    25. Controls
      • Data provider controls
        • Use input data from a data provider
          • Data provider is a collection of objects (similar to array)
        • Provide layer of abstraction so multiple controls can use one data provider (model/view separation)
      • Too many controls to go into detail
        • See Flex Framework Diagram
      • Worth checking out Flex 3 Component Explorer:
        • http://examples.adobe.com/flex3/componentexplorer/explorer.html
      Rasheed Akhtar [email_address]
    26. Note
      • Both containers/controls can be extended to make customer controls/containers
        • Because framework is open source you can see actual classes used to make framework and borrow/modify as necessary
      Rasheed Akhtar [email_address]
    27. Charting Components
      • Only available with professional version
      • Libraries are not open sourced
      • Provides 9 types of charts:
        • Area, Bar, Bubble, Candlestick, Column, HLOC Chart, Line, Pie, Plot
      • Charts can be extended to provide interactivity
      • Charts can also be styled/skinned to customize appearance
      • Charts can have variety of effects applied
      Rasheed Akhtar [email_address]
    28. Styling (CSS)
      • Controls modified through style properties
      • Can also be styled using CSS (inline and external stylesheets)
        • Similar concept to HTML CSS (i.e. syntax and certain CSS attributes are the same) however Flex CSS does not support all of the HTML CSS layout options (i.e. x, y, width, height, etc... )
          • Style Explorer: http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html
      Rasheed Akhtar [email_address]
    29. Styling (CSS)
      • Styling can also be done at runtime using StyleManager and Actionscript
        • StyleManager is singleton class that allows access/modification of styles
      • Very powerful – app can completely change visual appearance at runtime
      import mx.styles.StyleManager; : : StyleManager.getStyleDeclaration(&quot;Button&quot;).setStyle(&quot;fontSize&quot;,24); Rasheed Akhtar [email_address]
    30. Skinning
      • Refers to changing the way a component looks by replacing the assets that make up visual appearance
      • 2 approaches
        • Graphical skinning
          • Use of bitmap/vector graphics to change component appearance
          • Skin import wizard allows for easily importing skin created in other CS products (based on naming conventions)
        • Programmatic skinning
          • Graphics drawn via Actionscript to change appearance
      • Great Flex Skinning resource: http://www.scalenine.com/
      Rasheed Akhtar [email_address]
    31. Final Thoughts…
      • Flex framework is massive and also very powerful
      • Working to bridge the gap between designer and developer workflow using innovative products/techniques
      • Many additional topics around building Flex Apps that deserver their own sessions
        • Application State
        • Application frameworks
        • Backend connectivity
        • Etc…
      Rasheed Akhtar [email_address]
    32. Resources
      • Adobe Devnet:
        • http://www.adobe.com/devnet/flex/
        • Learn Flex in a week
          • http://www.adobe.com/devnet/flex/videotraining/
      • Flex Help: Getting started with Flex
        • http://learn.adobe.com/wiki/display/Flex/Getting+Started
      • Flex Examples:
        • http://blog.flexexamples.com/
      • Flex.org
        • http://flex.org/
      Rasheed Akhtar [email_address]
    SlideShare Zeitgeist 2009

    + rakhtarrakhtar Nominate

    custom

    3399 views, 11 favs, 1 embeds more stats

    A presentation done for the Flash In The Peg User G more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 3399
      • 3395 on SlideShare
      • 4 from embeds
    • Comments 0
    • Favorites 11
    • Downloads 0
    Most viewed embeds
    • 4 views on http://static.slidesharecdn.com

    more

    All embeds
    • 4 views on http://static.slidesharecdn.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories