Création de fenêtres

Une fois la fenêtre du bureau créée, il est impossible de modifier les propriétés d’initialisation d’une fenêtre native. Ces propriétés immuables et leurs valeurs par défaut sont les suivantes :

Définissez les propriétés de la fenêtre initiale créée par AIR dans le fichier descripteur d’application. La fenêtre principale d’une application AIR est toujours de type normale . (Vous pouvez spécifier d’autres propriétés de fenêtre dans le fichier descripteur, telles que visible , width , et height , et les modifier à tout moment.)

Définissez les propriétés des autres fenêtres natives et HTML créées par votre application à l’aide de la classe NativeWindowInitOptions. Lorsque vous créez une fenêtre, vous devez transmettre un objet NativeWindowInitOptions spécifiant les propriétés de la fenêtre à la fonction constructeur NativeWindow ou à la méthode createRootWindow() de l’objet HTMLLoader.

Le code suivant crée un objet NativeWindowInitOptions pour une fenêtre d’utilitaire :

var options:NativeWindowInitOptions = new NativeWindowInitOptions(); 
options.systemChrome = NativeWindowSystemChrome.STANDARD; 
options.type = NativeWindowType.UTILITY 
options.transparent = false; 
options.resizable = false; 
options.maximizable = false; 

Il est impossible de définir systemChrome sur standard lorsque la propriété transparent est définie sur true ou lorsque la propriété type est définie sur lightweight .

Lorsque vous créez une fenêtre à l’aide de la classe mx:Window de Flex, définissez les propriétés d’initialisation sur l’objet window en tant que tel, soit dans la déclaration MXML de la fenêtre, soit dans le code qui crée la fenêtre. L’objet NativeWindow sous-jacent n’est pas créé tant que vous n’avez pas appelé la méthode open() . Après avoir ouvert une fenêtre, il est impossible de modifier ces propriétés d’initialisation.

AIR crée la fenêtre initiale de l’application en fonction des propriétés spécifiées dans le fichier descripteur d’application et charge le fichier référencé dans l’élément de contenu. L’élément de contenu doit faire référence à un fichier SWF ou HTML.

La fenêtre initiale peut être la fenêtre principale de votre application, ou permettre simplement de lancer une ou plusieurs autres fenêtres. Il n’est absolument pas nécessaire de rendre cette fenêtre visible.

Pour créer une classe NativeWindow, transmettez un objet NativeWindowInitOptions au constructeur NativeWindow :

var options:NativeWindowInitOptions = new NativeWindowInitOptions(); 
options.systemChrome = NativeWindowSystemChrome.STANDARD; 
options.transparent = false; 
var newWindow:NativeWindow = new NativeWindow(options); 

La fenêtre ne s’affiche pas tant que vous ne définissez pas la propriété visible sur true ou tant que vous n’appelez pas la méthode activate() .

Une fois la fenêtre créée, vous pouvez initialiser ses propriétés et charger le contenu dans la fenêtre à l’aide de la propriété stage et des techniques de la liste d’affichage de Flash.

Dans la plupart des cas, vous devez définir la propriété scaleMode de la scène d’une nouvelle fenêtre native sur noScale (utilisez la constante StageScaleMode.NO_SCALE ). Les modes d’échelle de Flash sont conçus pour des situations dans lesquelles l’auteur de l’application ne connaît pas à l’avance le format de l’espace d’affichage de l’application. Les modes d’échelle permettent à l’auteur de faire le moins mauvais choix : découper le contenu, l’étirer ou le compresser, ou le remplir d’espace vide. Etant donné que vous contrôlez l’espace d’affichage dans AIR (le cadre de la fenêtre), vous pouvez dimensionner la fenêtre en fonction du contenu ou dimensionner le contenu en fonction de la fenêtre sans aucun compromis.

Le mode d’échelle pour Flex et les fenêtres HTML est automatiquement défini sur noScale .

var maxOSSize:Point = NativeWindow.systemMaxSize; 
var minOSSize:Point = NativeWindow.systemMinSize; 

Pour créer une fenêtre HTML, vous pouvez appeler la méthode Window.open() de JavaScript ou appeler la méthode createRootWindow() de la classe HTMLLoader d’AIR.

