Better Adobe Flex and AIR applications with AJAX

360Flex Europe Marco Casario CTO – Comtaste http://casario.blogs.com

Who I am 360Flex Europe

CTO of Comtaste , RIA Development, Consulting and Training firm

www.comtaste.com

My Books

Flex Solutions: Essential Techniques for Flex 2 and Flex 3 Developers

Advanced AIR Applications

My Blog and my contacts

http://casario.blogs.com

http://blog.comtaste.com

Agenda 360Flex Europe

We’ll talk about the possibility to use a mix of AJAX and Flex in your applications

I’ll talk about :

Why use Flex and AJAX together

Benefits of using one or the other technology (and both)

How to exchange data between AJAX and Flex

Communicating with the wrapper

Using the ExternalInterface class

Using the Flex AJAX Bridge classes

When to use the FABridge

What we’ve learned in our project’s development

AJAX and Flex Best Practice

Using the Data Services

Using the AJAX Data Services

We will move very quickly  A lot of things to show and share!

GOAL Why use AJAX and Flex together AJAX + Flex 360Flex Europe

AJAX and Flex are powerful tools. You can use them together to :

If you have an AJAX application and you want to add rich UI controls and functionalities

Overcome the limit of the HTML UI controls

Reduce the time of testing your Flex stuff on different browsers and different OSs

GOAL Some of the limits of AJAX-oriented apps AJAX + Flex 360Flex Europe

AJAX could require a consistent time in testing and debugging

Choosing a commercial AJAX solution means adopting a proprietary framework and tool

The AJAX market is very fragmented

The community is big but has caused a lot of confusion. There’s no official voice to follow.

GOAL Some of the limits of Flex-oriented apps AJAX + Flex 360Flex Europe

The learning curve for Flex is higher than HTML+JavaScript

Flex is tied to Flash Player (no DHTML)

The Flash Player is not open but is property of Adobe

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

A Flex widget is loaded in a browser within a wrapper(an HTML page with some JavaScript)

There are different ways to exchange data between an Flex application and the AJAX page:

using the flashVars properties,

querying string parameters,

using the navigateToURL() method

using the ExternalInterface class

GOAL Using the FlashVars properties AJAX + Flex 360Flex Europe

The flashVars properties are declared inside the HTML page (the wrapper) and read in the Flex application at run time:

GOAL Using URL fragments AJAX + Flex 360Flex Europe

You can access variables on the query string without providing additional code:

http://www.domain.com/myApp.swf?firstName=Marco&lastname=Casario

In your Flex app to access the values you use the Application.application.parameters object:

myName:String = new String(Application.application.parameters. firstName);

GOAL Using URL fragments AJAX + Flex 360Flex Europe

The BrowserManager also provides a method of accessing values from a URL inside your Flex application.

http://www.domain.com/index.jsp?myName=Marco&lastname=Casario

To convert these parameters to an object, you get the URL and then use the URLUtil class's stringToObject() method.

GOAL Using flashVars AJAX + Flex 360Flex Europe DEMO

GOAL Using the navigateToURL() method AJAX + Flex 360Flex Europe

The navigateToURL() method (part of the flash.net package) loads a document from a specific URL into a window.

But it also allows you to pass variables to another application at a defined URL.

So you can use this method to call JavaScript functions in the HTML page that encloses a Flex application.

The navigateToURL() method has the following syntax:

navigateToURL(request:URLRequest, window:String):void

request: is a URLRequest object that specifies the destination.

window: specifies whether to launch a new browser window or load the new URL into the current window.

You can use the navigateToURL() method to invoke JavaScript functions:

//in Flex var u:URLRequest = new URLRequest("javascript:catchClick('"

+ eName + "','" + eType + "')");

navigateToURL(u,"_self");

//On the HTML page

<SCRIPT LANGUAGE="JavaScript">

function catchClick(name, type) {

alert(name + " triggered the " + type + " event.");

}

</SCRIPT>

GOAL Using the ExternalInterface API AJAX + Flex 360Flex Europe

The ExternalInterface is part of the flash.external package

This class allows developers to pass data from the Flex application to the enclosing HTML page, process it, and then pass it back to the Flex application.

Moreover you can call any JavaScript method on the wrapper, pass parameters, and get a return value.

GOAL Calling JavaScript methods from Flex AJAX + Flex 360Flex Europe

Using the static call() method of the ExternalInterface API:

