• KapInspect

KapInspect est l’équivalent Flex de la célèbre console Firebug. Activée sur un simple clic elle permet d’inspecter l’ensemble des composants flex présent sur la page, de visualiser et de modifier leurs propriétés.

• Cairngorm console et purMVC console
  

Ces consoles permettent de visualiser à l’exécution les différents composants du framework.

L’intégration est très simple. Après avoir inclus les .swc dans le classpath de votre projet il suffit d’insérer les tags correspondants dans votre fichier mxml

Par exemple :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:kapit="fr.kapit.*"> ... <kapit:KapInspect/> </mx:Application>

A l’exécution il suffit d’enchainer la combinaison Ctrl+Alt+Click pour voir apparaitre la console. A noter que on peut utiliser en parallèle les différentes consoles.
L’intégration de la console pureMVC est un peu plus couteuse car elle nécessite de modifier le code de votre Facade afin d’étendre la classe DebugFacade. Tout est expliqué la

• Un public apparemment plutôt issu du monde « marketing », dommage je pense qu’il est temps que le monde du services et des éditeurs d’applications d’entreprises s’intéressent à ce sujet.
• Heureusement la présentation de People In Action a apportée une vision du RIA dans l’entreprise. Bien que le domaine de l’entreprise soit à différencier des domaines marketings et divertissements, il est tout de même intéressant de constater que les méthodes de conception sont similaires et que les composants visuels et notamment ceux de navigation peuvent être utilisés partout.
• Le secteur du jeu est une source d’information prolifique en terme d’ergonomie, il faut vraiment continuer à regarder ce qu’ils font et s’en inspirer
• Un projet d’interface riche ne peut réussir que si le système d’information est bien organisé, c’est à dire selon moi proche d’une architecture SOA. TequilaRapido a du stopper un projet car le socle métier n’était pas adapté.
• Il ne faut pas attendre tout des utilisateurs, celui-ci à plutôt tendance à éviter d’avoir mal plutôt que de risquer quelque chose de nouveau comme le dit très justement Patricia GALLOT-LAVALLEE. Mais il faut tout de même le remettre au centre du projet.
• Les interaction design pattern doivent être utilisés, c’est un fait. Je pense personnellement que l’approche « Event Driven » est la meilleure pour ce type d’application avec les pattern qui en découle.
• A la grande déception de Fred il n’existe toujours pas d’outils de conception, d’après les gars d’Adobe Thermo devrait s’améliorer sur ce point on en saura plus après l’Adobe MAX.
• Il n’y a pas de secret la réussite des projets RIA passe par les méthodes agiles. On ne sait pas tout dès le début, les besoins évoluent au cours du projet au fur et à mesure que les utilisateurs découvrent l’application à travers les différentes présentations à la fin de chaque itération. C’est vraiment ce type méthode qui doit être utilisée.
• Le RIA ce n’est pas que via le navigateur comme je le répète souvent et que le dit très bien Dick LANTIM de Microsoft. Le panel est large. Les nouveaux périphériques (surface, touch wall, capteur de mouvement, tablet pc, mobile …) changent aussi la façon d’appréhender les applications et doivent faire partie prenante de la réflexion lors de la conception. Microsoft a son mot à dire sur le sujet et je constate qu’ils sont bel et bien dans la course, il faudra penser avec eux désormais (comme me le disait Didier en revenant de la PDC).
• Microsoft et Adobe toujours présents pour ce type de rendez-vous, on se demande où malheureusement est Sun, je crois pourtant en JavaFX techniquement parlant.

C’est la 4ème année qu’ont lieu ces journées de l’utilisabilité partout dans le monde (43 pays). Personnellement je découvre cet évènement et je remercie Fred Cavazza de le promouvoir.
Penser les RIA en terme d’utilisabilité est bien le défi qui fera le succès du « riche ». Bien connaître les possibilités des technologies tant matérielles que logicielles et repositionner l’utilisateur au cœur du projet sont des éléments essentiels.

Les présentations seront bientôt disponibles en vidéo sur le site worldusabilityday.org.

