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

23juil/100

AIR pour Android – Vidéo conférence en 30 lignes de code avec LiveCycle Collaboration Services

Christophe Coenraets est on fire en ce moment et sort une application Air pour Android presque tous les jours :P . La dernière est une application de chat vidéo utilisant le service LiveCycle Collaboration Services.
Pour ceux qui ne connaissent pas LCCS (anciennement AFCS, anciennement Cocomo), vous trouverez plus d'informations sur le site officiel:

LiveCycle Collaboration Services @ Adobe

Pour résumer, LCCS propose d'utiliser des services Adobe en mode hébergé (SaaS). LCCS est aussi accompagné d'un SDK complet permettant d'intégrer facilement un chat vidéo, un tableau blanc, un partage de fichiers, … Il permet ainsi de gérer facilement les concepts de "room" et d'utilisateur. Beaucoup de traitement étant fait server-side par les systèmes de gestion sans que vous le sachiez.

Bref, LCCS était un projet qui était déjà intéressant pour du Desktop mais grâce à Air pour Android, (qui est une des prochaines versions de Air et pas un nouveau SDK), vous pouvez profiter de base du SDK livré avec LCCS.

Et c'est ce que fait CC dans sa vidéo de chat vidéo sur Android:

Comme je le disais un peu plus haut, LCCS vient avec un SDK complet, qui permet de s'affranchir de beaucoup de code. Dans le cas de cette application, seules 30 lignes de code on été nécessaires pour initier la connexion à la conférence et afficher un pod vidéo:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:cs="AfcsNameSpace" currentState="logon" fontSize="28">

 <fx:Script>
 [Bindable] private var roomURL:String = "http://connectnow.acrobat.com/YOUR_ROOM_NAME";

 protected function connect():void {
  auth.userName = userName.text;
  currentState = "default";
  session.login();
 }
 </fx:Script>

 <s:states>
  <s:State name="default"/>
  <s:State name="logon"/>
 </s:states>

 <fx:Declarations>
  <cs:AdobeHSAuthenticator id="auth"/>
 </fx:Declarations>

 <s:TextInput id="userName" includeIn="logon" top="200" horizontalCenter="0"/>
 <s:Button label="Connect" click="connect()" includeIn="logon" top="250" horizontalCenter="0" height="50" width="150"/>

 <cs:ConnectSessionContainer id="session" roomURL="{roomURL}" authenticator="{auth}" autoLogin="false" width="100%" height="100%" includeIn="default">
  <cs:WebCamera top="10" left="10" bottom="10" right="10"/>
 </cs:ConnectSessionContainer>

</s:Application>

Voilà de quoi donner des idées !

11mar/100

Edoboard en v1.0 et ouverture de Tutorsbox

Si vous êtes un fidèle lecteur de flex-tutorial.fr, vous vous souvenez peut-être d'Edoboard, une application permettant de faire des cours particuliers par Internet. Cette application était spécialement intéressante car elle utilisait AFCS comme base de son fonctionnement. A l'époque, Edoboard était toujours en beta mais depuis quelques semaines, la version 1.0 (stable donc) est sortie. J'apprécie le travail effectué sur cette application alors je leur fait un peu de pub :) .

Voir le site de l'application Edoboard

Les nouveautés Edoboard apportées par la version 1.0

J'ai testé personnellement l'application est j'ai pu apprécier la facilité d'utilisation des outils mis à disposition. Voici les nouveautés venues avec la version 1.0:

Edoboard est gratuit

L'utilisation d'Edoboard est gratuite, il vous suffit simplement de créer un compte pour démarrer. Une offre premium verra le jour courant 2010, proposant une expérience utilisateur et des contenus encore meilleurs.

Chronomètre:

Un chronomètre situé sous la webcam affiche la durée du cours avec votre élève. Le compteur temps se met automatiquement en marche dés que votre élève vous rejoint pour s'arrêter dés sa sortie.

timer_off

timer_on

Multi-sélection

La sélection d'objets (équations, figures géométriques, graphes…) a été amélioré avec l'ajout du raccourci "Shift+clic gauche" pour ajouter/supprimer un objet à votre sélection. De plus il est maintenant possible d'appliquer des rotations et changements d'échelles directement à un ensemble de figures.

multi_selection

Positionnement  /alignement des figures

Afin de faciliter le positionnement des figures sur le tableau blanc, un mode "magnétique" et des guides (un vertical et un horizontal) ont été ajouté, facilitant l'alignement des éléments. Grâce à ces aides visuelles la construction d'exercices et de schémas géométriques complexes est maintenant plus rapide et précise.

positionning

positionning2

Outil "ligne"

L'outil "ligne" gagne aussi en ergonomie, vous pouvez connecter rapidement chaque extrémité des lignes entre elles afin de construire rapidement et avec précision des figures complexes.

line_pos

Remplis sous: AFCS Lire la suite
28nov/092

AFCS devient LiveCycle Collaboration Service (LCCS) et pricing

Un peu de retard sur cette news mais elle reste importante. Le projet anciennement Adobe Cocomo qui est devenu Adobe Flash Collaboration Service (AFCS) devient maintenant LiveCycle Collaboration Service (LCCS). Ce nom serait à priori le nom définitif.

Il faut noter que LCCS ne vous oblige pas à acheter LCDS (LiveCycle Data Service), c'est simplement le nom qui change.

Pour ceux qui ne connaissent pas le produit de base, LCCS permet d'offrir des services "in the cloud", c'est-à-dire d'utiliser l'architecture d'Adobe (serveurs) pour le fonctionnement de votre application. LCCS se compose d'un SDK comprenant un ensemble de composants personnalisables pour ce qui concerne les activités collaboratives et temps réel:

  • Communication Audio VoIP
  • Communication Vidéo WebCam
  • Chat
  • Tableau Blanc Multi-utilisateur (avec ses outils de dessin etc.)
  • Partage de fichiers temps réel
  • Gestion des utilisateurs (accès et droits)

Plus d'informations sur LCCS (anciennement Cocomo)

Un service toujours gratuit mais limité en accès pour les développeurs

Dans la partie suivante, je donne les prix de l'accès au service. Pour les développeurs qui ne veulent pas payer pour tester LCCS, Adobe accorde un solde gratuit de 15$ à utiliser par les conditions suivantes.

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 (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