Better Adobe Flex and AIR applications with AJAX

360Flex Europe

Marco CasarioCTO – Comtastehttp://casario.blogs.com

Who I am360Flex 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

Agenda360Flex 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 + Flex360Flex 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 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


•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 ?


GOAL

Are Flash and AJAX real enemy ?


GOAL

The story ended this way:


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?


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

http://www.youthrubiz.com/

GOAL


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

http://www.yubuk.com/

GOAL


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.

http://www.augitaly.com/flexgala

GOAL

Less is More.


GOAL

Communicating between AJAX and Flex


•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


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

<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


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


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


DEMO

GOAL

Using the navigateToURL() method


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.

GOAL



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.

GOAL



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


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


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


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


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


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


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.

GOAL



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%'>

GOAL



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.

GOAL



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

GOAL



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


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


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


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


1. Add src folder to the ActionScript classpath of your Flex application

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

3. access your application instance from JavaScript

flexApp = FABridge.FlexBridgeName.root();

GOAL

Wait for initialization


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


1. To get the value of a property:

var appWidth = flexApp.getWidth();var maxPrice = flexApp.getMaxPriceSlider().getValue();

2. 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


1. You call object methods directly, just as you would from ActionScript

flexApp.getShoppingCart().addItem("Antique Figurine", 12.99);

2. 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


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


1. The FABridge library has been tested on:• Mozilla Firefox 2 (Windows and Linux), • Microsoft Internet Explorer 6, • Opera 9, • Apple Safari 2.0.4

2. 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


DEMO

GOAL

Using the FAVideo Library


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


* 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


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



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



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


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

GOAL360Flex 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:

1. the Logger object, 2. the log target, 3. 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 APIs360Flex Europe


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


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


Logging APIs

GOAL360Flex Europe


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 drive\Documents and Settings\user_name) as follow:

TraceOutputFileName=c:/logs/flashlog.txtErrorReportingEnable=1TraceOutputFileEnable=1MaxWarnings=0

Troubleshooting tips for flashlog.txt not being generated

360Flex Europe

Debug with the flashlog.txt file

Logging APIs

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_19323&sliceId=1

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_19323&sliceId=1

GOAL


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


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


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


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


GOAL

Data Services Features


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

GOAL



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.

GOAL



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


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


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


You can install LCDS in two different flavours :

1. LiveCycle Data Services with integrated JRun 2. LiveCycle Data Services J2EE web application

LiveCycle Data Services includes installers for the following platforms:

1. Windows 2. Solaris 3. Linux 4. Java (cross-platform installer)

GOAL

Installing Livecycle DS


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

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

2. samples.war - Sample Flex applications.

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

GOAL

Configuring Data Management Service


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.

GOAL



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)

GOAL



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


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


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


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


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



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



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



Once the bridge indicates that it is ready, we can proceed to load the data:

function fdmsReady() { ... }

GOAL



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



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

GOALAdobe AIR360Flex Europe

Flex and AJAX on the desktop with AIR

GOALAdobe AIR360Flex 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

RIAMarco CasarioCTO – Comtastehttp://casario.blogs.com

FLEXGALA user group

www.augitaly.com/flexgala

Matteo RonchiConsultant – [email protected]/blog

http://www.augitaly.com/flexgala

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 FrameworkWe 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 relationshipsDefines mapping between main application functions and videoPlayer HTML presentation layout.

[ Main Application ]// Map functions across security sandboxexposed.open = open;exposed.pause = pause;exposed.resume = resume;// Add functions to IFRAME documentdocument.getElementById( 'videoContainer' ).contentWindow.parentSandboxBridge = exposed;

[ Video player ]// Called when the play button is clicked// Controls playback/pause and provides appropriate UIfunction 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 widthfunction 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

RIAMarco CasarioCTO – Comtastehttp://casario.blogs.com

Better Adobe Flex and AIR applications with AJAX

Technology

Transcript of Better Adobe Flex and AIR applications with AJAX