Principes de base des fenêtres natives dans AIR

Adobe AIR 1.0 et les versions ultérieures

Pour obtenir une explication rapide de l’utilisation des fenêtres natives dans AIR et des exemples de code correspondants, voir les articles de démarrage rapide suivants dans Adobe Developer Connection :

AIR offre une API multiplateformes facile à utiliser vous permettant de créer des fenêtres natives dans un système d’exploitation à l’aide de Flash®, Flex™ et des techniques de programmation HTML.

Grâce à AIR, vous pouvez personnaliser l’aspect de votre application en toute liberté. Les fenêtres que vous créez peuvent ressembler à une application de bureau standard, en reproduisant le style Apple lors d’une exécution sous Mac, en respectant les conventions Microsoft lors d’une exécution sous Windows, et en s’harmonisant au gestionnaire de fenêtres sous Linux, sans inclure une seule ligne de code spécifique à une plate-forme. Vous pouvez par ailleurs utiliser le chrome extensible, auquel il est possible d’appliquer une enveloppe, fourni par la structure d’application Flex afin de créer votre propre style, quelle que soit la plate-forme d’exécution de votre application. Vous pouvez de surcroît concevoir votre propre chrome de fenêtre avec des vecteurs et des images bitmap, et utiliser les effets de transparence, ainsi que le fondu alpha avec le poste de travail. Vous en avez assez des fenêtres rectangulaires ? Créez des fenêtres arrondies !

Fenêtres dans AIR

AIR prend en charge trois API distinctes pour l’utilisation des fenêtres :

  • La classe NativeWindow, orientée ActionScript, fournit l’API de la fenêtre du niveau le plus bas. Utilisez la classe NativeWindow dans les applications programmées dans ActionScript et Flash Professional. Pensez à étendre la classe NativeWindow pour spécialiser les fenêtres utilisées dans votre application.

  • Dans l’environnement HTML, vous pouvez utiliser la classe Window de JavaScript, comme dans toute application Web à base de navigateur. Les appels aux méthodes Window de JavaScript sont transmis à l’objet window natif sous-jacent.

  • Les classes Flex framework mx:WindowedApplication et mx:Window fournissent une « enveloppe » Flex à la classe NativeWindow. Le composant WindowedApplication remplace le composant Application lorsque vous créez une application AIR avec Flex et doit toujours être utilisé comme fenêtre initiale dans votre application Flex.

Fenêtres ActionScript

Lorsque vous créez des fenêtres avec la classe NativeWindow, utilisez directement la scène et la liste d’affichage de Flash Player. Pour ajouter un objet visuel à une classe NativeWindow, ajoutez l’objet à la liste d’affichage de la scène de la fenêtre ou à un autre conteneur d’objet d’affichage sur la scène.

Fenêtres HTML

Lorsque vous créez des fenêtres HTML, utilisez HTML, CSS et JavaScript pour afficher du contenu. Pour ajouter un objet visuel à une fenêtre HTML, ajoutez ce contenu au DOM HTML. Les fenêtres HTML sont une catégorie spéciale de l’élément NativeWindow. L’hôte AIR définit une propriété nativeWindow dans les fenêtres HTML, qui fournit l’accès à l’occurrence de NativeWindow sous-jacente. Utilisez cette propriété pour accéder aux propriétés, méthodes et événements de l’élément NativeWindow décrits ici.

Remarque : l’objet Window de JavaScript dispose également de méthodes pour la rédaction de scripts dans la fenêtre conteneur, telles que moveTo() et close() . Lorsque plusieurs méthodes sont disponibles, utilisez celle qui vous convient le mieux.

Fenêtres de la structure d’application Flex

Lorsque vous créez des fenêtres avec la structure d’application Flex, vous utilisez normalement des composants MXML pour remplir la fenêtre. Pour ajouter un composant Flex à une fenêtre, ajoutez l’élément de composant à la définition MXML de la fenêtre. Vous pouvez également utiliser ActionScript pour ajouter du contenu de façon dynamique. Les composants mx:WindowedApplication et mx:Window sont conçus comme conteneurs Flex et peuvent par conséquent accepter directement les composants Flex, ce que les objets NativeWindow ne permettent pas. Le cas échéant, il est possible d’accéder aux propriétés et méthodes NativeWindow par le biais des objets WindowedApplication et Window à l’aide de la propriété nativeWindow .

La fenêtre initiale de l’application

