8. Mash up AIR Widgets FOTB 08 WWW.COMTASTE.COM Mash ups
9. Mash up AIR Widgets FOTB 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. Mash up AIR Widgets FOTB 08 WWW.COMTASTE.COM Why Mash up AIR Widgets Itās one of our deepest desire: to aggregate, manipulate any content type
11.
12.
13. FOTB 08 Mash up AIR Widgets FOTB 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.
14. Mash up AIR Widgets FOTB 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
15. Mash up AIR Widgets FOTB 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
16.
17. Mash up AIR Widgets FOTB 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
18. Mash up AIR Widgets FOTB 08 WWW.COMTASTE.COM RREST (Representational state transfer ) strictly refers to a collection of network architecture principles which outline how resources are defined and addressed.
20. Mash up AIR Widgets FOTB 08 WWW.COMTASTE.COM The text expressed as JSON: {"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }} The text expressed as XML: <menu id="file" value="File"> <popup> <menuitem value="New" onclick="CreateNewDoc()" /> <menuitem value="Open" onclick="OpenDoc()" /> <menuitem value="Close" onclick="CloseDoc()" /> </popup> </menu>
21. Mash up AIR Widgets FOTB 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
22. Mash up AIR Widgets FOTB 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
23.
24. Mash up AIR Widgets FOTB 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.
25. Mash up AIR Widgets FOTB 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.
26.
27. 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 FOTB 08 WWW.COMTASTE.COM
28. Mash up AIR Widgets FOTB 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.
29. Mash up AIR Widgets FOTB 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/
30. Mash up AIR Widgets FOTB 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.
33. Flick is an online photo management and sharing application . Mash up AIR Widgets FOTB 08 WWW.COMTASTE.COM
34. Mash up AIR Widgets FOTB 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. 2
35. Mash up AIR Widgets FOTB 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
36.
37.
38.
39. Mash up AIR Widgets FOTB 08 WWW.COMTASTE.COM YouTube is the most famous video sharing application on the web.
40.
41.
42.
43. Mash up AIR Widgets FOTB 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.
44.
45. Mash up AIR Widgets FOTB 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;
46. Mash up AIR Widgets FOTB 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.
47. Mash up AIR Widgets FOTB 08 WWW.COMTASTE.COM 3 ACTIONSCRIPT 3 var html:HTMLLoader = new HTMLLoader; html.width = 320; html.height = 240; var urlReq:URLRequest = new URLRequest("http://www.comtaste.com/en"); html.load(urlReq);
48. Mash up AIR Widgets FOTB 08 WWW.COMTASTE.COM 4 ACTIONSCRIPT 3 var html:HTMLLoader = new HTMLLoader; html.width = 320; html.height = 240; var htmlCode:String = "<html><body><h1>Hello World!</h1></b>.</body></html>"; html.loadString(htmlCode); You can also use the HTML Flex component: <mx:HTML id="content" location="http://www.comtaste.com/en"/>
49.
50. Mash up AIR Widgets FOTB 08 WWW.COMTASTE.COM 3 ACTIONSCRIPT 3 NativeApplication.nativeApplication.idleThreshold = 120; // 2 minutes NativeApplication.nativeApplication.addEventListener(Event.USER_IDLE, function(event:Event) { trace("Idle"); }); NativeApplication.nativeApplication.addEventListener(Event.USER_PRESENT, function(event:Event) { trace("Present"); }); This code sets the idle threshold to 2 minutes and listen for both the userIdle and userPresent events.
51. Mash up AIR Widgets FOTB 08 WWW.COMTASTE.COM 2
52. Mash up AIR Widgets FOTB 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.
53. Mash up AIR Widgets FOTB 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.
54. Mash up AIR Widgets FOTB 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ā );
55. Mash up AIR Widgets FOTB 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; }
56. Mash up AIR Widgets FOTB 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
57. Mash up AIR Widgets FOTB 08 WWW.COMTASTE.COM 7 ActionScript 3 var editContextMenu:ContextMenu = new ContextMenu(); var cutItem:ContextMenuItem = new ContextMenuItem("Cut") cutItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, doCutCommand); editContextMenu.customItems.push(cutItem); var copyItem:ContextMenuItem = new ContextMenuItem("Copy") copyItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, doCopyCommand); editContextMenu.customItems.push(copyItem); sprite.contextMenu = editContextMenu;
58. Mash up AIR Widgets FOTB 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.
59. Mash up AIR Widgets FOTB 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 = "Application settings"; }}