flash.external.ExternalInterface.call(function_name:String[, arg1, ...]):Object;

Using the call() method requires that the embedded Flex application have a ID name declared in the wrapper (on the <object> tag and a name attribute on the <embed> tag)

GOAL Accessing Flex from JavaScript AJAX + Flex 360Flex Europe

You can call Flex methods from JavaScript using a local Flex function to the list by using the addCallback():

addCallback(function_name:String, closure:Function):void

GOAL Accessing Flex from JavaScript AJAX + Flex 360Flex Europe

public function myFunc(s:String):void { // whatever you want}

public function initApp():void {

ExternalInterface.addCallback("myFlexFunction",myFunc);

}

<SCRIPT LANGUAGE="JavaScript">

function callApp() {

window.document.title = document.getElementById("newTitle").value;

mySwf.myFlexFunction(window.document.title);

}

</SCRIPT>

GOAL Calling JavaScript methods from Flex AJAX + Flex 360Flex Europe

DEMO

Flash Player have strict security in place to prevent cross-site scripting. By default, you cannot call script on an HTML page if the HTML page is not in the same domain as the Flex application.

GOAL ExternalInterface API security AJAX + Flex 360Flex Europe

Restrictions:

By default, scripts on the HTML page can communicate only with ActionScript in a Flex application if the page and the application are in the same domain.

Using the allowScriptAccess parameter (an HTML parameter) you can determine whether your Flex application can call JavaScript in the HTML page, and it applies to all functions on the page.

Restrictions:

<object id=‘myName' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab'

allowScriptAccess='always'

height='100%' width='100%'>

Valid values of the allowScriptAccess parameter:

Never: The call() method fails.

sameDomain: The call() method succeeds if the calling application is from same domain as the HTML page.

Always: The call() method succeeds, regardless of whether the calling application is in the same domain as the HTML page.

The following browsers support the ExternalInterface API:

All versions of Internet Explorer for Windows (5.0 and later)

Embedded custom ActiveX containers, such as a desktop application embedding Adobe Flash Player ActiveX control

Any browser that supports the NPRuntime interface (which currently includes the following browsers):Firefox 1.0 and later, Mozilla 1.7.5 and later,Netscape 8.0 and later, Safari 1.3 and later

To check the browser’s support of the ExternalInterface API you can use the available property.

The available property is a Boolean value that is true if the browser supports the ExternalInterface API and false if the browser does not.

GOAL The Flex AJAX Bridge AJAX + Flex 360Flex Europe

The Flex Ajax Bridge (FABridge) is a small, unobtrusive code library that you can insert into a Flex widget, or an empty SWF file to expose it to scripting in the web browser. It’s based on the ExternalInterface API.

It will save you a lot of time.

Using the library anything you can do with ActionScript, you can do with JavaScript.

GOAL When to use the Flex AJAX Bridge AJAX + Flex 360Flex Europe

The FABridge library is useful in the following situations:

You want to use a rich Flex component in an Ajax application but do not want to write a lot of Flex code.

If you wrap the component in a FABridge-enabled stub application, you can script it entirely from JavaScript, including using JavaScript generated remotely by the server.

GOAL When to use the Flex AJAX Bridge AJAX + Flex 360Flex Europe

The FABridge library is useful in the following situations:

You have only one or two people on your team who know Flex. The FABridge library lets everyone on your team use the work produced by one or two Flex specialists.

You are building an integrated rich Internet application (RIA) with Flex and Ajax portions.Although you could build the integration yourself using ExternalInterface, you might find it faster to start with the FABridge.

GOAL Use the Flex AJAX Bridge AJAX + Flex 360Flex Europe

Add src folder to the ActionScript classpath of your Flex application

Invoke the MXML component intoyour Flex Application : <fab:FABridge xmlns:fab="bridge.*" />

access your application instance from JavaScript flexApp = FABridge.FlexBridgeName.root();

GOAL Wait for initialization AJAX + Flex 360Flex Europe

Before running the initialization code on a Flex file, you must wait for it to download and initialize first. Register a callback to be invoked when the movie is initialized

function initMaxPrice(maxPrice)

{

var initCallback = function()

{

var flexApp = FABridge.flash.root();

flexApp.getMaxPriceSlider().setValue(maxPrice);

}

FABridge.addInitializationCallback("flash",initCallback);

}

GOAL Get and set value of a property AJAX + Flex 360Flex Europe

To get the value of a property: var appWidth = flexApp.getWidth(); var maxPrice = flexApp.getMaxPriceSlider().getValue();

To set the value of a property from JavaScript, call the setPropertyName() function

flexApp.getMaxPriceSlider().setValue(newMaxPrice); flexApp = FABridge.flash.root();

GOAL Get and set value of a property AJAX + Flex 360Flex Europe

You call object methods directly, just as you would from ActionScript flexApp.getShoppingCart().addItem("Antique Figurine", 12.99);

You also pass functions, such as event handlers, from JavaScript to ActionScript

var maxPriceCallback = function(event)

{

document.maxPrice = event.getNewValue();

}

flexApp.getMaxPriceSlider().addEventListener("change", maxPriceCallback);

flexApp.getMaxPriceSlider().setValue(newMaxPrice);

GOAL Memory management AJAX + Flex 360Flex Europe

The FABridge uses a reference counting mechanism in order to provide automatic memory management

Objects created from the JavaScript side are kept in memory unless the memory is manually released.

Events and other ActionScript-initiated objects are destroyed as soon as the corresponding JavaScript function that handles them directly completes its execution.

You manually call the addRef() method for an object to have it remain available, or call the release() method to decrease its reference

GOAL Limitations of the FABridge AJAX + Flex 360Flex Europe

The FABridge library has been tested on:

Mozilla Firefox 2 (Windows and Linux),

Microsoft Internet Explorer 6,

Opera 9,

Apple Safari 2.0.4

For performance reasons, when an anonymous object is sent from ActionScript to JavaScript, the bridge assumes it contains only primitives, arrays, and other anonymous objects, and no strongly typed objects or methods. Instances or methods sent as part of an anonymous object are not bridged correctly.

GOAL Use the Flex AJAX Bridge AJAX + Flex 360Flex Europe

DEMO

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="FAVideo.js" type="text/javascript"></script> <script src="AC_RunActiveContent.js“ type="text/javascript"></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("playerDiv"); 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("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)); }

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

