RIA Flex and ActionScript

1
RIA Flex and ActionScript

• CS590 - Ashok Sahu

2
TOC

• Introduction
• Technologies
• Demo

3
Introduction and Motivation

• RIA Rich Internet Application, ADOBE
• Flash - cross-platform multimedia experiences
  and user interfaces.
• Flash - very pleasing user interfaces. Picasa,
  Flickr and YouTube are only a few examples
• Theres a very impressive Flash web app called
  Gliffy that imitates Visio (this was created with
  OpenLaszlo,)
• Apollo, a cross-OS runtime that allows you to use
  Flex to create desktop RIAs.

4
Flex 2.0 Basics

• MXML
• MXML is very similar to HTML in that it provides
  tags for user interface elements
• defines visual components such as data grids,
  buttons, combo boxes, trees, tab navigators, and
  menus
• non-visual components, Web service connections,
  data binding, and effects.

5
Flex 2.0 Basics

• ActionScript
• built-in objects and functions that allow you to
  create your own objects and functions like many
  object-oriented programming (OOP) languages
• Flex Data Services
• A robust messaging architecture that provides
  services that automatically synchronize data
  between client and server
• Real-time data push and publish-subscribe
  messaging
• Collaborative and disconnected applications

6
Using XML in Flex

• The Model tag
• lt?xml version"1.0" encoding"utf-8"?gt
  ltmxApplication xmlnsmxhttp//www.adobe.com/2006
  /mxml layout"absolute"gt
• ltmxModel id"bookStock"gt
• ltstockgt ltnamegtThe Picasso Codelt/namegt
• ltauthorgtDan Bluelt/authorgt
• ltcategorygtFictionlt/categorygt
• ltdescriptiongtCubist paintings reveal a secret
  society of people who really look like
  thatlt/descriptiongt
• lt/stockgt
• lt/mxModelgt lt/mxApplicationgt

7
Using XML in Flex

• lt?xml version"1.0" encoding"utf-8"?gt
  ltmxApplication xmlnsmx"http//www.adobe.com/200
  6/mxml" layout"absolute"gt
• ltmxScriptgt
• lt!CDATA private function bookHandler(theBookObj
  ect)void
• trace(theBook.name) trace(theBook.author)
  gt
• lt/mxScriptgt
• ltmxModel id"bookStock"gt ltstockgt ltnamegtThe
  Picasso Codelt/namegt ltauthorgtDan Bluelt/authorgt
  ltcategorygtFictionlt/categorygt ltdescriptiongtCubist
  paintings reveal a secret society of people who
  really look like thatlt/descriptiongt lt/stockgt
  lt/mxModelgt
• lt/mxApplicationgt

8
Using XML in Flex

• When dealing with XML files, the most commonly
  used event is creationComplete.
• This event is generated when the file is fully
  loaded and is usually placed inside of the
  Application tag.
• In this case, when the application is fully
  loaded, you want to pass the XML file (the ID of
  the Model tag) to the handling function
  (bookHandler).
• ltmxApplication xmlnsmx"http//www.adobe.com/200
  6/mxml" layout"absolute" creationComplete"bookHa
  ndler(bookStock)"gt

9
Using XML in Flex

• Using the HTTPService tag
• The HTTPService tag reads XML dynamically
• HTTPService class, uses the send() function,
  which tells the XML file to send its information.
  
• In actuality, it sends the information to the
  Flash Player
• Class HTTPService handles all of the mechanics in
  the background
• lt?xml version"1.0" encoding"utf-8"?gt
  ltmxApplication xmlnsmx"http//www.adobe.com/200
  6/mxml" layout"absolute" creationComplete"bookDa
  ta.send()"gt ltmxHTTPService id"bookData"
  url"assets/books.xml" /gt ltmxDataGrid x"56"
  y"250" width"950" dataProvider
  "bookData.lastResult.books.stock" /gt
  lt/mxApplicationgt

10
Demo