AJAX Usability Metrics

FLEX-2 IntroductionFLEX-2 Introduction

Web 2.0 and Rich Internet Applications

Prof. Suthikshn Kumar

ContentsContents

• 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

Programming Flex2 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

FlexFlex

• 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

Flash PlayerFlash 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

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

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

Flex FrameworkFlex 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

Flex Builder 2Flex 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

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

Flex Application FrameworkFlex Application Framework

How Flex WorksHow Flex Works

Data ServicesData 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

Data servicesData services

Flex target applicationsFlex 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

Interactive Data VisualizationInteractive Data Visualization

Product Configuration and Product Configuration and SelectionSelection

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.

Flex and AJAXFlex 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.

AJAX ad FlexAJAX ad Flex

Difference between Traditional Difference between Traditional (HTML ) and Flex Web Applications(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

How Flex Applications WorkHow Flex Applications Work

Source

Action Script

MXML

Assets ( PNG, GIF etc.)

ActionScript + Generated ActionScript

Assets (PNG, GIF)

Code Gen Flash Player

AVM2 Bytecode + Assets

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

ComponentsComponents• 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

MXML ExampleMXML Example

Flex ApplicationFlex Application

• <mx:Application />

• <mx:Button />– click event handler

• mx.controls.Alert.show

MXML Basics – Visual TagsMXML 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

MXML Basics – Misc. TagsMXML 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

MXML Basics – Data BindingMXML 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

ContainersContainers

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

MXML to Handle click eventMXML 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>

Data BindingData Binding

<mx:VBox>

<mx:Text id=“output” text=“{input.text} width=“200” height=“200” />

<mx:TextInput id=“input” />

</mx:VBox>

ActionScript BasicsActionScript 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

ActionScript Basics – Part 2ActionScript 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

ActionScript Basics – part 3ActionScript 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)

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

SummarySummary

• 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