You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page:

Monitor network activity

Debug and profile JavaScript

Quickly find errors

Explore the DOM

Logging for JavaScript

Execute JavaScript on the fly

360Flex Europe TraceTarget Using Firebug Extension

GOAL

TThe Logging API of Flex SDK allows you to write and send messages to an output created by the developer.

TThey consists of three principal components:

the Logger object,

the log target,

and the destination.

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("myMXMLfileOrClass").info("My message"); 360Flex Europe Debug using the Logging APIs Logging APIs

GOAL

To filter a message with the Log class, a category and a level properties are used.

A category is used to filter messages sent from a logger. It's a simple String.

A level provides filtering options for the message defining the constants on the LogEventLevel class.

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 driveDocuments and Settingsuser_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

Design patterns are a general reusable solutions to a commonly occurring problem in software design.

DP can speed up the development process by providing tested, proven development paradigms.

DP improves code readability for and between developers

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="uploadHelper" /> 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

Ajax Data Services is a JavaScript library that lets Ajax developers access the messaging and data management capabilities of Livecycle Data Services directly from JavaScript.

It lets you use Flex clients and Ajax clients that share data in the same messaging application or distributed data application.

GOAL AJAX Data Services vs. Flex AJAX Bridge AJAX + Flex 360Flex Europe

They’re are based on the same core library

The AJAX Data Services take the advantages of using the enterprise features of the Data Services

The AJAX Data Services are the best solution to integrate AJAX in Enterprise Rich Internet Applications

GOAL The Livecycle Data Services AJAX + Flex 360Flex Europe

Livecycle Data Services are part of the Livecycle Enterprise Suite (ES)

They are a J2EE application (3 WAR files) deployed in a J2EE application server

They are oriented to Enterprise applications where intensive data streams exist

GOAL The Livecycle Data Services AJAX + Flex 360Flex Europe

Create data-intensive RIAs with less code

Enable collaboration, offline Adobe Integrated Runtime, and real-time data streaming applications

Generate PDF documents based on template

Integrate your Flex application in complex J2EE architecture using Spring, Hibernate adaptors

GOAL The Livecycle Data Services Schema AJAX + Flex 360Flex Europe

GOAL Data Services Features AJAX + Flex 360Flex Europe

Client-server synchronization

Conflict resolution: The Data Management Services feature provides a conflict resolution API for detecting and handling data synchronization conflicts and ensuring the integrity of distributed data by limiting further changes until conflicts are resolved.

