AIR-Ajax Video player

Immagini

di Matteo Ronchi

Adobe Air offre molteplici possibilità per realizzare le nostre applicazioni desktop, mentre la maggior parte dei tutorial disponibili sulla rete mostra come creare interfacce basate su Flex e Flash in questo articolo intendo dare risalto all’uso di codice Javascript per generare un semplice desktop video player. Questo tutorial mostra come creare la nostra applicazione usando Aptana Studio, un potente editor di programmazione basato su Eclipse creato per sviluppatori Ajax. Aptana Studio offre numerosi strumenti d’ausilio ai programmatori web che utilizzano tecnologie Ajax e di conseguenza è un candidato naturale come ambiente di sviluppo per creare applicazioni Adobe AIR basate su questo linguaggio.

L’editor offre inoltre un plugin nativo che permette allo sviluppatore di non doversi preoccupare del setup del compilatore distribuito con l’SDK ma di potersi concentrare unicamente sulla realizzazione della propria applicazione. Aptana Studio offre comandi built-in per eseguire in fase di test la nostra applicazione e per compilarne la versione ridistribuibile quando necessario. La generazione dell’eseguibile avviene tramite un comodo wizard che ci permette di configurare i dettagli richiesti dal compilatore.

Potete scaricare Aptana Studio da qui: http://www.aptana.com/studio, una volta installato, dalla StartPage visualizzata selezionate l’opzione per scaricare il plugin per creare applicazioni Adobe AIR.

A questo punto siete pronti a procedere.

Creiamo un progetto AIR in Aptana Studio
Apriamo Aptana Studio e creiamo un nuovo progetto Adobe AIR.
(Immagine 1)

Selezionato il tipo di progetto ci viene chiesto di definire nome e posizione sul disco del progetto.
(Immagine 2)

Eventualmente Aptana ci offre la possibilità di creare un progetto integrato con un server Ajax da loro offerto. Successivamente ci vengono offerte due schede per definire i dettagli che andranno a costruire il file XML descrittore usato dal compilatore di Adobe AIR per generare ed eseguire la nostra applicazione. Il primo dei due dialog definisce aspetti dell’applicazione quale id, nome e descrizione dell’eseguibile da generare ed eventualmente permette di impostare delle icone personalizzate. Quello successivo si occupa di dimensioni, posizione e aspetto della finestra della nostra applicazione.
(Immagine 3)

Infine possiamo definire fin da subito eventuali librerie Ajax che andremo ad usare in modo che il programma le importi per noi.
(Immagine 4)
Il file XML generato sarà simile a questo:

<?xml version=”1.0” encoding=”UTF-8”?>
<application xmlns=”http://ns.adobe.com/air/application/1.0”>
<id>com.flexgala.app.simpleVideo</id>
<filename>flexGalaSimpleVideo</filename>
<name>FlexGala Ajax Video Player</name>
<version>1.0</version>
<description>FlexGala Video Player</description>
<copyright>Flexgala.com</copyright>
<initialWindow>
<content>index.html</content>
<title>FlexGala.com Simple Video Player</title>
<systemChrome>standard</systemChrome>
<transparent>false</transparent>
<visible>false</visible>
<minimizable>true</minimizable>
<maximizable>true</maximizable>
<resizable>true</resizable>
<width>640</width>
<height>400</height>
<x>200</x>
<y>200</y>
<minSize>400 300</minSize>
<maxSize>1640 1400</maxSize>
</initialWindow>
<icon>
<image16x16>icons/icon_16.png</image16x16>
<image32x32>icons/icon_32.png</image32x32>
<image48x48>icons/icon_48.png</image48x48>
<image128x128>icons/icon_128.png</image128x128>
</icon>
</application>

questo documento sarà successivamente modificabile se necessario, dovrete però aggiornarlo manualmente prima di ricompilare l’applicazione.

Creiamo il layout HTML principale
Ora andiamo a definire il contenuto del file principale della nostra applicazione (index.html). Questo documento funzionerà da main controller per la nostra applicazione, si occuperò quindi di definire le funzionalità tramite javascript ed il layout grafico usando degli Iframe. Adobe AIR estende il DOM tradizionale di un documento HTML aggiungendo ad alcuni elementi (tra cui gli Iframe) attributi e proprietà supplementari per rendere più agile lo sviluppo di applicazioni AIR Ajax.
All’interno del tag Head andiamo ad importare i file javascript che definiscono la business logic:

<head>
<title>FlexGala Video Player</title>
<!-- javascript per interagire con API di Adobe Air -->
<script type=”text/javascript” src=”lib/js/air/AIRAliases.js”></script>
<!-- javascript per interagire con Adobe Air Introspector -->
<script type=”text/javascript” src=”lib/js/air/AIRIntrospector.js”></script>
<!-- foglio di stile per l’applicazione -->
<link href=”lib/css/appStyle.css” rel=”stylesheet” type=”text/css” />
<!-- business logic -->
<script src=”lib/js/ErrorManagement.js” type=”text/javascript”></script>
<script src=”lib/js/Utils.js” type=”text/javascript”></script>
<script src=”lib/js/VideoSetup.js” type=”text/javascript”></script>
<script src=”lib/js/main.js” type=”text/javascript”></script>
</head>

All’interno del Body del documento HTML importiamo in un Iframe i controlli di riproduzione del nostro video e registramo una funzione ‘doLoad()’ al caricamento avvenuto del DOM. Utilizzando Iframe che importano documenti HTML esterni possiamo definire dei moduli riutilizzabili per le nostre applicazioni AIR.

<body id=”mainWin” onLoad=”doLoad();”>
<iframe
id=”videoContainer”
src=”video.html”/>
</body>

Definiamo controlli di riproduzione usando un Iframe il documento HTML caricato nell’IFrame definisce i controlli di riproduzione, la barra di riferimento temporale ed il pulsante per richiedere la finestra di selezione del file video:

<html>
<head>
<title>Video Frame</title>
<!-- foglio di stile per i controlli -->
<link href=”lib/css/video.css” type=”text/css” rel=”stylesheet” />
<!-- Usiamo la libreria Prototype per calcolare le dimensioni del layout -->
<script src=”lib/js/prototype/prototype-1_5_1_1.js” type=”text/javascript”></script>
<!-- JavaScript business logic -->
<script src=”lib/js/iFrame.js” type=”text/javascript”></script>
</head>
<body onLoad=”doLoad();”>
<!-- Control bar at the bottom of the screen -->
<!-- I controlli di riproduzione vengono posti nella parte inferiore dell’applicazione -->
<div id=”controls”>
<img id=”play” src=”assets/play-up.gif” width=”46” height=”23” />
<div id=”progress”></div>
<img id=”head” src=”assets/playhead.gif” width=”7” height=”5” />
<img id=”open” src=”assets/open-up.gif” width=”23” height=”23” />
</div>
</body>
</html>

Questo documento HTML usa la libreria Ajax ‘prototype’ per calcolare la dimensione della barra di caricamento e poter così definire correttamente la posizione del cursore di riproduzione. Il codice Javascript associato si occupa di definire l’interazione con i pulsanti ed il loro feedback grafico. Si occupa inoltre di aggiornare quando richiesto dall’applicazione principale la testina di riproduzione. La funzione ‘doLoad()’ chiamata a caricamento del DOM avvenuto è la seguente:

// Chiamata quando il DOM dell’Iframe ﾏ caricato
// configura controlli di riproduzione e sandbox di comunicazione
function doLoad()
{
var exposed = new Object();
// associamo le funzioni tra main HTML e IFrame
// senza violare restrizioni di sicurezza
// usando la proprietˆ ‘childSandboxBridge’
// aggiunta da Adobe AIR agli Iframe
exposed.resetPlayhead = resetPlayhead;
exposed.setPlayhead = setPlayhead;
childSandboxBridge = exposed;
// configuriamo effetti interazione controlli di riproduzione
document.getElementById( ‘play’ ).addEventListener( ‘mouseover’, doPlayOver );
document.getElementById( ‘play’ ).addEventListener( ‘mouseout’, doPlayOut );
document.getElementById( ‘play’ ).addEventListener( ‘mousedown’, doPlayDown );
document.getElementById( ‘play’ ).addEventListener( ‘mouseup’, doPlayUp );
document.getElementById( ‘play’ ).addEventListener( ‘click’, doPlayClick );
document.getElementById( ‘open’ ).addEventListener( ‘mouseover’, doOpenOver );
document.getElementById( ‘open’ ).addEventListener( ‘mouseout’, doOpenOut );
document.getElementById( ‘open’ ).addEventListener( ‘mousedown’, doOpenDown );
document.getElementById( ‘open’ ).addEventListener( ‘mouseup’, doOpenUp );
document.getElementById( ‘open’ ).addEventListener( ‘click’, doOpenClick );
// azzeriamo posizione testina di riproduzione
resetPlayhead();
}

