SlideShare a Scribd company logo
1 of 109
Download to read offline
360Flex Europe Marco Casario CTO – Comtaste http://casario.blogs.com
Who I am 360Flex Europe ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Agenda 360Flex Europe ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
GOAL Why use AJAX and Flex together AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object]
GOAL Some of the limits of AJAX-oriented apps AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object]
GOAL Some of the limits of Flex-oriented apps AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object]
GOAL So why don’t use them together ? AJAX + Flex 360Flex Europe
GOAL Are Flash and AJAX real enemy ? AJAX + Flex 360Flex Europe
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
GOAL FLASH and AJAX defeated the Evil. Why don’t use them together in your development? AJAX + Flex 360Flex Europe
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
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
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.
GOAL Less is More. AJAX + Flex 360Flex Europe
GOAL Communicating between AJAX and Flex AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
GOAL Using the FlashVars properties AJAX + Flex 360Flex Europe ,[object Object],<object id='mySwf'  classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'  codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab'  height='100%' width='100%'> <param name='src' value='FlashVarTest.swf'/> <param name='flashVars' value='firstName=Marco&lastName=Casario'/> <embed name='mySwf' src='FlashVarTest.swf'  pluginspage='http://www.adobe.com/go/getflashplayer'  height='100%' width='100%'  flashVars='firstName=Marco&lastName=Casario'/> </object>
GOAL Using URL fragments  AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object]
GOAL Using URL fragments  AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object]
GOAL Using flashVars  AJAX + Flex 360Flex Europe DEMO
GOAL Using the navigateToURL() method AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object]
GOAL Using the navigateToURL() method AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object]
GOAL Using the navigateToURL() method AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
GOAL Using the ExternalInterface API  AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object]
GOAL Calling JavaScript methods from Flex AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object]
GOAL Accessing Flex from JavaScript AJAX + Flex 360Flex Europe ,[object Object],[object Object]
GOAL Accessing Flex from JavaScript AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
GOAL Calling JavaScript methods from Flex AJAX + Flex 360Flex Europe ,[object Object],[object Object]
GOAL ExternalInterface API security AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object]
GOAL ExternalInterface API security AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object]
GOAL ExternalInterface API security AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object]
GOAL ExternalInterface API security AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object]
GOAL ExternalInterface API security AJAX + Flex 360Flex Europe ,[object Object],[object Object]
GOAL The Flex AJAX Bridge AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object]
GOAL When to use the Flex AJAX Bridge AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object]
GOAL When to use the Flex AJAX Bridge AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object]
GOAL Use the Flex AJAX Bridge AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object]
GOAL Wait for initialization AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
GOAL Get and set value of a property AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object]
GOAL Get and set value of a property AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
GOAL Memory management AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object]
GOAL Limitations of the FABridge AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
GOAL Use the Flex AJAX Bridge AJAX + Flex 360Flex Europe ,[object Object]
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.
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.
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=&quot;FAVideo.js&quot; type=&quot;text/javascript&quot;></script> <script src=&quot;AC_RunActiveContent.js“ type=&quot;text/javascript&quot;></script>
GOAL Getting Started with the FAVideo Library AJAX + Flex 360Flex Europe Istantiate the video player and set the start up properties : player = new FAVideo(&quot;playerDiv&quot;); player.stop(); isPlaying = false; isMuted = false; oldVolume = 50; playingVideoId = null;
GOAL Getting Started with the FAVideo Library AJAX + Flex 360Flex Europe Register the playheadUpdate listener to programmatically update the timing via JavaScript : player.addEventListener(&quot;playheadUpdate&quot;, this, playheadUpdate); function playheadUpdate(event) { if(playingVideoId != null) if(document.getElementById(&quot;videoList_div&quot;+playingVideoId) != null) document.getElementById(&quot;videoList_div&quot;+playingVideoId).innerHTML = Math.floor(parseFloat(event.playheadTime)) + &quot;/&quot; +  Math.floor(parseFloat(event.totalTime)); }
GOAL Using the FAVideo Library AJAX + Flex 360Flex Europe DEMO
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
GOAL Monitore the network traffic could be crucial in many contexts. 360Flex Europe Monitoring the network traffic TraceTarget
GOAL This class provides a logger target that uses the trace() method to output log messages  360Flex Europe The TraceTarget class  TraceTarget
GOAL 360Flex Europe Using Firebug Extension  TraceTarget
GOAL ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],360Flex Europe TraceTarget Using Firebug Extension
GOAL ,[object Object],[object Object],[object Object],[object Object],[object Object],360Flex Europe Debug using the Logging APIs  TraceTarget
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
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(&quot;myMXMLfileOrClass&quot;).info(&quot;My message&quot;); 360Flex Europe Debug using the Logging APIs  Logging APIs
GOAL ,[object Object],[object Object],[object Object],360Flex Europe Debug using the Logging APIs  Logging APIs
GOAL 360Flex Europe Debug using the Logging APIs  Logging APIs
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
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.
GOAL Architecture your code Design Patterns 360Flex Europe ,[object Object],[object Object],[object Object]
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.
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.
GOAL Elements of a View Helper Design Patterns 360Flex Europe <h:UploadHelper id=&quot;uploadHelper&quot; /> package com.fitc { import flash.events.Event; import flash.events.IOErrorEvent; ........ public class UploadHelper {} }
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.
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.
GOAL The AJAX Data Services AJAX + Flex 360Flex Europe ,[object Object],[object Object]
GOAL AJAX Data Services vs. Flex AJAX Bridge AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object]
GOAL The Livecycle Data Services AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object]
GOAL The Livecycle Data Services AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object]
GOAL The Livecycle Data Services Schema AJAX + Flex 360Flex Europe
GOAL Data Services Features AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object]
GOAL Data Services Features AJAX + Flex 360Flex Europe ,[object Object],[object Object]
GOAL Data Services Features AJAX + Flex 360Flex Europe ,[object Object],[object Object]
GOAL Benefits of using the AJAX Data Services AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object]
GOAL The AMF3 format AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object]
GOAL Installing Livecycle DS AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
GOAL Installing Livecycle DS AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object]
GOAL Configuring Data Management Service AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object],[object Object]
GOAL Configuring Data Management Service AJAX + Flex 360Flex Europe ,[object Object],[object Object]
GOAL Configuring Data Management Service AJAX + Flex 360Flex Europe ,[object Object],[object Object]
GOAL Configuring Network elements AJAX + Flex 360Flex Europe ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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=&quot;contact&quot;> <properties> <use-transactions>true</use-transactions> </properties> </destination>
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.
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
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.
GOAL Using the AJAX Data Services AJAX + Flex 360Flex Europe Load the FDMSBridge.swf file using JavaScript :  <script> FDMSLibrary.load(&quot;/ajax/Products/FDMSBridge.swf&quot;, fdmsReady); </script> This SWF file is typically compiled using the FDMSBridge.as application file
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 () { ... }
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(&quot;Products&quot;); productS.addEventListener(DataService.RESULT,productsResult); productS.addEventListener(DataService.FAULT, productFault); products = new ArrayCollection(); var token = productS.fill(products); token.set(&quot;operation&quot;, &quot;fill&quot;); }
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(&quot;operation&quot;) == &quot;fill&quot;) { var htmlText = &quot;<table id='productTable'>&quot;; var product; for (var i=0; i<products.getLength(); i++) { product = products.getItemAt(i); htmlText += &quot;<tr><td>&quot;+ product.getName() +  &quot;</td><td>&quot;+ product.category + &quot;</td></tr>&quot;; } htmlText += &quot;</table>&quot;; document.all[&quot;products&quot;].innerHTML = htmlText; } } }
GOAL Adobe AIR 360Flex Europe Flex and AJAX on the desktop with AIR
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.
we make it RIA Marco Casario CTO – Comtaste http://casario.blogs.com
FLEXGALA   user group www.augitaly.com/flexgala Matteo Ronchi Consultant – Comtaste [email_address] www.cef62.com/blog
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.
technologies involved - Adobe Air SDK - HTML / css - Adobe Spry Framework - AJAX
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
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
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 (    &quot;http://www.flexgala.com/rss_flv.php&quot;,  &quot;rss/channel/item&quot;  ); In HTML feeds list is constructed using Spry Data binding functionalities: < div   spry:region = &quot;rssData&quot;> < table   width = &quot;100%&quot;> < tr   spry:repeat = &quot;rssData&quot;   spry:setrow = &quot;rssData&quot;> < td > < span   class = &quot;header&quot;> {title} </ span >< br   /> < span   class = &quot;date&quot;> {pubDate} </ span > </ td > </ tr > </ table > </ div >
Application XML descriptor file <?xml   version= &quot;1.0&quot;   encoding= &quot;UTF-8&quot; ?> <application   xmlns= &quot;http://ns.adobe.com/air/application/1.0&quot; > <!--   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>
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  ); }
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 = &quot;videoContainer&quot;   src = &quot;video.html&quot;   sandboxRoot = &quot;http://www.augitaly.com/&quot;   documentRoot = &quot;app:/&quot;/>
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 ; }
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 } );
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 (  &quot;new w: &quot;  +  window . nativeWindow . width  ); air . Introspector . Console . log (  &quot;new h: &quot;  +  window . nativeWindow . height  ); } function   getVideoContainer () { return   document . getElementById (  IFRAME_NAME  ); }
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  ); }
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.
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.
we make it RIA Marco Casario CTO – Comtaste http://casario.blogs.com

More Related Content

Similar to Better Adobe Flex and AIR applications with AJAX

Flex In Portal Final
Flex In Portal   FinalFlex In Portal   Final
Flex In Portal FinalSunil Patil
 
Flex Remoting With WebORB v1.0
Flex Remoting With WebORB v1.0Flex Remoting With WebORB v1.0
Flex Remoting With WebORB v1.0guest642dd3
 
Flex Daily Solutions @ FITC 2008
Flex Daily Solutions @ FITC 2008Flex Daily Solutions @ FITC 2008
Flex Daily Solutions @ FITC 2008marcocasario
 
Mashups MAX 360|MAX 2008 Unconference
Mashups MAX 360|MAX 2008 UnconferenceMashups MAX 360|MAX 2008 Unconference
Mashups MAX 360|MAX 2008 UnconferenceElad Elrom
 
Flex And Ria
Flex And RiaFlex And Ria
Flex And Riaravinxg
 
Adobe Flex builder by elmagnif
Adobe Flex builder  by elmagnifAdobe Flex builder  by elmagnif
Adobe Flex builder by elmagnifmbaye camara
 
Introduction To Rich Internet Applications
Introduction To Rich Internet ApplicationsIntroduction To Rich Internet Applications
Introduction To Rich Internet ApplicationsAbdelmonaim Remani
 
