This is my presentation held at the The ActionScript Conference 08 in Singapore

1. MARCO CASARIO CTO – Comtaste http://casario.blogs.com

2. My books TAC 08 WWW.COMTASTE.COM

3. My books TAC 08 WWW.COMTASTE.COM

4. My Books TAC 08 WWW.COMTASTE.COM Advanced AIR Application Development Essential Guide to AIR 1.X with Flash CSX

5. Who i am TAC 08 WWW.COMTASTE.COM

6. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM Mash ups

7. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM In web development , a mashup is a web application that combines data from more than one source into a single integrated tool Mash up AIR Widgets

10. TAC 08 Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM YYou create a mash up using public APIs provided by the web application TThe APIs are a set of function that one computer makes available to other programs so they can talk to it directly YYou have to define how you will import data into the application and what protocols and formats are supported.

11. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM Don’t forget to read the Terms of Use for the APIs Commercial vs. Non-commercial Payment for use Rate limits Content ownership Caching Privacy Policy

12. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM WWeb site’s URLs have their language. SSome URLs uses a highly expressive language making possible for other users to make mashups easier. AAddressability means that every interesting aspect of your service is immediately accessible from the outside. RRestful Web Services by Richardson and Ruby

14. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM FFeeds are documents used for providing users with frequently updated content. RRSS and ATOM are feed data formats to structure TThey are important because we use feeds to aggregate and consume external content. NNo need of XML-based APIs

15. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM RRepresentational state transfer is a style of software architecture for distributed hypermedia systems such as the WWW. As such, it is not strictly a method for building what are sometimes called "web services." RREST strictly refers to a collection of network architecture principles which outline how resources are defined and addressed.

16. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM

17. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM The text expressed as JSON: {&quot;menu&quot;: { &quot;id&quot;: &quot;file&quot;, &quot;value&quot;: &quot;File&quot;, &quot;popup&quot;: { &quot;menuitem&quot;: [ {&quot;value&quot;: &quot;New&quot;, &quot;onclick&quot;: &quot;CreateNewDoc()&quot;}, {&quot;value&quot;: &quot;Open&quot;, &quot;onclick&quot;: &quot;OpenDoc()&quot;}, {&quot;value&quot;: &quot;Close&quot;, &quot;onclick&quot;: &quot;CloseDoc()&quot;} ] } }} The text expressed as XML: <menu id=&quot;file&quot; value=&quot;File&quot;> <popup> <menuitem value=&quot;New&quot; onclick=&quot;CreateNewDoc()&quot; /> <menuitem value=&quot;Open&quot; onclick=&quot;OpenDoc()&quot; /> <menuitem value=&quot;Close&quot; onclick=&quot;CloseDoc()&quot; /> </popup> </menu>

18. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM With Adobe AIR , the creation of mash-up applications and widgets offers even greater possibilities. AIR actually makes it possible to go beyond all the sandbox security of the browser and to add advanced features to the applicaiton to interact with the file system or local storage with SQLite

19. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM In a context where several different data sources are mixed together into a main shell, is very important to structure a rigid and solid application. A centralized data repository is needed to access data buried within different components easier To accomplish these goals a Design Pattern Analisys is required

21. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM A view helper contains formatting code, delegating its processing responsibilities to its helper classes, implemented as Actionscript classes. Helpers also store the view's intermediate data model and serve as business data adapters. A View Helper consists in an ActionScript class that encapsulates business logic in a helper instead of a view, making our application more modular by facilitating component re-use.

22. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM The Model Locator pattern defines a component that is responsible for centralizing data in an application. When the data is updated in ModelLocator , all view components binded to the model, update themselves to render the new data. A Model Locator is an ActionScript class that uses the Singleton pattern. This pattern has a method that creates a new instance of the class if one does not exist. If an instance already exists, it simply returns a reference to that object.

24. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM 3 ACTIONSCRIPT 3 var urlCheck:URLRequest = new URLRequest('http://www.comtaste.com'); urlMonitor:URLMonitor = new URLMonitor ( urlRequest ); urlMonitor.start(); urlMonitor.addEventListener( StatusEvent.STATUS, onStatusEvent ); Use the method property to check only the http header for a HTTP service: urlRequest .method = URLRequestMethod.HEAD;

25. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM 2 Adobe AIR allows a strong integration with HTML content and JavaScript using the embedded WebKit engine AIR offers a complete and robust HTML renderer and JavaScript interpreter to recreate a browser-like experience. The HTMLoader class allows us to view HTML content in an AIR application. The HTML content can be directly loaded by a URL, or it can be assigned to the object as a String.

26. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM 3 ACTIONSCRIPT 3 var html:HTMLLoader = new HTMLLoader; html.width = 320; html.height = 240; var urlReq:URLRequest = new URLRequest(&quot;http://www.comtaste.com/en&quot;); html.load(urlReq);

27. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM 4 ACTIONSCRIPT 3 var html:HTMLLoader = new HTMLLoader; html.width = 320; html.height = 240; var htmlCode:String = &quot;<html><body><h1>Hello World!</h1></b>.</body></html>&quot;; html.loadString(htmlCode); You can also use the HTML Flex component: <mx:HTML id=&quot;content&quot; location=&quot;http://www.comtaste.com/en&quot;/>

29. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM 3 ACTIONSCRIPT 3 NativeApplication.nativeApplication.idleThreshold = 120; // 2 minutes NativeApplication.nativeApplication.addEventListener(Event.USER_IDLE, function(event:Event) { trace(&quot;Idle&quot;); }); NativeApplication.nativeApplication.addEventListener(Event.USER_PRESENT, function(event:Event) { trace(&quot;Present&quot;); }); This code sets the idle threshold to 2 minutes and listen for both the userIdle and userPresent events.

30. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM 2

31. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM 3 1 Window menus WWindow menus are associated to a specific window of the application and are placed straight under the title bar. TThis type of menu is only available on Microsoft Windows systems.

32. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM 4 2 Application menus AApplication menus are associated to the entire Adobe AIR application. They aren’t displayed in a single window, but are placed at the top of the desktop. TThis type of menu is only available for Mac OS X systems.

33. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM 5 ACTIONSCRIPT 3 var menu:NativeMenu = new NativeMenu(); // add a NativeMenuItem to native menu menu.addItem( new NativeMenuItem( “menu element” ) ); // add a submenu to native menu Menu.addSubMenu( new NativeMenu(), “submenu element” );

34. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM 5 ACTIONSCRIPT 3 To create an Application (Mac OSX) menu: If( NativeApplication.supportsMenu == true ) { // code to manage application menu NativeApplication.nativeApplication.menu = menuRoot; } To create a Window menu: If( NativeWindow.supportsMenu == true ) { // code to manage windows menu stage.nativeWindow.menu = menuRoot; }

35. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM Context menus A context menu is a menu that appears when you right-click on Microsoft Windows systems. They appear on Mac OS X systems when you carry out the control-click combination. You can create context menus by using both the NativeMenu class provided by Adobe Air and the ContextMenu provided by Flash Player. 6

36. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM 7 ActionScript 3 var editContextMenu:ContextMenu = new ContextMenu(); var cutItem:ContextMenuItem = new ContextMenuItem(&quot;Cut&quot;) cutItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, doCutCommand); editContextMenu.customItems.push(cutItem); var copyItem:ContextMenuItem = new ContextMenuItem(&quot;Copy&quot;) copyItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, doCopyCommand); editContextMenu.customItems.push(copyItem); sprite.contextMenu = editContextMenu;

37. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM System tray and dock icon menus These menus are associated to the icons in the system tray or in the dock bar according to the operative system. They are displayed when the user right clicks on the icon.

38. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM ActionScript 3 if ( NativeApplication.supportsDockIcon ) { // assign dock icon custom menu DockIcon( NativeApplication.nativeApplication.icon ).menu = menuRoot; } else if ( NativeApplication.supportsSystemTrayIcon ) { // assign system trsay icon custom menu SystemTrayIcon( NativeApplication.nativeApplication.icon ).menu = menuRoot; SystemTrayIcon( NativeApplication.nativeApplication.icon ).tooltip = &quot;Application settings&quot;; }}

39. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM Pop-up menus These menus share the same functions of context menus. They aren’t associated to right-clicks or control-clicks on a specific object. They can be displayed on any point of the stage of our application. This can happen both as a response to any event generated by the user or from the execution of Actionscript code.

40. Adobe AIR provides complete access to the host file system, allowing our applications to use all the documents it needs to function correctly. The flash.filesystem package, part of the Adobe AIR APIs, provides the classes you need to work with the file system Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM

41. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM The File class Each instance of the File class is a reference to a specific file or to a specific folder on the host operative system. It makes it possible to identify the complete pathway of a file or folder, access detailed information regarding the file or folder or manipulate its content.

42. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM ActionScript 3 var myFile:File = File.desktopDirectory.resolvePath( “readme.txt” ); myFile.nativePath = “C:/Test Folder/readme.txt”; myFile.nativePath = “/Users/Test Folder/readme.txt”; // show system dialog myFile.browseForDirectory( &quot;Choose a directory on your system&quot; ); // register event listener for folder selection myFile.addEventListener( Event.SELECT, directorySelected );

44. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM The FileStream class This class is responsible for accessing the content of a document and provides various methods to write and read in the file. You have to provide an instance of the File class to the FileStream class to tell it which document you are interested in.

45. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM ActionScript 3 var stream:FileStream = new FileStream(); The connection can be synchronous, using the open() function: var fileObj:File = File.desktopDirectory.resolvePath( “Readme.txt” ); stream. openAsync( file, FileMode.READ );

46. AIR also has an embedded version of the SQLite database engine that makes the runtime truly complete; SQLite gives developers the opportunity to store data locally offline and to do it via the same language they use to store data for web applications: SQL Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM

47. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM To create a database without creating a connection to it, you use the File class and its resolvePath method to create a file with a .db file extension: var dbRef:File; dbRef = File.applicationStorageDirectory.resolvePath(&quot;myDB.db&quot;);

48. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM Create a connection to a database file using the SQLConnection class: try { _dbConn.open(dbFile); } catch (error:SQLError) { mx.controls.Alert.show(&quot;Details:&quot;, event.error.details); } It creates an synchronous connection to the database. All the operations on this database file will be executed in a synchronous mode.

49. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM Create a connection to a database file using the SQLConnection class: private var _dbConn:SQLConnection = new SQLConnection(); _dbConn.openAsync(_myDB); _dbConn.addEventListener(SQLEvent.OPEN, openHandler); _dbConn.addEventListener(SQLErrorEvent.ERROR, errorHandler); It creates an asynchronous connection to the database. All the operations on this database file will be executed in a asynchronous mode.

50. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM To execute the SQL commands, you need to invoke the execute() method of the SQLStatement class, which executes the specified SQL string in the text property of the SQLStatement class: var SQLStmsqlStatement:SQLStatement = new SQLStatement(); sqlStatementSQLStm.sqlConnection = conn; var sqlText:String = &quot;CREATE TABLE IF NOT EXISTS students (&quot; + &quot; studentId INTEGER PRIMARY KEY AUTOINCREMENT, &quot; + &quot; firstName TEXT, &quot; + &quot; lastName TEXT, &quot; + &quot;)&quot;; sqlStatementSQLStm.text = sqlText; sqlStatementSQLStm.execute();

51. Open a SQLConnection at the application startup (avoid delays when running statements) Use only one SQLStatement (with parameters) Execute the statements within an explicit transaction Do not concatenate user input into statement text to secure your app When embedding a SQLite DB into the AIR package the ApplicationFolder is read-only. So, copy the DB in a different folder (using the copyTo method) Best practice TAC 08 WWW.COMTASTE.COM

53. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM

57. The as3corelib http://code.google.com/p/as3corelib/ contains a number of classes and utilities for working with ActionScript 3. These include classes for MD5 and SHA 1 hashing, Image encoders, and JSON serialization as well as general String, Number and Date APIs. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM

58. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM The as3syndicationlib http://code.google.com/p/as3syndicationlib / library provides classes to parse RSS 1.0, RSS 2.0 and ATOM data feeds easily. It also provides a generic interface for parsing feeds when you do not know the format of the feeds.

59. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM The FlexLib project is a community effort to create open source user interface components for Adobe Flex 2 and 3. http://code.google.com/p/flexlib/

60. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM It’s a work in progress library that provides code for creating multi-window applications e Flex-based personalized start page (such as NetVibes, YourMinis …) The library developed by Comtaste will be released as open source as soon as the code will be better organized.

62. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM

63. Flick is an online photo management and sharing application . Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM

64. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM Getting the flickr.photos.search method http://flickr.com/services/api/flickr.photos.search.html Return a list of photos matching some criteria. Only photos visible to the calling user will be returned. To return private or semi-private photos, the caller must be authenticated with 'read' permissions, and have permission to view the photos. Unauthenticated calls will only return public photos. 2

65. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM 3 Flickr APIs are designed to allow you to send request and get response. Flickr uses the following URL schema for photos : www.flickr.com/photos/tags/{tag_name} The easiest Flickr’s request: http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={yourkey}&tags=seychelles&per_page=5

69. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM YouTube is the most famous video sharing application on the web.

73. Mash up AIR Widgets TAC 08 WWW.COMTASTE.COM TTwitterScript ( http://code.google.com/p/twitterscript/ ) iImplements all the features provided by the Twitter APIs except for the authentication. WWith the exception of the public timeline, all Twitter API methods require authentication.

74. Marco Casario CTO – Comtaste http://casario.blogs.com

75. Marco Casario CTO – Comtaste http://casario.blogs.com