Per avere una visione completa del documento javascript e dell’implementazione delle funzionalità nel dettaglio fate riferimento all’evento completo allegato all’articolo.

Aggiungiamo codice Javascript per caricare il video
Nella funzione chiamata ad inizializzazione del DOM del documento HTML pricipale avvenuta ci occupiamo di istanziare e mettere nella disply list della nostra applicazione un controllo video esposto dalle API di Adobe AIR all’ambiente Javascript, andiamo anche a definire una mappatura tra funzioni definite dall’applicazione principale e delle proprietà accessibili ai controlli all’interno dell’IFrame, in questo modo potemo associare, all’interno del modulo importato, degli eventi d’interazione con le funzioni esposte.

// Chiamata quando il video è stato caricato dal filesystem
// configura controlli di riproduzione e sandbox di comunicazione
function doInitVideo()
{
var exposed = new Object();
// associamo le funzioni tra main HTML e IFrame
// senza violare restrizioni di sicurezza
// usando la proprietà ‘parentSandboxBridge’
// aggiunta da Adobe AIR agli Iframe
exposed.open = open;
exposed.pause = pause;
exposed.resume = resume;
document.getElementById( ‘videoContainer’ ).contentWindow.parentSandboxBridge = exposed;
// definiamo la cartella in cui si aprirà
// il dialog di selezione del video
flv = air.File.desktopDirectory;
flv.addEventListener( air.Event.SELECT, doSelect );
// associamo all’evento di ENTER_FRAME la funzione
// che controlla la testina di riproduzione del video
window.htmlLoader.stage.addEventListener( air.Event.ENTER_FRAME, doFrame );
// Inizializziamo la connessione per il video
// senza specificare nessun serer di streaming,
// in quanto non ne usiamo
conn = new air.NetConnection();
conn.connect( null );
// Inizializzaimo un flusso video e
// lo associamo alla connessione aperta
// monitoriamo gli eventi di stato e metadati correlati al flusso
stream = new runtime.flash.net.NetStream( conn );
stream.client = this;
stream.addEventListener( air.NetStatusEvent.NET_STATUS, doStatus );
// Inizializziamo un oggetto video di Flash
// Attacchiamo il video al flusso video
video = new air.Video();
video.attachNetStream( stream );
// poniamo il video sopra il cotrollo HTML
// che contiene la nostra applicazione
window.htmlLoader.stage.addChild( video );
// Centriamo l’applicazione nello schermo
center();
}

Il controllo HTML che contiene la nostra applicazione Ajax non permette di aggiungere al suo interno istanze di oggetti creati tramite le API di Adobe AIR, come il video display per esempio, quindi dobbiamo andare a posizionare il controllo sovrapposto al di sopra del layer HTML. Questo è possibile perchè le applicazioni Adobe AIR programmate in Ajax vengono compilate ed incorporate in un’istanza Actionscript che offre funzionalità di un Display Object Container e ci permette dunque di usare delle API standard per aggiungere oggetti in overlay allo strato HTML. Definendo l’istanza dell’oggetto video abbiamo registrato una funzione alla ricezione dei metadata del video in caricamento. In questa funzione ci preoccuperemo di leggere durata e dimensioni del video e di deguare l’aspetto del nostro video player:

