<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>Bol d&apos;AIR</title>
    <link rel="alternate" type="text/html" href="http://boldair.org/blog/" />
    <link rel="self" type="application/atom+xml" href="http://boldair.org/blog/atom.xml" />
    <id>tag:boldair.org,2009-07-05:/blog//1</id>
    <updated>2010-01-11T22:36:05Z</updated>
    <subtitle>XHTML, CSS et Javascript pour Adobe AIR</subtitle>
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type Pro 4.261</generator>

<entry>
    <title>[Service] Ce blog n&apos;est pas mort.</title>
    <link rel="alternate" type="text/html" href="http://boldair.org/blog/2010/01/ce-blog-nest-pas-mort.html" />
    <id>tag:boldair.org,2010:/blog//1.42</id>

    <published>2010-01-11T22:31:09Z</published>
    <updated>2010-01-11T22:36:05Z</updated>

    <summary>Blog fonctionnant au ralenti.</summary>
    <author>
        <name>Sébastien</name>
        <uri>http://boldair.org</uri>
    </author>
    
        <category term="Blabla" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="service" label="service" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="fr" xml:base="http://boldair.org/blog/">
        <![CDATA[<p>Mon blog fonctionne au ralenti depuis quelques mois maintenant. La faute à un changement d'activité professionnelle (je suis passé indépendant et ça ne se met pas en route toutes seules ces choses-là) un peu chaotique.</p>

<p>Il y a pas mal de sujets que je souhaite aborder (notamment la version bêta de AIR 2). Alors à ceux qui passent par là : non ce blog ne tombe pas dans l'oubli et dès que mon agenda le permet, il s'animera de nouveau.</p>

<p>Merci pour votre patience.</p>
]]>
        

    </content>
</entry>

<entry>
    <title>Base de données dans AIR - 2ème partie : créer et se connecter à une base de données</title>
    <link rel="alternate" type="text/html" href="http://boldair.org/blog/2009/09/base-de-donnees-dans-air-creer-et-se-connecter-a-une-base-de-donnees.html" />
    <id>tag:boldair.org,2009:/blog//1.36</id>

    <published>2009-09-11T22:10:00Z</published>
    <updated>2009-09-11T22:10:18Z</updated>

    <summary>Comment créer une base de données dans AIR ? Comment établir une connexion vers une base de données ? Ce billet fait le tour de ces questions.</summary>
    <author>
        <name>Sébastien</name>
        <uri>http://boldair.org</uri>
    </author>
    
        <category term="API AIR" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Base de données dans AIR" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="basededonnées" label="base de données" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="fr" xml:base="http://boldair.org/blog/">
        <![CDATA[<p>Seconde partie de cette série d'article sur SQLite et AIR : créer et se connecter à une base de données.</p>

<p>Comme précédemment, vous allez voir que tout est déjà prévu et vraiment très simple. Tout se fait en quelques étapes : instanciation de la classe File, création du fichier de base de données, ouverture de la connexion. </p>
]]>
        <![CDATA[<h2>Etape 1 : instanciation de la classe File</h2>

<p>La première étape consiste à faire appel à la classe File afin de créer le répertoire dans lequel se situera notre base de données.<br />
Air stocke les informations de l'application (base de données, images, etc) dans un répertoire propre à l'application elle même. Afin de retrouver ce dossier, deux lignes de codes suffisent : </p>

<blockquote>
<pre>
<code>
var appStorage = air.File.applicationStorageDirectory.nativePath;
air.Introspector.Console.log("Dossier de l'application : " + appStorage);
</code>
</pre>
</blockquote>

<p>Résultat en image dans la console de débuggage de AIR :</p>

<p><br />
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="appStorage.png" src="http://boldair.org/blog/medias/img/appStorage.png" width="609" height="43" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></span></p>

<p>Mais revenons à nos moutons et créons donc notre répertoire :</p>

<blockquote>
<pre>
<code>
// Constantes
var DB_FOLDER = "db";

// creation du repertoire
var dbFolder = air.File.applicationStorageDirectory.resolvePath(DB_FOLDER);
dbFolder.createDirectory();
</code>
</pre>
</blockquote>

<p>On initialise une constante avec le nom que nous souhaitons donner à notre répertoire.
La variable <em>dbFolder</em> instancie la classe File avec ce nom.
L'instruction <em>createDirectory()</em> crée le répertoire. Et voilà !</p>

<h2>Etape 2 : création du fichier de base de données</h2>

<p>Cette seconde étape est tout aussi simple que la première : on définit une constante pour notre nom de fichier de base de données et ensuite... on le crée.</p>

<blockquote>
<pre>
<code>
// Constantes
var DB_FOLDER = "db";
var DB_NAME = "maBase.db";

// creation du repertoire
var dbFolder = air.File.applicationStorageDirectory.resolvePath(DB_FOLDER);
dbFolder.createDirectory();

// creation de la base
var mainDB = dbFolder.resolvePath(DB_NAME);
</code>
</pre>
</blockquote>

<p>Il ne nous reste plus qu'à établir la connexion avec notre base de données.</p>

<h2>Etape 3: ouverture de la connexion</h2>

<p>La connexion à une base de données dans AIR peut se faire de deux façons différentes : synchrone et asynchrone.<br />
Lors de l'exécution d'une connexion synchrone, l'application est mise "en pause"  le temps qu'elle soit terminée. Autrement dit, elle empêche l'utilisateur d'interagir avec l'application.<br />
En revanche, la connexion asynchrone permet d'exécuter des opérations avec la base de données tout en gardant l'application active.</p>

<p>Pour ces deux types de connexion, deux méthodes : </p>

<ul>
<li><em>open()</em></li>
<li><em>openAsync()</em></li>
</ul>

<p>Cette dernière étape va se passer en deux temps : connexion SQL et ouverture de notre base.</p>

<p>Après mise à jour du code précédent, nous arrivons à ce résultat :</p>

<blockquote>
<pre>
<code>
// Constantes
var DB_FOLDER = "db";
var DB_NAME = "maBase.db";

// creation du repertoire
var dbFolder = air.File.applicationStorageDirectory.resolvePath(DB_FOLDER);
dbFolder.createDirectory();

// creation de la base
var mainDB = dbFolder.resolvePath(DB_NAME);


// connexion a la base
var dbConnect = new air.SQLConnection();

try {
    // opening DB
    dbConnect.open(mainDB);
    air.Introspector.Console.log("DB ouverte");
} catch(error) {
    air.Introspector.Console.log("Erreur :", error.message);
    air.Introspector.Console.log("Détails de l'erreur :", error.details);  
}

</code>
</pre>
</blockquote>

<p>Dans cet exemple, les erreurs éventuelles sont retransmises par la clause "catch" et s'affichent dans la console. Cette méthode n'est valable que pour la méthode synchrone.<br />
Pour une connexion asynchrone, il faut passer par un écouteur des événements de connexion SQL : <em>SQLEvent.OPEN</em> et <em>SQLErrorEvent.ERROR</em>.</p>

<blockquote>
<pre>
<code>
// Constantes
var DB_FOLDER = "db";
var DB_NAME = "maBase.db";

// creation du repertoire
var dbFolder = air.File.applicationStorageDirectory.resolvePath(DB_FOLDER);
dbFolder.createDirectory();

// creation de la base
var mainDB = dbFolder.resolvePath(DB_NAME);


// connexion a la base
var dbConnect = new air.SQLConnection();

dbConnect.openAsync(mainDB);
dbConnect.addEventListener(air.SQLEvent.OPEN, mafonctionOuverture);
dbConnect.addEventListener(air.SQLErrorEvent.ERROR, mafonctionErreur);

</code>
</pre>
</blockquote>

<p>Vous savez maintenant créer une base de données avec AIR et ouvrir une connexion.<br />
Prochaine étape : création et gestion des tables dans la base.</p>

<p>Bon vent !</p>
]]>
    </content>
</entry>