Automatic system for Data paging

Open adapter architecture: Data Services ES provides an open adapter architecture to easily integrate with JMS, Hibernate, EJB, and other data persistence mechanisms.

SQL adapter: this adapter to automatically detect changes made on the client, paging from server to client, and conflict detection.

Publish and subscribe messaging: Publish and subscribe to message topics in real time

Real time Data Push: The messaging and real time infrastructure enables collaboration and data push applications to be built in a scalable and reliable manner while preserving the lightweight web deployment model.

GOAL Benefits of using the AJAX Data Services AJAX + Flex 360Flex Europe

Many Ajax applications are taking on the responsibilities of round tripping data.

Using Ajax Data Services, developers are able to build sophisticated applications that more deeply integrate with backend data and services. Flex Data Services provides integrated publish subscribe messaging, real-time streaming data, and a rich data management API that dramatically simplifies the development of rich Internet applications.

Adding Flex Data Management Services to these applications adds the benefits of pushed updates, conflict management, lazy loading, and direct integration with back end domain models.

GOAL The AMF3 format AJAX + Flex 360Flex Europe

Action Message Format (AMF) is a compact binary format that is used to serialize ActionScript object graphs.

Once serialized an AMF encoded object graph may be used to persist and retrieve the public state of an application across sessions or allow two endpoints to communicate through the exchange of strongly typed data.

See www.jamesward.org/census

GOAL Installing Livecycle DS AJAX + Flex 360Flex Europe

You can install LCDS in two different flavours :

LiveCycle Data Services with integrated JRun

LiveCycle Data Services J2EE web application

LiveCycle Data Services includes installers for the following platforms:

Windows

Solaris

Linux

Java (cross-platform installer)

GOAL Installing Livecycle DS AJAX + Flex 360Flex Europe

LiveCycle Data Services includes the following Web Application Archive (WAR) files:

flex.war - The primary Flex WAR file: use this as a starting point for building your LiveCycle Data Services application.

samples.war - Sample Flex applications.

flex-admin.war - Simple administration and monitoring application.

GOAL Configuring Data Management Service AJAX + Flex 360Flex Europe

To configure Data Management Services you’ll perfomr the following tasks :

configuring a Data Management Service destinations*

applying security to destinations

modifying logging settings

*A Data Management Service destination is the endpoint that you send data to and receive data from when you use the Data Management Service to provide data distribution and synchronization in your applications.

You configure Data Management Service destinations in the data service section of the services-config.xml file

(located in the WEB_INF/flex directory of the web application that contains LCDS)

A Data Management Service destination references one or more message channels that transport messages, and contains network- and server-related properties. Messages are transported to and from a destination over a message channel.

It can also reference a data adapter, which is server-side code that lets the destination work with data through a particular type of interface, such as a Java object. A data adapter provides the infrastructure for interacting with data resources.

GOAL Configuring Network elements AJAX + Flex 360Flex Europe

The properties section of a destination definition contains a network section for defining client-server messaging behavior.

<destination id="contact">

<properties>

<network>

<subscription-timeout-minutes>0</subscription-timeout-minutes>

<paging enabled="true" pageSize="10"/>

<throttle-inbound policy="ERROR" max-frequency="500"/>

<throttle-outbound policy="REPLACE" max-frequency="500"/>

</network>

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>

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("/ajax/Products/FDMSBridge.swf", 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("Products"); productS.addEventListener(DataService.RESULT,productsResult); productS.addEventListener(DataService.FAULT, productFault); products = new ArrayCollection(); var token = productS.fill(products); token.set("operation", "fill"); }

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; } } }

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 ( "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 >

Application XML descriptor file <?xml version= "1.0" encoding= "UTF-8" ?> <application xmlns= "http://ns.adobe.com/air/application/1.0" >  <id> com.flexgala.app.videoBrowser </id>  <filename> flexGalaVideoBrowser </filename> [.....] <initialWindow> <content> index.html </content> <systemChrome> none </systemChrome> <transparent> true </transparent> <visible> false </visible>  <width> 360 </width> <height> 590 </height>  <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 = "videoContainer" src = "video.html" sandboxRoot = "http://www.augitaly.com/" documentRoot = "app:/"/>

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 ( "new w: " + window . nativeWindow . width ); air . Introspector . Console . log ( "new h: " + 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