Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

28juil/090

AFCS – Tutorial Introduction à AFCS avec Flex (6 – Architecture Globale d'AFCS)

Suite du tutorial

  1. AFCS – Tutorial Introduction à AFCS avec Flex (1)
  2. AFCS – Tutorial Introduction à AFCS avec Flex (2 – Préparer la room et Flex Builder)
  3. AFCS – Tutorial Introduction à AFCS avec Flex (3 – Les composants de base Pods)
  4. AFCS – Tutorial Introduction à AFCS avec Flex (4 – Authentification et Session)
  5. AFCS – Tutorial Introduction à AFCS avec Flex (5 – Types de Droits Utilisateur)

Traduction de Introduction to Adobe Flash Collaborative Services par Romin Irani.

Maintenant que vous avez crée une application AFCS simple, il est temps de rentrer dans le détail, et de découvrir les fonctionnalités d'AFCS qui vous permettront de développer des applications collaboratives.

Voici tout d'abord un schéma qui vient de la documentation AFCS. On ne va pas couvrir chaque aspect en détail mais je vais donner une vue d'ensemble pour que vous ayez toutes les pièces en main.

afcs-scr2

Session and Authentication

Cette couche est responsable de l'authentification utilisateur et de l'établissement des sessions. C'est ici le premier pas dans l'utilisation des services AFCS. Notez que l'on a déjà utilisé la classe Authentication via la classe com.adobe.rtc.authentication.AdobeHSAuthenticator. Ce qui concerne les sessions est présent dans le package com.adobe.rtc.session.

Il y a aussi deux classes primordiales: ConnectSessionContainer que l'on a déjà vu et la classe ConnectSession. Vous pourriez utiliser la classe ConnectSession au lieu de ConnectSessionContainer, la principale différence étant que ConnectSession n'est pas basée sur UIComponent (impossible de l'ajouter à la liste d'affichage donc).

Shared Managers

Les Shared Managers dans AFCS sont des éléments-clé de l'architecture AFCS. Ce sont des classes de type Singleton qui vous donnent la possibilité de gérer les Rooms, User (utilisateurs), Stream (data) et fichiers de votre application grâce à du code. Cela veut dire que vous pouvez faire tout ce qui est possible par l'interface d'administration, avec du code.

Les classes de la catégorie Shared Manager sont présentes dans le package com.adobe.rtc.sharedManagers. Toutes les instances des managers sont disponibles à travers l'instance de session de votre application.

26juil/090

AFCS – Tutorial Introduction à AFCS avec Flex (5 – Types de Droits Utilisateur)

Suite du tutorial

  1. AFCS – Tutorial Introduction à AFCS avec Flex (1)
  2. AFCS – Tutorial Introduction à AFCS avec Flex (2 – Préparer la room et Flex Builder)
  3. AFCS – Tutorial Introduction à AFCS avec Flex (3 – Les composants de base Pods)
  4. AFCS – Tutorial Introduction à AFCS avec Flex (4 – Authentification et Session)

Traduction de Introduction to Adobe Flash Collaborative Services par Romin Irani.

Dans le tutorial Flex précédent, on a vu comment s'authentifier dans une application AFCS. Il vous faut maintenant comprendre sont gérés les utilisateurs et leur "rôle" (leurs droits en fait) par AFCS. Il y a trois types de droits dans AFCS:

  • OWNER (propriétaire)
  • PUBLISHER (éditeur)
  • VIEWER (observateur)

Pour participer aux activités collaboratives (poster un chat message, uploader un fichier, etc.), vous devez être un PUBLISHER, c'est-à-dire que vous devez avoir le role PUBLISHER. Par défaut, tous les invités ont un role VIEWER. Cela veut dire que lorsqu'ils sont dans une room, ils peuvent observer ce qui se passe, mais ne peuvent pas publier leurs propres items.

Pour en revenir à notre exemple du tutorial précédent, si un invité s'enregistre, on va lui donner un role VIEWER. Cela ne lui permettra pas de poster des messages. Pour cela, il faut lui donner les droits PUBLISHER. AFCS fournit une API bas niveau pour le faire avec quelques lignes de code mais on va faire plus simple. Heureusement pour nous, AFCS a une fonctionnalités sur les rooms appelée Auto-Promote Users. Cela veut dire que n'importe quel utilisateur avec un role VIEWER sera automatiquement passé en PUBLISHER à son entrée dans la room, parfait :) .

26juil/090

Open Source Media Framework (Strobe) et Text Layout Framework sur Open@Adobe

Il y a une semaine, Adobe a lancé un nouveau blog, consacré à la "Flash Platform", c'est-à-dire tout ce qui tourne autour du Flash Player (client, serveur, runtime environnement, etc) et des projets comme le Open Screen Project. Vous pouvez le consulter sur http://blogs.adobe.com/flashplatform/.

Pour leur premier article, ils annoncent une bonne nouvelle concernant 2 projets: OSMF (Open Source Media Framework) et TLF (Text Layout Framework). Ces deux projets font maintenant partie du portail Open Source d'Adobe, que vous pouvez consulter aux adresses suivantes:

Ces deux frameworks sont donc disponibles sous licence Mozilla Public License.

Open Source Media Framework

OSMF offre aux développeurs les fonctionnalités de base d'un lecteur vidéo, comme les contrôles de playback (play/pause/stop), la navigation vidéo, buffering et Dynamic Streaming à travers une API. On peut rajouter sur cette API, des plug-in pour ajouter par exemple des publicités ou du reporting (qui ne sont pas des fonctionnalités de base). Ce framework flexible rassemble toutes les "bonnes pratiques" qu'un développeur doit employer lorsqu'il programme un lecteur vidéo, ce qui permet de se concentrer sur d'autres points. Certains l'utilisent déjà comme Hulu (accessible uniquement aux US) ou la CBS TV .

Open Source Media Framework

Text Layout Framework

TLF est une librairie ActionScript (extensible elle aussi) qui utilise les capacités de Flash Player 10 et AIR 1.5. Elle a été développé en coopération avec l'équipe d'InDesign, des spécialistes donc de la typographie et de la mise en page. Grâce à cette librairie, on peut aller bien plus loin que ce qui est possible avec du HTML et des CSS.

Le Text Layout Framework est déjà utilisé par l'application Adobe Air du New York Times (TimesReader 2.0) et celle du Boston Globe (GlobeReader). Ces deux applications montrent bien l'utilisation de TLF avec du texte sur plusieurs colonnes et la gestion du resize par exemple. Parmi les fonctionnalités, on peut trouver le texte bidirectionnel, le texte vertical, plus de 30 langues en écriture dont l’Arabe, le Chinois et l’Hébreu, le kerning, les ligatures, les raccourcis pour copier-coller-couper du texte, et une API très riche pour manipuler le contenu textuel.

Adobe propose aussi une application de démonstration de cette librairie. Vous trouverez en bas à gauche, des fichiers de langue à charger pour pouvoir vous amuser un peu ;) .

Application de démonstration du TLF

26juil/096

Livre Flex – Flex Conception, développement et mise en oeuvre d'applications professionnelles

Une première sur Flex Tutorial, voici l'analyse d'un livre sur Flex, en Français. Ce livre, est intitulé "Flex – Conception, développement et mise en œuvre d'applications professionnelles" aux éditions ENI. Il a été écrit par Olivier CHOQUET, Ingénieur conseil et formateur Flex / AS3 s'il on en croit son CV.

Au sommaire de ce livre, on peut trouver:

  • Flex et la programmation objet
  • La création de composants personnalisés
  • Travailler avec les données
  • Valider et formater les données
  • La gestion du glissé-déposé
  • Les animations et effets
  • Les interfaces multi-écrans
  • Personnalisation des interfaces
  • Utiliser des ressources externes
  • La localisation des applications
  • Les composants Flex Charting
  • Échanges de données avec des serveurs
  • Utilisation de la passerelle AMFPHP
  • Utilisation de la micro-architecture Cairngorm

J'ai donc lu ce gros bébé de 450 pages (disponible aussi à la vente au format PDF) et je dois avouer que je suis assez déçu de la qualité de l'ouvrage. Tout d'abord, il est toujours assez frustrant de lire un livre avec des bouts de code et des exemples que l'on doit télécharger pour voir ce que cela donne. Surtout la partie Charting qui, puisqu'imprimée en noir et blanc et parfois assez illisible, mais passons sur ce détail.

Ce livre est dédié à un "Public : Concepteurs d'applications développeurs, chefs de projet…" et ce n'est pas vraiment l'impression qui en ressort. Comme l'indique la table des matières, on part de la base avec une introduction à l'ActionScript 3 et au MXML. Viennent ensuite des chapitres qui sont souvent un peu '"light" sur les différentes familles de composants du framework Flex (Validators, Styles, States, L10n …). Cela s'éparpille un peu et au final, on voit les bases mais en aucun cas des applications professionnelles. Les seules parties qui restent intéressantes sont les 2 dernières sur AMFPHP et Cairngorm car assez fournies en exemples.

Les yeux des habitués des documentations Adobe reconnaitront aussi quelques abus au niveau des droits d'auteur. La partie Flex Charting par exemple est simplement une traduction du document Adobe Flex 3, ADVANCED DATA VISUALIZATION DEVELOPER GUIDE, pdf disponible en téléchargement sur les livedocs de Flex. J'ai moi-même réalisé une traduction minutieuse de ce document, répartis sur de nombreux tutoriaux Flex, notamment dans la catégorie Flex Charting de ce blog. Cependant, avant de faire cette traduction, je me suis renseigné auprès d'Adobe pour savoir s'il était légalement possible de faire la traduction de ce document. Il apparait que le contenu de la livedocs est sous licence Creative Commons BY-NC-SA, comme précisé dans les "Legal Notices". Vu que je n'en ai pas une utilisation commerciale, j'ai simplement du préciser mes sources (dans le footer de ce blog). Dans ce livre, il n'est nulle part (j'ai bien cherché) précisé qu'une partie de l'ouvrage est issu des Livedocs ce qui est très border-line pour un produit commercial. D'autant plus que j'ai quelques doutes sur la partie Styles et localization mais passons :P .

