Share
Dans un précédent tutoriel, nous avions présenté le framework Adobe Air qui expliquait comment créer une application simple. N'oubliez pas qu'Adobe Air est un framework qui permet aux développeurs Web, généralement impliqués dans la programmation html / js / flash, de créer des applications de bureau. Dans ce didacticiel, nous allons illustrer comment créer une application Adobe Air avec Flex, un ensemble de technologies open source pour le développement d'applications Internet riches..
Flex est un framework qui permet de générer des fichiers SWF. Vous pourriez vous demander: quelle est la différence par rapport à Flash? Outre les différences en coulisse, la principale différence en ce qui concerne Flash est la présence d'un langage de balisage appelé MXML. La figure ci-dessous illustre le processus de génération d'un fichier SWF..
Mxml est un langage basé sur XML, qui semble plus convivial pour les concepteurs qu'Actionscript et dont le concept est similaire à HTML (avec des balises et des propriétés). Au moment de la compilation, le Mxml est transcodé en Actionscript, qui est ensuite inclus dans le fichier SWF final. Dans cette perspective, vous pouvez considérer le Mxml comme une abstraction d’Actionscript, beaucoup plus simple à gérer. Flex SDK est une boîte à outils de développement conçue pour générer des fichiers swf (les mêmes fichiers générés avec Flash). Après quelques modifications apportées par Adobe Flex, il est désormais possible de générer également des applications Adobe Air..
Le SDK Flex est open source et peut être téléchargé à partir d’ici. Il est contenu dans un fichier zip qui, une fois développé, ressemble à ceci.
Les fichiers les plus importants, que nous allons utiliser dans ce tutoriel, se trouvent dans poubelle/ annuaire. Plus spécifiquement, nous utiliserons:
Accentsconagua
AMXMLC (le compilateur)ADL (le débogueur / lanceur)ADT (l'outil de développement) Le SDK doit être configuré pour être exécuté à partir de tous les dossiers de votre ordinateur. La configuration est très similaire à celle du framework Adobe Air, expliquée dans la section
tutoriel précédent. Je vais le signaler ici pour plus de commodité. Sur MacOSX, suivez ce script.
(/ Applications / Utilitaires / Terminal)
CD pour être sûr que vous êtes dans votre dossier personnel .profil ou .bash_profile. S'il n'existe pas, créez-le. export PATH = $ PATH: / usr / bin ce: export PATH = $ PATH: / flexsdk / bin
les espaces l’emballent avec une double citation (par exemple, "/ my pathtosdk / air")
ligne: / Applications / flex_sdk_3 / bin
source.profile Sous Windows, cette procédure permet de configurer le SDK..
CHEMIN dans la liste du bas et ajoutez le chemin du dossier sdk à la fin, comme dans la figure. 
Pour tester la configuration, ouvrons le shell et essayons de taper la commande suivante:
amxmlc
Si le résultat est le suivant, le SDK est correctement installé..
Créons un dossier qui contiendra les fichiers de notre projet. Comme expliqué dans le didacticiel précédent, une application Adobe Air doit inclure un fichier de description, qui décrit les fonctionnalités de l'application. Créons un fichier nommé MonApplication-descr.xml avec le contenu suivant.
La première ligne est simplement la déclaration du format de fichier; la spécification réelle commence à partir de la ligne deux jusqu'à la fin du fichier. identifiant incorpore l'identifiant de l'application. Je vais inclure le domaine de mon site Web pour qu'il soit unique. le version tag indique le numéro de la version. N'oubliez pas de le modifier en conséquence lorsque vous publiez de nouvelles versions de votre application. Le tag nom de fichier, dont le nom peut être trompeur, contient le nom de l'application, qui apparaîtra dans la fenêtre principale de l'application, dans les menus, etc.. Contenu spécifie le premier fichier à charger par l'application Air au démarrage. Ce fichier est communément appelé fichier racine ou point d'accès. Nous avons mis le visible propriété à true, afin de visualiser
l'application telle qu'elle est chargée. le systemChrome indique l'apparence de la fenêtre hébergeant votre application. Si vous le définissez en standard, l'application aura une fenêtre identique à celle du système d'exploitation que vous utilisez. Si vous le définissez à aucun Fléchir
utilisera son propre chrome qui, sous MacOsX, apparaît comme suit.
Sous Windows (XP / Vista), il est très similaire. La principale différence est la position des boutons de redimensionnement / fermeture.
Dans ce tutoriel, nous allons construire une application avec un chrome standard. le transparent Cette propriété indique si la fenêtre principale de l'application est transparente, tandis que les lignes 11 et 12 spécifient la largeur et la hauteur initiales de la fenêtre lorsqu'elle est affichée sur le bureau..
Maintenant, nous allons commencer à construire le code de l'application, qui sera compilé dans le fichier SWF.
le Application Windowed balise contient toute votre application, semblable à la balise pour les pages Web. La propriété Titre définit la chaîne qui apparaîtra en haut de l'application. Flex contient une très grande liste de composants graphiques. La liste complète des composants est disponible ici. Mettons maintenant un bouton dans notre fenêtre.
Comme vous pouvez le constater, vous ouvrez un tag (de manière assez similaire au html) (Bouton) et spécifiez les caractéristiques du composant via des attributs. Dans ce cas, nous définissons le texte à afficher sur le bouton via la propriété label (ligne 3). Maintenant, nous allons attacher une action au bouton.
Comme vous pouvez le constater, nous pouvons intégrer du code ActionScript, qui ressemble à du code JavaScript, qui permet de définir ce que l’on appelle communément la "logique" de notre programme (lignes 3 à 11). À la ligne cinq, nous importons le Alerte
composant, qui est une sorte de fenêtre popup. Nous définissons ensuite une fonction (ligne 7). L'action associée est d'afficher une fenêtre d'alerte contenant le message "Hello" (ligne 8). Pour attacher le code au clic du bouton nous remplissons simplement le Cliquez sur attribut du bouton avec le nom de la fonction (ligne 12).
Pour compiler l'application, nous devons passer au dossier du projet, puis exécuter la commande suivante:
amxmlc MyApplication.mxml
Le shell devrait retourner un message comme celui-ci:
Le message contient un avertissement qui, contrairement à une erreur, ne nécessite aucun correctif. Le compilateur suggère simplement de vérifier le code et de "l'améliorer". Pour exécuter correctement l'application et la portée de ce didacticiel, il n'est pas nécessaire de le réparer. Nous sommes maintenant prêts à tester notre application. Dans le même répertoire, nous tapons la commande suivante:
adl MyApplication-descr.xml
(Notez que nous passons le fichier descripteur XML et non le fichier XML avec le code réel). Nous devrions voir apparaître la fenêtre suivante.
Si nous cliquons sur le bouton, l'alerte est correctement visualisée.
Il est probable que la couleur / la disposition par défaut du kit SDK Flex ne vous convienne pas. Vous pouvez styler votre application Air via CSS, comme vous le faites avec vos pages html. Bien sûr, il existe des différences par rapport au CSS standard du W3C, mais l’idée et la syntaxe sont presque les mêmes. Par exemple, changeons en blanc l'étiquette de tous les boutons de notre application. Nous insérons un extrait de code CSS dans notre fichier mxml comme dans la figure
ci-dessous (lignes 3-7).
Pour avoir une idée des possibilités de style de Flex, regardez ce lien..
La dernière étape pour créer notre première application consiste à conditionner un fichier distribuable à installer sur d’autres machines. Nous avons d'abord besoin d'un certificat. Pour plus de détails sur la nécessité d’un certificat, veuillez consulter le site
tutoriel précédent (étape 7). Nous signalerons ici uniquement la commande permettant de créer un certificat auto-signé nécessaire à la création du package distribuable..
adt -certificate -cn SelfSigned 1024-RSA mycertificate.p12 mypassword
L’application finale sera distribuée sous la forme d’un fichier .air pouvant être construit à l’aide de la commande suivante.
adt -package -storetype pkcs12 -keystore mycertificate.p12 MonApplication.air MonApplication-descr.xml MonApplication.swf
le magasin de clés paramètre indique le fichier contenant le certificat généré ci-dessus.
Ensuite, nous devons spécifier le nom du fichier .air que nous voulons générer, la description du fichier.
application (contenue dans MyApplication-descr.xml) et le fichier racine généré précédemment (MyApplication.swf). Cette commande vous demandera le mot de passe que vous avez spécifié lors de la création du certificat. Vous pouvez maintenant redistribuer le fichier MyApplication.air résultant à vos utilisateurs. Rappelez-leur qu'ils doivent installer le programme d'installation Air.
