The document discusses using AJAX and Flex together. It provides reasons for combining the technologies, including overcoming limits of AJAX apps and adding rich UI to AJAX apps. It covers communicating between Flex and AJAX through FlashVars, URLs, ExternalInterface, and the Flex AJAX Bridge. Examples are given of calling JavaScript from Flex and Flex from JavaScript. Libraries like FAVideo for adding video to AJAX apps are also mentioned.
7. GOAL So why don’t use them together ? AJAX + Flex 360Flex Europe
8. GOAL Are Flash and AJAX real enemy ? AJAX + Flex 360Flex Europe
9. GOAL The story ended this way: AJAX + Flex 360Flex Europe The long spike protruding from Ajax impales Ming with an ooze of green blood and Flash advances upon the dying villain with a golden scimitar
10. GOAL FLASH and AJAX defeated the Evil. Why don’t use them together in your development? AJAX + Flex 360Flex Europe
11. GOAL What we’ve learned using Flex and AJAX together Design Patterns 360Flex Europe www.youthrubiz.com YouThruBiz is a Rich Internet Application that will help you shortlist the right candidates for the job using customized multimedia job interviews and e-resumes. Highly effective recruitment and powerful assessment, in less time
12. GOAL What we’ve learned using Flex and AJAX together Design Patterns 360Flex Europe www.yubuk.com Yubuk.com is a platform which is accessible on the internet and on mobile terminals for all those who love Italy for its enchanting locations, for its excellent cuisine and exceptional hotels
13. GOAL What we’ve learned using Flex and AJAX together Design Patterns 360Flex Europe www.augitaly.com/flexgala FlexGala is the official Adobe User Group dedicated to RIA development using Flex 3, AIR and ActionScript 3.
43. GOAL Using the FAVideo Library AJAX + Flex 360Flex Europe The Adobe Flash Ajax Video (FAVideo) component is a small, open source Flash component that you can use to provide video playback within an Ajax application. It exposes all of the formatting and video playback controls necessary to build a video player customized entirely using HTML and Javascript.
44. GOAL When use the FAVideo Library AJAX + Flex 360Flex Europe * When you want to add media capabilities to your AJAX application * You need a compact and small video playback solution. The FAVideo component is only 15k * You want full creative control over presentation of the video within your application.
45. GOAL Getting Started with the FAVideo Library AJAX + Flex 360Flex Europe Import the Javascript libraries you need to use the dependencies FAVideo library : <script src="FAVideo.js" type="text/javascript"></script> <script src="AC_RunActiveContent.js“ type="text/javascript"></script>
46. GOAL Getting Started with the FAVideo Library AJAX + Flex 360Flex Europe Istantiate the video player and set the start up properties : player = new FAVideo("playerDiv"); player.stop(); isPlaying = false; isMuted = false; oldVolume = 50; playingVideoId = null;
47. GOAL Getting Started with the FAVideo Library AJAX + Flex 360Flex Europe Register the playheadUpdate listener to programmatically update the timing via JavaScript : player.addEventListener("playheadUpdate", this, playheadUpdate); function playheadUpdate(event) { if(playingVideoId != null) if(document.getElementById("videoList_div"+playingVideoId) != null) document.getElementById("videoList_div"+playingVideoId).innerHTML = Math.floor(parseFloat(event.playheadTime)) + "/" + Math.floor(parseFloat(event.totalTime)); }
48. GOAL Using the FAVideo Library AJAX + Flex 360Flex Europe DEMO
49. GOAL Using 2 client side technologies it’s essential to find a practical way to debug your application. Flex and AJAX Best Practice 360Flex Europe Debug Flex and AJAX
50. GOAL Monitore the network traffic could be crucial in many contexts. 360Flex Europe Monitoring the network traffic TraceTarget
51. GOAL This class provides a logger target that uses the trace() method to output log messages 360Flex Europe The TraceTarget class TraceTarget
55. GOAL To use the Logging API and send the messages to the Flash Player Debug, you must define the log target and add it to the Log object: myLogTarget:TraceTarget = new TraceTarget(); Log.addTarget(myLogTarget); Logging APIs 360Flex Europe Debug using the Logging APIs
56. GOAL Then, using the getLogger() method of the Log object, you can send a message to the file that you intend to debug: Log.getLogger("myMXMLfileOrClass").info("My message"); 360Flex Europe Debug using the Logging APIs Logging APIs
59. GOAL You can print all the messages passed to the global trace() method in an external file called flashlog.txt. Create and configure the mm.cfg file (usually located in driveocuments and Settingsser_name) as follow: TraceOutputFileName=c:/logs/flashlog.txt ErrorReportingEnable=1 TraceOutputFileEnable=1 MaxWarnings=0 Troubleshooting tips for flashlog.txt not being generated 360Flex Europe Debug with the flashlog.txt file Logging APIs
60. GOAL What we’ve learned using Flex and AJAX together Design Patterns 360Flex Europe In a mixed enviroment where different developers have to communicate together, it’s crucial to use the same language. If you want to save time,it worths the use of the Design Patterns in Flex and Javascript.
61.
62. GOAL Create a View Helper Design Patterns 360Flex Europe 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.
63. GOAL Elements of a View Helper Design Patterns 360Flex Europe 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.
64. GOAL Elements of a View Helper Design Patterns 360Flex Europe <h:UploadHelper id="uploadHelper" /> package com.fitc { import flash.events.Event; import flash.events.IOErrorEvent; ........ public class UploadHelper {} }
65. GOAL Create a Model Locator Design Patterns 360Flex Europe 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.
66. GOAL Elements of a Model Locator Design Patterns 360Flex Europe 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.
83. GOAL Using Transaction AJAX + Flex 360Flex Europe Flex encapsulates client-committed operations in a single J2EE distributed transaction. All client data changes are handled as a unit. If one value cannot be changed, changes to all other values are rolled back. Distributed transactions are supported as long as your J2EE server provides support for J2EE transactions (JTA). <destination id="contact"> <properties> <use-transactions>true</use-transactions> </properties> </destination>
84. GOAL Data Services Security AJAX + Flex 360Flex Europe You can secure a destination by using a security constraint, which defines the access privileges for the destination. You use a security constraint to authenticate and authorize users before letting them access a destination. You can specify whether to use basic or custom authentication, and indicate the roles required for authorization.
85. GOAL Using the AJAX Data Services AJAX + Flex 360Flex Europe To use AJAX Data Services in an AJAX application, you must include the following JavaScript libraries in script tags on the HTML page: * FDMSLib.js : contains the definition of LiveCycle DS APIs as JavaScript, and some utility methods for constructing and initializing Data Management Service objects. * FABridge.js : provides the FABridge library You must have the following ActionScript libraries to compile the SWF file: * FABridge.as * FDMSBase.as
86. GOAL Using the AJAX Data Services AJAX + Flex 360Flex Europe Call the FDMSLib.load() to initialize the library. It creates the appropriate HTML to embed Flash Player and load the specified shim SWF file. After Flash Player loads the shim SWF file that contains the bridge, the specified callback is invoked to notify the application that Data Services are available and ready for use.
87. GOAL Using the AJAX Data Services AJAX + Flex 360Flex Europe Load the FDMSBridge.swf file using JavaScript : <script> FDMSLibrary.load("/ajax/Products/FDMSBridge.swf", fdmsReady); </script> This SWF file is typically compiled using the FDMSBridge.as application file
88. GOAL Using the AJAX Data Services AJAX + Flex 360Flex Europe Once the bridge indicates that it is ready, we can proceed to load the data: function fdmsReady () { ... }
89. GOAL Using the AJAX Data Services AJAX + Flex 360Flex Europe At this point the client constructs the appropriate Data Service objects and loads data from the server. The following example shows this sequence: function fdmsReady () { productS = new DataService("Products"); productS.addEventListener(DataService.RESULT,productsResult); productS.addEventListener(DataService.FAULT, productFault); products = new ArrayCollection(); var token = productS.fill(products); token.set("operation", "fill"); }
90. GOAL Using the AJAX Data Services AJAX + Flex 360Flex Europe Handle the result and fault event and make the data visible into the visual elements : function productsResult(event) { if (event.getToken().get("operation") == "fill") { var htmlText = "<table id='productTable'>"; var product; for (var i=0; i<products.getLength(); i++) { product = products.getItemAt(i); htmlText += "<tr><td>"+ product.getName() + "</td><td>"+ product.category + "</td></tr>"; } htmlText += "</table>"; document.all["products"].innerHTML = htmlText; } } }
91. GOAL Adobe AIR 360Flex Europe Flex and AJAX on the desktop with AIR
92. GOAL Adobe AIR 360Flex Europe Flex on the desktop with AIR Developing an AIR desktop application is very easy if you are an AJAX or a Flex developer.
93. we make it RIA Marco Casario CTO – Comtaste http://casario.blogs.com
94. FLEXGALA user group www.augitaly.com/flexgala Matteo Ronchi Consultant – Comtaste [email_address] www.cef62.com/blog
95. FLEXGALA Video tutorial viewer - read rss feeds from user group website - show available video tutorials - load video tutorials directly into application Written completely in HTML/css and Javascript to show Adobe Air powerful AJAX developments environment. Only open source or free tools and technologies used.
97. Aptana studio - Open source editor based on Eclipse - Javascript integrated development - HTML / Css Dom navigation - HTML internal rendering engine - Built-in integration with Adobe AIR sdk - code completion, based on AIRAliases.js - output console for tracing integrated - wizard for generate redistributable AIR applications
98. AIRIntrospector: ajax debugging console inspired on Firebug console offers: - advanced tracing and data dumping options - interactive inspecting of HTML layout - XHR monitor - HTML / DOM navigator - access original and rendered source code of your pages
99. Manage feeds with Spry Framework We used Spry functionalities to request Rss feed and parse it into our's HTML presentation layout: var rssData = new Spry . Data . XMLDataSet ( "http://www.flexgala.com/rss_flv.php", "rss/channel/item" ); In HTML feeds list is constructed using Spry Data binding functionalities: < div spry:region = "rssData"> < table width = "100%"> < tr spry:repeat = "rssData" spry:setrow = "rssData"> < td > < span class = "header"> {title} </ span >< br /> < span class = "date"> {pubDate} </ span > </ td > </ tr > </ table > </ div >
100. Application XML descriptor file <?xml version= "1.0" encoding= "UTF-8" ?> <application xmlns= "http://ns.adobe.com/air/application/1.0" > <!-- The application identifier string, unique to this application. --> <id> com.flexgala.app.videoBrowser </id> <!-- Used as the filename for the application --> <filename> flexGalaVideoBrowser </filename> [.....] <initialWindow> <content> index.html </content> <systemChrome> none </systemChrome> <transparent> true </transparent> <visible> false </visible> <!-- The window's initial size . --> <width> 360 </width> <height> 590 </height> <!-- The window's initial position --> <x> 50 </x> <y> 50 </y> </initialWindow> [.....] <application>
101. Custom chrome windows functionalities We choosed to use our custom chrome so needs to be defined desired window functionalities: closing,minizing and resizing. function doMinimizeClick (){ nativeWindow . minimize (); } function doCloseClick (){ window . close (); } function onResize(){ nativeWindow . startResize ( air . NativeWindowResize . BOTTOM_RIGHT ); }
102. Videoplayer HTML layout Video player HTML is defined in external document inserted in ours application layout via “Iframe” elements. In this way we can separates and better manages different elements. < iframe id = "videoContainer" src = "video.html" sandboxRoot = "http://www.augitaly.com/" documentRoot = "app:/"/>
103. Video and Main Application relationships Defines mapping between main application functions and videoPlayer HTML presentation layout. [ Main Application ] // Map functions across security sandbox exposed . open = open ; exposed . pause = pause ; exposed . resume = resume ; // Add functions to IFRAME document document . getElementById ( 'videoContainer' ). contentWindow . parentSandboxBridge = exposed ; [ Video player ] // Called when the play button is clicked // Controls playback/pause and provides appropriate UI function doPlayClick () { parentSandboxBridge . pause (); document . getElementById ( 'play' ). src = PLAY_OVER ; }
104. Manages Window Growing animation We want animates window when first video is requested to play. Spry Framework offers a simple way to do it. var enlargeAnimation = new Spry . Effect . Grow ( {TARGET_HTML_ELEMENTS} , { duration , from , to , growCenter , referHeight , toggle , transition , setup , finish } );
105. Manages Window Growing animation We want sinchronize HTML element growing size with our's NATIVE WINDOW bounds, we do that in an ENTER_FRAME handler. // callback used to synchronize windows width to content width function doGrowing ( eventObj ) { window . nativeWindow . width = getVideoContainer (). clientWidth + getVideoContainer (). offsetLeft ; window . nativeWindow . height = getVideoContainer (). clientHeight + getVideoContainer (). offsetTop ; air . Introspector . Console . log ( "new w: " + window . nativeWindow . width ); air . Introspector . Console . log ( "new h: " + window . nativeWindow . height ); } function getVideoContainer () { return document . getElementById ( IFRAME_NAME ); }
106. onClosing window event Before application close itself, via custom close button, we need to remove all handlers registered to ENTER_FRAME events. This is required to avoid possible runtime errors generated during close operation. window . nativeWindow . addEventListener ( air . Event . CLOSING , onClosingHandler ); function onClosingHandler ( e ){ // remove EnterFrame event before closing to avoid unexpected exceptions window . htmlLoader . stage . removeEventListener ( air . Event . ENTER_FRAME , doFrame ); }
107. compiles with AptanaStudio Aptana offers integrated wizard to manage Adobe Air SDK compiling options. Offers also a standard application certificate to be used if you don't have your own.
108. features enhancement This application is inteded as a first draft of more complex and usefull tools that will be offered to FLEXGALA registered users. Extra features will be added as: - load and play locals FLVs files - show/hide video panels - notifications when new video are availables - and more.... Stay tuned on Flexgala.com newsletter for incoming updates.
109. we make it RIA Marco Casario CTO – Comtaste http://casario.blogs.com