FLEX2 Introduction

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
(No Transcript)
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
• 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
(No Transcript)
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
(No Transcript)
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 color
s, 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
Code Gen
Source
Flash Player
Action Script
ActionScript Generated ActionScript
AVM2 Bytecode Assets
MXML
Assets ( PNG, GIF etc.)
Assets (PNG, GIF)
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

• 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
• 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
  
• /mxml layout absolute
  

33
MXML to Handle click event

• /mxml layoutabsolute
  
• clickmx.controls.Alerts.show(Example) /
  

34
Data Binding

• width200 height200 /
  

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 valueNumber
• function f( param1String )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,n
  amespaces,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