AIR crée pour vous la première fenêtre de l’application. AIR définit les propriétés et le contenu de la fenêtre à l’aide des paramètres spécifiés dans l’élément initialWindow du fichier descripteur d’application.

Si le contenu racine est un fichier SWF, AIR crée une occurrence de NativeWindow, charge le fichier SWF et l’ajoute à la scène de la fenêtre. Si le contenu racine est un fichier HTML, AIR crée une fenêtre HTML et charge le fichier HTML.

Classes d’une fenêtre native

Flux d’événements des fenêtres natives

Les fenêtres natives distribuent des événements pour notifier les composants intéressés qu’un changement important est sur le point de se produire ou s’est déjà produit. La plupart des événements basés sur les fenêtres sont distribués par paires. Le premier événement informe qu’un changement est sur le point de se produire. Le deuxième événement annonce qu’un changement a été effectué. Vous pouvez annuler un événement d’avertissement, mais pas un événement de notification. La séquence suivante illustre le flux d’événements qui se produit lorsqu’un utilisateur clique sur le bouton d’agrandissement d’une fenêtre :

  1. L’objet NativeWindow distribue un événement displayStateChanging .

  2. Si aucun écouteur enregistré n’annule l’événement, la fenêtre est agrandie.

  3. L’objet NativeWindow distribue un événement displayStateChange .

    L’objet NativeWindow distribue en outre des événements lors de modifications associées ayant trait à la taille et à la position de la fenêtre. La fenêtre ne distribue aucun événement d’avertissement pour ces modifications associées. Les événements associés sont les suivants :

    1. Un événement move est distribué si le coin supérieur gauche de la fenêtre s’est déplacé suite à un agrandissement.

    2. Un événement resize est distribué si la taille de la fenêtre a changé suite à un agrandissement.

    Un objet NativeWindow distribue une séquence d’événements similaire lors de l’agrandissement, de la restauration, de la fermeture, du déplacement et du redimensionnement d’une fenêtre.

    Les événements d’avertissement ne sont distribués que lorsqu’une modification est initiée via le chrome de la fenêtre ou un autre mécanisme contrôlé par le système d’exploitation. Lorsque vous appelez une méthode window pour modifier la taille, la position ou l’état d’affichage de la fenêtre, la fenêtre ne distribue qu’un seul événement pour annoncer la modification. Vous pouvez distribuer un événement d’avertissement, si vous le souhaitez, à l’aide de la méthode dispatchEvent() de la fenêtre, puis vérifier si votre événement d’avertissement a été annulé avant d’effectuer la modification.

    Pour plus d’informations sur les classes, les méthodes, les propriétés et les événements de l’API de fenêtre, voir le manuel Guide de référence ActionScript 3.0 pour la plate-forme Adobe Flash .

Propriétés de contrôle du style et du comportement d’une fenêtre native

Les propriétés suivantes contrôlent l’aspect et le comportement de base d’une fenêtre :

  • type

  • systemChrome

  • transparent

  • owner

Lorsque vous créez une fenêtre, vous définissez ces propriétés sur l’objet NativeWindowInitOptions transmis au constructeur de fenêtre. AIR lit les propriétés de la fenêtre d’application initiale à partir du fichier descripteur d’application. (A l’exception de la propriété type qui ne peut pas être définie dans le fichier descripteur d’application et dont la valeur est toujours normal .) Il est impossible de modifier les propriétés une fois la fenêtre créée.

Certains paramètres de ces propriétés sont mutuellement incompatibles : systemChrome ne peut pas être défini sur standard lorsque transparent est défini sur true ou type est défini sur lightweight .

Types de fenêtre

Les types de fenêtres d’AIR combinent les attributs de chrome et de visibilité du système d’exploitation natif pour créer trois types de fenêtre fonctionnels. Utilisez les constantes définies dans la classe NativeWindowType pour référencer les noms des types de fenêtre dans le code. AIR fournit les types de fenêtre suivants :

Type

Description

Normale

Une fenêtre classique. Les fenêtres normales utilisent le chrome plein écran et apparaissent dans la barre des tâches Windows et le menu de la fenêtre Mac OS X.

Utilitaire

Une palette d’outils. Les fenêtres d’utilitaire utilisent une version plus fine du chrome système et n’apparaissent ni dans la barre des tâches Windows ni dans le menu de la fenêtre Mac OS X.

Légère

