AJAX Usability Metrics
Upcoming SlideShare
Loading in...5

Like this? Share it with your network

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. FLEX-2 Introduction
    • Web 2.0 and Rich Internet Applications
    • Prof. Suthikshn Kumar
  • 2. Contents
    • Building Rich Internet Applications with Flex-1 and Flex-2
    • Flash Player
    • Flex Framework
    • MXML
    • ActionScript
    • Working with Data Services
    • Understanding Diff with HTML and Flex
    • Understanding how flex applications work
    • Understanding Flex and Flash Authoring
    • MXML Language
    • A simple example
    • Using ActionScript
    • MXML and ActionScript correlations
  • 3. Programming Flex2
    • Chap 1: Introduction to Flex
    • Chap 2: Building Applications with Flex Framework
    • Chap 3: MXML
    • Chap 4: ActionScript
    • Chap 5: Framework Fundamentals
    • Chap 6: Managing Layout
    • Chap 7: Working with UI Components
    • Chap 12: Working with Data
  • 4.  
  • 5. Flex
    • Flex is a collection of technologies that enables you to rapidly build applications deployed to Flash Player, a runtime environment for delivering sophisticated user interfaces and interactivity.
    • Flex is simple and easy
    • It significantly lowers learning curve in that it allows you to compose applications rapidly by assembling off-the shelf components, including UI controls, layout containers, data models, and data communication components.
    • Flex 2 content relies on Flash Player 9
  • 6. Flash Player
    • Flex is a part of Adobe Flash Platform
    • Flex applications are deployed to Flash Player
    • Flash player runs all Flex applications
    • The popularity of Flash Player is due to :
      • More compelling and engaging than static HTML
      • Flash player is capable of providing integrated solutions that utilize data services, interactive UI design, media elements such as audio and video, and even real time communication
      • Drag and drop, doubel click: metaphors from desktop computing
      • Very small ( download < 1MB)
      • Stability and Security
      • Cross platform: runs on Windows, OS X, Linux and on all major browsers: firefox, IE, safari, opera
  • 7. .swf format
    • Using flex framework, you can build and compile to the .swf format
    • The .swf file is an intermediate bytecode format that Flash player can read.
    • Flash Player 9 introduces a new virtual machine called AVM2.
    • With AVM2, longer interpreted. Rather it is compiled, thus runs faster.
    • .swf is platform independent.
  • 8. Flex Framework
    • Written using ActionScript
    • Defines controls, containers and managers designed to simplify building rich internet applications.
    • The Flex class library consists of following categories:
      • Form Controls: buttons, text inputs, text areas, lists, radio buttons, checkboxes, combo boxes
      • Menu controls: popup menus and menu bars
      • Meda components: images, audio, vide
      • Layout containers: User layout containers to place contents within a screen . Build sophisticated layouts with grids, forms, boxes, canvases and more.
      • Data components and Data binding: connectors that simplify remote procedure calls, data models to hold the data that is returned, and data binding to associate form control data with data models.
  • 9. Flex Framework
    • Formatters and Validators
    • Cursor Management: Cursor appearance is changed inorder to notify users of waiting on a response from data service
    • State Management:
    • Effects: Animations such as fades, zooms, blurs and glows
    • History management: back and forward buttons
    • Drag and drop management
    • Tool tips: Add tool tips to user elements
    • Style Management: Directly or using CSS
  • 10.  
  • 11. Flex Builder 2
    • Is an official Adobe IDE for building and debugging Flex applications
    • Built on Eclipse IDE
    • Flex builder has built-in tools for
      • Writing
      • Debugging
      • Building applications using Flex technologies such as MXML and ActionScript
  • 12. Flex Elements
    • Flex framework includes core set of languages and libraries that are the basis pf any flex application.
      • MXML: is an XML based markup language that describes the screen layout. Form controls, media playback controls, effects, transistions, data models, data binding
      • ActionScript: Programming language understood by Flash Player. ActionScript can respond to events such as mouseclicks.
  • 13. Flex Application Framework
  • 14. How Flex Works
  • 15. Data Services
    • Flex applications are generally distributed applications
    • Flex applications can have :
      • Client tier : .swf running in Flash Player
      • Client tier communicates with server(s) inorder to send and retrieve data. The server provides data services.
    • Data services are programs with APIs whereby client can make a request to a method of that program. RPC, Flash Remoting using AMF
  • 16.  
  • 17. Data services
  • 18. Flex target applications
    • While countless types of applications can be enhanced through RIA technology,Flex is particularly well suited for applications with a distinct set of characteristics, ncluding those that:
      • Automate a multistep process, particularly where the teps are nonlinear or recursive
      • Combine graphical or multimedia content with data and application logic, articularly where users must interact with data or media locally
      • Require server push or access to real-time streaming data, uch as operational data or stock quote information
      • Must operate in a disconnected fashion, or either short or extended periods of time
      • Can benefit from complex client-side validation, uch as logic that depends on previous user entries or sophisticated validation logic Involve large data sets, articularly where client-side data manipulation is important
  • 19. Interactive Data Visualization
  • 20. Product Configuration and Selection For example,Harley Davidson is using Flex to allow customers to configure their own motorcycle online. s users select a model, ptions, nd colors, hey can immediately preview the ike ’s appearance and the otal cost of their selections.
  • 21. Flex and AJAX
    • Ajax is an acronym that stands for Asynchronous JavaScript and XML. e term was coined to describe the use of browser technologies to deliver RIAs
    • Ajax is associated with a set of application design patterns as well as a variety of open source projects and commercial products.
    • Flex and Ajax both promote an architecture that enables applications to take greater advantage of the client runtime to provide richer application functionality.
    • As a result,the approaches used to expose business logic to Ajax clients (web services, EST APIs, and so on) re similar to those used in Flex applications.
    • While t is possible to develop rich clients using only client-side JavaScript and HTML (as many Ajax vendors promote), flash Player provides additional capabilities not available in HTML,
    • including a high-performance, just-in-time compiled execution engine, integrated APIs for graphics manipulation and vector drawing, and the robust, real-time messaging and integration services provided by Flex Data Services.
    • Also, because Flash Player is integrated with the browser runtime environment, developers can easily deliver applications that combine user interface logic written in JavaScript with components r entire applications written in Flex. for example, google s taking advantage of both JavaScript and Flash as part of its Google finance site.
  • 22. AJAX ad Flex
  • 23. Difference between Traditional (HTML ) and Flex Web Applications
    • In traditional applications, the presentation tier consists of HTML, CSS, JavaScript, JSP, ASP, PHP or similar documents. It is stateless and fairly non responsive. ( exception of Ajax applications)
    • Flex applications generally reside embedded within the presentation tier. In addition, Flex applications can integrate with the presentation tier to create tightly coupled client side system.
    • Flex applications use Flash player to run sophiscticated client tier portions of applications.
    • Flex application cleint is stateful, responsive
  • 24. How Flex Applications Work Source Action Script MXML Assets ( PNG, GIF etc.) ActionScript + Generated ActionScript Assets (PNG, GIF) Code Gen Flash Player AVM2 Bytecode + Assets
  • 25. MXML
    • Like HTML, XML is a markup language that describes user interfaces that expose content and
    • functionality. nlike HTML, XML provides declarative abstractions for client-tier logic and
    • bindings between the ser interface and application data. XML helps maximize developer
    • productivity and application reusability by cleanly separating presentation and business logic.
  • 26. Components
    • Flex Applications are largely composed of components or modular elements.
    • A component is an Actionscript class or an MXML component document that has been mapped to an identifier via a manifest file so that ite can be instantiated via MXML.
    • There are two basic categories of Flex Framework components: Visual and non-visual
    • Visual Components consists of
      • Containers: componets that can hold other components
      • User Interface controls: visible interface elements such as buttons, text inputs, lists, data grids
    • The non-visual componets consist of the following:
      • Data components: create data structures such as arrays and collections
      • Utility Components: Achieve functionality such as looping
    • Component properties can be set using tag attributes or actionScript
  • 27. MXML Example
  • 28. Flex Application
    • <mx:Application />
    • <mx:Button />
      • click event handler
    • mx.controls.Alert.show
  • 29. MXML Basics – Visual Tags
    • Layout
      • Canvas, Form, VBox, HBox, ControlBar
    • Navigation
      • Accordion, LinkBar, MenuBar, ViewStack
    • Controls
      • Button, CheckBox, ComboBox, DataGrid, TextInput, List, Label, Tree
    • Charts
      • BarChart, PieChart, LineChart
  • 30. MXML Basics – Misc. Tags
    • Data Connectivity
      • HTTPService, RemoteObject, WebService, XML
    • Validation
      • EmailValidator, DateValidator, ZipCodeValidator
    • Effects
      • Zoom, Resize, Move, Fade
    • Style
      • Either inline or “source” set to external .css
    • Script
      • Either inline or “source” set to external .as
  • 31. MXML Basics – Data Binding
    • “ Glues” data from source to destination
      • When source data changes, destination auto-updates
    • Define with { and }
      • <mx:Button label=“{ userInput.text }” />
    • Use [Bindable] meta-data to mark properties as able to be bound
      • Explicit because performance implications
  • 32. Containers
    • VBox is a container that automatically arranges the child elements so they are stacked vertically
    • <?xml version=“1.0” encoding=“utf-8”?>
    • <mx:Application xmlns:mx= http://www.adobe.com/2006/mxml layout= “absolute”>
    • <mx:VBox>
    • <mx:Button label=“Example Button 1” />
    • <mx:Button label= “Button2” />
    • <mx:HBox>
    • <mx:Button label= “Example Button 3” />
    • <mx:Button Label=“Example Button 4” />
    • </mx:HBox>
    • </mx:VBox>
    • </mx:Application>
  • 33. MXML to Handle click event
    • <?xml version=“1.0” encoding=“utf-8”?>
    • <mx:Application xmlns:mx= http://www.adobe.com/2006/mxml layout=“absolute”>
    • <mx:Button id=“alertButton” label=“Show Alert” click=“mx.controls.Alerts.show(‘Example’) />
    • </mx:Application>
  • 34. Data Binding
    • <mx:VBox>
    • <mx:Text id=“output” text=“{input.text} width=“200” height=“200” />
    • <mx:TextInput id=“input” />
    • </mx:VBox>
  • 35. ActionScript Basics
    • Familiar syntax
      • Similar to C++, Java, C#, JavaScript
    • Dynamic Language, Weak Typing
      • Similar to ColdFusion
      • Variables can hold any type
    • Support for Strong Typing
      • Can bind variable to specific data type
      • Faster code execution
      • Easier to develop
        • More help from compiler
        • Easier to find bugs via Flash Debug Player and type errors
  • 36. ActionScript Basics – Part 2
    • Strong typing
      • Uses “strict” compilation mode
        • Enabled by default
        • Best practice
      • var value:Number;
      • function f( param1:String ):Number { … }
    • The * datatype
      • Any type
      • http://www.darronschall.com/weblog/archives/000210.cfm
  • 37. ActionScript Basics – part 3
    • Visibility Modifiers
      • public
        • Accessible to anyone
      • private
        • Only accessible inside the class (current .mxml file)
      • protected
        • Accessible inside the class and subclasses
      • internal
        • Only accessible to classes in the same package
        • Default value (when visibility is omitted)
  • 38. ActionScript
    • ActionScript is the object-oriented programming language used for Flex development.
    • Like JavaScript,ActionScript 3.0 is an implementation of ECMAScript,the international standardized
    • programming language for scripting.
    • However, because it is an implementation of the latest ECMAScript proposal, actionScript provides many capabilities not common in the versions of JavaScript supported by most browsers.
    • At development time, actionScript 3.0 adds support for strong typing,interfaces,delegation,namespaces,error handling,and ECMAScript for XML (E4X).
    • At runtime,the most significant difference between JavaScript and ActionScript is that ActionScript is just-in-time compiled to native machine code by Flash Player.
    • As a result, it can provide much higher performance and more efficient memory management than interpreted JavaScript.
    • Flex developers use ActionScript to write client-side logic, such as event listeners and call-back functions, r to define custom types for the client application.
  • 39. Summary
    • Basics of Flex
    • Texhnologies and products that are used for creating Flex applications
    • Flex 2 consists of a framework ( a class library) and a compiler that allow you to rapidly create Flex applications.
    • These applications are .swf files which you can run using Flahsh Player 9