2009 mars - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3

Archive de mars, 2009

mar

Adobe et Facebook s'associent pour créer une librairie AS3 pour Facebook Platform

Par fnicollet 0 Commentaires

Categories: ActionScript, Adobe Air, Flash Player and WebService Tags: Api, Facebook.

Adobe et Facebook ont annoncé aujourd'hui leur coopération pour permettre aux développeurs Web de créer plus facilement des application en utilisant Flash / Flex (la "Adobe Flash Platform") avec la Facebook Platform.

Cette association se traduit par la création d'un librairie officielle ActionScript 3 pour la Facebook Platform. Cette librairie est gratuite et Open Source et supporte toutes les API (Application Programming Interfaces) de Facebook comme Facebook Connect.

Documentations et exemples d'application sur la AS3 Facebook Library

Jusqu'à maintenant, quelques API non-officielles existaient et elles avaient bien du mal à garder le rythme pour rester à jour car la Facebook Platform évolue rapidement. Grâce à cette annonce, ActionScript est l'un des 3 langages officiellement supportés (avec PHP et JavaScript) par la Facebook Platform.

Pour télécharger cette librairie, vous pouvez aller directement sur le projet Google Code:

Télécharger la librairie Facebook AS3 sur Google Code

Lire la suite: 'Adobe et Facebook s'associent pour créer une librairie AS3 pour Facebook Platform'

mar

Tour De Flex 1.2 – Découvrez les capacités d'Adobe Flex en version Web

Par fnicollet 0 Commentaires

Categories: Adobe Air, Exemple and Flex Builder Tags: , Ecplise, Tour de Flex.

Si vous traînez un peu sur la blogosphère Flex, vous avez entendu parler de l'application Tour De Flex. Cette application présente les fonctionnalités du SDK Flex à travers une multitude d'exemples (quelques centaines). Pour télécharger la version Desktop (Adobe Air) de Tour De Flex, rendez-vous ici:

Télécharger l'application Tour de Flex (Adobe Air)

Tous les exemples sont fournis avec le code source, ce qui peut s'avérer très utile. Depuis son lancement, l'application Tour de Flex à permis de charger plus de 100 millions d'exemples à travers le monde. Jusqu'à présent, cette application était uniquement téléchargeable au format Adobe Air. Mais depuis hier, la version 1.2 est sortie et apporte son lot de bonnes surprises:

Nouvelle skin (plus fine)
L'écran de démarrage a été remplacé pour faire apparaître des news
Correction d'un problème de mémoire
Les commentaires sont maintenant hébergés sur les Adobe Forums
Requiert Air 1.5 pour pouvoir visionner les exemples utilisant Flash Player 10
Internationalisation pour le Japon
Poids de téléchargement réduit de 35% grâce aux RSL
Le menu est uniquement sous forme de Tree (et plus un mix Tree / Liste)

En plus de ces améliorations, vous pouvez maintenant visionner Tour De Flex sous deux autres formats: dans une page web ou directement sous Eclipse.

La version Web de Tour De Flex

Grâce au travail de Holly Schinsky, Tour De Flex est maintenant disponible sans installation, directement dans une page Web. Cette page est parfaite pour montrer à des personnes sceptiques des capacités de Flex, ce dont est capable la bête. N'hésitez pas à la partager!

Vous trouverez cette version du le site d'Adobe:

Tour de Flex version Web