L’avantage est que la classe privée utilisée dans le constructeur n’est visible que dans le classe Singleton car elle est définit hors du package.
En effet le code suivant dans une autre classe provoque une erreur à la compilation

Singleton s=new Singleton(new PrivateClass())};
Voila une façon élégante d’implémenter ce pattern.

• l’accès aux resources locales (fichiers, applications, périphériques USB, serie, Bluetooth) est un argument pour pencher vers le RDA. Bien que cela peut être pallié avec un applet et de plus en plus avec Gears (mais cela revient à mixer RDA et RIA, pourquoi pas d’ailleurs c’est ce que je fais) et que le Flash plugin permet déjà l’accès à la caméra.
• la notion de « push », pour envoyer des données vers un client depuis le serveur est maintenant possible avec des RWA (Comet, reverse Ajax) et bientôt standardisée dans HTML 5 (WebSocket).
• les échanges asynchrones via des MOM avec des queues coté client ne peuvent pas encore se faire en RWA. Gears devrait proposer une API et LifeCycle Data Service ne le propose pas reellement car la queue reste coté serveur.
• l’uniformisation des applicatifs avec une même plate-forme de déploiement indépendante de l’OS est sûrement l’argument le plus percutant pour le SI pour choisir une RWA

GlassButton.fx

Je crée alors une deuxième classe qui va gérer la disposition des touches en bouclant sur un tableau de caractères.

Keyboard.fx

Et puis j’insère le tout dans un Applet en suivant les conseils de James Weaver

GlassButtonApplet.fx

Ci-dessous le résultat, cliquez sur les touches et pour le sortir du navigateur vous enfoncez la touche alt et déplacez l’Applet. Le temps de génération est long (30s) soyez patient, je ne comprends pas pourquoi, je vais demander à Sun.

Note : le fait de pouvoir sortir l’Applet du browser oblige à créer un JNLP et donc de signer tous les jars dépendant de l’Applet. Un peu laborieux il faut penser à automatiser cette tâche :

1. création du certificat : keytool -genkey [-keystore <cheminDuKeystore>] -alias <nomDuCertificat>
2. signature de jat : jarsigner [-keystore <cheminDuKeystore>] <monFichier>.jar <nomDuCertificat>

Bilan
En mettant bout à bout le temps passé en développement pur on peut compter environ 4h, incluant la prise en main de JavaFX. C’est correct mais il serait bien de pouvoir réduire encore ce temps. Il est selon moi difficile de manipuler du JavaFX sans au moins un visualiseur temps réel digne de ce nom. Celui fournit dans NetBeans 6.1 est un peu lent. Enfin l’idée est là et elle est prometteuse car avec le Java Plugin à 4Mo on pourra enfin avoir des applis riches full Java qui ont l’avantage d’être en mesure de faire plus que la concurrence : accès aux périphériques serie, Bluetooth, … du poste client, utilisation d’API Java existantes (ex : JMS), bascule en mode desktop, …

L’ochestrateur à le rôle bien particulier de mettre en harmonie le technique et le visuel avec le métier. Toute la difficulté réside à trouver la personne qui maîtrise les trois concepts précités et est capable de comprendre les subtilités de différents métiers. A mon avis la réussite d’un projet client riche passe par cette approche.

En cliquant sur le bouton on charge dans le grid un nombre variable d’enregistrements et on affiche dans le label le temps nécessaire en secondes pour ce chargement. Le test à été réalisé avec 10, 50, 100, 500 et 1000 enregistrements.
Les temps sont mesurés à la fois dans Internet Explorer 7 et dans Firefox.
Dans un souci de transparence j’ai également effectué les mesures avec Rialto.

FLEX

