Nozioni fondamentali sulle finestre native in AIR

Adobe AIR 1.0 e versioni successive

Per una spiegazione rapida e codici di esempio per l'utilizzo delle finestre native in AIR, vedete gli articoli delle Guide rapide seguenti in Centro per sviluppatori Adobe:

AIR fornisce un'API della finestra multipiattaforma semplice da usare per la creazione di finestre del sistema operativo native utilizzando le tecnologie di programmazione Flash®, Flex™ e HTML.

AIR consente all'utente un'ampia libertà di sviluppo dell'aspetto dell'applicazione. Le finestre che create possono avere l'aspetto di un'applicazione desktop standard, riflettendo lo stile Apple quando vengono eseguite in Macintosh, rispettando le convenzioni Microsoft quando vengono eseguite in Windows e armonizzandosi con il gestore di finestre in Linux, senza dover includere una sola riga di codice specifico per la piattaforma. Oppure potete creare uno stile personalizzato, indipendente dal sistema su cui l'applicazione viene eseguita, utilizzando il chrome estensibile che supporta gli skin fornito dal framework Flex. Grazie al supporto completo delle funzioni di trasparenza e fusione alfa sul desktop, potete anche disegnare un chrome della finestra personalizzato utilizzando grafica bitmap e vettoriale. Stanchi delle solite finestre rettangolari? Disegnatene una rotonda.

Finestre in AIR

AIR supporta tre API distinte per le operazioni con le finestre:

  • La classe NativeWindow che supporta ActionScript fornisce l'API della finestra al livello più basso. Utilizzate NativeWindow nelle applicazioni create con ActionScript e Flash Professional. Considerate la possibilità di estendere la classe NativeWindow per personalizzare le finestre utilizzate nell'applicazione.

  • Nell'ambiente HTML potete usare la classe JavaScript Window, come in un'applicazione Web basata su browser. Le chiamate ai metodi JavaScript Window vengono inoltrate al sottostante oggetto window nativo.

  • Le classi mx:WindowedApplication e mx:Window del framework Flex forniscono un “wrapper” Flex per la classe NativeWindow. Il componente WindowedApplication sostituisce il componente Application quando create un'applicazione AIR con Flex e deve essere sempre utilizzato come finestra iniziale nell'applicazione Flex.

Finestre ActionScript

Durante la creazione di finestre con la classe NativeWindow, potete utilizzare lo stage Flash Player e visualizzare l'elenco direttamente. Per aggiungere un oggetto visivo a una classe NativeWindow, aggiungete l'oggetto all'elenco di visualizzazione dello stage della finestra o a un altro contenitore dell'oggetto di visualizzazione sullo stage.

Finestre HTML

Durante la creazione di finestre HTML, potete utilizzare HTML, CSS e JavaScript per visualizzare il contenuto. Per aggiungere un oggetto visivo a una finestra HTML, aggiungete il contenuto al DOM HTML. Le finestre HTML sono una categoria speciale di NativeWindow. L'host AIR definisce una proprietà nativeWindow nelle finestre HTML che fornisce l'accesso all'istanza NativeWindow sottostante. Potete utilizzare questa proprietà per accedere alle proprietà, ai metodi ed agli eventi NativeWindow descritti di seguito.

Nota: l'oggetto Window JavaScript dispone di metodi per la creazione degli script della finestra che lo contiene, ad esempio moveTo() e close() . Se sono disponibili dei metodi sovrapposti, potete utilizzare quello più conveniente.

Finestre del framework Flex

Durante la creazione di finestre con l'ambiente Flex, potete in genere utilizzare i componenti MXML per compilare la finestra. Per aggiungere un componente Flex a una finestra, aggiungete l'elemento componente alla definizione MXML della finestra. Potete anche utilizzare ActionScript per aggiungere contenuto dinamicamente. I componenti mx:WindowedApplication e mx:Window sono progettati come contenitori Flex e, al contrario degli oggetti NativeWindow, possono pertanto accettare componenti Flex direttamente. Se necessario, potete accedere alle proprietà e ai metodi NativeWindow tramite gli oggetti WindowedApplication e Window utilizzando la proprietà nativeWindow .

Finestra dell'applicazione iniziale

La prima finestra dell'applicazione viene creata automaticamente da AIR. AIR imposta le proprietà e il contenuto della finestra utilizzando i parametri specificati nell'elemento initialWindow del file descrittore dell'applicazione.