Le contenu HTML dans les sandbox de sécurité peuvent utiliser la méthode standard Window.open() de JavaScript. Si le contenu est exécuté hors du sandbox de l’application, la méthode open() ne peut être appelée qu’en réponse à l’interaction de l’utilisateur, notamment lorsque ce dernier clique sur la souris ou appuie sur une touche. Lorsque la méthode open() est appelée, une fenêtre avec un chrome système est créée pour afficher le contenu à l’URL spécifiée. Exemple :

newWindow = window.open("xmpl.html", "logWindow", "height=600, width=400, top=10, left=10");

Le contenu du sandbox de sécurité de l’application a accès à la méthode de création de fenêtres la plus performante : HTMLLoader.createRootWindow() . Cette méthode vous permet de spécifier toutes les options de création d’une nouvelle fenêtre. Par exemple, le code JavaScript suivant crée un type de fenêtre légère sans chrome système, d’une taille de 300x400 pixels :

var options = new air.NativeWindowInitOptions(); 
options.systemChrome = "none"; 
options.type = "lightweight"; 
 
var windowBounds = new air.Rectangle(200,250,300,400); 
newHTMLLoader = air.HTMLLoader.createRootWindow(true, options, true, windowBounds); 
newHTMLLoader.load(new air.URLRequest("xmpl.html"));

Si vous créez une fenêtre transparente, le contenu SWF intégré au code HTML chargé dans cette fenêtre ne s’affiche pas systématiquement. Vous devez définir le paramètre wmode de l’objet ou de la balise embed qui fait référence au fichier SWF sur opaque ou transparent . Etant donné que la valeur par défaut de wmode est window , le contenu SWF ne s’affiche par défaut pas dans une fenêtre transparente. Un contenu PDF ne s’affiche pas dans une fenêtre transparente, quelle que soit la valeur définie de wmode . (Dans les versions d’AIR antérieures à 1.5.2, il était également d’impossible d’afficher un contenu SWF dans une fenêtre transparente.)

Les fenêtres créées avec la méthode createRootWindow() restent indépendantes de la fenêtre d’ouverture. Les propriétés parent et opener de l’objet Window de JavaScript sont définies sur null . La fenêtre d’ouverture peut accéder à l’objet Window de la nouvelle fenêtre à l’aide de la référence HTMLLoader renvoyée par la fonctionnalité createRootWindow() . Dans le cadre de l’exemple précédent, l’instruction newHTMLLoader.window référencerait l’objet Window de JavaScript de la fenêtre créée.

Pour créer un composant mx:Window, vous pouvez créer un fichier MXML à l’aide de mx:Window comme balise racine ou appeler directement le constructeur de la classe Window.

L’exemple suivant crée et affiche un composant mx:Window en appelant le constructeur Window :

var newWindow:Window = new Window(); 
newWindow.systemChrome = NativeWindowSystemChrome.NONE; 
newWindow.transparent = true; 
newWindow.title = "New Window"; 
newWindow.width = 200; 
newWindow.height = 200; 
newWindow.open(true);

La méthode d’ajout de contenu à une fenêtre AIR dépend du type de fenêtre. Ainsi, MXML et HTML vous permettent de définir d’une manière déclarative le contenu de base de la fenêtre. Vous pouvez intégrer des ressources dans les fichiers SWF de l’application ou les charger à partir de fichiers d’application distincts. Le contenu Flex, Flash et HTML peut être créé au moment opportun et ajouté à la fenêtre de façon dynamique.

Lorsque vous chargez du contenu SWF ou du contenu HTML contenant JavaScript, vous devez tenir compte du modèle de sécurité d’AIR. Le contenu dans le sandbox de sécurité de l’application, c’est-à-dire le contenu installé avec votre application et pouvant être chargé avec le modèle d’URL app:, dispose de privilèges complets pour accéder à toutes les API d’AIR. Le contenu chargé hors de ce sandbox ne peut pas accéder aux API d’AIR. Le contenu JavaScript hors du sandbox de l’application ne peut pas utiliser les propriétés runtime , nativeWindow et htmlLoader de l’objet Window de JavaScript.

Pour sécuriser la programmation croisée, vous pouvez utiliser un pont de sandbox afin de fournir une interface limitée entre le contenu applicatif et le contenu hors application. Dans le contenu HTML, vous pouvez également mapper les pages de votre application sur un sandbox hors application afin que le code sur cette page puisse intercoder le contenu externe. Voir le chapitre Sécurité AIR .