J’ai tout d’abord essayé l’environnement d’Adobe. Après s’être créé un compte, il faut télécharger et installer Flex Builder 3
Ensuite tout est assez intuitif de la création de projet, à l’exécution de notre fichier mxml de test.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;			     
		    [Bindable]
		    private var gamesData:ArrayCollection; 
			private function initDataGridData():void
			{
			  var gamesData:ArrayCollection = new ArrayCollection();
			  var date=new Date();
			  var start = date.getTime();
				for (var i=0;i<10;i++){
			  		gamesData.addItem({ID: i, Data1: start, Data2: "Data2"});
			  	}
                                grid.dataProvider = gamesData;
				date = new Date;
				var end = date.getTime();
				var sec = (end-start)/1000;
				lab.text="Load in:"+sec; 
			}
         ]]>
    </mx:Script>
 	<mx:Button y="10" x="400" click="initDataGridData()" label="load"/>
     <mx:Label x="490" y="10" id="lab"
      text="Wait:"
      fontSize="16" fontWeight="bold"/>
    <mx:DataGrid id="grid" x="10" y="5"  
      width="300" height="250" selectedIndex="0">
      <mx:columns>
        <mx:DataGridColumn dataField="ID" headerText="ID" width="100"/>
        <mx:DataGridColumn dataField="Data1" headerText="Data1" width="100"/>
        <mx:DataGridColumn dataField="Data2" headerText="Data2" width="100"/>
      </mx:columns>
    </mx:DataGrid>
</mx:Application>

La documentation est assez claire.
Avec Flex le rechargement du Grid se fait en modifiant la propriété dataProvider du composant.

grid.dataProvider = gamesData

Ext js

Pour réaliser les test dans un environnement javascript j’ai opté pour la librairie la plus en vue du moment (en bien et en mal )
J’ai utilisé Ext 2.0.2. Je trouve la prise en main un peu plus « compliquée ». Il faut un fichier HMTL qui contient les inclusions des différents fichiers js et css nécessaires à Ext. Puis on crée un fichier javascript contenant le code de notre application.

Ext.onReady(function() {
	 var oData=new Array;
	 for (var i=0;i<1000;i++){
  		oData.push([i,"data1","data2"]);
  	}

	 Ext.get('myButton').on('click', function(){
       var date = new Date;
		start = date.getTime();
		var d =new Ext.data.Store({data:oData,reader: myReader});
		grid.reconfigure(d,grid.getColumnModel());
		date = new Date;
		end = date.getTime();
		var sec = (end-start)/1000;
	    var myDiv = Ext.get('lab');
	    myDiv.dom.innerHTML="Load in: "+sec;
    });

	var myData = [['','','','']];

	var myReader = new Ext.data.ArrayReader({}, [
		{name: 'id'},
		{name: 'd1'},
		{name: 'd2'}
	]);

	var grid = new Ext.grid.GridPanel({
		store: new Ext.data.Store({
			data: myData,
			reader: myReader
		}),
		columns: [
			{header: 'ID', width: 100, sortable: true, dataIndex: 'id'},
			{header: 'Data1', width: 100, sortable: true, dataIndex: 'd1'},
			{header: 'Data2', width: 100, sortable: true, dataIndex: 'd2'}
		],
		viewConfig: {
			forceFit: false
		},
		renderTo: 'content',
		title: 'My First Grid',
		width: 300,
		height: 300,
		frame: true
	});

	grid.getSelectionModel().selectFirstRow();
});

La documentation est très bien faite et on sent la richesse du composant. Par contre pour une utilisation simple le code devient lourd à manipuler.

Le rechargement du Grid se fait en modifiant l’objet Store et en appelant la méthode reconfigure

var d =new Ext.data.Store({data:oData,reader: myReader});
grid.reconfigure(d,grid.getColumnModel());

GWT-Ext

Au départ je voulais tester l’environnement GWT uniquement mais le composant Grid natif est trop simple et s’apparente plus à un simple tableau HTML. J’ai donc testé le composant Grid dans le wrapping GWT-Ext. Le code ressemble donc beaucoup à celui indiqué ci-dessus.

Panel panel = new Panel();
panel.setBorder(false);
panel.setPaddings(15);
lab=new Label("Load");
panel.add(lab);
Button but = new Button("Load", new ButtonListenerAdapter() {
public void onClick(Button button, EventObject e) {
		   Date now = new Date();
		   long start = now.getTime();
		   //treatment
		   Object[][] data = getData(1000);
		   MemoryProxy proxy = new MemoryProxy(data);
		   ArrayReader reader = new ArrayReader(recordDef);
		   Store store = new Store(proxy, reader);
		   store.load();
		   grid.reconfigure(store, columnModel);
		   now = new Date();
		   long end = now.getTime();
		   float sec = (new Float((end-start)).floatValue())/1000;
		   lab.setText("Load in: "+sec);
}
});  