<entry>
    <title>CSS 3 et AIR - 2ème partie : la propriété background</title>
    <link rel="alternate" type="text/html" href="http://boldair.org/blog/2009/09/css-3-et-air-la-propriete-background.html" />
    <id>tag:boldair.org,2009:/blog//1.34</id>

    <published>2009-09-01T20:54:00Z</published>
    <updated>2009-09-01T20:55:19Z</updated>

    <summary>Qu&apos;en est-il du support des propriétés CSS 3 pour les images de fond dans AIR ?</summary>
    <author>
        <name>Sébastien</name>
        <uri>http://boldair.org</uri>
    </author>
    
        <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="CSS 3 et AIR" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="background" label="background" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="css3" label="CSS 3" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="fr" xml:base="http://boldair.org/blog/">
        <![CDATA[<p>Deuxième billet dans cette série concernant le support de CSS 3 dans AIR. Au menu : la propriété <em>background</em> et les ajouts (importants) présents dans le brouillon de la recommandation CSS 3.</p>

<p>Cette recommandation se trouve à cette adresse : <a href="http://www.w3.org/TR/css3-background/">http://www.w3.org/TR/css3-background/</a>. Elle détaille un certain nombre de nouveautés pour la propriété CSS <em>background</em>, parmis lesquelles :</p>

<ul>
<li>les fonds multiples</li>
<li>deux nouvelles valeurs pour la répétition des images de fond</li>
<li>le <em>clipping</em> de l'image de fond</li>
<li>la définition du point d'origine de l'image de fond</li>
<li>la taille de l'image de fond.</li>
</ul>
]]>
        <![CDATA[<h2>Les fonds multiples</h2>

<p>CSS 3 prévoit dans le brouillon de sa recommandation la possibilité d'inclure plusieurs images de fond à un même bloc. On conserve bien évidemment la possibilité de les positionner et de les faire se répéter ou pas.
Pour notre plus grand bonheur (en tout cas le mien), Adobe AIR supporte complètement cette possibilité que nous offre CSS 3. La déclaration se fait comme suit :</p>

<blockquote>
<pre>
<code>
div {
    border:1px dashed #0f0;
    background-image:url(cat.png), url(car.png), url(ball.png);
    background-repeat:repeat-y, no-repeat, repeat-x;
    background-position:15px 0, 50% 100%, bottom right;
}
</code>
</pre>
</blockquote>

<p>Ce qui donne en image (non je ne suis pas un artiste au cas où vous en douteriez) : </p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="fonds-multiples.png" src="http://boldair.org/blog/medias/img/fonds-multiples.png" width="400" height="169" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></span></p>

<p>Il suffit de déclarer les différentes images séparées par des virgules et le tour est joué. En ce qui concerne les propriétés de répétition et de positionnement, on les déclare dans le même ordre et également séparées par des virgules.</p>

<h2>Nouvelles valeurs pour la répétition : <em>round</em> et <em>space</em></h2>

<p>Les valeurs <em>round</em> et <em>space</em> pour la propriété <em>background-repeat</em> prévoient de donner la possibilité d'ajuster le fond à son conteneur lors de la répétition et d'empêcher que le fond soit tronqué. Je dis bien "prévoient" parce que ces deux valeurs ne sont pas (encore ?) supportées dans AIR.</p>

<p>Pour votre culture personnelle (et la mienne), voici quand même la déclaration :</p>

<blockquote>
<pre>
<code>
div {
    border:1px dashed #0f0;
    background-image:url(cat.png);
    background-repeat:round;
}
</code>
</pre>
</blockquote>

<h2>Le <em>clipping</em> de l'image de fond</h2>

<p>Qu'est-ce que le <em>clipping</em> ? Il s'agit de la zone dans laquelle l'image de fond sera dessinée. Elle prend quatre valeurs différentes : </p>

<ul>
<li><strong>padding-box</strong> : l'image de fond est dessinée à l'intérieur de la zone de padding du bloc. Elle sera tronquée en dehors.</li>
<li><strong>border-box</strong> : l'image de fond est dessinée à l'intérieur de la zone des bordures du bloc.</li>
<li><strong>content-box</strong> : l'image de fond est dessinée à l'intérieur de la zone de contenu du bloc, autrement dit à la limite intérieure du <em>padding</em>.</li>
<li><strong>no-clip</strong> : pas de <em>clipping</em>.</li>
</ul>

<p>Cette propriété n'est pas supportée non plus dans Adobe AIR. </p>

<p>Exemple de déclaration : </p>

<blockquote>
<pre>
<code>
div {
    border:1px dashed #0f0;
    background-image:url(cat.png);
    background-clip:content-box;
}
</code>
</pre>
</blockquote>

<h2>Image de fond et point d'origine</h2>

<p>Cette propriété permet de définir le point à partir duquel l'image de fond est dessinée. Comme pour le <em>clipping</em>, cette propriété prend les valeurs : <strong>padding-box</strong>, <strong>border-box</strong> et <strong>content-box</strong>.
Pas plus de chance avec cette propriété : aucune des valeurs n'est supportée pour le moment par AIR.</p>

<blockquote>
<pre>
<code>
div {
    border:1px dashed #0f0;
    background-image:url(cat.png);
    background-origin:padding-box;
}
</code>
</pre>
</blockquote>

<h2>Taille de l'image de fond</h2>

<p>Cette propriété a pour but de donner un contrôle sur la taille de l'image de fond de façon homothétique. Il est possible d'affecter une largeur, une hauteur, un pourcentage, etc. En plus de ces valeurs numériques, la propriété accepte deux valeurs supplémentaires qui ont très peu de différences : </p>

<ul>
<li><strong>contain</strong> : redimensionne l'image afin qu'elle tienne à l'intérieur de la zone de positionnement du fond.</li>
<li><strong>cover</strong> : redimensionne l'image afin qu'elle recouvre complètement la zone de positionnement du fond.</li>
</ul>

<p>Bon et celle-ci elle fonctionne dans AIR ? Oui et non. Les valeurs numériques sont acceptées. <em>Contain</em> et <em>cover</em> ne le sont pas. Il faut en plus de cela passer par la déclaration propre à Webkit, en ajoutant le suffixe <em>-webkit-</em> :</p>

<blockquote>
<pre>
<code>
div {
    border:1px dashed #0f0;
    background-image:url(cat.png);
    -webkit-background-size:100% 100%;
}
</code>
</pre>
</blockquote>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="dimensions-fond.png" src="http://boldair.org/blog/medias/img/dimensions-fond.png" width="400" height="185" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></span></p>

<p>Cet article touche à sa fin. Le support des nouvelles  propriétés <em>background-</em> est plutôt faible dans AIR. Néanmoins, on peut se consoler d'avoir déjà un support partiel, notamment en ce qui concerne les fonds multiples et les tailles de fond. Ce n'est qu'un début, mais un bon début. La prochaine fois : la propriété <em>border</em>.</p>

<p>Salut !</p>
]]>
    </content>
</entry>