package { 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.net.URLRequest; 
    import flash.display.Loader; 
 
    public class LoadedSWF extends Sprite 
    { 
        public function LoadedSWF(){ 
            var loader:Loader = new Loader(); 
            loader.load(new URLRequest("visual.swf"));                    
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadFlash); 
        } 
 
        private function loadFlash(event:Event):void{ 
            addChild(event.target.loader);  
        } 
    } 
}

//newWindow is a NativeWindow instance 
var htmlView:HTMLLoader = new HTMLLoader(); 
htmlView.width = 300; 
htmlView.height = 500; 
 
//set the stage so display objects are added to the top-left and not scaled 
newWindow.stage.align = "TL"; 
newWindow.stage.scaleMode = "noScale"; 
newWindow.stage.addChild( htmlView ); 
 
//urlString is the URL of the HTML page to load 
htmlView.load( new URLRequest(urlString) );

<html> 
<head> 
<title>Bouncers</title> 
<script src="AIRAliases.js" type="text/javascript"></script> 
<script language="JavaScript" type="text/javascript"> 
air.Shape = window.runtime.flash.display.Shape; 
 
function Bouncer(radius, color){ 
    this.radius = radius; 
    this.color = color; 
 
    //velocity  
    this.vX = -1.3; 
    this.vY = -1; 
 
    //Create a Shape object and draw a circle with its graphics property 
    this.shape = new air.Shape();     
    this.shape.graphics.lineStyle(1,0); 
    this.shape.graphics.beginFill(this.color,.9); 
    this.shape.graphics.drawCircle(0,0,this.radius); 
    this.shape.graphics.endFill(); 
     
    //Set the starting position 
    this.shape.x = 100; 
    this.shape.y = 100; 
 
 
    //Moves the sprite by adding (vX,vY) to the current position 
    this.update = function(){ 
        this.shape.x += this.vX; 
        this.shape.y += this.vY; 
         
        //Keep the sprite within the window 
        if( this.shape.x - this.radius < 0){  
            this.vX = -this.vX; 
        } 
        if( this.shape.y - this.radius < 0){ 
            this.vY = -this.vY; 
        } 
        if( this.shape.x  + this.radius > window.nativeWindow.stage.stageWidth){ 
            this.vX = -this.vX; 
        } 
        if( this.shape.y  + this.radius > window.nativeWindow.stage.stageHeight){ 
            this.vY = -this.vY; 
        } 
         
    }; 
} 
 
function init(){ 
    //turn off the default HTML background 
    window.htmlLoader.paintsDefaultBackground = false; 
    var bottom = new Bouncer(60,0xff2233); 
    var top = new Bouncer(30,0x2441ff); 
 
    //listen for the enterFrame event 
    window.htmlLoader.addEventListener("enterFrame",function(evt){ 
        bottom.update(); 
        top.update(); 
    }); 
     
    //add the bouncing shapes to the window stage 
    window.nativeWindow.stage.addChildAt(bottom.shape,0); 
    window.nativeWindow.stage.addChild(top.shape); 
} 
</script> 
<body onload="init();"> 
<h1>de Finibus Bonorum et Malorum</h1> 
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis 
et quasi architecto beatae vitae dicta sunt explicabo.</p> 
<p style="background-color:#FFFF00; color:#660000;">This paragraph has a background color.</p> 
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis 
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias 
excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui 
officia deserunt mollitia animi, id est laborum et dolorum fuga.</p> 
</body> 
</html>

L’exemple suivant illustre la méthode de création d’une fenêtre native :

public function createNativeWindow():void { 
    //create the init options 
    var options:NativeWindowInitOptions = new NativeWindowInitOptions(); 
    options.transparent = false; 
    options.systemChrome = NativeWindowSystemChrome.STANDARD; 
    options.type = NativeWindowType.NORMAL; 
     
    //create the window 
    var newWindow:NativeWindow = new NativeWindow(options); 
    newWindow.title = "A title"; 
    newWindow.width = 600; 
    newWindow.height = 400; 
     
    newWindow.stage.align = StageAlign.TOP_LEFT; 
    newWindow.stage.scaleMode = StageScaleMode.NO_SCALE; 
 
    //activate and show the new window 
    newWindow.activate(); 
}