panel.add (but);

recordDef = new RecordDef(
		 new FieldDef[]{
		 new StringFieldDef("id"),
		 new StringFieldDef("data1"),
		 new StringFieldDef("data2")
		 }
);  

		         grid = new GridPanel();  

		         Object[][] data =new Object[][]{new Object[]{"", "", ""}};
		         //Object[][] data= getData(1);
		         MemoryProxy proxy = new MemoryProxy(data);  

		         ArrayReader reader = new ArrayReader(recordDef);
		         Store store = new Store(proxy, reader);
		         store.load();
		         grid.setStore(store);  

		         ColumnConfig[] columns = new ColumnConfig[]{
		                 new ColumnConfig("ID", "id", 100),
		                 new ColumnConfig("Data 1", "data1", 100),
		                 new ColumnConfig("Data 2", "data2", 100)
		         };  

		         columnModel = new ColumnModel(columns);
		         grid.setColumnModel(columnModel);  

		         grid.setFrame(true);
		         grid.setStripeRows(true);
		         grid.setHeight(350);
		         grid.setWidth(600);
		         grid.setTitle("Array Grid");  

		         panel.add(grid);  

		         RootPanel.get().add(panel);
		     }  

		     private Object[][] getData(int numberElmt) {
		    	 Object[][] data =new Object[numberElmt][2];
		    	 for (int i=0;i
Le site officiel regroupe des informations utiles, un très beau showroom , la documentation de l'API

Le principe de rechargement est bien sur le même qu’avec Ext js.
RESULTATS
Les temps sont indiqués en secondes.



Sans surprise Flex offre des résultats largement au dessus des autres mais n’oublions pas que nous comparons un langage compilé avec un langage interprété (même GWT au final s’exécute en javascript). Je suis plutôt surpris des résultats affichés par GWT que je voyais moins bon. 
On note, comme souvent, de meilleurs résultats dans firefox que dans IE.
En tout cas un test très intéressant à faire pour appréhender les nouveaux acteurs du RIA de demain.
]]>
			http://www.itaware.eu/2008/05/13/flex-vs-ajax-vs-gwt-sur-le-grid/feed/
		6
		
		
		
		http://www.itaware.eu/2008/04/29/les-applications-web-asynchrones/
		http://www.itaware.eu/2008/04/29/les-applications-web-asynchrones/#comments
		Tue, 29 Apr 2008 15:12:15 +0000
		Sébastien Letélié
				
		
		

		http://www.itaware.eu/2008/04/29/les-applications-web-asynchrones/
		
			C’est un fait les applications Web deviennent asynchrones. En effet l’arrivée d’AJAX à permis d’en finir avec des temps de réponse long due à la vielle pratique du response-request loop pour charger une page entière. Bien avant AJAX cette technique était déjà pratiquée en utilisant une Applet cachée qui permettait d’accèder à un MOM (Message Oriented Middleware). Le MOM ne serait il pas en train de s’imposer comme l’architecture d’échange la plus appropriée des applications web ? 


Je constate actuellement en tout cas que c’est une réponse à un besoin des applications web pour gérer différents aspects 

synchronisation, 
temps de réponse, 
mode déconnecté, 
assurance de l’acheminement des données. 

