Share
Ce tutoriel vous présentera Adobe Air, un framework permettant de créer des applications Internet riches. Cette première introduction montrera comment créer une application simple en utilisant les technologies Html / Js.
Adobe Air est un framework qui permet de créer des applications de bureau..
Les applications Adobe Air reposent sur deux technologies: Html / Js et Flash..
Les développeurs peuvent choisir de créer une application de bureau via Html / Js, Flash ou Flex. Après un bref aperçu de l’architecture, nous construirons une application simple utilisant Html / Js.
Une application Air est exécutée au moyen d'un composant d'exécution, qui exécute le code contenu dans le fichier air. Comme vous pouvez le voir sur la figure, Adobe fournit le composant d'exécution pour les trois principaux systèmes d'exploitation, Mac OS X, Windows (XP / Vista) et Linux (remarque: la version Linux est toujours en version bêta). La figure pourrait laisser penser que les deux approches sont exclusives, que vous développiez en HTML / JS ou en Flash. Etant donné que le runtime air permet le "pontage" entre les moteurs Javascript et ActionScript, vous pouvez appeler du code javascript depuis un swf, manipuler HTML / DOM via ActionScript, etc..
Le moteur d'exécution Adobe Air n'est pas simplement une intégration des technologies HTML / JS et Flash. Le moteur d'exécution fournit un ensemble d'API permettant aux applications aériennes d'interagir avec les fonctionnalités du système d'exploitation, telles que:
Adobe Air inclut également SQLite, un moteur de base de données permettant de stocker et de récupérer des données localement..
Pour répéter les étapes décrites ci-dessous, vous devez installer le moteur d’exécution et le kit de développement logiciel (SDK), qui vous permet de créer des applications sans fil..
Le moteur d'exécution peut être téléchargé à l'adresse http://www.adobe.com/go/getair. Il suffit de lancer le programme d'installation et de suivre les instructions.
Le SDK peut être téléchargé à partir de: http://www.adobe.com/go/getairsdk
Décompressez le SDK et placez les dossiers à l’emplacement de votre choix (les utilisateurs de macosx devront monter une image .dmg). Rappelez-vous l’emplacement du SDK, nous le désignerons par SDKPATH.
Le répertoire du SDK devrait ressembler à ceci:
Le SDK doit être configuré, sinon le système d'exploitation ne trouvera pas les commandes à exécuter.
En fait, si vous ouvrez un shell un type adl, votre système d'exploitation dira quelque chose comme "commande introuvable". Cela ne fonctionnera que si vous accédez au répertoire bin du dossier SDK. Puisque nous voulons pouvoir exécuter les commandes de construction et de test depuis chaque dossier, nous devons configurer le SDK. Il est important de taper correctement le chemin absolu du répertoire bin dans le dossier SDK..
Sous Mac OS X, suivez cette procédure:
Accentsconagua
CD pour être sûr que vous êtes dans votre dossier personnel .profil. S'il n'existe pas, créez-le export PATH = $ PATH: / usr / bin export PATH = $ PATH: / airsdk / bin source .profile Sous Windows, suivez ces étapes:
CHEMIN dans la liste du bas et ajoutez le chemin du dossier sdk à la fin, comme dans la figure. 
Pour vérifier si la configuration est réussie, ouvrons un shell et tapez leadt commander.
Le résultat devrait être le suivant:
Techniquement, cette réponse signifie que nous avons fourni un nombre incorrect de paramètres à la commande, mais
signifie que le SDK a été correctement installé et configuré.
Créons maintenant notre dossier de projet. Nous l'appelons myTest et nous créons deux fichiers: myTest.html et myTest.xml.
Le fichier XML est le fichier de configuration, ce qui permet de configurer l'application air. Ouvrez-le avec votre éditeur préféré et insérez le code suivant.
La première ligne est un en-tête standard pour les fichiers XML. La deuxième ligne commence la définition de notre application. le identifiant est l'identifiant unique de votre application. Dans ce cas, j'ai préfixé cela avec mon nom de domaine. le nom de fichier est le nom de l'exécutable que nous allons générer. prénom est le nom de l'application, tel que vu par l'utilisateur. le la description est un extrait qui est affiché lors de l'installation pour décrire l'application. Version indique le numéro de version de votre application, 0.1 dans notre cas.
Après avoir spécifié les métadonnées relatives à l’application, nous passons à la définition des graphiques, incluse dans le
La ligne 10 spécifie le fichier racine, c'est-à-dire le fichier à charger dans l'application air au démarrage. Dans ce cas, le myTest.html que nous montrerons plus tard. Titre est la chaîne qui apparaîtra dans la partie supérieure de la fenêtre. le systemChrome spécifie si votre application possède le chrome standard (celui du système d'exploitation hébergeant) ou aucun. Chrome est un ensemble d'outils standard permettant de manipuler une fenêtre dans un environnement de bureau, à savoir la barre de titre, les boutons de fermeture / redimensionnement, les bordures et la zone à saisir pour le redimensionnement..
le Contexte d'une application Air peut être défini sur transparent, mais cette option n'est valide que si le chrome est défini sur none. Visible permet de décider si votre application doit être affichée au lancement. Ceci est utile lorsque le démarrage prend un certain temps et que vous ne souhaitez pas afficher les graphiques aux utilisateurs..
La signification des tags minimisable, maximisable et redimensionnable devrait être intuitif et ne devrait pas avoir besoin d'explication.
Maintenant, regardons myTest.html qui contient en fait notre application.
Comme vous pouvez le constater, il s’agit d’une page HTML standard, avec une tête et un corps. La tête contient un titre et le corps a une simple div avec un texte centré.
Avant d’utiliser l’application sous forme de fichier .air, nous la testerons pour vérifier si le résultat attendu est obtenu..
L'outil que nous utiliserons id adl, ce qui permet d'exécuter nos applications Air sans installation.
Ouvrons un shell et allons au répertoire qui contient nos fichiers myTest (html et xml).
Puis tapez la commande suivante:
adl myTest.xml
Ceci exécute l'application avec le chrome du système d'exploitation actuel. Sur un MacOs devrait ressembler à ceci.
Sous Windows XP, l'application va ressembler à ceci:
Vous pourriez douter que cette application fonctionne uniquement avec le langage HTML. Testons javascript.
Nous changeons le myTest.html déposer comme suit.
Par rapport à la version précédente, nous avons ajouté une balise de script contenant la définition d’une simple fonction javascript., ma fonction (),faire apparaître une alerte (lignes 4 à 8). Nous avons ajouté un bouton au corps (ligne 12). L'action associée au clic du bouton est la popme () une fonction. Sauvegardons le fichier et exécutons-le en utilisant la même commande depuis le shell, adl myTest.xml
Si nous cliquons sur le bouton, nous devrions voir quelque chose comme ce qui suit:
Une fois que votre application est prête à être déployée, nous pouvons créer le fichier .air, qui est le package de distribution pour les applications Adobe Air..
Ce fichier, basé sur la compression zip, contient tout le matériel nécessaire à l’installation d’applications air..
Une application Air doit être signée avec un certificat. Pour les applications largement distribuées, il est préférable d’obtenir un certificat d’une autorité comme thawte..
Notre objectif est simplement de tester, un certificat auto-signé suffit donc. La création d'un certificat peut être réalisée via le adt commander. Ouvrez un shell, déplacez-vous dans le dossier du projet et tapez cette commande:
adt -certificate -cn mycertificate 1024-RSA mycertificatefile.p12 mysecretpass
adt -certificate -cn est simplement la syntaxe requise par la commande. Le tableau suivant explique les valeurs fournies à la commande..
| Valeur du paramètre | Explication |
| mon diplôme | Le nom du certificat |
| 1024-RSA | La clé de cryptage du certificat |
| mycertificatefile.p12 | Le fichier où le certificat est stocké |
| mysecretpass | Le mot de passe qui protège votre certificat |
Si vous vérifiez le dossier du projet, vous trouverez un nouveau fichier appelé mycertificate.p12 qui est le certificat auto-signé que nous avons créé.
Le dossier du projet doit maintenant contenir trois fichiers comme dans la figure ci-dessous..
Nous avons maintenant tout ce dont nous avons besoin pour créer notre fichier .air. Nous devons exécuter une commande shell assez longue. Ne paniquez pas. Je vais expliquer chaque mot. D'abord voyons le.
adt -package -storetype pkcs12 -keystore mycertificate.p12 AIRHelloWorld.air AIRHelloWorld.xml AIRHelloWorld.html
Comme ci-dessus adt -package est la syntaxe de la commande, type de magasin indique le format du magasin de clés. C'est un joli paramètre technique. Pour être bref, puisque nous avons généré un certificat selon le format pkcs12, nous devons le dire au compilateur. Ensuite, nous spécifions le fichier de certificat, via le -magasin de clés paramètre. Enfin, nous fournissons le nom du fichier .air résultant, le fichier xml contenant les paramètres de l'application et le fichier de point d'entrée .html. Lorsque nous émettrons cette commande, nous vous demanderons le mot de passe saisi lors de la création du certificat ("mysecretpass") dans notre cas..
Nous avons maintenant un fichier .air, qui est le format de distribution de notre application. Si nous double cliquons dessus le processus d'installation commencera.
L'installation s'effectue en deux étapes simples, comme indiqué ci-dessous.
Notez que, puisque nous avons auto-signé le certificat, l’identité publiée de l’application s’il est INCONNU.
Au cours de la deuxième étape, vous pouvez spécifier où installer l’application et décider de le démarrer une fois l’installation terminée..
Dans ce didacticiel, nous avons présenté le cadre Adobe Air et avons créé notre première application Adobe Air à l'aide de HTML / Js..
Dans les prochains épisodes, nous verrons comment construire la même application avec Flex et Flash CS3..