Cette version supporte les boutons précédent/suivant du navigateur grâce à la fonctionnalité de "deep linking" Flex (il faudrait que j'écrive quelques tutos Flex la-dessus tiens). Vous pouvez même garder un exemple spécifique dans un marque-page de votre navigateur.

Lire la suite: 'Tour De Flex 1.2 – Découvrez les capacités d'Adobe Flex en version Web'

mar

Composant Flex – Afficher/masquer les barres d'outils d'un RichTextEditor avec RichTextEditorRemoveSubcontrols

Par fnicollet 1 Commentaire

Categories: Composant Flex, Exemple, MXML, RichTextEditor and TextArea Tags: ControlBar, RTE, subControls.

Le framework Flex contient un composant appelé RichTextEditor (RTE) permettant d'entrer du texte et de le formatter en HTML. Par exemple, l'utilisateur peut sélectionner une partie de son texte et le mettre en gras ou modifier sa taille facilement. Voici à quoi ce composant ressemble:

Vous le voyez, tout est là pour formatter du texte, le passage en gras/italique/souligné, la police, la taille, la couleur du texte ... Mais admettons que vous ne vouliez qu'une partie de ces options, par exemple, seulement la taille et la couleur mais pas les autres. Le composant RichTextEditor a une propriété showControlBar permettant d'afficher ou non l'ensemble de ces ControlBar, mais pas individuellement.

Dans le même temps, le composant mx:RichTextEditor permet aussi d'accéder aux composants qui font partie des ces barres d'outils de manière individuelle. Par exemple, pour cacher le bouton Bold (Gras) peut être rendu invisible en faisant:

myRTE.boldButton.visible = false;

Pas très pratique, surtout si vous voulez utiliser ce composant à plusieurs endroits. Heureusement, bridel.org a crée un petit composant baptisé RichTextEditorRemoveSubcontrols (un peu long je trouve mais vous pouvez toujours le renommer ) permettant de fixer ces propriétés directement avec des propriétés. Ces propriétés peuvent bien sûr être fixées en MXML comme ceci:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
	<local:RichTextEditorRemoveSubcontrols id="myRTE"
		showColorPicker="false"
		showFont="true"
		showFontSize="true"
		showAlignButtons="false"
		showLinkTextInput="false"
		showBoldItalicUnderline="true"
		showBulletButton="false"
	/>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

This movie requires Flash Player 9

Voir le site de l'auteur

mar

Flex / Air – Créer un Badge Adobe Air avec l'application Badger

Par fnicollet 9 Commentaires

Categories: Adobe Air Tags: Adobe Air, Badger, swf.

Dans l'article précédent, je vous présentais l'application ADM, indispensable pour pouvoir modifier le descripteur XML des applications Adobe Air facilement. Cette fois-ci, on va s'intéresser à la mise en ligne de votre application Air. Par mise en ligne, je veux dire mise à disposition de l'installeur par le biais d'Internet. En effet, les applications Adobe Air sont des applications (RDA) bureautiques, elles ne peuvent pas s'afficher dans une page web classique (ce n'est pas un SWF qui en sort mais un .AIR).

Pour faire profiter un maximum de monde de votre superbe application, il faut donc la mettre en ligne et mettre de .air en téléchargement. Vous pourriez le faire de manière classique, en laissant l'utilisateur "enregistrer sous" ce fichier et qu'il lance ensuite ce fichier. C'est un peu laborieux pour un utilisateur complètement néophyte ou paresseux.

Heureusement pour vous, Grant Skinner a développé une application Air permettant de générer un "AIR Install Badge". Si vous fouillez dans le Flex SDK, vous trouverez un de ces badges.

Voici les principaux avantages liés à la génération de badge à l'aide de Badger:

Plus stylés que le badge du SDK
Détecte la présence de l'application et offre un lien "launch now" permettant de directement lancer l'application
Upgrade la version de Flash Player si besoin est avec l'express install
Possibilité de personnaliser les textes et les aides

Voici l'apparence que pourrait avoir votre Badge Air:

Vous reconnaissez surement le badge si vous traînez un peu sur les sites/blogs adobe et autres .

L'application Badger

Badger est une application ultra-pratique permettant de configurer toutes les options de votre badge. Au centre de l'application se trouve une prévisualisation de votre badge (grâce au composant mx:HTML de Air pour voir instantanement toutes vos modifications. Vous pourrez ensuite exporter tout ce qu'il faut pour le déploiement (fichiers HTML/JS/SWF) qu'il vous suffira de placer sur votre serveur web.

Lire la suite: 'Flex / Air – Créer un Badge Adobe Air avec l'application Badger'

mar

Flex / Air – Modifier le XML Descriptor d'une application Adobe Air avec ADM

Par fnicollet 4 Commentaires

Categories: Adobe Air, Flex Builder and XML Tags: ADM, descriptor, XML.

Lorsque l'on crée une application Air, un fichier "Descriptor" est associé au projet. Ce fichier est un simple fichier XML que vous trouverez à la racine de votre projet portant le nom "nomDeMonProjet-app.xml". Ce fichier est indispensable au bon fonctionnement de votre projet car il va contenir de nombreux paramètres décrivant votre application utiles à la compilation. C'est dans ce fichier que l'on va par exemple donner la taille initiale de la fenêtre principale de l'application, donner une description de son application ou associer des types de fichiers avec son application Air.

Si vous développez avec Flex Builder, la tâche vous sera facilitée. En effet, ce dernier va créer pour vous un fichier XML Descriptor à la création du projet et va vous permettre de l'éditer facilement. Vous pouvez éditer ce fichier comme un fichier texte puisque c'est un fichier XML. C'est plutôt simple mais il existe de nombreuses options dont vous ne connaissez peut-être pas l'existence, comme par exemple les icônes de différentes tailles ou les descriptions localisées en fonction du pays de l'utilisateur.

ADM: Application Descriptor Manager

Heureusement pour vous, David Deraedt (un français ^^) a crée une application Adobe Air qui va vous aider à remplir ce XML de configuration. Cette application est extrêmement pratique d'utilisation et va vous permettre de gagner beaucoup de temps lors du déploiement de votre application Air.

Vous pourrez donc ouvrir un fichier XML Descriptor existant de votre projet. Une sauvegarde de ce fichier sera aussi crée au cas où vous feriez une boulette. S'ouvre ensuite l'interface où vous pourrez modifier la description, la version etc. Cette application dispose d'outils pratique comme par exemple la possibilité de générer toutes les tailles d'icône (16x16, 32x32, 48x48, 128x128) à partir d'une seule image! Pas besoin donc de passer par un logiciel externe pour faire 4 exports de la même image. Vous pourrez ensuite prévisualiser votre fichier XML et l'enregistrer s'il vous convient.

Cet outil est vraiment un indispensable si vous développez pour Adobe Air!

Télécharger ADM Application Descriptor Manager depuis la page de l'auteur

Au passage, jetez aussi un coup d'oeil sur l'application Badger qui va vous intéresser:

Flex / Air - Créer un Badge Adobe Air avec l'application Badger

Voici une vidéo présentant les fonctionnalités de cette application: