TONTONS FLEXEURS

Nouveau site !!!

Thu, 19 Mar 2009 15:47:04 +0100

Réunion des tontons flexeurs le Mardi 27 Mai à Paris

Tue, 13 May 2008 14:57:28 +0200

Nouveaux Site Tontons Flexeurs une réunion se tiendra le Mardi 27 Mai à partir de 17h30 à Paris (vers le trocadéro :-)

Au programme, la présentation d'une IHM 3D pour montrer des videos, des initiatives de traduction (une bonne occasion de s'engager chez les tontons), discussion sur ce que vous attendez des tontons, et bien sûr un petit verre et des échanges sur nos projets Flex :-)

Si vous souhaitez présenter votre travail, n'hésitez pas à envoyer un mail à ttfx@baao.com

on essayera de faire un trombinoscope et, cette fois-ci c'est sûr, il y aura un Flex Builer 3 pro à gagner.

Vous inscrire : Inscription à la réunion

à bientôt,
-Raoûl

New version of BabelFlex fr_FR and es_ES and 11 other locales !

Thu, 24 Apr 2008 10:19:34 +0200

I've updated BabelFlex to fix some issues :

minor words changes
NumberValidator and DateValidator problems
removing of the automation bundle (which is not part of the SDK and then not in the opensource licence)

We also add 11 new languages in alpha version following the availability of some Adobe translations on the opensource website.

Let's have a look and enjoy : Go to BabelFlex (be sure to refresh the page)

-Raôul

BabelFlex For Flex 3 final is out

Mon, 17 Mar 2008 10:43:53 +0100

I've updated BabelFlex for Flex 3 final.
This version also add a new language : spanish (muchas gracias inigo :-)

http://ttfx.org/Tontons_Flexeurs/BabelFlex.html

Enjoy !

-Raoûl

Sweet Jesus it's out :-)

Mon, 25 Feb 2008 13:45:57 +0100

Et oui tout arrive !
Flex 3 et AIR sont dispos.

Et quelle coïncidence, il y a justement une réunion des tontons ce soir. C'est quand même incroyable comme intuition :-)

Programme plus affiné :

Une video de Kevin Lynch sur les dessous de la fabrication de AIR...
Une présentation à la manière "What's new in Flex 3 et AIR"
je ferai la présentation sur le mode discussion, retour d'expérience...
Séance de "30onair"...

Y'aura (s'ils sont arrivés) des T'shirts Flex 3, des softs, une mini caméra et de quoi fêter ça :-)

Quelques liens :

Flex 3 : http://www.adobe.com/products/flex/
AIR : http://www.adobe.com/products/air/
SDK : http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email
RIA (très sympa) : http://www.adobe.com/resources/business/rich_internet_apps/

Opensource : http://opensource.adobe.com/ A ce soir pour les chanceux qui viennent,

-Raoûl

Inscription a la reunion du 25/02 est ouverte

Wed, 6 Feb 2008 15:11:26 +0100

L'inscription à la réunion du 25/02/08 est maintenant ouverte : http://www.baao.com/Evenements/Reunion_des_Tontons_Flexeurs_le_25_Fevrier_2008.html
Entre nous, je vous suggère de ne pas la rater :-)

-Raôul

Ne ratez pas la prochaine reunion des Tontons Flexeurs le 25 Fevrier 2008

Mon, 21 Jan 2008 09:18:00 +0100

Les technos RIA d'Adobe permettent de rapidement construire et déployer des applications Web et aussi des applications de bureau ultra sexy :-)
Tontons Flexeurs va accueillir une réunion spéciale pour vous présenter des super news concernant les outils et les nouvelles technos de cette plateforme RIA. Nous pourrons en particulier vous présenter une video spécialement conçue pour les groupes d'utilisateurs Flex de Kevin Lynch, l'architecte logiciel en chef de chez Adobe (y'aura aussi des T'shirts et autres friandises :-)

Faites partie de la fête et rejoignez la communauté en participant à cet événement très spécial le Lundi 25 Février 2008 à 17h30.

update 6/02/08 :
L'inscription : http://www.baao.com/Evenements/Reunion_des_Tontons_Flexeurs_le_25_Fevrier_2008.html
Entre nous, je vous suggère de ne pas la rater :-)