Les fenêtres légères n’utilisent pas de chrome et n’apparaissent ni dans la barre des tâches Windows ni dans le menu de la fenêtre Mas OS X. De plus, les fenêtres légères ne disposent pas du menu Système (Alt-Espace) sous Windows. Les fenêtres légères sont adaptées aux commandes et aux bulles de notification (listes déroulantes qui ouvrent une zone d’affichage de courte durée, par exemple). Lorsque le type légère est utilisé, la propriété systemChrome doit être définie sur none .

Chrome de la fenêtre

Le chrome d’une fenêtre est un ensemble de commandes qui permet aux utilisateurs de manipuler une fenêtre dans l’environnement de bureau. Le chrome comprend les éléments suivants : barre de titre, boutons de la barre de titre, encadrement et poignées de redimensionnement.

Chrome système

Vous pouvez définir la propriété systemChrome sur standard ou sur none . Choisissez le chrome système standard pour attribuer à votre fenêtre le jeu de commandes standard créé par le système d’exploitation de l’utilisateur. Choisissez none pour créer votre propre chrome de fenêtre. Utilisez les constantes définies dans la classe NativeWindowSystemChrome pour référencer les paramètres du chrome système dans le code.

Le chrome système est géré par le système. Votre application ne bénéficie pas d’un accès direct aux commandes, mais peut réagir aux événements distribués lorsque les commandes sont utilisées. Lorsque vous utilisez le chrome standard pour une fenêtre, la propriété transparent doit être définie sur false et la propriété type doit être définie sur normal ou sur utility .

Chrome Flex

Lorsque vous utilisez les composants WindowedApplication ou Window de Flex, la fenêtre peut faire appel soit au chrome système, soit au chrome fourni par la structure d’application Flex. Pour utiliser le chrome Flex, définissez la propriété systemChrome requise pour créer la fenêtre sur none . Si vous utilisez les composants spark de Flex 4 au lieu des composants mx, vous devez spécifier la classe d’enveloppe pour faire appel au chrome de Flex. Libre à vous de faire appel aux enveloppes intégrées ou à vos propres enveloppes. L’exemple suivant illustre l’utilisation de la classe d’enveloppe WindowedApplication des composants spark intégrée pour proposer le chrome de fenêtre : 

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

Pour plus d’informations, voir Using Flex 4: About the AIR window containers: Controlling window chrome (disponible en anglais uniquement)

Chrome personnalisé

Lorsque vous créez une fenêtre sans chrome système, vous devez ajouter vos propres commandes de chrome afin de gérer les interactions entre un utilisateur et la fenêtre. Vous êtes également libre de créer des fenêtres transparentes et non rectangulaires.

Pour utiliser un chrome personnalisé avec le composant mx:WindowedApplication ou mx:Window, vous devez définir le style showFlexChrome sur false . Si tel n’est pas le cas, Flex intègre son propre chrome à vos fenêtres.

Transparence de la fenêtre

Pour permettre le fondu alpha d’une fenêtre avec le bureau ou d’autres fenêtres, définissez la propriété transparent de la fenêtre sur true . La propriété transparent , qui doit être définie avant de créer la fenêtre, ne peut pas être modifiée.

Une fenêtre transparente ne dispose d’aucun arrière-plan par défaut. Les zones d’une fenêtre qui ne contiennent aucun objet créé par l’application sont invisibles. Si le paramètre alpha d’un objet affiché est inférieur à un, tout élément affiché sous l’objet apparaît, notamment les autres objets d’affichage de la fenêtre, les autres fenêtres et le bureau.

Les fenêtres transparentes sont utiles lorsque vous souhaitez créer des applications aux bordures irrégulières, qui « s’atténuent » ou semblent invisibles. Le rendu des zones de grande taille sur lesquelles le fondu alpha a été appliqué peut toutefois être lent ; par conséquent, n’utilisez cet effet que lorsque cela est strictement nécessaire.

Important : sous Linux, les événements de souris ne passent pas à travers des pixels entièrement transparents. Évitez de créer des fenêtres comprenant de vastes zones entièrement transparentes car vous pourriez bloquer de façon invisible l’accès de l’utilisateur aux autres fenêtres ou aux autres éléments de son bureau. Sous Mac OS X et Windows, les événements de souris passent à travers les pixels entièrement transparents.