Se il contenuto principale è un file SWF, AIR crea un'istanza NativeWindow, carica il file SWF e lo aggiunge allo stage della finestra. Se il contenuto principale è un file HTML, AIR crea una finestra HTML e carica l'HTML.

Flusso di eventi delle finestre native

Le finestre native inviano eventi per segnalare ai componenti interessati che una modifica importante sta per verificarsi o si è già verificata. Numerosi eventi relativi alle finestre sono inviati a coppie. Il primo evento avvisa che si sta per verificare una modifica. Il secondo evento annuncia che la modifica è stata eseguita. Potete annullare un evento di avviso, ma non un evento di notifica. Le sequenza seguente illustra il flusso di eventi che si verifica quando un utente fa clic sul pulsante di ingrandimento di una finestra:

  1. L'oggetto NativeWindow invia un evento displayStateChanging .

  2. Se nessun listener registrato annulla l'evento, la finestra viene ingrandita.

  3. L'oggetto NativeWindow invia un evento displayStateChange .

    Inoltre, l'oggetto NativeWindow invia eventi per modifiche correlate alle dimensioni e alla posizione della finestra. La finestra non invia eventi di avviso per queste modifiche correlate. Gli eventi correlati sono:

    1. Un evento move viene inviato se l'angolo superiore sinistro della finestra è stato spostato a causa dell'operazione di ingrandimento.

    2. Un evento resize viene inviato se le dimensioni della finestra sono state modificate a causa dell'operazione di ingrandimento.

    Un oggetto NativeWindow invia una sequenza di eventi simili quando una finestra viene ridotta a icona, ripristinata, chiusa, spostata o ridimensionata.

    Gli eventi di avviso vengono inviati solo quando una modifica viene avviata tramite il chrome della finestra o altri meccanismi controllati dal sistema operativo. Quando chiamate a un metodo della finestra per modificare la dimensione, la posizione o lo stile di visualizzazione della finestra, la finestra invia solo un evento per annunciare la modifica. Se necessario, potete inviare un evento di avviso utilizzando il metodo dispatchEvent() della finestra e quindi controllare se questo evento è stato annullato prima di procedere con la modifica.

    Per ulteriori informazioni sulle classi, i metodi, le proprietà e gli eventi dell'API della finestra, vedete la Guida di riferimento di Adobe ActionScript 3.0 per la piattaforma Adobe Flash .

Proprietà che controllano lo stile e il comportamento delle finestre native

Le proprietà seguenti controllano l'aspetto e il comportamento di base di una finestra:

  • type

  • systemChrome

  • transparent

  • owner

Durante la creazione di una finestra, potete impostare queste proprietà sull'oggetto NativeWindowInitOptions passato alla funzione di costruzione della finestra. In AIR, le proprietà relative alla finestra iniziale dell'applicazione vengono lette dal descrittore dell'applicazione (ad eccezione della proprietà type che non può essere impostata nel descrittore dell'applicazione e che è sempre impostata su normal ). Dopo che la finestra è stata creata, non è più possibile modificare le proprietà.

Alcune impostazioni di queste proprietà sono reciprocamente incompatibili: systemChrome non può essere impostata su standard quando transparent è impostata su true o type è impostata su lightweight .

Tipi di finestre

I tipi di finestre AIR combinano gli attributi chrome e di visibilità del sistema operativo nativo per creare tre tipi funzionali di finestre. All'interno del codice, potete fare riferimento ai nomi di tipo utilizzando le costanti definite nella classe NativeWindowType. AIR fornisce i tipi di finestre seguenti:

Tipo

Descrizione

Normale

Una finestra tipica. Le finestre normali utilizzano il chrome di dimensioni regolari e compaiono sulla barra delle applicazioni di Windows e nel menu delle finestre di Mac OS X.

Utilità

Una palette strumenti. Le finestre di utilità utilizzano una versione più snella del chrome di sistema e non compaiono sulla barra delle applicazioni di Windows e nel menu delle finestre di Mac OS X.

Leggera

Le finestre leggere non dispongono di chrome e non compaiono sulla barra delle applicazioni di Windows o nel menu delle finestre di Mac OS X. Inoltre, le finestre leggere non dispongono del menu di sistema (Alt+spazio) in Windows. Le finestre leggere sono adatte per la notifica di fumetti e controlli, ad esempio le caselle combinate che aprono un'area di visualizzazione momentanea. Per il tipo di finestre leggere, impostate systemChrome su none .

Chrome della finestra

Il chrome della finestra è un insieme di controlli che consentono agli utenti di modificare una finestra nell'ambiente desktop. Gli elementi del chrome includono la barra del titolo, i pulsanti della barra del titolo e le maniglie di ridimensionamento.

Chrome di sistema

Potete impostare la proprietà systemChrome su standard o none . Per fornire alla finestra l'insieme di controlli standard creati e progettati dal sistema operativo dell'utente, scegliete il chrome di sistema standard . Per fornire un chrome personalizzato per la finestra, scegliete none . All'interno del codice, potete fare riferimento alle impostazioni del chrome di sistema utilizzando le costanti definite nella classe NativeWindowSystemChrome.

Il chrome di sistema è gestito dal sistema. L'applicazione non dispone dell'accesso diretto ai controlli, ma può reagire a eventi inviati quando si utilizzano i controlli. Se utilizzate chrome standard per una finestra, la proprietà transparent deve essere impostata su false e la proprietà type deve essere impostata su normal o utility .

Chrome Flex

Se utilizzate i componenti WindowedApplication o Window di Flex, la finestra può utilizzare chrome di sistema o chrome forniti dal framework Flex. Per utilizzare il chrome Flex, impostate la proprietà systemChrome utilizzata per creare la finestra su none . Quando si utilizzano i componenti spark di Flex 4 anziché i componenti mx, dovete specificare la classe skin per utilizzare il chrome Flex. Potete utilizzare gli skin incorporati o fornire i vostri skin. Nell'esempio seguente viene illustrato come utilizzare la classe skin WindowedApplication spark incorporata per fornire il chrome della finestra: 

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx"> 
<fx:Style> 
@namespace "library://ns.adobe.com/flex/spark"; 
WindowedApplication 
{ 
    skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
} 
</fx:Style> 
</s:WindowedApplication>

Per ulteriori informazioni, vedere Using Flex 4: About the AIR window containers: Controlling window chrome

Chrome personalizzato

Se create una finestra senza alcun chrome di sistema, aggiungete controlli chrome personalizzati per gestire le interazioni tra un utente e la finestra. Siete anche liberi di creare finestre trasparenti non rettangolari.

Per utilizzare il chrome personalizzato con i componenti mx:WindowedApplication o mx:Window, dovete impostare lo stile showFlexChrome su false . In caso contrario, Flex aggiunge il proprio chrome nelle finestre.

Trasparenza della finestra

Per consentire la fusione alfa di una finestra con il desktop o un'altra finestra, impostate la proprietà transparent della finestra su true . La proprietà transparent deve essere impostata prima che la finestra venga creata e non può essere modificata.

In una finestra trasparente non esiste alcuno sfondo predefinito. Qualsiasi area della finestra che non contiene un oggetto disegnato dall'applicazione è invisibile. Se l'impostazione alfa di un oggetto visualizzato è inferiore a uno, qualunque cosa si trova sotto l'oggetto traspare, compresi altri oggetti di visualizzazione nella stessa finestra, altre finestre e il desktop.

Le finestre trasparenti sono utili per creare applicazioni con bordi di forma irregolare, “sfumati” o che non sono visibili. Tuttavia, poiché il rendering di aree con fusione alfa di grandi dimensioni può essere lento, si consiglia di utilizzare questo effetto con cautela.

Importante: in Linux gli eventi del mouse non vengono passati per pixel completamente trasparenti. È consigliabile evitare di creare finestre con grandi aree completamente trasparenti in quando è possibile bloccare in modo invisibile l'accesso dell'utente ad altre finestre o altri elementi presenti sul desktop. In Mac OS X e Windows gli eventi del mouse vengono passati per pixel completamente trasparenti.

La trasparenza non può essere utilizzata con finestre associate a chrome di sistema. Inoltre, il contenuto SWF e PDF in HTML potrebbe non essere visualizzato nelle finestre trasparenti. Per ulteriori informazioni, consultate Considerazioni relative al caricamento di contenuto SWF o PDF in una pagina HTML .

La proprietà NativeWindow.supportsTransparency statica segnala se la trasparenza della finestra è disponibile. Quando la trasparenza non è supportata, l'applicazione viene composta su uno sfondo scuro. In questi casi, tutte le aree completamente trasparenti dell'applicazione vengono visualizzate in nero opaco. È consigliabile fornire un fallback nel caso il test di proprietà restituisca false . Ad esempio, potete visualizzare una finestra di dialogo di avviso all'utente o un'interfaccia utente rettangolare, non trasparente.

Notate che la trasparenza è sempre supportata dai sistemi operativi Mac e Windows. Il supporto sui sistemi operativi Linux richiede un gestore di finestre che supporta effetti compositi, tuttavia anche quando questo componente è attivo, la trasparenza potrebbe non essere disponibile a causa delle opzioni di visualizzazione dell'utente o della configurazione hardware.

Trasparenza in una finestra dell'applicazione MXML

Per impostazione predefinita, lo sfondo di una finestra MXML è opaco, anche se create la finestra come trasparente (notate l'effetto di trasparenza agli angoli della finestra). Per presentare uno sfondo trasparente per la finestra, impostate un colore di sfondo e il valore alfa nel foglio di stile o nell'elemento <mx:Style> contenuto nel file MXML dell'applicazione. Ad esempio, la dichiarazione di stile seguente conferisce allo sfondo una sfumatura verde leggermente trasparente: 

WindowedApplication 
{ 
    background-alpha:".8"; 
    background-color:"0x448234"; 
}

Trasparenza in una finestra dell'applicazione HTML

Per impostazione predefinita, lo sfondo del contenuto HTML visualizzato nelle finestre HTML e negli oggetti HTMLLoader è opaco, anche se la finestra che li contiene è trasparente. Per disattivare lo sfondo predefinito visualizzato per il contenuto HTML, impostate la proprietà paintsDefaultBackground su false . L'esempio seguente crea un oggetto HTMLLoader e disattiva lo sfondo predefinito: 

var htmlView:HTMLLoader = new HTMLLoader(); 
htmlView.paintsDefaultBackground = false;

Questo esempio utilizza JavaScript per disattivare lo sfondo predefinito di una finestra HTML: 

window.htmlLoader.paintsDefaultBackground = false;

Se un elemento del documento HTML imposta un colore di sfondo, lo sfondo dell'elemento non è trasparente. L'impostazione di un valore di trasparenza parziale (o opacità) non è supportata. Tuttavia, potete utilizzare un grafico in formato PNG trasparente come sfondo di una pagina o di un elemento della pagina per ottenere un effetto visivo simile.

Proprietà della finestra

Una finestra può essere il proprietario di un'altra o più finestre. Queste finestre di proprietà appaiono sempre davanti alla finestra principale, sono ridotte a icona e ripristinate insieme alla finestra principale, inoltre vengono chiuse quando si chiude la finestra principale. La proprietà della finestra non può essere trasferita a un'altra finestra né rimossa. Una finestra può essere di proprietà di una sola finestra principale ma può essere proprietaria di altre finestre.

Potete utilizzare la proprietà della finestra per semplificare la gestione delle finestre utilizzate per finestre di dialogo e tavolozze degli strumenti. Ad esempio, se visualizzate una finestra di dialogo Salva insieme a una finestra documento, rendendo la finestra documento proprietaria della finestra di dialogo è possibile mantenere automaticamente la finestra di dialogo davanti alla finestra documento.

Catalogo finestre visivo

Nella tabella seguente sono illustrati gli effetti visivi di diverse combinazioni di impostazioni di proprietà della finestra nei sistemi operativi Mac OS X, Linux e Windows:

Impostazioni finestra

Mac OS X

Microsoft Windows

Linux *

Tipo: normale

SystemChrome: standard

Transparent: false

Tipo: utilità

SystemChrome: standard

Transparent: false

Tipo: qualsiasi

SystemChrome: none

Transparent: false

Tipo: qualsiasi

SystemChrome: none

Transparent: true

mxWindowedApplication o mx:Window

Tipo: qualsiasi

SystemChrome: none

Transparent: true

* Gestore di finestre Ubuntu con Compiz

Nota: gli elementi del chrome di sistema seguenti non sono supportati da AIR: la barra degli strumenti di Mac OS X, l'icona proxy di Mac OS X, le icone della barra del titolo di Windows e il chrome di sistema alternativo.