Actuellement le MOM est surtout utilisé pour les deux premiers aspects et moins pour les deux suivants. La plupart du temps c’est un serveur dédié à cela vers lequel les messages sont transmis. Si ce serveur tombe ou que le réseau est coupé en amont l’applicatif renvoi une erreur de transmission. C’est typiquement le cas dans Life Cycle Data Service : le mode messaging permet de synchroniser et d’améliorer les temps de réponse, mais si on coupe le réseau les messages envoyés par le client sont perdus. Par ailleurs l’application que je développe actuellement utilise Eclipse RCP pour embarquer une application Web qui communique aussi avec du messaging à la différence que j’utilise une queue locale, qui m’assure l’acheminement de mon message. La solution s’appuie sur MQSeries et MQ Everyplace d’IBM et la mise en place est complexe mais elle répond aux 4 aspects. Pour que Life Cycle Data Services puisse faire la même chose et ainsi proposer des applications mobiles adaptées il faut faire évoluer le Flash Player pour permettre au développeur d’utiliser une queue locale. 
Est-ce la fin d’HTTP ? La est l’inconvénient d’une architecture asynchrone car l’intérêt d’HTTP est de passer les firewall et l’utilisation d’un autre protocole bride la diffusion d’une application web. Qu’a cela ne tienne il suffit d’exploiter le protocole HTTP avec du MQ ce qui se fait déjà.
N’oublions cependant pas que ce modèle implique que l’utilisateur ne soit pas dépendant de la réponse, or la plupart des requêtes le sont. D’où la nécessité d’une base de donnée locale permettant le mode déconnecté. Les échanges client / serveur étant alors réduit à une synchronisation de base de données à base de données. Cela ne devient il pas trop lourd en terme de déploiement et de gestion ? pas vraiment car les bases de données embarquées existent déjà (Java DB via Java Plugin, SQLite via Google Gears) . Oui mais qu’en est il du chargement de la base de données ? En effet il faut bien initialiser cette base au moins une première fois ce qui peut prendre du temps mais tout dépend du besoin attendu.
 
Cette architecture représentée dans le schéma ci-contre est sûrement l’idéale pour certains types d’applications Web nécessitant une autonomie. Elle est encore difficile à mettre en place car elle demande un paramètrage lourd et les outils ne sont pas intuitifs. A terme cela devrait devenir complètement masqué au développeur qui utiliserait des méthodes send/receive sans se préoccuper du reste. Les solutions sont la car le messaging est une technologie éprouvée, il nous manque juste un outil ou un framework permettant la mise en place d’une telle architecture d’une manière simple.
]]>
			http://www.itaware.eu/2008/04/29/les-applications-web-asynchrones/feed/
		0
		
		
		
		http://www.itaware.eu/2008/04/20/exo-platform-enterprise-suite/
		http://www.itaware.eu/2008/04/20/exo-platform-enterprise-suite/#comments
		Sun, 20 Apr 2008 09:37:13 +0000
		Sébastien Letélié
				
		

		http://www.itaware.eu/2008/04/20/exo-platform-enterprise-suite/
		
			C’est avec plaisir que j’ai pu assister à la présentation de la dernière gamme de produit pour l’entreprise du portail eXo platform. Benjamin Mestrallet et Francois Moron ont réussi à réunir des personnes de qualité que même les plus grands aimeraient avoir pour leur présentations. Après un bref historique de eXo platform Benjamin à présenter les 4 produits entreprises :


ECM 
Collaboration Suite (mail, contact, calendrier) 
Live room (video conference) 
Forum / Faq 



Il s’en est suivi 2 présentations de projet utilisant eXo platform :

intranet d’M6 
intranet du Ministère des finances belge 

Tous deux content du choix et confiant pour la suite (les deux projets n’étant pas encore complètement terminés). La plate-forme s’appuie sur les standards et offre un framework personnalisable et évolutif.
En deuxième partie une table ronde était organisée avec

Tristan Nitot, Mozilla, 
Christophe Lauer (Microsoft) 
Eric Mahe (Sun Microsystems) 
Dave Armstrong (Google) 
Benjamin Mestrallet (eXo Platform) 
Mickaël Chaize (Adobe) 

Des questions sur qu’est-ce qu’une application Web aujourd’hui, sur l’approche SaaS (qui s’incrit bien dans le portail), sur le comment gérer le mode "offline", sur l’interface riche et l’expérience utilisateur. Tristan insiste sur les standards et il a raison et vanne Microsoft tant qu’il peut ce que je trouve vraiment dépassé et souvent infondé. Microsoft a depuis un moment déjà une démarche d’ouverture et offre une vrai capacité d’interopérabilité aujourd’hui avec WCF. C’est ce que confirme Julien Cordoniou sans oublier de présenter l’offre S+S. Dave Armstrong montre bien que l’approche de Google est d’offrir avec leur outils en ligne la capacité au plus petits de faire des choses comme les plus grands. Eric Mahe reste sceptique et insiste sur la qualité, j’adhère et je pense que Java a encore de beaux jours à vivre grâce notamment à cette vision. Mickaël Chaize confirme la vision que j’ai de la politique d’Adobe et met en avant l’approche éditeur et collaboration designer/développeur qui leur donne aujourd’hui une notoriété à part entière. 
Tristan Nitot as t il raison de dire que la notion de plugin dans le navigateur est une erreur ? J’aimerais aussi qu’il y ait des standards mais les utilisateurs n’attendront pas 10 ans. La vision Microsoft / Adobe / Sun de dire que le navigateur est le point d’entrée des applications riches mais qu’il n’a pas vocation à les contenir toutes est plus approprié. Le SaaS a encore beaucoup à faire pour répondre aux problématiques de sécurité et d’hébergement de données sensibles. Le portail a déjà fait du chemin dans le monde de l’entreprise et IBM en a pris une bonne part avec Websphere Portal Server avec beaucoup de déboires. D’ailleurs cela aurait été bien que IBM soit représenté aussi, dommage.
Le WebOS est une solution d’avenir mais à long terme, car la gestion de l’existant doit passer par une refonte si elle veut s’intégrer à un tel portail, ce qui n’est pas dans les moyens de tout le monde. Quant à ma question sur la capacité d’intégrer les périphériques locaux (port serie, USB, bluetooth) la c’est "joker" pour tout le monde, comme si le besoin n’avait pas été identifié. Pourtant l’entreprise suite propose un carnet de contact il serait donc intéressant de pouvoir déclencher l’appel sur son portable ou son fixe par un clic ou de récupérer des informations sur le carnet de contact et l’agenda de son téléphone. 
C’est intéressant et enrichissant de voire se confronter des spécialistes technologiques, mais j’ai parfois l’impression que le besoin utilisateur n’est pas le moteur des réflexions et qu’il se perd parfois pour laisser place à nos visions. Je pense qu’il est indispensable pour nous les experts technologiques de ne jamais perdre le contact avec l’utilisateur. Pour ma part j’apprécie tous les jours de travailler en direct avec des médecins qui me font bien comprendre que ma passion pour les technologies doit me permettre de répondre à leurs attentes. Le client riche n’est que le résultat de ce manque. Nous ne devons pas oublier que nous sommes aux services de leurs rêves pas des nôtres.
]]>
			http://www.itaware.eu/2008/04/20/exo-platform-enterprise-suite/feed/
		1
		
		
		
		http://www.itaware.eu/2008/04/18/xebia-mise-sur-flex/
		http://www.itaware.eu/2008/04/18/xebia-mise-sur-flex/#comments
		Fri, 18 Apr 2008 12:18:03 +0000
		Cyril Balit
				

		http://www.itaware.eu/2008/04/18/xebia-mise-sur-flex/
		
			Vous pouvez retrouvez sur TV4IT une interview de Guillaume Bodet (DT de Xebia) pour un premier retour d’expérience sur Flex vs Ajax. Malgré mon attachement naturel vers les technologies Ajax je regarde vraiment de très prêt l’offre Adobe et j’avoue : je suis séduit….Je pense publier quelques billets bientôt sur ce sujet. Je nuancerais juste un peu les propos de Guillaume Bodet sur l’avenir d’ajax. Là ou il voit une « technologie transitoire » je préfère penser que les technos Ajax deviendront le standart minimum pour développer une application web. Je pense qu’Ajax (j’aime pas cet acronyme qui veut tout  et rien dire à la fois) a donc encore de beaux jours devant lui mais il faut  absolument commencer à s’immerger dans l’environnement d’ Adobe.

]]>
			http://www.itaware.eu/2008/04/18/xebia-mise-sur-flex/feed/
		2