La transparence ne peut pas être utilisée avec des fenêtres disposant d’un chrome système. En outre, le contenu SWF et PDF dans HTML risque de ne pas s’afficher dans des fenêtres transparentes. Pour plus d’informations, voir Eléments à prendre en compte lors du chargement d’un contenu SWF ou PDF dans une page HTML .

La propriété statique NativeWindow.supportsTransparency indique si la transparence de la fenêtre est disponible. Si la transparence n’est pas prise en charge, l’application utilise un arrière-plan noir. Dans ce cas, les zones transparentes de l’application s’affichent en noir opaque. Il est recommandé de proposer une solution de remplacement au cas où cette propriété serait définie sur false . Vous pourriez ainsi montrer une boîte de dialogue d’avertissement à l’utilisateur ou afficher une interface utilisateur rectangulaire et non transparente.

Notez que la transparence est toujours prise en charge par les systèmes d’exploitation Mac et Windows. La prise en charge sur les systèmes d’exploitation Linux requiert un gestionnaire de composition de fenêtres. Cependant, même lorsqu’un tel gestionnaire est disponible, la transparence peut ne pas être disponible du fait des options d’affichage de l’utilisateur ou de sa configuration matérielle.

Transparence dans une fenêtre d’application MXML

Par défaut, l’arrière-plan d’une fenêtre MXML est opaque, même si vous créez la fenêtre à l’aide de la propriété transparent . (Notez l’effet de transparence aux coins de la fenêtre.) Pour présenter un arrière-plan transparent pour la fenêtre, définissez une couleur d’arrière-plan et une valeur alpha dans la feuille de style ou l’élément <mx:Style> contenu dans le fichier MXML de votre application. Par exemple, la déclaration de style suivante confère à l’arrière-plan une nuance de vert légèrement transparente : 

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

Transparence dans une fenêtre d’application HTML

Par défaut, l’arrière-plan du contenu HTML affiché dans les fenêtres HTML et les objets HTMLLoader est opaque, même si la fenêtre conteneur est transparente. Pour désactiver l’arrière-plan par défaut du contenu HTML, définissez la propriété paintsDefaultBackground sur false . L’exemple suivant crée un objet HTMLLoader et désactive l’arrière-plan par défaut : 

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

Cet exemple utilise JavaScript pour désactiver le chrome par défaut d’une fenêtre HTML : 

window.htmlLoader.paintsDefaultBackground = false;

Si un élément du document HTML définit une couleur d’arrière-plan, l’arrière-plan de cet élément n’est pas transparent. Il est impossible de définir une transparence (ou une opacité) partielle. Vous pouvez néanmoins utiliser une image transparente au format PNG comme arrière-plan d’une page ou d’un élément de page pour obtenir un effet visuel similaire.

Appartenance des fenêtres

Une fenêtre peut être propriétaire d’une ou de plusieurs fenêtres. Celles-ci s’affichent toujours devant la fenêtre maître, sont réduites en icône et restaurées conjointement avec elle et sont fermées lors de la fermeture de cette dernière. Il est impossible de transférer ou supprimer l’appartenance des fenêtres. Une fenêtre ne peut appartenir qu’à une seule fenêtre maître, mais peut posséder un nombre illimité d’autres fenêtres.

L’appartenance des fenêtres permet de simplifier la gestion des fenêtres servant de palettes d’outils ou de boîtes de dialogue. Supposons, par exemple, que vous affichiez une boîte de dialogue d’enregistrement en conjonction avec une fenêtre de document. Si la boîte de dialogue appartient à la fenêtre de document, elle s’affiche automatiquement devant la fenêtre de document.

Catalogue des effets visuels d’une fenêtre

Le tableau suivant illustre les effets visuels résultant de diverses combinaisons de paramètres de propriétés de fenêtre sous Mac OS X, Windows et Linux :

Paramètres de fenêtre

Mac OS X

Microsoft Windows

Linux *

Type : normale

SystemChrome : standard

Transparent : false

Type : utilitaire

SystemChrome : standard

Transparent : false

Type : tout type

SystemChrome : aucun

Transparent : false

Type : tout type

SystemChrome : aucun

Transparent : true

mxWindowedApplication ou mx:Window

Type : tout type

SystemChrome : aucun

Transparent : true

* Ubuntu avec gestionnaire de fenêtres Compiz

Remarque : les éléments du chrome système suivants ne sont pas pris en charge par AIR : barre d’outils Mac OS X, icône proxy Mac OS X, icônes de la barre de titre Windows et chrome système alternatif.