Au final, c'est un livre sur Flex en Français, ce qui est assez rare pour être souligné, mais qui reste bon si vous voulez attaquer Flex depuis 0. Je conseille aux personnes ayant déjà quelques mois de pratique de Flex (ou ceux qui ont lu tous les articles de ce blog :P ) de passer leur chemin sur ce livre, qui ne vous apprendra que peu de choses au final. Les débutants apprécieront sûrement cet ouvrage qui permet de voir les bases de Flex.

Si vous voulez vraiment savoir comment créer des applications Flex professionnelles, je vous conseille Advanced Flex 3, qui va en profondeur dans la conception d'applications Pro.

26juil/090

AFCS – Tutorial Introduction à AFCS avec Flex (4 – Authentification et Session)

Suite du tutorial AFCS – Tutorial Introduction à AFCS avec Flex (1), AFCS – Tutorial Introduction à AFCS avec Flex (2 – Préparer la room et Flex Builder) et AFCS – Tutorial Introduction à AFCS avec Flex (3 – Les composants de base Pods) traduction de Introduction to Adobe Flash Collaborative Services par Romin Irani.

Dans les tutoriaux Flex précédents, on a vu comment développer une application AFCS simple avec quelques Pods. On va maintenant voir comment gérer l'authentification (login) et les évènements de base d'AFCS.
Dans les exemples précédents, on utilisait la classe AdobeHSAuthenticator présente dans le package com.adobe.rtc.authentication comme ceci:

<rtc:AdobeHSAuthenticator id="auth"
                          userName="...Nom d'Utilisateur..."
                          password="...Password..."/>

Ce n'est pas un bon mécanisme d'authentification, qui ne devrait uniquement être utilisé pour les tests développeurs et pas pour une application en ligne. En effet, vous ne voulez pas coder en dur vos propres informations de compte AFCS ;) .

Le scénario idéal voudrait que l'utilisateur rentre ses propres informations soit comme invité (avec simplement un nom d'utilisateur), soit comme utilisateur authentifié (avec un couple nom d'utilisateur/password). AFCS gère cela grâce aux classes suivantes:

  • Pour s'enregistrer comme invité (guest), il faut seulement fixer la valeur de l'attribut "userName". Fixez l'attribut "password" à null.
  • Pour s'enregistrer comme utilisateur authentifié, vous devez donner un userName et un password comme on l'a fait jusque là. Le seul souci est que ce service d'authentification (ici AdobeHSAuthenticator) identifie seulement les couples nom d'utilisateur/password issus d'AFCS.

Utiliser un authentification externe (External Authentication)

Si vous le voulez, vous pouvez utiliser votre propre mécanisme d'authentification, et ne pas utiliser la classe AdobeHSAuthenticator. Dans ce cas, on parle d'External Authentication. Cela est bien sûr supporté par AFCS.

Cela veut dire que votre application côté serveur est capable de fournir son propre mécanisme d'authentification et d'interagir avec le service AFCS. AFCS fournit aussi des scripts serveur présents dans le dossier extras/scripts/ du SDK. On ne va pas couvrir l'External Authentication dans cet article. Il fera l'objet d'un tutorial Flex avancé.

Souvenez vous, dans le tutorial précédent, de l'utilisation de la classe ConnectSessionContainer. Cette classe est primordiale car elle gère les aspects suivants:

  • La classe ConnectSessionContainer (présente dans le package com.adobe.rtc.session) va tenter une authentification à sa création. Cela se produit uniquement si l'attribut autoLogin est fixé à true. Il utilise une référence vers la classe AdobeHSAuthenticator pour faire son authentification. Vous devez spécifier la room à laquelle il doit se connecter via l'attribut roomURL.
  • Si l'authentification se passe bien, le CSC va contenir une session sur la room. Que l'authentification réussisse ou non, un évènement de type com.adobe.rtc.events.AuthenticationEvent sera envoyé. Vous pouvez donc écouter cet évènement dans votre application Flex pour y répondre de manière appropriée.
  • Si l'authentification se passe bien, le CSC va créer une session sur la room et tous les Pods AFCS vont se synchroniser avec n'importe quelle donnée présente dans la room (par exemple, les messages de Chat). Vous pouvez être notifié de la bonne synchronisation via la classe Event com.adobe.rtc.events.SessionEvent (voir plus loin). C'est une bonne pratique de rendre le conteneur visible (le CSC en principe) seulement lorsque la Session a bien été synchronisée.

Modifions maintenant notre exemple AFCS afin qu'il gère:

  • Authentification utilisateur (invité ou compte AFCS)
  • Écouter les évènements AuthenticationEvent et SessionEvent et y répondre