<entry>
    <title>Base de données dans AIR - 1ère partie : introduction</title>
    <link rel="alternate" type="text/html" href="http://boldair.org/blog/2009/08/base-de-donnees-dans-air-introduction.html" />
    <id>tag:boldair.org,2009:/blog//1.35</id>

    <published>2009-08-23T15:01:00Z</published>
    <updated>2009-09-11T22:11:03Z</updated>

    <summary>Billet introductif sur le support natif de la base de données SQLite dans AIR.</summary>
    <author>
        <name>Sébastien</name>
        <uri>http://boldair.org</uri>
    </author>
    
        <category term="API AIR" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Base de données dans AIR" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="javascript" label="javascript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="sqlite" label="SQLite" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="fr" xml:base="http://boldair.org/blog/">
        <![CDATA[<p>Tout comme pour les CSS 3 dans AIR, j'inaugure aujourd'hui une nouvelle rubrique qui concerne le support natif des <a href="http://fr.wikipedia.org/wiki/Base_de_donn%C3%A9es">bases de données</a> dans Adobe AIR. Cette rubrique se déclinera sur une série d'articles qui auront pour but de vous familiariser avec le support de la base de données dans AIR.</p>

<p>Nous n'avons pas depuis une application AIR la possibilité d'écrire en langage serveur tel que <a href="http://www.php.net/">PHP</a> (voir chez Wikipedia pour les anglophobes : <a href="http://fr.wikipedia.org/wiki/Php">http://fr.wikipedia.org/wiki/Php</a>) qui nous permettrait d'accéder à une base de données telle que <a href="http://www.mysql.fr/">MySQL</a> et donc de stocker tout un tas d'informations propres à notre application.</p>

<p>Malgré cette restriction de langage dit "serveur", Adobe a tout de même inclus une base de données directement dans AIR ainsi que tous les outils nous permettant d'interagir avec celle-ci : <a href="http://sqlite.org/">SQLite</a>. Les mauvaises langues diront que c'est quelque chose de complètement naturel étant donné que Adobe fait partie du Consortium SQLite.</p>
]]>
        <![CDATA[<p>Au delà de ces considérations purement politiques et qui ne sont pas mon propos dans ce billet, le choix de SQLite parait vraiment pertinent, tant le compromis poids/performance que nous offre cette base de données est intéressant.</p>

<p>L'intégration d'une base de données dans AIR vient compléter cet ensemble déjà bien fourni. Elle va nous permettre de stocker des informations hors ligne, telles que les préférences, et de gérer ces informations facilement.</p>

<h2>SQLite : base de données pratique, légère et performante</h2>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="sqlite.png" src="http://boldair.org/blog/medias/img/sqlite.png" width="250" height="74" class="mt-image-right" style="float: right; margin: 0 0 20px 20px;" /></span>Contrairement à d'autres bases de données telles que MySQL, SQLite ne se compose que d'un seul et unique fichier. Toute la base de données avec toutes ses tables sont inclues dans ce fichier.<br />
SQLite ne nécessite aucune configuration, ni aucun serveur pour fonctionner et est, tout comme Webkit, complètement Open Source. </p>

<p>SQLite est une base de données et en cela elle est capable des mêmes choses que ses grandes soeurs : création/suppression de tables, insertion/requête/suppression de données dans les tables, etc.</p>

<p>En plus de la création standard d'une base de données "physique" (j'entends par là la création d'un fichier sur le disque dur), AIR nous donne aussi la possibilité de créer des bases de données <em>in memory</em>. Il s'agit de bases de données temporaires qui disparaîtront avec la fermeture de l'application. </p>

<p>Enfin, AIR nous permet également de créer des bases de données encryptées et protégées par mot de passe.</p>

<h2>Outils mis à disposition</h2>

<p>L'API de AIR a été conçue de telle façon que nativement elle supporte cette base de données. L'API fournie contient un certain nombre de classes et de méthodes Javascript permettant d'interagir directement avec SQLite : créer/supprimer une base, se connecter à une base, créer/supprimer des tables, insérer/requêter/supprimer des données, etc. </p>

<p>Nous verrons dans un prochain article de cette rubrique qu'il existe deux façons d'interagir avec la base de données : </p>

<ul>
<li>de façon synchrone, ce qui met temporairement l'application en pause le temps que la requête se termine ; </li>
<li>de façon asynchrone, qui exécute la requête en tâche de fond.</li>
</ul>

<p>La plupart des opérations standard avec la base de données sont disponibles dans ces deux modes.</p>

<p>Bien évidemment, toutes les requêtes à la base se font en langage SQL. Les personnes déjà habituées n'auront rien à réapprendre, si ce n'est le fait de faire des requêtes SQL à partir de Javascript. </p>

<p>Petit manque cependant dans les outils fournis : pouvoir visualiser notre base de données pendant le développement. Il est toujours plus simple et plus rapide de vérifier visuellement le contenu de notre base de données lors de la création de tables ou de l'affectation d'un type de données. <br />
Pour parer à ce manque, j'ai trouvé plusieurs outils intéressants et plus ou moins complets : </p>

<ul>
<li>une petite application AIR, très simple d'utilisation, assez basique mais qui convient plutôt bien : <a href="http://coenraets.org/blog/2008/02/sqlite-admin-for-air-10/">SQLite Admin</a>&nbsp;;</li>
<li>une extension Firefox (quelle drôle d'idée) plutôt bien faite : <a href="https://addons.mozilla.org/fr/firefox/addon/5817">SQLite Manager</a> (fonctionne avec les toutes dernières versions de firefox);</li>
<li><a href="http://sqlitebrowser.sourceforge.net/">SQLite Browser</a> qui est multiplateforme ;</li>
<li><a href="http://www.zeitungsjunge.de/delphi/sqlitespy/">SQLSpy</a>, Windows uniquement et que je trouve plutôt brouillon au niveau de l'interface.</li>
</ul>

<p><br /></p>

<p>Cette introduction se termine. Vous pourrez retrouver les liens de cet article dans la partie <a href="http://boldair.org/blog/ressources/liens-utiles.html">liens utiles</a> comme d'habitude.<br />
Le prochain article de cette rubrique traitera en profondeur de la <a href="http://boldair.org/blog/2009/09/base-de-donnees-dans-air-creer-et-se-connecter-a-une-base-de-donnees.html">création et de la connexion à une base de données depuis AIR</a>.</p>

<p>Bon vent !</p>
]]>
    </content>
</entry>

<entry>
    <title>CSS 3 et AIR - 1ère partie : sélecteurs avancés</title>
    <link rel="alternate" type="text/html" href="http://boldair.org/blog/2009/08/css-3-et-air-selecteurs-avances.html" />
    <id>tag:boldair.org,2009:/blog//1.22</id>

    <published>2009-08-12T19:38:48Z</published>
    <updated>2009-09-01T20:58:27Z</updated>

    <summary>Premier billet de la série &quot;CSS 3 et AIR&quot;, concernant le support des sélecteurs avancés en CSS.</summary>
    <author>
        <name>Sébastien</name>
        <uri>http://boldair.org</uri>
    </author>
    
        <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="CSS 3 et AIR" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="css" label="CSS" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="sélecteurs" label="sélecteurs" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="webkit" label="Webkit" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="fr" xml:base="http://boldair.org/blog/">
        <![CDATA[<p>J'inaugure avec ce billet une série d'article concernant le support avancé des CSS (en grande partie des CSS 3) dans AIR. Je crée d'ailleurs une catégorie à part entière pour cette série, pour un accès plus simple et plus rapide.</p>

<p>Ce premier article aura comme thème ce qu'on utilise tout le temps et dès le début lorsque nous écrivons des feuilles de styles : <strong>les sélecteurs</strong>.</p>
]]>
        <![CDATA[<h2>Un peu de lecture</h2>

<p>Beaucoup de sélecteurs sont introduits dans la version 3 de la recommandation du World Wide Web Consortium. Je vous laisse en juger par vous même : <a href="http://www.w3.org/TR/css3-selectors/">http://www.w3.org/TR/css3-selectors/</a>.</p>

<p>Que ce soit clair : je ne vais pas repasser tous les sélecteurs en revue. Ce serait long et fastidieux, pour vous comme pour moi. Je ne vais pas non plus vous apprendre à les utiliser, ça c'est à vous de le faire : l'expérimentation par soi-même, c'est ce qu'il y a de mieux.</p>

<h2>Retour aux bases : sélecteurs des précédentes recommandations</h2>

<p>Si vous avez un tant soit peu développé des sites à l'aide des CSS, vous savez ou aurez au moins remarqué que le support de certaines propriétés, sélecteurs, pseudo-éléments est franchement limité, voire même nul pour certains (ou certains navigateurs).</p>

<p>Un petit exemple : si vous codez pour un public utilisant ce bon vieil Internet Explorer 6, vous pouvez oublier la grande majorité des sélecteurs avancés CSS : &gt;, +, sélecteurs d'attributs, pseudo-éléments (à part un support très léger pour certains tels que le :hover). Même la sélection par double classe est très mal supportée. Plutôt frustrant.</p>

<p>Mais avec AIR, bienvenue dans un <strong>nouveau monde</strong> ! Webkit étant de la partie, tous les sélecteurs que vous lorgniez d'un œil désespéré en codant pour IE 6 vous sont désormais accessibles et même plutôt recommandés. Voyez par vous même :</p>

<ul>
<li>Sélectionner uniquement les &lt;li&gt; de premier niveau d'une navigation à plusieurs sous-niveaux ;</li>
<li>Sélectionner l'élément frère d'un élément cible ;</li>
<li>Ne sélectionner que le premier enfant sans classe ou identifiant</li>
<li>avoir un :hover fonctionnel sur tous les éléments ;</li>
<li>etc.</li>
</ul>

<p>Un grand pas en avant ! Bon et CSS 3 dans tout ça ? Il y a plein de choses que je voudrais utiliser aussi. C'est possible ?</p>

<h2>Sélecteurs prochaine génération : CSS 3</h2>

<p>Les sélecteurs CSS 2 nous donnent déjà beaucoup de possibilités qui nous étaient tout simplement interdites (ou de manière biaisée) dans le développement de sites pour navigateur. A tel point d'ailleurs qu'il est difficile au début de se détacher de ses habitudes de code : l'utilisation de ces sélecteurs allège considérablement le code HTML de beaucoup de classes et autres identifiants qui nous servaient de pivots.</p>

<p>CSS 3 arrive et les équipes qui développent les navigateurs l'ont bien compris. Webkit ne fait pas exception. Il possède un très bon support de toutes ces nouvelles choses qui nous font baver, nous autres développeurs front. </p>

<p>Allez, une petite liste pour le plaisir : </p>

<ul>
<li>:nth-child() ;</li>
<li>:first-child() ;</li>
<li>:last-child() ;</li>
<li>:only-child() ;</li>
<li>élément A ~ élément B ;</li>
</ul>

<p>Cette liste est évidemment très incomplète. Je vous laisse voir la documentation du W3C pour la liste exhaustive (et à jour).</p>

<p>La bonne nouvelle c'est que la majorité de ces éléments est supportée (il est possible que certains ne le soient pas encore, dû à la version de Webkit dans AIR qui est antérieure aux dernières évolutions du moteur).</p>

<p>On peut donc faire des choses aussi simples mais efficaces que cela :</p>

<blockquote>
<pre>
<code>
/* sélection du second enfant de la liste */
#maListe li:nth-child(2) { ... }

 /* hover sur le dernier enfant de la liste */
#maListe li:last-child:hover { ... }

/* sélection des div de premier niveau uniquement */
#monBloc > div { ... }

/* sélection d'un élément portant la classe "maClasse",
frère de notre/nos div de premier niveau */
#monBloc li > div + .maClasse { ... }

/* premier li d'un ul enfant de premier niveau
d'un bloc avec la classe "maClasse */
#monBloc .maClasse > ul li:first-child { ... }

/* chaque second li tous les trois li de premier niveau 
d'une liste de premier niveau du bloc identifié comme "monBloc" */
#monBloc > ul > li:nth-child(3n+2) { ... } 
</code>
</pre>
</blockquote>

<p>La page du W3C n'est pas toujours très explicite en ce qui concerne l'utilisation des sélecteurs. Le test est le meilleur moyen de se familiariser avec ces sélecteurs et de faire évoluer son code en conséquence.</p>

<p>Alors, à vos claviers !</p>

<p>Lire l'article suivant dans cette série : <a href="http://boldair.org/blog/2009/09/css-3-et-air-la-propriete-background.html">CSS 3 et AIR : la propriété <em>background</em></a></p>
]]>
    </content>
</entry>

<entry>
    <title>AIR et javascript</title>
    <link rel="alternate" type="text/html" href="http://boldair.org/blog/2009/08/air-et-javascript.html" />
    <id>tag:boldair.org,2009:/blog//1.25</id>

    <published>2009-08-06T21:01:08Z</published>
    <updated>2009-08-06T21:05:09Z</updated>

    <summary>Comment se comporte javascript dans AIR ? Quel niveau de support peut on espérer ?</summary>
    <author>
        <name>Sébastien</name>
        <uri>http://boldair.org</uri>
    </author>
    
        <category term="Javascript" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="javascript" label="javascript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="jquery" label="jquery" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="fr" xml:base="http://boldair.org/blog/">
        <![CDATA[<p>On déjà vu que le support HTML et CSS dans AIR est plutôt bon malgré quelques écueils.<br />
Mais qu'en est-il du javascript, composante à part entière du développement Web ? Peut on utiliser les différentes bibliothèques javascript dans AIR ?</p>
]]>
        <![CDATA[<h2>Exécution et interprétation du javascript</h2>

<p>Soyons clairs : le javascript dispose d'un support complet et très performant, Webkit étant un moteur d'exécution très rapide et fluide. On peut s'attendre à une performance similaire à de l'exécution dans Safari au détail près que AIR est pourvu d'une version antérieure de Webkit. </p>

<p>Rien d'autre à dire ici, le tout étant très performant.</p>

<h2>Support des bibliothèques javascript</h2>

<p>Le javascript c'est bien, mais si je veux utiliser une bibliothèque javascript ?</p>

<p>La réponse est : c'est possible mais pas toutes. J'avoue ne pas avoir testé chacune des bibliothèques existantes pour voir quel est le niveau de support de cette dernière : </p>

<ol>
<li>parce qu'il y en a trop ;</li>
<li>parce que je n'ai pas la prétention de vouloir connaître quinze ou vingt bibliothèques différentes, j'ai déjà suffisamment à faire avec jQuery.</li>
</ol>

<p>Donc selon <a href="http://www.adobe.com/products/air/faq/">cette page</a> chez Adobe, les bibliothèques supportées pour la version actuelle de AIR (1.5) sont :</p>

<ul>
<li>Dojo Toolkit (<a href="http://www.dojotoolkit.org/">http://www.dojotoolkit.org/</a>) (en anglais);</li>
<li>Ext JS (<a href="http://extjs.com/">http://extjs.com/</a>) (en anglais);</li>
<li>jQuery (<a href="http://jquery.com/">http://jquery.com/</a>) (en anglais);</li>
<li>Mochikit (<a href="http://mochikit.com/">http://mochikit.com/</a>) (en anglais);</li>
<li>Mootools (<a href="http://www.mootools.net/">http://www.mootools.net/</a>) (en anglais);</li>
<li>Spry (<a href="http://labs.adobe.com/technologies/spry/">http://labs.adobe.com/technologies/spry/</a>) (en anglais).</li>
</ul>

<p>Petit bémol : il apparait que la faq d'Adobe AIR n'a pas été mise à jour depuis quelques temps (les versions des bibliothèques évoquées sont anciennes déjà). Néanmoins, on peut supposer que le support des bibliothèques suit leur évolution.<br />
J'utilise personnellement jQuery, et je n'ai rencontré aucun problème pour l'instant (bien que ma version soit largement plus récente que celle proposée sur le site). Il parait également probable que d'autres bibliothèques viennent enrichir à l'avenir Adobe AIR (je pense notamment à Prototype et Scriptaculous).</p>

<p>En plus de jQuery, j'utilise jQuery UI (<a href="http://jqueryui.com/">http://jqueryui.com/</a>, UI pour User Interface), une bibliothèque modulaire d'effets qui se greffe à jQuery simplement. Seulement voilà : tout n'est pas supporté encore. Certaines méthodes fonctionnent, d'autres pas (la majorité des effets par exemple). Il se peut qu'en rusant et en détournant un peu notre façon d'écrire le script, cela fonctionne quand même.</p>

<p>Prenons un exemple simple : un des apports de jQuery UI est de permettre au développeur de faire la transition entre deux classes CSS qui changeraient une couleur (de texte par exemple). UI se charge toute seule de faire la transition entre les deux couleurs. </p>

<p>Le CSS, basique : </p>

<blockquote>
<pre>
<code>
.blue {
    color:#00f;
}

.green {
    color:#0f0;
}

</code>
</pre>
</blockquote>

<p>Le script d'animation de la couleur, basique également : </p>

<blockquote>
<pre>
<code>

jQuery("#monElement").switchClass("blue","green", 500);
</code>
</pre>
</blockquote>

<p>La méthode <em>switchClass()</em> permet de replacer une classe existante (ici "blue") par une autre classe (ici "green") et d'exécuter l'animation selon une durée en millisecondes prédéterminée (ici "500"). Très pratique. Mais voilà : cela ne fonctionne pas. La classe change mais la transition est nulle.</p>

<p>Afin de contourner cette petite difficulté, le retour à une méthode propre à jQuery est obligatoire : </p>

<p>Le script d'animation de la couleur, modifié : </p>

<blockquote>
<pre>
<code>

jQuery("#monElement").animate({color: "#0f0"},400);
</code>
</pre>
</blockquote>

<p>On admettra que la couleur par défaut de notre élément est le bleu. La méthode <em>animate()</em> permet de doucement glisser vers la couleur de notre choix. C'est plus intrusif, mais cela fonctionne.</p>

<p>Cet exemple est délibérément trivial. Il est juste là pour illustrer le fait que certaines choses fonctionnent alors que d'autres non. Le modèle de sécurité d'Adobe AIR doit interférer dans la bonne exécution de certaines parties de bibliothèques comme jQuery UI.</p>

<h2>Spécificités de l'exécution du javascript</h2>

<p>Adobe AIR permet de créer des applications pour le bureau. Ces applications ont accès au système de fichiers : elles peuvent stocker des informations sur la machine hôte, créer dossiers, fichiers, les effacer etc.</p>

<p>Afin de garantir un niveau de sécurité optimal pour les utilisateurs d'application AIR, Adobe a mis en place un système de sécurité.<br />
Certaines méthodes javascript, jugées potentiellement dangereuses sont inopérantes dans la partie de l'application ayant accès au bureau.</p>

<p>Parmi elles, on compte : </p>

<ul>
<li>setInterval()</li>
<li>setTimeout()</li>
<li>eval() (utilisée pour évaluer un objet javascript, tel qu'un objet JSON par exemple).</li>
</ul>

<h3>Mais alors comment je fais ?</h3>

<p>Comme je l'ai évoqué plus haut, Adobe AIR possède un modèle de sécurité particulier : <strong>application sandbox</strong> et <strong>non-application sandbox</strong>.</p>

<p>Petite explication rapide (je reviendrai sur le modèle de sécurité dans un billet à part entière).<br />
Il faut imaginer notre application divisée en deux parties : </p>

<ul>
<li>la partie qui a accès au bureau ou <strong>application sandbox</strong>, aux fichiers mais qui ne peut pas exécuter de scripts jugés dangereux ;</li>
<li>la partie isolée ou <strong>non-application sandbox</strong> qui peut exécuter sans limitation tout type de scripts (la limitation pour <em>eval()</em>, <em>setInterval()</em> et <em>setTimeout()</em> ne s'applique pas) mais qui en revanche, n'a pas du tout accès à l'API de AIR et à ses méthodes. Autrement dit, c'est comme une pièce sans porte ou fenêtre : rien ne rentre (ou presque) et rien n'en sort (ou presque). C'est dans cette "boîte" que nous pourrons lancer des évaluations d'objet JSON par exemple.</li>
</ul>

<p>Bien qu'un peu contraignant au début, ce système permet de garantir la sécurité du poste de travail de l'utilisateur.</p>

<p>Je reviendrai sur ce modèle de sécurité plus en profondeur dans un prochain billet et notamment sur le moyen de faire communiquer les deux <em>sandboxes</em> entre elles.</p>

<p><br />
Je suis intéressé par tout retour éventuel concernant le support d'une librairie javascript particulière dans AIR que je n'aurai pas cité dans ce billet. </p>
]]>
    </content>
</entry>

<entry>
    <title>[Bug] Aptana et ATI, pas joli joli.</title>
    <link rel="alternate" type="text/html" href="http://boldair.org/blog/2009/08/aptana-et-ati-pas-joli-joli.html" />
    <id>tag:boldair.org,2009:/blog//1.32</id>

    <published>2009-08-03T17:32:07Z</published>
    <updated>2009-08-03T18:48:53Z</updated>

    <summary>Détail d&apos;un bug survenant avec Aptana, AIR et une carte graphique ATI.</summary>
    <author>
        <name>Sébastien</name>
        <uri>http://boldair.org</uri>
    </author>
    
        <category term="Aptana" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="adl" label="ADL" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="aptana" label="Aptana" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ati" label="ATI" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="bug" label="bug" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="fr" xml:base="http://boldair.org/blog/">
        <![CDATA[<p><strong>[Mise à jour]</strong></p>

<p><em>Je viens d'avoir une réponse de l'équipe de support d'Aptana (qui a été très réactive). Un ticket est ouvert à l'adresse suivante : <a href="http://aptana.zendesk.com/tickets/2709">http://aptana.zendesk.com/tickets/2709</a> (il faut un compte pour s'y rendre, compte gratuit et ouvert en quinze secondes montre en main). Affaire à suivre donc.</em></p>

<p>Comme je l'ai déjà <a href="http://boldair.org/blog/2009/07/premiere-application-air-avec-aptana.html">évoqué</a>, Aptana, <a href="http://www.aptana.com/air">notre IDE favori pour faire du AIR</a>, nous donne la possibilité de tester en direct les applications que nous sommes en train de développer, <em>via</em> le débogueur de AIR (ou ADL pour <a href="http://help.adobe.com/en_US/AIR/1.1/devappsflex/WS5b3ccc516d4fbf351e63e3d118666ade46-7fd7.html">AIR Debug Launcher</a>).</p>

<p>Je n'ai jamais rencontré de réels problèmes avec ce débogueur, si ce n'est quelques fois où il refuse de lancer l'application, ce qui se finissait généralement par un redémarrage d'Aptana et tout rentrait dans l'ordre. Rien d'insurmontable donc.</p>
]]>
        <![CDATA[<h2>Le bug</h2>

<p><em>Note : je suis sur un portable sous Windows Vista avec une carte ATI mobile.</em></p>

<p>Seulement voilà : changement de machine, changement de carte graphique et depuis, le même problème récurrent mais plus insistant.<br />
Il arrive à certains moments qu'Aptana m'oblige à lancer dix, quinze fois l'application. Quand cela arrive une fois, ça va, mais quand je fais des modifications sur une feuille CSS ou dans un script qui nécessite des tests réguliers, une envie grandissante de passer la machine par la fenêtre commence à s'emparer de moi.</p>

<p>Il arrive même qu'Aptana refuse tout court de lancer quoi que ce soit. On dirait que l'ADL plante en cours de route. Essayer de relancer le débogueur ne fonctionne pas. Relancer Aptana non plus.</p>

<p>Seule solution : redémarrer l'ordinateur complet... Pas terrible.</p>

<h2>Origine du bug</h2>

<p>Après avoir abandonné (ma patience dans ce genre de cas à des limites qui sont très vite atteintes) et même oublié que j'avais essayé de bosser, j'ai vu par hasard mon application en cours de développement apparaître sur mon bureau, sans qu'Aptana ou qu'aucun processus s'y rapportant (tel que ADL) ne soient lancés...</p>

<p>Après quelques recherches en règle (et dégommage de divers processus), j'ai trouvé le processus fautif. Il s'agit de <strong>ati2evxx.exe</strong>, un processus ATI donc, qui gère principalement les raccourcis claviers pour le panneau de contrôle ATI. J'ai aussi remarqué qu'il jouait un rôle dans la gestion de la fermeture du capot de mon ordinateur (vous êtes grands, demandez à Google si vous avez besoin de plus d'infos). </p>

<p>Aussitôt dégommé, redémarrage d'Aptana et là, le miracle s'accomplit : le debogueur se lance du premier coup. </p>

<p>Il y aurait donc comme un conflit entre Aptana/le plugin AIR/le debogueur (et que sais-je encore) et le pilote ATI... J'ai contacté l'équipe d'Aptana <em>via</em> leur formulaire de support (leur système de bug est incompréhensible et je n'ai pas eu le courage de m'enfoncer dans les limbes de leur arborescences de pages...) et j'attends toujours une réponse.</p>

<p>J'ai choisi d'empêcher ce processus de démarrer sur ma machine via le gestionnaire de services (msconfig).<br />
Avant de faire quoi que ce soit si vous rencontrez ce bug, faîtes une recherche. C'est à vos risques et périls, je ne suis pas un spécialiste de Windows et d'ailleurs si quelqu'un a mieux à proposer, je suis preneur.</p>

<p>A bon entendeur !</p>
]]>
    </content>
</entry>

<entry>
    <title>Interprétation XHTML en XML dans AIR</title>
    <link rel="alternate" type="text/html" href="http://boldair.org/blog/2009/08/interpretation-xhtml-en-xml-dans-air.html" />
    <id>tag:boldair.org,2009:/blog//1.31</id>

    <published>2009-08-02T21:11:05Z</published>
    <updated>2009-08-02T21:25:18Z</updated>

    <summary>Après quelques temps à jouer avec AIR et HTML, et voyant les possibilités offertes par le moteur de rendu, je me suis décidé à pousser les choses un peu plus loin.</summary>
    <author>
        <name>Sébastien</name>
        <uri>http://boldair.org</uri>
    </author>
    
        <category term="XHTML" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="webkit" label="Webkit" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="xhtml" label="XHTML" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="fr" xml:base="http://boldair.org/blog/">
        <![CDATA[<p>Après quelques temps à jouer avec AIR et HTML, et voyant les possibilités offertes par le moteur de rendu (voir <a href="http://boldair.org/blog/2009/07/import-de-polices-de-caracteres-en-css.html">ici par exemple</a>), je me suis décidé à pousser les choses un peu plus loin.</p>

<p>Lorsqu'on développe pour le Web, les pages des sites sont toutes (ou presque) rendues selon un type MIME particulier, à savoir text/html (plus d'infos sur ce qu'est un type MIME chez <a href="http://fr.wikipedia.org/wiki/Type_MIME">Wikipedia</a>).<br />
Pourtant, au départ, XHTML a été conçu pour être plus strict en matière d'interprétation et devait théoriquement permettre une interprétation XML.</p>
]]>
        <![CDATA[<p>Seulement voilà : Internet Explorer se moque éperdument de cette caractéristique et quel que soit le type MIME que vous lui envoyez, il rendra imperturbablement du text/html.</p>

<h2>Et dans AIR ?</h2>

<p>Mais nous avons la chance d'être dans AIR, accompagné de Webkit qui sait rendre le HTML comme du XML. En temps normal.</p>

<p>Après divers tests, il semblerait que, malgré le prologue XML, la déclaration du type MIME en application/xhtml+xml et l'extension de fichier en .xhtml, Adobe AIR ne supporte pas cette fonctionnalité et s'obstine à renvoyer du text/html. Ce choix de la part d'Adobe est plutôt étonnant, étant donné que cela prive les développeurs d'un système très performant pour avoir du code bien formé.</p>

<p>Au delà de ça, Aptana a le mérite de renvoyer les erreurs d'interprétation du HTML dans la console de debug et aussi (de temps en temps), de nous renvoyer l'action effectuée par le moteur. Ce n'est pas aussi performant que le rendu xhtml+xml mais déjà d'une grande aide. Comprenez par là qu'Aptana ne renverra pas systématiquement une erreur d'interprétation dans la console. Il ne vous reste donc que votre vigilance !</p>

<p>Pour plus d'informations concernant le formatage XHTML et le prologue XML, je vous renvoie vers l'excellent article chez Openweb : <a href="http://openweb.eu.org/articles/html_au_xhtml">Passer du HTML au XHTML</a> (en français).</p>
]]>
    </content>
</entry>

<entry>
    <title>Blog en mouvement</title>
    <link rel="alternate" type="text/html" href="http://boldair.org/blog/2009/07/blog-en-mouvement.html" />
    <id>tag:boldair.org,2009:/blog//1.29</id>

    <published>2009-07-30T22:03:37Z</published>
    <updated>2009-07-30T22:06:04Z</updated>

    <summary>Note de service concernant certains ajustements sur le blog.</summary>
    <author>
        <name>Sébastien</name>
        <uri>http://boldair.org</uri>
    </author>
    
        <category term="Blabla" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="blog" label="blog" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="boldair" label="Bol d&apos;AIR" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="fr" xml:base="http://boldair.org/blog/">
        <![CDATA[<p>Une petite note vite fait pour vous faire part de certaines petites évolutions et autres correctifs ces prochains temps sur le blog.</p>

<p>J'ai quelques ajustements à faire encore avant que tout ne roule parfaitement. Désolé pour la gène.</p>
]]>
        

    </content>
</entry>

<entry>
    <title>Import de polices de caractères en CSS</title>
    <link rel="alternate" type="text/html" href="http://boldair.org/blog/2009/07/import-de-polices-de-caracteres-en-css.html" />
    <id>tag:boldair.org,2009:/blog//1.28</id>

    <published>2009-07-30T21:30:09Z</published>
    <updated>2009-07-30T22:02:15Z</updated>

    <summary>Qu&apos;en est-il du support des polices non système dans Adobe AIR ?</summary>
    <author>
        <name>Sébastien</name>
        <uri>http://boldair.org</uri>
    </author>
    
        <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="css3" label="CSS 3" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="police" label="police" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="webkit" label="Webkit" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="fr" xml:base="http://boldair.org/blog/">
        <![CDATA[<p>J'ai déjà évoqué précédemment la spécificité de l'interprétation du HTML dans AIR : <a href="http://webkit.org">Webkit</a>.<br />
Moteur de rendu évolué, Webkit nous donne beaucoup plus de possibilités pour "jouer" avec le HTML et les CSS. Il propose un support déjà très fourni (presque complet en fait) des spécifications CSS 3. </p>

<p>Petit exercice fort sympathique et qui va vous épargner de nombreuses découpes d'images tout en procurant un esthétisme attrayant : le support de la propriété <em>@font-face</em>.</p>
]]>
        <![CDATA[<p>Cette propriété permet l'import, grâce à une déclaration en début de feuille de style, d'une police de caractère non-système, autrement dit autre chose que Arial, Helvetica, Verdana et deux ou trois autres.</p>

<p>Elle s'utilise comme suit : </p>

<blockquote>
<pre>
<code>
@font-face {
    font-family:"Cookies";
    src:/medias/fonts/cookies.ttf;
}
</code>
</pre>
</blockquote>

<p>Ensuite il suffit de faire une simple déclaration de famille de police comme suit : </p>

<blockquote>
<pre>
<code>
p {
    font-family:"Cookies", Arial, Helvetica, sans-serif;
}
</code>
</pre>
</blockquote>

<p>C'est aussi simple que ça. Si vous voulez en savoir plus sur cette propriété, je ne peux que vous recommander la <a href="http://www.w3.org/TR/css3-fonts/#the-font-face-rule">page de spécification du W3C</a>, et <a href="http://www.alistapart.com/articles/cssatten">cet excellent article chez A List Apart</a>.</p>

<p><strong>Petit rappel pour la forme</strong> : avant d'utiliser toute police dans vos applications, vérifiez bien le <strong>copyright</strong> et les <strong>droits d'utilisation</strong>. Toutes les polices ne sont pas libres d'être utilisées comme bon vous semble !</p>

<p>En fouillant un peu, vous trouverez facilement des tas de polices libres d'utilisation. Certaines spécifient même dans leur copyright l'autorisation à l'inclusion de celle-ci dans des documents comme des pages Web.</p>

<p>Enfin, pour un rendu plus visuel, je vous propose un petit tour <a href="http://opentype.info/demo/webfontdemo.html">chez opentype.info</a> pour avoir une idée de ce que cela peut donner. Si vous y allez avec un navigateur prenant déjà en charge cette propriété (les dernières moutures de Firefox, Safari et Opera notamment), vous pourrez profiter pleinement des exemples. Si (malheureusement) vous utilisez un navigateur un tantinet vieillot (profitez en donc pour le mettre à jour ou en changer), le résultat est quand même proposé sous forme de capture d'écran.</p>

<p>Amusez-vous bien !</p>
]]>
    </content>
</entry>

<entry>
    <title>Contrôles des fenêtres dans AIR</title>
    <link rel="alternate" type="text/html" href="http://boldair.org/blog/2009/07/controles-fenetres-dans-air.html" />
    <id>tag:boldair.org,2009:/blog//1.26</id>

    <published>2009-07-27T20:36:35Z</published>
    <updated>2009-07-30T22:01:42Z</updated>

    <summary>Cet article traite de la gestion des contrôles fenêtres dans une application AIR qui n&apos;utilise pas le chrome système.</summary>
    <author>
        <name>Sébastien</name>
        <uri>http://boldair.org</uri>
    </author>
    
        <category term="API AIR" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="contrôlesfenêtre" label="contrôles fenêtre" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="nativewindow" label="nativeWindow" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="fr" xml:base="http://boldair.org/blog/">
        <![CDATA[<p>Les applications dans AIR, en tant qu'applications de bureau à part entière, sont composées de fenêtres, dont une principale.<br />
L'API de AIR (voir mon <a href="http://boldair.org/blog/2009/07/quest-ce-quadobe-air.html">précédent article à ce sujet</a> si vous ne vous rappelez pas de ce que c'est) nous donne la possibilité de manipuler lesdites fenêtres : création, déplacement, redimensionnement, réduction, fermeture... Les outils fournis sont très nombreux mais restent simples d'utilisation. Je ne les passerai pas tous en revue dans cet article, mais je centrerai mon propos sur les méthodes permettant de contrôler la fenêtre : déplacement, réduction, maximisation, fermeture.<br />
Je laisse volontairement le redimensionnement de côté pour un prochain article dédié.</p>
]]>
        <![CDATA[<p>Je vous renvoie vers la <a href="http://help.adobe.com/en_US/AIR/1.5/jslr/">documentation Adobe</a> pour le détail des méthodes de gestion des fenêtres dans AIR (voir <em>NativeWindow</em> principalement).</p>

<p>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 (<a href="http://boldair.org/blog/2009/07/premiere-application-air-avec-aptana.html">j'en ai déjà parlé ici</a>).</p>

<h2>Réduire, maximiser, restaurer et fermer une fenêtre</h2>

<p>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.</p>

<p>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 <strong>naturel</strong> auquel on ne réfléchit même plus.<br />
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.<br />
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.<br />
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 ?</p>

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

<p>Tout d'abord, créons une application AIR (vous n'en n'avez pas ? Allez voir <a href="http://boldair.org/blog/2009/07/premiere-application-air-avec-aptana.html">par ici</a> comment faire).</p>

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

<h3>Création des boutons d'action</h3>

<blockquote>
<pre>
<code>
&lt;ul&gt;
    &lt;li&gt;&lt;a href="#" id="btn-reduire"&gt;Réduire&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"id="btn-maximiser"&gt;Maximiser&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"id="btn-fermer"&gt;Fermer&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
</blockquote>

<p>Une fois les éléments créés, il ne reste plus qu'à "accrocher" une action sur le clic de chaque bouton.<br />
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.<br />
Mon choix personnel s'est porté sur <a href="http://www.jquery.com">jQuery</a>, 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 : <a href="http://www.jquery.com">jQuery</a>, <a href="http://mootools.net/">Mootools</a>, <a href="http://developer.yahoo.com/yui/">YUI</a> (pour Yahoo! User Interface), <a href="http://www.prototypejs.org/">Prototype</a>, etc. Choisissez celle qui vous convient le mieux !</p>

<h3>Définition des actions</h3>

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

<ul>
<li>minimize();</li>
<li>maximize();</li>
<li>close();</li>
</ul>

<h3>Création des fonctions</h3>

<blockquote>
<pre>
<code>
// 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();
}
</code>
</pre>
</blockquote>

<p>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.</p>

<h3>Lancement des fonctions</h3>

<blockquote>
<pre>
<code>
// 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);
});
</code>
</pre>
</blockquote>

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

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

<h3>Restauration de la fenêtre</h3>

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

<p>Modifions donc la fonction <em>fn_maximiser()</em> en conséquence : </p>

<blockquote>
<pre>
<code>
// 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");
    }
}
</code>
</pre>
</blockquote>

<p>La méthode est des plus simples : on se base sur le test d'une classe html sur le bouton de maximisation.<br />
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.<br />
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.</p>

<h2>Déplacement d'une fenêtre</h2>

<p>La mise en place du déplacement de la fenêtre de votre application est assez similaire à ce que nous venons de faire.<br />
La méthode de l'API à utiliser cette fois-ci est <strong>startMove()</strong>. 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é.</p>

<h3>Mise en place de la méthode startMove()</h3>

<p>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.</p>

<p><strong>Par exemple :</strong></p>

<blockquote>
<pre>
<code>
&lt;div id="attrapeMoi"&gt;&lt;/div&gt;

</code>
</pre>
</blockquote>

<p><strong>Création de la fonction et lancement de la fonction</strong></p>

<blockquote>
<pre>
<code>
// 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);
});
</code>
</pre>
</blockquote>

<p>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".<br />
Pas si compliqué que ça finalement non ?</p>

<p><br />
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.</p>
]]>
    </content>
</entry>

<entry>
    <title>Sélection utilisateur dans AIR</title>
    <link rel="alternate" type="text/html" href="http://boldair.org/blog/2009/07/selection-utilisateur-dans-air.html" />
    <id>tag:boldair.org,2009:/blog//1.27</id>

    <published>2009-07-24T23:34:28Z</published>
    <updated>2009-07-30T22:00:47Z</updated>

    <summary>Sélection utilisateur sous AIR</summary>
    <author>
        <name>Sébastien</name>
        <uri>http://boldair.org</uri>
    </author>
    
        <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="XHTML" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="pseudoélément" label="pseudo-élément" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="sélectiondetexte" label="sélection de texte" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="webkit" label="Webkit" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="fr" xml:base="http://boldair.org/blog/">
        <![CDATA[<p>Vous l'aurez peut être remarqué, mais lorsqu'une application AIR développée en HTML est lancée, l'utilisateur a la possibilité de sélectionner les élements (texte, images, blocs) comme il le ferait dans un navigateur Web. </p>

<p>Ce comportement est complètement normal étant donné que le rendu HTML est effectué par <a href="http://www.webkit.org">Webkit</a>, le moteur de rendu de Safari (entre autres). Aussi cohérent soit-il, ce comportement peut donner lieu à des effets disgracieux : interface qui devient bleue/grise quand on sélectionne de larges zones, séléction d'éléments non pertinents comme les libellés de menu, etc.</p>
]]>
        <![CDATA[<p>En fouillant par-ci par là, je suis tombé sur un pseudo-sélecteur CSS 3 concernant la sélection de texte : <em>::selection</em> . Après quelques tests, notamment en jouant sur la couleur de fond de la sélection, il est possible de rendre invisible la sélection de texte. Cette solution n'est pas satisfaisante pour trois raisons : </p>

<ol>
<li>l'utilisateur ne voit plus ce qu'il sélectionne ;</li>
<li>cela n'empêche pas la sélection des éléments autres que le texte (blocs de structure notamment);</li>
<li>ce pseudo-élément a été enlevé du brouillon de la spécification W3C (voir : <a href="http://www.w3.org/TR/css3-selectors/#selection">http://www.w3.org/TR/css3-selectors/#selection</a>).</li>
</ol>

<h2>Une solution goût pomme</h2>

<p>Je me suis donc attelé à trouver autre chose. La lumière est venue du côté des propriétés CSS propres à Webkit. </p>

<p>En me penchant sur celles-ci, je suis tombé par hasard sur <em>-webkit-user-select</em> .
Selon la documentation officielle Apple (<a href="http://developer.apple.com/documentation/appleapplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html">http://developer.apple.com/documentation/appleapplications/Reference/SafariCSSRef/Articles/<br />StandardCSSProperties.html</a>), cette propriété détermine si un utilisateur peut ou non sélectionner le contenu d'un élément.
Cette propriété prend trois valeurs distinctes : </p>

<ul>
<li><em>auto</em> : l'usager peut sélectionner tout type de contenu à l'intérieur de l'élément ciblé (valeur par défaut);</li>
<li><em>text</em> : l'usager ne peut sélectionner que le texte contenu à l'intérieur de l'élément ciblé ;</li>
<li><em>none</em> : désactive la sélection utilisateur pour l'élément ciblé.</li>
</ul>

<p>C'est cette troisième valeur qui va nous intéresser. En effet, en l'appliquant aux éléments qui nous intéresse (un menu par exemple), cela empêchera la sélection par l'utilisateur et tout effet graphique disgracieux.</p>

<h3>Exemple d'utilisation de <em>-webkit-user-select</em></h3>

<blockquote>
<pre>
<code>
#monMenu {
    -webkit-user-select:none;
}
</code>
</pre>
</blockquote>

<h2>Implications</h2>

<p>Mise en garde : l'utilisation de cette propriété doit se faire avec parcimonie.<br />Certes, elle apporte un certain confort graphique. Pour autant, il ne faudrait pas, en utilisant cette propriété, arriver au résultat contraire.<br />Empêcher certaines sélections a son intérêt (les menus par exemple) mais d'autres seraient plus dérangeantes : un texte d'un article dans le cas d'une application de lecture de flux RSS, les coordonnées d'un point sur une carte, etc.</p>

<p>Il n'y a pas vraiment de règle dans ce domaine : le bon sens mène la danse. Ne l'utilisez pas à l'aveuglette, faîtes appel à votre tête !</p>

<p><br />
La suite bientôt !</p>
]]>
    </content>
</entry>

<entry>
    <title>Support de la propriété CSS cursor</title>
    <link rel="alternate" type="text/html" href="http://boldair.org/blog/2009/07/support-de-la-propriete-cursor.html" />
    <id>tag:boldair.org,2009:/blog//1.23</id>

    <published>2009-07-23T23:25:40Z</published>
    <updated>2009-07-30T21:59:56Z</updated>

    <summary>Article traitant du support de la propriété CSS cursor dans une application AIR.</summary>
    <author>
        <name>Sébastien</name>
        <uri>http://boldair.org</uri>
    </author>
    
        <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="css" label="CSS" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="cursor" label="cursor" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="fr" xml:base="http://boldair.org/blog/">
        <![CDATA[<p>La spécification W3C pour la propriété CSS <em>cursor</em> présente une multitude de valeurs possibles, correspondant à tout type d'interaction : lien, redimensionnement, progression, sélection de texte, glisser-déposer... </p>

<p>En voulant redéfinir la propriété <em>cursor</em> (pour le redimensionnement d'une fenêtre), j'ai remarqué que cela ne fonctionnait pas comme attendu. J'ai donc fait un test avec toutes les valeurs possibles (ou presque). En voici les résultats, et le moins que l'on puisse dire c'est que le support de cette propriété dans AIR est plutôt limité.</p>
]]>
        <![CDATA[<h2>Comportement de la propriété</h2>

<p><em>Note : les types de curseurs qui ont un mauvais comportement sont affichés en <strong>gras</strong>.</em></p>

<h3>Curseur d'images</h3>

<ul>
<li><strong>url</strong> : ne prend pas en compte la déclaration d'image et affiche un curseur de type <em>default</em></li>
</ul>

<h3>Curseurs généraux</h3>

<ul>
<li>auto : affiche alternativement un curseur de type <em>text</em> ou <em>default</em>.</li>
<li>default : affiche un curseur de type <em>default</em></li>
<li><strong>hand</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>none</strong> : affiche un curseur de type <em>default</em></li>
</ul>

<h3>Curseurs de lien et de statut</h3>

<ul>
<li><strong>context-menu</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>help</strong> : affiche un curseur de type <em>default</em></li>
<li>pointer : affiche le curseur de lien</li>
<li><strong>progress</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>wait</strong> : affiche un curseur de type <em>default</em></li>
</ul>

<h3>Curseurs de sélection</h3>

<ul>
<li><strong>cell</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>crosshair</strong> : affiche un curseur de type <em>default</em></li>
<li>text : affiche le curseur de texte</li>
<li><strong>vertical-text</strong> : affiche un curseur de type <em>default</em></li>
</ul>

<h3>Curseurs pour le glisser-déposer</h3>

<ul>
<li><strong>alias</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>copy</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>move</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>no-drop</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>not-allowed</strong> : affiche un curseur de type <em>default</em></li>
</ul>

<h3>Curseurs pour le redimensionnement et le défilement</h3>

<ul>
<li>all-scroll : affiche une main comme le curseur "move"</li>
<li><strong>col-resize</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>e-resize</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>ew-resize</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>n-resize</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>ne-resize</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>ns-resize</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>nesw-resize</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>nw-resize</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>nwse-resize</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>row-resize</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>s-resize</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>se-resize</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>sw-resize</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>w-resize</strong> : affiche un curseur de type <em>default</em></li>
</ul>

<h3>Curseurs spécifiques à Webkit</h3>

<ul>
<li><strong>-webkit-grab</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>-webkit-grabbing</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>-webkit-zoom-in</strong> : affiche un curseur de type <em>default</em></li>
<li><strong>-webkit-zoom-out</strong> : affiche un curseur de type <em>default</em></li>
</ul>

<p><br />
Comme vous le voyez, le support de cette propriété CSS est plutôt faible. Cela devient gênant dans certains cas, notamment quand vous voulez notifier l'utilisateur que la zone sur laquelle se trouve sa souris permet le redimensionnement par exemple.
Je n'ai pour l'instant pas trouvé d'alternative possible, en dehors peut être du javascript.</p>

<h3>Liens utiles</h3>

<ul>
<li>Test de la propriété <em>cursor</em> chez Webkit : <a href="http://trac.webkit.org/export/37902/trunk/WebCore/manual-tests/cursor.html">http://trac.webkit.org/export/37902/trunk/WebCore/manual-tests/cursor.html</a></li>
<li>Spécification W3C de la propriété <em>cursor</em> : <a href="http://www.w3.org/TR/css3-ui/#cursor">http://www.w3.org/TR/css3-ui/#cursor</a></li>
</ul>
]]>
    </content>
</entry>

<entry>
    <title>Première application AIR avec Aptana</title>
    <link rel="alternate" type="text/html" href="http://boldair.org/blog/2009/07/premiere-application-air-avec-aptana.html" />
    <id>tag:boldair.org,2009:/blog//1.21</id>

    <published>2009-07-22T20:33:01Z</published>
    <updated>2009-07-30T21:59:06Z</updated>

    <summary>Petit tutoriel de mise en route avec Aptana Studio et AIR.</summary>
    <author>
        <name>Sébastien</name>
        <uri>http://boldair.org</uri>
    </author>
    
        <category term="Aptana" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="XHTML" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="aptana" label="Aptana" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="xhtml" label="XHTML" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="fr" xml:base="http://boldair.org/blog/">
        <![CDATA[<p><em>Note : Cet article se destine à ceux qui débutent avec AIR ou qui ont envie de découvrir le développement d'applications avec Aptana.</em></p>

<p><a href="http://www.aptana.com/">Aptana Studio</a> est un éditeur de texte évolué (IDE en anglais, pour <em>"Integrated Development Environment"</em> ou <a href="http://fr.wikipedia.org/wiki/Environnement_de_d%C3%A9veloppement_int%C3%A9gr%C3%A9"><em>Environnement de développement intégré</em></a>) qui permet de créer facilement un florilège de fichiers dans différents langages à destination du Web. Basé sur l'éditeur <a href="http://www.eclipse.org/">Eclipse</a>, ses capacités peuvent être étendues grâce à une multitude de plugins. 
Le site d'Aptana propose divers plugins gérables depuis l'application : support de bibliothèques javascript, contrôle de sources avec SVN, plugin pour Ruby on Rails, pour PHP, etc.</p>
]]>
        <![CDATA[<p>La suite de cet article traitera de la mise en place d'un premier projet AIR avec Aptana. Si vous n'avez pas encore installé Aptana, je vous propose de lire mon <a href="http://boldair.org/blog/ressources/bien-demarrer-avec-air.html">article précédent</a> à ce sujet qui explique l'installation des outils nécessaires au développement AIR sous Aptana.</p>

<h2>Création du projet</h2>

<ol>
<li>Allez dans la vue projet que vous trouverez dans le panneau de gauche, deuxième onglet. Affichez le menu contextuel par clic droit et allez dans New > project... Ou faites "File > New > project" depuis le menu du haut.</li>
<li>Dans la fenêtre qui vient d'apparaître, ouvrez le répertoire "Aptana Projects".</li>
<li>Sélectionnez "Adobe AIR Project" et cliquez sur le bouton "Next" en bas de fenêtre.</li>
<li><p>L'étape suivante vous permet de renseigner dans l'ordre : </p>

<ul>
<li>le nom de votre projet</li>
<li>le répertoire dans lequel vos fichiers se trouveront</li>
<li>le nom du fichier HTML principal de votre projet</li>
<li>un exemple d'utilisation des sandboxes dans AIR (modèle de sécurité, j'y reviendrai dans un prochain article). Ce dernier paramètre n'est pas primordial pour une première application. Laissez donc le choix par défaut, soit "Application sandbox".</li>
</ul></li>
<li>Cliquez sur "Next" une fois cette étape terminée. Si vous vous êtes trompé sur un élément (le nom par exemple), vous pourrez toujours le changer par la suite.</li>
<li>La fenêtre suivante vous permet de configurer les propriétés de l'application. Pour cette première application, vous pouvez laisser les champs préremplis tel quel (vous pourrez aussi y revenir plus tard, <em>via</em> l'édition du fichier XML de configuration de votre projet). Vous remarquerez que cette fenêtre permet aussi de spécifier un chemin vers les icônes de votre projet (icônes pour les barres des tâches, le dock et dans le système de fichier).</li>
<li><p>L'étape suivante vous permet de spécifier les propriétés de la fenêtre de votre application : utilisation des styles de votre système (System chrome) ou fenêtre transparente (Custom chrome (transparent), si la fenêtre peut être minimisée, maximisée ou redimensionnée et enfin sa taille d'origine, sa taille minimale, maximale et son positionnement sur l'écran au lancement.
Concernant les propriétés de la fenêtre :</p>

<ul>
<li>"System chrome" : votre fenêtre ressemble et se comporte comme une fenêtre normale.</li>
<li>"Custom Chrome (transparent)", la fenêtre est complètement transparente, sans aucun contrôles pour agir dessus. Ne vous inquiétez pas : cette option permet justement de créer soi même sa fenêtre, les boutons de contrôles, etc.</li>
<li>"Custom Chrome (opaque)", désactive complètement le chrome système.</li>
</ul></li>
<li>Vous pouvez, si vous le voulez, terminer la création du projet dès cette étape. Cependant, les deux étapes suivantes vous permettent d'inclure des outils propres à AIR dans votre application (un debuggueur, les alias AIR notamment (j'en reparlerai)) mais aussi des outils autres, tels que des bibliothèques Javascript.</li>
<li>Une fois que vous avez fait vos choix, cliquez sur "Finish" et Aptana vous crée votre projet AIR. Il apparait d'ores et déjà dans la vue "Project" à gauche.</li>
</ol>

<h2>J'ai une application toute neuve mais comment la lancer ?</h2>

<p>Le lancement d'une application AIR se fait généralement par la création d'un paquet, contenant les fichiers et les données du projet. C'est à ce moment que le plugin de développement AIR prend tout son sens (en plus de l'aide à la création de projet). Sans plugin AIR, vous auriez été obligé d'aller dans le terminal et lancer une commande pour créer le paquet, l'installer ensuite sur votre machine et enfin lancer l'application pour vérifier si vos modifications ont bien été prise en compte.
Le plugin d'Aptana permet une visualisation instantanée de l'application d'un simple clic, ce qui vous donne la possibilité de vous concentrer pleinement sur votre application.</p>

<p>Pour ce faire : </p>

<ol>
<li>Localisez le bouton "launch" ("exécuter") vert avec une petite flèche blanche et cliquez dessus (il se trouve dans la barre d'outils du haut). Votre application devrait se lancer et vous devriez voir apparaître votre application.</li>
<li>Cette première application est celle par défaut. Elle vous montre quelques possibilités de AIR : lire des données depuis un fichier local, récupérer des données sur internet en AJAX. Cela ne représente qu'une infime partie des possibilités offertes par AIR. A votre imagination !</li>
</ol>

<h2>Fichiers de l'application</h2>

<p>Selon ce que vous avez choisi comme options, le nombre de fichiers et de dossiers peut varier. Cependant : certains d'entre eux sont toujours présents.</p>

<ul>
<li><strong>application.xml</strong> : fichier de configuration de l'application. Il doit <strong>toujours</strong> se trouver à la racine de votre projet et conserver le même nom.</li>
<li><strong>[votre-nom-de-fichier].html</strong> : votre fichier principal. Il doit également être à la racine du projet.</li>
<li>dossier "<strong>icons</strong>" : répertoire où sont stockées les icônes par défaut. Vous pouvez déplacer, renommer ce répertoire à votre guise. Cependant attention : si vous déplacez/renommez le répertoire ou les icônes, il ne faut pas oublier d'éditer les noms/chemins vers ceux-ci dans le fichier <strong>application.xml</strong>. Vous pouvez utiliser des chemins absolus pour les références à ces fichiers.</li>
</ul>

<p><br />
C'est tout pour cette mise en bouche. Je vous renvoie vers le site d'<a href="http://www.aptana.com">Aptana</a> pour d'autres explications sur la mise en route avec cet éditeur de texte. 
Vous pouvez également aller voir <a href="http://www.adobe.com/devnet/air/ajax/articles/building_on_air_in_aptana.html">chez Adobe</a> pour une explication plus en profondeur (en anglais).</p>

<p>Amusez-vous bien !</p>
]]>
    </content>
</entry>

<entry>
    <title>Qu&apos;est-ce qu&apos;Adobe AIR ?</title>
    <link rel="alternate" type="text/html" href="http://boldair.org/blog/2009/07/quest-ce-quadobe-air.html" />
    <id>tag:boldair.org,2009:/blog//1.7</id>

    <published>2009-07-11T00:00:15Z</published>
    <updated>2009-07-30T21:57:18Z</updated>

    <summary>Adobe AIR est un moteur d&apos;exécution permettant de déployer des applications sur les ordinateurs, quel que soit leur système d&apos;exploitation (Windows, Macintosh ou Linux)...</summary>
    <author>
        <name>Sébastien</name>
        <uri>http://boldair.org</uri>
    </author>
    
        <category term="Blabla" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="apiair" label="API AIR" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="html" label="HTML" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="webkit" label="Webkit" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="fr" xml:base="http://boldair.org/blog/">
        <![CDATA[<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="air.png" src="http://boldair.org/blog/medias/img/air.png" width="300" height="146" class="mt-image-right" style="float: right; margin: 0 0 20px 20px;" /></span><a href="http://www.adobe.com/fr/products/air/">Adobe AIR</a> est un <a href="http://fr.wikipedia.org/wiki/Moteur_d%27ex%C3%A9cution">moteur d'exécution</a> (runtime en anglais) permettant de déployer des applications sur les ordinateurs, quel que soit leur système d'exploitation (Windows, Macintosh ou Linux). En d'autres termes, lorsqu'une application est développée pour AIR, l'environnement d'exécution permet d'appréhender un comportement identique sur toutes les plateformes. Plus besoin de faire différentes versions ou de s'ajuster selon les navigateurs.</p>
]]>
        <![CDATA[<p>En plus de cette portabilité, les développeurs de chez Adobe ont aussi introduit une notion de flexibilité. Ils ont fourni une API (une <a href="http://fr.wikipedia.org/wiki/Interface_de_programmation">interface de programmation</a>) qui est couplée à trois technologies différentes : Flash, Flex et AJAX (XHTML, CSS et Javascript). Cela permet à Adobe AIR d'attirer à lui différents profils de développeurs afin de permettre une diffusion de la plateforme plus rapide et exponentielle.</p>

<p>Ce blog traitant essentiellement de Adobe AIR pour les développeurs HTML, je laisserai le soin à des personnes plus expérimentées de parler plus avant de l'intégration de Flash et Flex dans l'API d'Adobe. </p>

<h2>Adobe AIR et le XHTML, les CSS et le Javascript</h2>

<p><strong>Note</strong> : par la suite dans cet article et dans le blog de manière générale, le terme Adobe AIR sera employé en référence à la partie HTML de la plateforme (sauf mention contraire).</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="webkit.jpg" src="http://boldair.org/blog/medias/img/webkit.jpg" width="215" height="174" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span>
L'environnement d'exécution AIR pour le support du XHTML repose sur un moteur de rendu HTML/Javascript open source nommé <a href="http://webkit.org/">Webkit</a> (en anglais - <a href="http://fr.wikipedia.org/wiki/WebKit">page Wikipedia en français</a>).
Il s'agit du moteur de rendu utilisé notamment par <a href="http://www.apple.com/fr/safari/">Safari</a>, le navigateur d'Apple et par <a href="http://www.konqueror.org/">Konqueror</a> un navigateur open source.
Ce choix s'explique par la fiabilité et la vélocité de ce moteur (qualités qui ont également dû motiver les gens de chez Apple pour en faire le moteur de leur navigateur).</p>

<p>Le développement HTML sous Adobe AIR prend donc des allures de petite promenade, étant donné que ce qui développé, sera identique quelque soit l'ordinateur sur lequel il s'exécute. Pas question ici de compatibilité navigateurs, de lutte à en perdre les cheveux (et la boule) avec des navigateurs dinosaures... </p>

<p>Je reviendrai plus en détails sur Webkit et les avantages que nous pouvons en tirer (support CSS, interprétation du code XHTML, exécution javascript).</p>

<p>Bref, Adobe AIR a été conçu pour nous permettre de développer vite sans avoir à être confrontés à une multitude d'obstacles. Adobe AIR, mangez-en !</p>
]]>
    </content>
</entry>

</feed>
