Flex2 Intro Web20
-
Upload
vijay-anand -
Category
Documents
-
view
215 -
download
0
Transcript of Flex2 Intro Web20
-
8/8/2019 Flex2 Intro Web20
1/39
FLEXFLEX--2 Introduction2 Introduction
Web 2.0 and Rich Internet Applications
Prof. Suthikshn Kumar
-
8/8/2019 Flex2 Intro Web20
2/39
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
-
8/8/2019 Flex2 Intro Web20
3/39
Programming Flex2Programming 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
-
8/8/2019 Flex2 Intro Web20
4/39
-
8/8/2019 Flex2 Intro Web20
5/39
FlexFlex
Flex is a collection of technologies thatenables you to rapidly build applicationsdeployed to Flash Player, a runtimeenvironment for delivering sophisticated user
interfaces and interactivity. Flex is simple and easy
It significantly lowers learning curve in that itallows you to compose applications rapidly byassembling off-the shelf components,including UI controls, layout containers, datamodels, and data communication components.
Flex 2 content relies on Flash Player 9
-
8/8/2019 Flex2 Intro Web20
6/39
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 utilizedata services, interactive UI design, media elements such as audioand 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 majorbrowsers: firefox, IE, safari, opera
-
8/8/2019 Flex2 Intro Web20
7/39
.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 iscompiled, thus runs faster.
.swf is platform independent.
-
8/8/2019 Flex2 Intro Web20
8/39
Flex FrameworkFlex Framework
Written using ActionScript
Defines controls, containers and managers designed tosimplify 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 simplifyremote procedure calls, data models to hold the data that isreturned, and data binding to associate form control data with datamodels.
-
8/8/2019 Flex2 Intro Web20
9/39
Flex FrameworkFlex Framework
Formatters and Validators
Cursor Management: Cursor appearance is changedinorder to notify users of waiting on a response from dataservice
State Management:
Effects: Animations such as fades, zooms, blurs andglows
History management: back and forward buttons
Drag and drop management Tool tips: Add tool tips to user elements
Style Management: Directly or using CSS
-
8/8/2019 Flex2 Intro Web20
10/39
-
8/8/2019 Flex2 Intro Web20
11/39
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
-
8/8/2019 Flex2 Intro Web20
12/39
Flex ElementsFlex Elements
Flex framework includes core set oflanguages and libraries that are the basis pfany flex application.
MXML: is an XML based markup language thatdescribes the screen layout. Form controls,media playback controls, effects, transistions,data models, data binding
ActionScript: Programming languageunderstood by Flash Player. ActionScript canrespond to events such as mouseclicks.
-
8/8/2019 Flex2 Intro Web20
13/39
Flex Application FrameworkFlex Application Framework
-
8/8/2019 Flex2 Intro Web20
14/39
How Flex WorksHow Flex Works
-
8/8/2019 Flex2 Intro Web20
15/39
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
-
8/8/2019 Flex2 Intro Web20
16/39
-
8/8/2019 Flex2 Intro Web20
17/39
Data servicesData services
-
8/8/2019 Flex2 Intro Web20
18/39
Flex target applicationsFlex target applications
While countless types of applications can be enhanced throughRIA technology,Flex is particularly well suited for applicationswith 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 asoperational 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 Involvelarge data sets, articularly where client-side data manipulation isimportant
-
8/8/2019 Flex2 Intro Web20
19/39
Interactive Data VisualizationInteractive Data Visualization
-
8/8/2019 Flex2 Intro Web20
20/39
Product Configuration andProduct Configuration and
SelectionSelection
For example,Harley
Davidson is using Flex
to allow customers to
configure their own
motorcycle
online. s users select amodel, ptions, nd
colors, hey can
immediately preview
the ike s
appearance and the
otal cost of their
selections.
-
8/8/2019 Flex2 Intro Web20
21/39
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 andcommercial products.
Flex and Ajax both promote an architecture that enables applications to take greater advantage of the clientruntime to provide richer application functionality.
As a result,the approaches used to expose business logic to Ajax clients (web services, EST APIs, and soon) 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 Ajaxvendors promote), flash Player provides additional capabilities not available in HTML,
including a high-performance, just-in-time compiled execution engine, integrated APIsfor graphics manipulation and vector drawing, and the robust, real-time messagingand integration services provided by Flex Data Services.
Also, because Flash Player is integrated with the browser runtime environment, developers can easilydeliver applications that combine user interface logic written in JavaScript with components r entireapplications written in Flex. for example, google s taking advantage of both JavaScript and Flash as part ofits Google finance site.
-
8/8/2019 Flex2 Intro Web20
22/39
AJAX ad FlexAJAX ad Flex
-
8/8/2019 Flex2 Intro Web20
23/39
Difference between TraditionalDifference between Traditional
(HTML ) and Flex Web Applications(HTML ) and Flex Web Applications
In traditional applications, the presentation tierconsists of HTML, CSS, JavaScript, JSP, ASP,PHP or similar documents. It is stateless and fairlynon responsive. ( exception of Ajax applications)
Flex applications generally reside embedded withinthe presentation tier. In addition, Flex applicationscan integrate with the presentation tier to createtightly coupled client side system.
Flex applications use Flash player to run
sophiscticated client tier portions of applications. Flex application cleint is stateful, responsive
-
8/8/2019 Flex2 Intro Web20
24/39
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
-
8/8/2019 Flex2 Intro Web20
25/39
MXMLMXML
Like HTML, XML is a markup language that describes userinterfaces that expose content and
functionality. nlike HTML, XML provides declarativeabstractions 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.
-
8/8/2019 Flex2 Intro Web20
26/39
ComponentsComponents
Flex Applications are largely composed of components or modularelements.
A component is an Actionscript class or an MXML componentdocument that has been mapped to an identifier via a manifest fileso 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 oractionScript
-
8/8/2019 Flex2 Intro Web20
27/39
MXML ExampleMXML Example
-
8/8/2019 Flex2 Intro Web20
28/39
Flex ApplicationFlex Application
click event handler
mx.controls.Alert.show
-
8/8/2019 Flex2 Intro Web20
29/39
MXML BasicsMXML Basics Visual TagsVisual 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
-
8/8/2019 Flex2 Intro Web20
30/39
MXML BasicsMXML Basics Misc. TagsMisc. 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
-
8/8/2019 Flex2 Intro Web20
31/39
MXML BasicsMXML Basics Data BindingData Binding
Glues data from source to destination
When source data changes, destination
auto-updates
Define with { and }
Use [Bindable] meta-data to mark
properties as able to be bound Explicit because performance implications
-
8/8/2019 Flex2 Intro Web20
32/39
ContainersContainers
VBox is a container that automatically arranges the child elements sothey are stacked vertically
-
8/8/2019 Flex2 Intro Web20
33/39
MXML to Handle click eventMXML to Handle click event
-
8/8/2019 Flex2 Intro Web20
34/39
Data BindingData Binding
-
8/8/2019 Flex2 Intro Web20
35/39
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 typeerrors
-
8/8/2019 Flex2 Intro Web20
36/39
ActionScript BasicsActionScript Basics Part 2Part 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/00
0210.cfm
-
8/8/2019 Flex2 Intro Web20
37/39
ActionScript BasicsActionScript Basics part 3part 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)
-
8/8/2019 Flex2 Intro Web20
38/39
ActionScriptActionScript
ActionScript is the object-oriented programming language used forFlexdevelopment.
Like JavaScript,ActionScript 3.0 is an implementation of ECMAScript,theinternational 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 isthat 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 memorymanagement than interpreted JavaScript.
Flex developers use ActionScript to write client-side logic, such as event listenersand call-back functions, r to define custom types for the client application.
-
8/8/2019 Flex2 Intro Web20
39/39
SummarySummary
Basics of Flex
Texhnologies and products that are used forcreating Flex applications
Flex 2 consists of a framework ( a classlibrary) and a compiler that allow you to
rapidly create Flex applications. These applications are .swf files which you
can run using Flahsh Player 9