// chiamata quando i Metadati inerenti il video sono disponibili
// NB. Se il video non definisce informazioni metadata non potremo
// ridimensionare la finestra correttamente
function onMetaData( e )
{
// durata totale del video
totalTime = Math.floor( e.duration );
// scriviamo la durata del video nella console di debug
air.Introspector.Console.log( “video duration: “ + totalTime );
// verifichiamo se sono disponibili informazioni di dimensione
if( e.width != null )
{
// Ridimensioniamo display video
video.width = e.width;
video.height = e.height;
// ridimensioniamo finestra
fit( e.width, e.height );
// Centriamo l’applicazione nello schermo
center();
}
}

Quando ridimensioniamo la finestra adeguandola alle nuove dimensioni del video dobbiamo tenere conto anche degli ingombri dati dalla barra del titolo e dai bordi della finestra più, ovviamente, l’ingombro dei controlli di riproduzione.

// Ridimensiona la finestra dell’applicazione a dimensione del video caricato
// viene tenuto conto anche delle dimensioni occupate dalla barra del titolo
// ed i vordi della finestra
function fit( width, height )
{
// Calcoliamo ingombro elemnti della finestra nativa
var chromeHeight = window.nativeWindow.height - window.htmlLoader.stage.stageHeight;
var chromeWidth = window.nativeWindow.width - window.htmlLoader.stage.stageWidth;
// Ridimensioniamo la finestra per contenere correttamente
// il video caricato
window.nativeWindow.width = chromeWidth + width;
window.nativeWindow.height = chromeHeight + CONTROL_HEIGHT + height;
// posizioniamo la finestra video se necessario
if( video.width < MIN_WIDTH ) {
video.x = ( MIN_WIDTH - video.width ) / 2;
}else{
video.x = 0;
} if( video.height <
(
MIN_HEIGHT -
chromeHeight -
CONTROL_HEIGHT )
)
{
video.y = ( ( MIN_HEIGHT - chromeHeight - CONTROL_HEIGHT ) - video.height ) / 2;
}else{
video.y = 0;
}
// scriviamo nella console l’altezza attuale della finestra
air.Introspector.Console.log( “nativeWindow.height: “ + nativeWindow.height );
}

Per sincronizzare il cursore della testina di riproduzione al flusso video abbiamo registrato la funzione ‘doFrame()’ all’evento di EnterFrame dell’applicazione, così ad ogni aggiornamento del display ci preoccuperemo di aggiornare anche la posizione della testina:

// Chiamata ad ogni evento di ENTER_FRAME dell’applicazione
// si occupa di aggiornare la testina di riproduzione del video
function doFrame( e )
{
var current = null;
// verifichiamo se i lvideo ﾏ in riproduzione
if( isPlaying )
{
// Dcalcoliamo percentuale di video riprodotta
current = stream.time / totalTime;
// posizioniamo il cursore
document.getElementById( ‘videoContainer’ ).
contentWindow.childSandboxBridge.setPlayhead( current );
}
}

AIRIntrospector, il debugger per applicazioni Ajax-AIR
In alcune delle funzioni sopra riportate avrete notato delle istruzioni che si riferivano alla classe ‘air.Introspector.Console’, questa è responsabile di interagire con il debugger offerto da Adobe per applicazioni AIR sviluppate con tecnologia Ajax. AIRIntrospector è una replica fedele del noto plugin per Mozilla Firefox: FireBug, come FireBug si può mostrare o nascondere usando il tasto F12 oppure lo si può far apprire richiedendo un log nella console di output.

Per poter accedere ad AIRIntrospector bisogna accertrsi di avere importato il file javascript ‘AIRIntrospector.js’ nel documento HTML. Ora sta a voi affrontare la sfida di creare applicazioni Adobe AIR usando HTML ed Ajax, il limite è solo la vostra creatività.

________________________________________________________________

Matteo Ronchi
m.ronchi@cef62.com
Dopo un passato da montatore video e modellatore 3D, ha iniziato a conoscere il mondo dei contenuti multimediali e ad appassionarsene grazie a Macromedia Director. Da qui il passo verso la programmazione e la creazione di contenuti interattivi e applicazioni Actionscript, Flex e Adobe Air è stato breve. Oggi sperimenta soluzioni creative che si avvalgono delle possibilità offerte da librerie quali papervision3D e Sandy.