RIA – Flex and ActionScript

1. RIA – Flex and ActionScript CS590 - Ashok Sahu RIA - Flex and ActionScript

2. TOC • Introduction • Technologies • Demo RIA - Flex and ActionScript

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 • There’s 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. RIA - Flex and ActionScript

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. RIA - Flex and ActionScript

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 RIA - Flex and ActionScript

6. Using XML in Flex • The Model tag <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=http://www.adobe.com/2006/mxml layout="absolute"> <mx:Model id="bookStock"> <stock><name>The Picasso Code</name> <author>Dan Blue</author> <category>Fiction</category> <description>Cubist paintings reveal a secret society ofpeople who really look like that</description> </stock> </mx:Model> </mx:Application> RIA - Flex and ActionScript

7. Using XML in Flex <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[private function bookHandler(theBook:Object):void {trace(theBook.name);trace(theBook.author);}]]> </mx:Script> <mx:Model id="bookStock"> <stock> <name>The Picasso Code</name> <author>Dan Blue</author> <category>Fiction</category> <description>Cubist paintings reveal a secret society of people who really look like that</description> </stock> </mx:Model> </mx:Application> RIA - Flex and ActionScript

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). <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="bookHandler(bookStock)"> RIA - Flex and ActionScript

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 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="bookData.send()"> <mx:HTTPService id="bookData" url="assets/books.xml" /> <mx:DataGrid x="56" y="250" width="950" dataProvider= "{bookData.lastResult.books.stock}" /> </mx:Application> RIA - Flex and ActionScript

10. Demo RIA - Flex and ActionScript