-Raôul

Un apres-midi avec Serge Jespers et James Ward

Thu, 10 Jan 2008 09:41:30 +0100

Après Mike Chambers et Lee Brimelow, c'est au tour de Serge Jespers et James Ward de faire un tour d'Europe pour rencontrer les groupes d'utilisateurs Flex. En France, ce sera le 22 Janvier 2008 après-midi

C'est une fois de plus une formidable opportunité de rencontrer des experts Flex qui nous parleront en détail de l'arrivée de Flex 3, de l'initiative Open source et de la nouvelle partie accès au serveur.

La renconter se déroulera sur Paris vers le Trocadero, l'après-midi. L'agenda devrait comporter :

14h30 : Accueil café
15h00 : Présentation générale (Serge)
15h15 : Flex Builder 3 (Serge)
15h50 : Open Source (James)
16h00 : Q&A
16h15 : Pause
16h30 : Data Service & BlazeDS (James)
17h05 : Projets de la communauté
17h35 : Q&A

Le site de Serge Jespers : http://sergejespers.com/
Le site de James Ward : http://www.jamesward.org/wordpress/

Inscription : http://baao.com/

Le nombre de places étant limité, n'hésitez pas à vous inscrire dès maintenant

-Raoul

Créer un projet Flex Java avec FlexBuilder 2.0.1, les WebTools et Tomcat 5.5

Mon, 3 Dec 2007 16:34:26 +0100

Le but de ce tutoriel (qui est une réactualisation d'un tutoriel écrit précédemment) est de vous permettre de créer en un même projet une application Flex et une application Java web.
Environnement : Eclipse 3.3 (Europa J2EE), Flex builder 2.0.1 (et +), tomcat 5 (et +) et java 1.5 (et +).

1 - Introduction

Généralement, la création d'une application Flex communicant avec le serveur se gère sur deux projets différents. Un pour la partie client (Flex), un autre pour la partie serveur (Java). Et tout fonctionne bien, alors pourquoi vouloir proposer de fusionner les deux projets en un seul ?
Cette solution permet de :

combiner en un projet le client et le serveur et facilite l'organisation.
obtenir une seule archive war pour le déploiement.
utiliser une url relative (et pas absolue) pour la connection aux services.

2 - C'est parti !

Nous allons créer le projet. Dans éclipse, sélectionnez la perspective Java J2EE (menu Window->Open Perspective->Other... puis dans la boîte de dialogue apparait la liste des perspectives).

1 - Création d'un nouveau projet web

Créez le projet (menu File->New->Project...). Dans la boîte de dialogue, sélectionnez "Dynamic Web Project" dans le dossier "Web". Cliquez sur le bouton [Next >] pour faire apparaître la boîte de dialogue de la sélection du runtime.

2 - Définition du projet

A cette étape de la création, nous devons donner un nom au projet et définir son environnement d'exécution dans éclipse. Appelons-la "FlexJavaWap". Pour la section "Target Runtime", il existe deux scénarii.

Serveur cible pré-existant

Sélectionnez Tomcat 5.5 (ou +).

Serveur cible non défini

Vous n'avez pas encore de serveur.
Cliquez sur le bouton [New...]. Dans le dossier Apache, sélectionnez tomcat 5.5 (ou +). Cliquez sur [Finish].

3 - Sélection du conteneur de servlet/JSP

De retour sur la boîte de dialogue intitulée "New Dynamic Web Project", cliquez sur [Next >] pour faire apparaître les versions de Projects Facet. Là, cliquez sur [Next >] pour faire apparaître l'étape de configuration du module web. Dans le champ texte "Java Source Directory" (le dernier), changer le nom du répertoire de "src" en "srcJava", puis cliquez sur [Finish].

4 - Modification du répertoire source java

Eclipse génère alors tout une arborescence de fichier. Voici ce qui devrait s'afficher dans le "Project Explorer".

5 - Vue du projet java

3 - Côté serveur

Nous allons créer un service web qui nous renverra la date du serveur...on ne peut faire plus simple. Un objet métier nous donnant le temps, et une JSP de visualisation.

La classe Clock

Dans le "Project Explorer", cliquez droit sur le dossier "Java Resources : srcJava". Dans le menu contextuel, cliquez sur New->Class. Donnez un nom au package ("test") et à la classe ("Clock"), puis cliquez sur [Finish].

6 - Création de la classe java Clock

Eclipse affiche alors le contenu de la classe. Tapez le code suivant:

package test;

import java.util.Date;

public class Clock 
{
  public String getTime()
  {
    return (new Date()).toString();
  }
}

La JSP ClockView

Dans le "Project Explorer", cliquez droit sur le dossier "WebContent". Dans le menu contextuel, cliquez sur New->JSP. Dans le champ texte "Filename" (tout en bas), entrez le nom de la JSP ("ClockView") puis cliquez sur [Finish].

Dans "Project Explorer", le fichier ClockView.jsp doit apparaitre dans le dossier "WebContent". Sur la partie droite, éclipse affiche le contenu de la JSP (qui devrait être vide). Tapez le code suivant:

<%@ page import="test.Clock"%>
<?xml version="1.0" encoding="utf-8"?>
<info>
  <date><%= (new Clock()).getTime() %></date>
</info>

Nous pouvons maintenant tester le bon fonctionnement de notre partie serveur.
Dans "Project Explorer", cliquez droit sur la JSP. Dans le menu contextuel, cliquez sur Run As->Run On Server. Une boite de dialogue proposant de sélectionner le serveur apparait. Le serveur Apache Tomcat v5.5 doit apparaître présélectionné. Cochez la case "Always use this server when running this project" pour éviter qu'éclipse nous embête par la suite. Cliquez sur [Finish].

8 - Définition du serveur tomcat

Eclipse démarre alors tomcat (des informations apparaissent dans l'onglet console), puis le message tant espéré s'affiche enfin !

10 - Affichage de la JSP

(ndlr: Retenez bien cette date, c'est celle de mon anniversaire !)

4 - Côté client

Préparation du terrain

Pour pouvoir créer le sous-projet Flex, nous allons utiliser une fonctionnalité apportée par le plug-in flex builder. Dans "Project Explorer" sélectionnez le nom du projet, puis dans le menu contextuel cliquez sur Flex Project Nature->Add Flex Project Nature. Sur la première boite de dialogue, cliquez sur [Next >]. Sur la seconde, dont le sous-titre est "Configure None", nous allons spécifier le répertoire dans lequel sera créé le binaire de l'application flex (le .swf). Sélectionnez avec le bouton [Select...] ou tapez dans le champ texte "WebContent". Un certain nombre d'éléments sont ajoutés au projet comme on peut le voir:

11 - Ajout d'une "Nature Flex" au projet

Par contre, vous aurez certainement remarqué la petite croix rouge à gauche du nom du projet, qui n'indique rien de bon. En regardant dans l'onglet "Problems", la cause de l'erreur est affichée et, chance!, également le moyen de le résoudre.

12 - Gestion de l'erreur

Comme indiqué, cliquez-droit sur le libellé de l'erreur, et dans le menu contextuel, cliquez sur Recreate HTML Templates. Cette opération ajoute un nouveau dossier "html-templates" qui apparait dans le "Project Explorer".

Pour le code java nous avons créé un dossier spécifique pour placer les sources (srcJava). Faisons de même pour Flex. Créez un nouveau dossier "srcFlex" dans le projet actuel (menu File->New->Folder).
Déplacez le fichier FlexJavaWap.xml du dossier "src" vers "srcFlex" (un glisser-déposer avec la souris devrait le permettre).
Nous allons maintenant faire en sorte qu'éclipse prenne en compte ce changement. Cliquez-droit sur le projet et dans le menu contextuel, cliquez sur Properties.
Dans la partie, du bas, modifier le champ "Main source folder" par srcFlex, puis le champ "Output folder URL" par http://localhost:8080/FlexJavaWap. Cliquez sur [OK] pour valider les changements.

13 - Modification du répertoire source flex

Un peu de code

Ouvrez le fichier FlexJavaWap.xml, et copiez-y le code ci-dessous, qui permet simplement de récupérer le contenu délivré par la JSP et de l'afficher dans le client Flex:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	creationComplete="service_clock_id.send()">
	<mx:Label id="lbl_id" text="{service_clock_id.lastResult.info.date}"/>	
	<mx:Button label="Refresh!" click="service_clock_id.send()"/>
	<mx:HTTPService id="service_clock_id"
		url="ClockView.jsp"/>		
</mx:Application>

3 - Testons l'application

Tous les éléments sont en place. Nous pouvons maintenant tester notre application. Pour cela, démarrer dabord le serveur tomcat (s'il ne tourne pas déjà). Dans l'onglet "servers", cliquez-droit sur la ligne Tomcat v5.5 Server (ou v6.0 selon votre version), puis dans le menu contextuel, cliquez sur Start. Le serveur se lance.

14 - Le serveur tomcat à l'état démarré

Lancez l'application Flex en cliquant droit sur le fichier FlexJavaWap.mxml, puis dans le menu contextuel cliquez sur Run As->Flex Application.

15 - Affichage depuis l'application Flex

A partir de cette configuration, il est possible de créer un fichier archive war de manière classique (menu File->Export et dans le dossier web, choisir "WAR file").

L'accessibilité dans Flex

Wed, 17 Oct 2007 12:18:23 +0200

C'est bien sûr très imporatnt, pour des raisons évidentes d'éthique tout d'abord et aussi pour des raisons business ! Certains projet n'ont pu se faire car l'accessibilité était techniquement impossible

Les démos sont faites avec un lecteur d'écran jaws sur Windows. Il n'y a rien sur Mac (peut-être Leaopard) et Linux :-(

Bonne nouvelle, Flex supporte l'accessibilité

Coût de l'accessibilité
Il faut y penser dès le début
Et le gérer tout le long du projet

Il faut rendre l'accès possible sans la souris
navigation clavier
saisie clavier
contrôle vocale

Scénarios d'usage
attention à la différenciation par les couleurs (4% des hommes blancs)
visibilité réduite (bientôt nous)

Bonnes pratiques
Accès clavier
tabulation (on peut le faire simplement avec des changement de focus)
proposer une navigation clavier
Comment faire connaître les raccourcis
J'ai l'impression que les tooltip donne de l'information au soft de lecture automatique

Utiliser des composant ayant de l'utilisbilité
disponible dans la doc de Flex
Pr exemple : Bouton, Alert, Label, textInput... (yen a 26)

Outils : jaws (version 6.1 pour Flex 2)

Fonctionnement : basé sur MSAA (Microsoft), une norme pour rendre les infos d'accessibilité disponibles

Rendre les composants accessibles :
runtime : jaouter ?accesible=true à la fin de l'url
option de compil -accessible
performance : 1K par composant

Outil de debug
MSAA inspecteur : une fenêtre qui donne toutes les infos sur les codes accessibles.

Video
Utiliser la captions (sous-titres) pour permettre de comprendre ce qui se trouve sur la video.
Techniquement réalisé avec des cuepoints
Outils pour le faire

Instructions
Fournir le plus de retours possibles : par exemple
Consulter les experts Intéressant de prendre des personnes qui connaissent le sujet. des utilisateurs cible ou des personnes en ayant l'expérience.
Les intégrer dès la phase de conception (le plus tôt possible)

Classes : Capabilities.hasAccessibility () Accessibility.active (le reader tourne) ... (cf donc en ligne)
Pas de support simple pour les raccourcis (keyDown sur les composants !)

Raoûl

SQLLite dans AIR par Christophe Coenraets

Wed, 17 Oct 2007 10:45:19 +0200

La session présente la base de données embarquée avec AIR : SQLLite et en particulier les API d'accès et les bonnes pratiques. L'équipe AIR a décidé d'embarquer une BD dans AIR essentiellement pour gérer simplement le mode déconnecté. vous savez, vous êtes dans le TGV ou à la campagne et vous voulez saisir vos contacts ... impossible offline ! Mais si, mais si...

API très simple qui ressemble un peu à JDBC : on se connecte à un fichier local qui va stocker notre BD, on créée des requêtes SQL (SQL92) et on les exécutent.
Possibilité de requêtes synchrones ; ce qui est assez nouveau dans Flex où tout est asynchrone. Ceci dit déconseillé par Christophe.

Mode asynchrone : l'exécution d'une requête devient très proche de HTTPService par exemple. Il est même possible de tout faire en tag MXML.

Possibilité d'accéder aux metadata (loadSchema()) ; on a une description de nos tables et de notre schéma. Utile pour les outils d'admin par exemple.

Les Prepared statement sont supportés et encouragés
nommé (:firstName) suggéré
par position avec le ?
stmt.textselect * from employee where first=?

Les transactions sont supportés et nettement plus performantes
SQLConnection.begin()
SQLConnection.commit()
SQLConnection.rollback()

Quelques Bonnes Pratiques

Plusieurs requêtes en Asynchro
pattern : chaîner les exécutions : classe utilitaire de christophe : SQLQueue (le code est sur le blog)

stratégie d'accès aux données
1- SQL dans les vues
comme son nom l'indique, la requête se fait dans le MXML. pourquoi pas si c'est une petite application. Attention en revanche, gestion des données peu réutilisable, code d'accès dupliqué et disséminé dans le projet

2- DAO
Créer une classe par accès aux tables : exemple classe ContactDAO pour accéder à la table Contact.
Possiblités d'ajouter les techniques de gestion du mode déconnecté : créer une interface ContactDAO et implémenter dans une classe ContactDAOSQLite pour l'accès local et ContactDAORemote pour les accès au serveur.

Object Relational Mapping (ORM) framework
Si vous regardez le DAO : ya beaucoup de code... Une solution plus intéressante est de configurer la relation entre le monde objet et le monde relationnel dans un fichier de configuration le framework ORM génèrera à la volée les bonnes requètes SQL.

Utilisation des metadata (annotations comme [Bindable] qui se récupère sur l'objet au Runtime avec describeType() ); attention il faut ajouter dans les paramètres de compilation vos annotations. Le code du framework est sur le blog.

Synchro avec le serveur (gestion du mode déconnecté)
Assurée par FDS automatiquement... (du code pour les autres :-)

Les sources sur le blog : coenraets.org

Raoul

AIR Security

Tue, 16 Oct 2007 15:39:04 +0200

A mon avis, le clef du succès de AIR. Une session importante donc.

Installation Elevation attaque Injection attaques pb desktop Installation .air installation badge install rien n'est installé tabnt que l'utilisateur n'a pas été au bout de l'install signé par une chaine ou un CA approuvé (Verisign par ex) Privileges Browser (ok) -> Applet, local swf, google gears, lcal js dans ie AIR, exe, dmg Dans l'install seul endroit du choix pour l'utilisateur En résumé : install : privilège - Air comme une appli native Elevation attaque le code obtient des privilèges qu'il ne devrait pas avoir. Injection attaque code injecté dans une appli en flash Loader.loadBytes(); exemple json (car ya un eval derrière) Injection ; solutions : séparer le code et les données. Exemple pour une requête SQL : preparedStatement Attaque desktop créer fichier, acès registre ou services avec des droits d'écriture upload/download attacks Modèle de sécurité de AIR AS et javascript dans AIR a bcp plus de privilèges que ds un browser AIR 1.0 ne fait pas Guide de sécurité

Flash player internals

Tue, 16 Oct 2007 11:46:43 +0200

Présnté par Lee thomasson ; Des réflexions sur le flash player et son fonctionnement ; pour initiés :-)

Garbage collection (gc)
attention aux weak références dans les Event listeners et les dictionnairies
il n'y aura pas d'api pour le déclencher à la main

Text
Encoding
international
layout
rendering
Device
dessinner par l'os et celà varie (os, browser, préférence)
chaining ?
Embedded
police dans le swf
Shape renderer (glyph text, anti aliasing pour les animations)
Saffron (flashtype, fatest, depuis la 8, très lisible, moins bon à l'animation)

Full screen depuis assez longtemps mais pas forcément connu
normal
scaled dans moxie par le gpu (processeur graphique)
pas uniquement video (mais il n'y a pas de clavier à cause de la sécurité, ce qui limite !)

Performance de rendu
maintenant et futur
muti core
gpu

Movie Star (fp9 update 3 sur le lab en beta)
cross domain caching (sécurité ?)
fullscreen gpu acceleration
codec h264 et aac
multi threaded rendering
AS3 profiler (pour la vue profiling de FlexBuilder 3)
encrypted stream (fms)
mip mapped -> optim des bitmap pour les changements de taille

Questions

multi thread (pas d'annonce ; ils y réfléchissent)
limite en taille 2880 (fp 10 ?)
pourquoi pas de version de debug sur le lab pour movie star ? (en raison des coûts) : Notez que cela rend movie star pratiquement inutilisable pour faire du développement Flex

Raoul

Session générale

Tue, 16 Oct 2007 09:46:50 +0200

Présentation des produits à venir. Top :-)

1- Une partie serveur LiveCycle. Je n'ai pas tout pris. Disons rapidement que l'ancien Flex Data Service fait maintenant partie de la suite LiveCycle. LiveCycle est à la base un produit serveur qui permet de générer de pdf (avec toute les fonctionnalités avancées style signature, formulaires
Il faut noter qu'il y a maintenant une offre couplée avec Flex client qui permet de laisser l'utilisateur saisir ses info en Flex et de générer les pdf correspondants

Une partie très intéressante sur les services. Ce sont des fonctionnalités qui seront accessibles en ligne. Adobe proposera donc des serveurs et il sera possible de louer les fonctionnalités. Un peu comme Connect (anciennement breeze) qui fait de la visioconférence. Le truc intéressant pour nous développeur c'est que l'on aura des api sur ces services pour développer nos softs.

- Scene 7, une boite rachetée par Adobe. C'est un serveur d'image. à l'aide d'une api assez simple (basée sur les url) on peut faire du traitement assez sophistiqué sur les images à mettre en ligne (dimensionnement, changement de couleur, alpha ...) tout ça au travers d'une url ! Ils ont montré un exemple en Flex d'un site de vente de maillot de basket customisable en ligne et un en AIR avec une tv d'achat. Toutes les images étaient servies par scene7 (les urls à venir)

- Share data un serveur qui permet de mettre a disposition des video, des ppt etc. Accessible via une api en xml rest. Ils ont fait un exemple de partage de fichier directement dans une application flex.
Beta : asobe.com/go/share

- Pacifica
Un service temps réel partage d'infos (voip, messagerie, video à venir) : une démo voip dans flex. Un appel depuis un téléphone mobile récupéré dans une appli Air, impressionant !
C'est en alpha pour l'instant. A venir video p2p...

- Connect api
J'en parlais au début. Les api sont maintenant dispo sur flex... On peut très semplement intégrer à nos applis Flex des composants de collaboration chat, webchat, authentification, liste des connectés...
C'est constitué de la partie service sur les erveurs d'Adobe et d'une api de connexion à ce service. Dans Flex, il suffit ensuite via des composants visuels de partage, webcam, whiteboard de rendre ces services disponibles à nos utilisateurs...
Bluffant, un witheboard partagé en 3 ligne de MXML...

On a ensuite vu un nouvel outil : Thermo
Thermo est un outil pour les designers pour faire des applications flex... ou au moins les parties graphiques.
Pour être plus basique, Thermo permet dans une interface assez simple, proche d'un outil de graphiste de dessinner des chose sophistiquées et de générer automatiquement le MXML correspondant.
Il est aussPossible de récupérer des projets photoshop ou illustrator. A partir de ce qui a été récupéré il est possible, tout en gardant le rendu de transformer certaine partie en bitmap en composants Flex standard. Par exemple un bitmap similant une zone de saisie est remplacée par un TextInput.
Très prometteur ! Alpha dispo début 2008

Raoul

MAX, jour deux

Tue, 16 Oct 2007 09:04:54 +0200

Je suis en retard à la session de départ. La journée va être ultra chargée !!!

Mauvaise news pour la video, j'ai pas pris le bon cable. J'ai vu une fnac à côté, j'vais essayer d'y aller à midi. je continue quand même à filmer. Je mettrai à jour plus tard.

Mon agenda : http://ical.mac.com/WebObjects/iCal.woa/wa/default?u=baao&v=2&n=MAX.ics