Flex for enterprise applications
Flex for enterprise applicationsFlex for enterprise applications
Flex for enterprise applicationsdarshanvartak
 
Developing Mash up applications with Adobe AIR
Developing Mash up applications with Adobe AIRDeveloping Mash up applications with Adobe AIR
Developing Mash up applications with Adobe AIRmarcocasario
 
Using Ajax In Domino Web Applications
Using Ajax In Domino Web ApplicationsUsing Ajax In Domino Web Applications
Using Ajax In Domino Web Applicationsdominion
 
Flex vs. HTML5 for RIAS
Flex vs. HTML5 for RIASFlex vs. HTML5 for RIAS
Flex vs. HTML5 for RIASPamela Fox
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginnersVineeth N Krishnan
 
Choosing the right Rich Internet Application technology path
Choosing the right Rich Internet Application technology pathChoosing the right Rich Internet Application technology path
Choosing the right Rich Internet Application technology pathmarcocasario
 

Similar to Better Adobe Flex and AIR applications with AJAX (20)

Flex In Portal Final
Flex In Portal   FinalFlex In Portal   Final
Flex In Portal Final
 
Adobe Flex
Adobe FlexAdobe Flex
Adobe Flex
 
Flex Remoting With WebORB v1.0
Flex Remoting With WebORB v1.0Flex Remoting With WebORB v1.0
Flex Remoting With WebORB v1.0
 
Adobe Flex4
Adobe Flex4 Adobe Flex4
Adobe Flex4
 
Flex Daily Solutions @ FITC 2008
Flex Daily Solutions @ FITC 2008Flex Daily Solutions @ FITC 2008
Flex Daily Solutions @ FITC 2008
 
Adobe flex
Adobe flexAdobe flex
Adobe flex
 
Flex & Drupal Integration
Flex & Drupal IntegrationFlex & Drupal Integration
Flex & Drupal Integration
 
Mashups MAX 360|MAX 2008 Unconference
Mashups MAX 360|MAX 2008 UnconferenceMashups MAX 360|MAX 2008 Unconference
Mashups MAX 360|MAX 2008 Unconference
 
Flex And Ria
Flex And RiaFlex And Ria
Flex And Ria
 
Flex RIA
Flex RIAFlex RIA
Flex RIA
 
FlexCamp London
FlexCamp LondonFlexCamp London
FlexCamp London
 
Adobe Flex builder by elmagnif
Adobe Flex builder  by elmagnifAdobe Flex builder  by elmagnif
Adobe Flex builder by elmagnif
 
Introduction To Rich Internet Applications
Introduction To Rich Internet ApplicationsIntroduction To Rich Internet Applications
Introduction To Rich Internet Applications
 
Adobe Flex
Adobe FlexAdobe Flex
Adobe Flex
 
Flex for enterprise applications
Flex for enterprise applicationsFlex for enterprise applications
Flex for enterprise applications
 
Developing Mash up applications with Adobe AIR
Developing Mash up applications with Adobe AIRDeveloping Mash up applications with Adobe AIR
Developing Mash up applications with Adobe AIR
 
Using Ajax In Domino Web Applications
Using Ajax In Domino Web ApplicationsUsing Ajax In Domino Web Applications
Using Ajax In Domino Web Applications
 
Flex vs. HTML5 for RIAS
Flex vs. HTML5 for RIASFlex vs. HTML5 for RIAS
Flex vs. HTML5 for RIAS
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
Choosing the right Rich Internet Application technology path
Choosing the right Rich Internet Application technology pathChoosing the right Rich Internet Application technology path
Choosing the right Rich Internet Application technology path
 

Recently uploaded

activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 

Recently uploaded (20)

activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 

Better Adobe Flex and AIR applications with AJAX

  • 1. 360Flex Europe Marco Casario CTO – Comtaste http://casario.blogs.com
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 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.
  • 14. GOAL Less is More. AJAX + Flex 360Flex Europe
  • 15.
  • 16.
  • 17.
  • 18.
  • 19. GOAL Using flashVars AJAX + Flex 360Flex Europe DEMO
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 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=&quot;FAVideo.js&quot; type=&quot;text/javascript&quot;></script> <script src=&quot;AC_RunActiveContent.js“ type=&quot;text/javascript&quot;></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(&quot;playerDiv&quot;); 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(&quot;playheadUpdate&quot;, this, playheadUpdate); function playheadUpdate(event) { if(playingVideoId != null) if(document.getElementById(&quot;videoList_div&quot;+playingVideoId) != null) document.getElementById(&quot;videoList_div&quot;+playingVideoId).innerHTML = Math.floor(parseFloat(event.playheadTime)) + &quot;/&quot; + 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
  • 52. GOAL 360Flex Europe Using Firebug Extension TraceTarget
  • 53.
  • 54.
  • 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(&quot;myMXMLfileOrClass&quot;).info(&quot;My message&quot;); 360Flex Europe Debug using the Logging APIs Logging APIs
  • 57.
  • 58. GOAL 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=&quot;uploadHelper&quot; /> 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.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71. GOAL The Livecycle Data Services Schema AJAX + Flex 360Flex Europe
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 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=&quot;contact&quot;> <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(&quot;/ajax/Products/FDMSBridge.swf&quot;, 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(&quot;Products&quot;); productS.addEventListener(DataService.RESULT,productsResult); productS.addEventListener(DataService.FAULT, productFault); products = new ArrayCollection(); var token = productS.fill(products); token.set(&quot;operation&quot;, &quot;fill&quot;); }
  • 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(&quot;operation&quot;) == &quot;fill&quot;) { var htmlText = &quot;<table id='productTable'>&quot;; var product; for (var i=0; i<products.getLength(); i++) { product = products.getItemAt(i); htmlText += &quot;<tr><td>&quot;+ product.getName() + &quot;</td><td>&quot;+ product.category + &quot;</td></tr>&quot;; } htmlText += &quot;</table>&quot;; document.all[&quot;products&quot;].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.
  • 96. technologies involved - Adobe Air SDK - HTML / css - Adobe Spry Framework - AJAX
  • 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 ( &quot;http://www.flexgala.com/rss_flv.php&quot;, &quot;rss/channel/item&quot; ); In HTML feeds list is constructed using Spry Data binding functionalities: < div spry:region = &quot;rssData&quot;> < table width = &quot;100%&quot;> < tr spry:repeat = &quot;rssData&quot; spry:setrow = &quot;rssData&quot;> < td > < span class = &quot;header&quot;> {title} </ span >< br /> < span class = &quot;date&quot;> {pubDate} </ span > </ td > </ tr > </ table > </ div >
  • 100. Application XML descriptor file <?xml version= &quot;1.0&quot; encoding= &quot;UTF-8&quot; ?> <application xmlns= &quot;http://ns.adobe.com/air/application/1.0&quot; > <!-- 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 = &quot;videoContainer&quot; src = &quot;video.html&quot; sandboxRoot = &quot;http://www.augitaly.com/&quot; documentRoot = &quot;app:/&quot;/>
  • 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 ( &quot;new w: &quot; + window . nativeWindow . width ); air . Introspector . Console . log ( &quot;new h: &quot; + 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