Uno dei componenti che troviamo nella categorie Adobe AIR è il componente HTML.
Come possiamo facilmente intuire viene utilizzato per caricare pagine web all'interno di un'applicazione AIR: quello che è più interessante però è il fatto cdi poter agire sul DOM della pagina, così da offrirne una visualizzazione diversa da quella standard.
Vedremo allora come mostrare del codice HTML, come caricare delle pagine web e come evidenziare determinati elementi della pagina.
Per prima cosa selezioniamo il componente HTML dalla lista dei componenti Adobe AIR e posizioniamone una istanza all'interno dell'area di lavoro, dove il componente apparirà come un rettangolo bianco con all'interno la scritta "HTML". Per indicare al componente quale sia il sito da caricare o il codice da renderizzare dobbiamo sfruttare Actionscript oppure le proprietà dell'oggetto mx:HTML, quindi portiamoci nella tabella Source, dove potremo inserire manualmente il codice per caricare il sito o la stringa da mostrare all'interno del componente.
A questo punto possiamo modificare il tag relativo al componente, ovvero <mx:HTML ... />
inserendovi la proprietà location, in questo modo:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:HTML x="23" y="27" width="750" height="523"
location="http://flash.html.it" />
</mx:WindowedApplication>
NOTA: qualora non vedessimo la pagina controlliamo che l'accesso per il programma non sia stato bloccato dal firewall, di solito dovrebbe venir chiesto dal firewall stesso se lasciare che il programma acceda o meno al web.
Avremmo potuto ottenere lo stesso risultato anche usando Actionscript 3, in questo modo (in grassetto le aggiunte):
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="600">
<mx:HTML x="10" y="10" width="709" height="583" id="html" initialize="carica()" />
<mx:Script>
<![CDATA[
public function carica():void {
html.location = "http://flash.html.it"
}
]]>
</mx:Script>
</mx:WindowedApplication>
Notiamo principalmente la mancanza del parametro location nel tag MXML e l'inserimento di un identificativo per il componente (html): tale identificativo viene sfruttato nella funzione carica per stabilire a quale elemento si fa riferimento ed impostarne il percorso. Il parametro initialize comunica quale funzione eseguire (nel nostro caso carica) quando il componente è stato inizializzato.
Il vantaggio principale nell'uso di Actionscript è la possibilità di rendere dinamico l'url, sfruttando i parametri delle funzioni. Cambiando il codice così :
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="800" height="600">
<mx:HTML x="10" y="10" width="709" height="583" id="html"
initialize="carica('flash.html.it')" />
<mx:Script>
<![CDATA[
public function carica(url:String):void{
html.location = "http://"+url
}
]]>
</mx:Script>
</mx:WindowedApplication>
Rendiamo più dinamico l'insieme, poichè possiamo sfruttare in ogni momento la funzione carica per cambiare l'indirizzo mostrato nel componente.