Contrôles des fenêtres dans AIR

Je vous renvoie vers la documentation Adobe pour le détail des méthodes de gestion des fenêtres dans AIR (voir NativeWindow principalement).

Cet article concerne les applications pour lesquelles aucun chrome système n'a été choisi, autrement dit aucun comportement ne sera contrôlé par le gestionnaire de fenêtres de votre ordinateur (j'en ai déjà parlé ici).

Réduire, maximiser, restaurer et fermer une fenêtre

Je laisse volontairement à part le déplacement de la fenêtre que j'évoquerai par la suite, car celui-ci fonctionne de manière légèrement différente.

Toutes les personnes utilisant un ordinateur ont quelque chose en commun : ils savent contrôler une fenêtre. Réduire ou fermer une fenêtre est devenu un acte naturel auquel on ne réfléchit même plus.
En créant AIR, les ingénieurs d'Adobe ont pensé à nous, développeurs : ils ont simplifié au plus haut point la mise en place des éléments permettant le contrôle des fenêtres et c'est tant mieux.
En tant que développeur d'application AIR, j'aime assez l'idée d'avoir le contrôle complet sur chaque élément de mon interface, éléments de fenêtre compris. La cohérence de mon interface est pour moi importante, jusque dans le moindre bouton. Pas question donc, que Windows ou Mac OSX viennent mettre leur grain de sel là dedans.
Je parlerai plus longuement dans un prochain article de ce point précis : jusqu'où pousser la personnalisation de l'interface ? Est-ce une simple question de goût ? Un caprice de développeur ou y a t-il d'autres enjeux ?

Bon et si on apprenait à fermer une fenêtre ? Cela vous tente ? Vous allez voir, rien de plus simple !

Tout d'abord, créons une application AIR (vous n'en n'avez pas ? Allez voir par ici comment faire).

Bien. Ensuite créons les éléments qui nous serviront à contrôler la fenêtre.

Création des boutons d'action

<ul>
    <li><a href="#" id="btn-reduire">Réduire</a></li>
    <li><a href="#"id="btn-maximiser">Maximiser</a></li>
    <li><a href="#"id="btn-fermer">Fermer</a></li>
</ul>

Une fois les éléments créés, il ne reste plus qu'à "accrocher" une action sur le clic de chaque bouton.
Tant que j'y suis et avant de vous montrer cela, je fais juste un aparté pour vous conseiller très fortement l'utilisation d'une bibliothèque javascript pour vos applications AIR : le code n'en sera que plus compact.
Mon choix personnel s'est porté sur jQuery, qui est la bibliothèque qui me "parle" le plus. Ne vous en faîtes pas, Aptana gère nativement beaucoup de bibliothèques javascript différentes : jQuery, Mootools, YUI (pour Yahoo! User Interface), Prototype, etc. Choisissez celle qui vous convient le mieux !

Définition des actions

Nous allons pour ce faire appeler les méthodes propres à l'objet nativeWindow de AIR. Attention, il ne faut pas confondre nativeWindow, qui est la fenêtre de l'application, à l'objet DOM window.
Les trois méthodes à appeler sont les suivantes :

• minimize();
• maximize();
• close();

Création des fonctions

// fonction de réduction de la fenêtre
function fn_reduire() {
    nativeWindow.minimize();
}

// fonction de maximisation de la fenêtre
function fn_maximiser() {
    nativeWindow.maximize();
}

//fonction de fermeture de la fenêtre
function fn_fermer() {
    nativeWindow.close();
}

Comme vous pouvez le voir, les méthodes sont simples à employer. J'ai créé trois fonctions différentes pour une question de lisibilité, mais libre à vous de les regrouper sous une seule.

Lancement des fonctions

// Lancement de la fonction quand la page est prête
// équivaut à window.onload();
jQuery(document).ready(function(){
    jQuery("#btn-reduire").bind("click",fn_reduire);
    jQuery("#btn-maximiser").bind("click",fn_maximiser);
    jQuery("#btn-fermer").bind("click",fn_fermer);
});

Explications en deux mots : on sélectionne l'élément par son identifiant, on "écoute" l'événement "click" à l'aide de la méthode "bind" et on exécute une fonction lorsque celui-ci se lance. Pas très compliqué non ?

C'est bien beau tout ça, mais notre bouton de maximisation ne fonctionne que dans un sens : à chaque clic, il maximise la fenêtre. Comment restaurer la fenêtre à sa taille précédente ?

Restauration de la fenêtre

Les ingénieurs d'Adobe ont encore tout prévu : nous allons employer la méthode restore() de l'objet nativeWindow alternativement à maximize().

Modifions donc la fonction fn_maximiser() en conséquence :

// fonction de maximisation de la fenêtre
function fn_maximiser() {
    if(jQuery(this).hasClass("maximized")) {
        nativeWindow.restore();
        jQuery(this).removeClass("maximized");
    }else{
        nativeWindow.maximize();
        jQuery(this).addClass("maximized");
    }
}

La méthode est des plus simples : on se base sur le test d'une classe html sur le bouton de maximisation.
Le principe est le suivant : lorsqu'on agrandit la fenêtre, on attribue une classe "maximized" sur notre lien. Cela joue le rôle de "marqueur" pour dire que la fenêtre est maximisée. Comme action subsidiaire, on maximise la fenêtre.
Il ne nous reste qu'à tester ce "marqueur" : s'il est présent, la fenêtre est en plein écran, donc il faut la réduire et enlever le marqueur. S'il est absent, on procède à l'inverse : on passe la fenêtre en plein écran et on écrit le marqueur.

Déplacement d'une fenêtre

La mise en place du déplacement de la fenêtre de votre application est assez similaire à ce que nous venons de faire.
La méthode de l'API à utiliser cette fois-ci est startMove(). Cette dernière ne se lance pas au clic comme la fermeture ou l'agrandissement de la fenêtre mais lorsque le bouton gauche de la souris est enfoncé.

Mise en place de la méthode startMove()

Délimitez une zone de déplacement de la fenêtre (cela peut être un rectangle en haut de votre application (pour simuler une barre de fenêtre) ou une zone de la surface de toute votre application.

Par exemple :

<div id="attrapeMoi"></div>

Création de la fonction et lancement de la fonction

// fonction de déplacement de la fenêtre
function fn_deplacer() {
    nativeWindow.startMove();
}

// Lancement de la fonction quand la page est prête
// équivaut à window.onload();
jQuery(document).ready(function(){
    [...]
    // on ajoute notre fonction
    // avec l'événement "mousedown"
    jQuery("#attrapeMoi").bind("mousedown", fn_deplacer);
});

Grâce à notre dernière fonction, l'utilisateur peut maintenant déplacer la fenêtre à sa guise tant qu'il tient son bouton de souris enfoncé sur le bloc "attrapeMoi".
Pas si compliqué que ça finalement non ?

Comme évoqué au début de cet article, je suis en train de rédiger un article uniquement sur le redimensionnement d'une fenêtre d'application. Le redimensionnement pose un certain nombre de contraintes et peut être mis en place de différentes façons. Cet article sera l'occasion de faire le point là dessus et d'apprendre à contourner quelques difficultés.