Parisjug : Soirée RIA

Posted in Flex, Java/J2EE on juillet 10th, 2009 by Ajrarn

…j’ai participé à ma première soirée parisjug le 7 juillet.

Durant cette soirée dédiée aux RIAs, ont eu lieu 2 présentations intéressantes sur : Flex et JavaFX.

La présentation Flex a été réalisée par François Le Droff, architecte technique chez Adobe France, qui a mis en avant l’arrivée de Flex 4, l’utilisation de Spring Flex (voir mon post à ce sujet) et une petite démo de Catalyst.
Si je devais émettre une petite critique, je dirai que l’orateur a sans doute voulu trop en montrer dans un laps de temps trop court. La difficulté était que peu de personnes présentes connaissaient Flex : ceux-ci n’ont peut-être pas découvert grand chose de plus et les autres ont certainement été un peu noyés par la masse d’informations successives… Mais le présentateur n’est pas à blâmer, bien au contraire, l’exercice se révélant difficile et le début de la conférence étant quelque peu chaotique avec des problèmes de micro. Je suis en tout cas particulièrement intéressé pour récupérer le contenu de cette conférence et j’espère que parisjug mettra ça en ligne!

La présentation JavaFX a été réalisé en anglais par Simon Ritter, un évangéliste Java chez Sun. Excellent orateur, j’aurai tendance à dire l’inverse de la conférence précédente. M. Ritter nous en a montré trop peu en passant beaucoup de temps à nous présenter la syntaxe du langage de script de JavaFX et en détaillant ses APIs. Les démos de conclusion ont par contre été efficaces : la dernière incluant une WiiMote et une gestion Bluetooth par Java a eu un franc succès!

Cette première soirée parisjug m’a bien plu et on m’y reverra à l’avenir. Le grand nombre de participants assurent son succès et il y a là du potentiel relationnel.
La prochaine soirée concerne la Qualité du logiciel, à laquelle je ne pourrai malheureusement pas assisté pour cause de vacances.
Je ferai en sorte d’être des deux suivantes : JSF 2.0 et Google.

Tags: , , ,

Spring BlazeDS Integration

Posted in Flex, Java/J2EE on juin 14th, 2009 by Ajrarn

… utiliser Flex 3 pour développer vos applications internet riches, c’est très bien, mais cette technologie ne se suffit pas à elle-même. En effet, Flex gère toute la partie IHM, c’est à dire, ce qui est visible et manipulable de votre application, mais cette technologie a besoin d’être couplée à un langage serveur, qui, en général, s’occupera du traitement métier (accès aux bases de données, etc.).

Il est fréquent de combiner Flex et Java pour répondre à ce besoin.
Adobe propose un projet open source, nommé BlazeDS, permettant de réaliser la passerelle entre le client Flex et le code métier Java. Il s’agit, en pratique, d’une servlet, ayant pour rôles d’invoquer les services Java adéquats, de traduire les objets Action Script de Flex en objet Java et vice-versa.

D’un autre côté, l’utilisation du framework Spring au sein des projets Java/J2EE devient presque incontournable (Spring, c’est par ici). Alors, bien sur, l’envie est forte de combiner Flex et Spring et jusqu’à peu de temps, on passait par une factory Spring pour réaliser celà (un tutoriel developpez.com très bien fait sur la question).

Mais les choses ont évolué depuis. Adobe et Springsource ont travaillé main dans la main pour la création d’un nouveau projet Spring : Spring BlazeDS Integration. Concrètement, Spring prend la main sur BlazeDS et toute la configuration se passe dans son fichier de configuration.
La pleine puissance de Spring dans son application Flex, ça donne envie!

J’ai décidé de reprendre le principe détaillé dans le tutoriel de developpez.com (voir ci-dessus) mais en le modifiant pour utiliser la version GA de Spring BlazeDS Integration, toute fraîche d’il y a quelques jours.

Pour commencer, vous aurez besoin de :

Décompressez tout ça et installez le JDK si nécessaire, puis lancez Eclipse.
Créez un nouveau projet Flex et donnez-lui un petit nom (SpringFlex dans mon cas), puis sélectionnez J2EE dans Application server type et cliquez sur Next.
Définissez votre serveur J2EE en sélectionnant Tomcat 6 et en pointant sur votre répertoire d’installation, puis indiquez la WAR de BlazeDS (il se trouve à la racine du répertoire dans lequel vous avez décompressé l’archive de BlazeDS).
Cliquez sur Finish, votre projet est créé.
Pour finir la configuration, cliquez droit sur ce nouveau projet et cliquez sur Properties.
Sélectionnez Flex Server et dans le champs Context Root, ajoutez le contexte de votre application (/SpringFlex dans mon cas).
Pour finir, dans la vue Servers (menu Windows / Show View / Other / Server / Servers) de votre Eclipse, faîtes un clic droit, sélectionnez Add and Remove Projects… et ajoutez votre projet dans les Configured projects.

Si vous galérez lors de ces étapes de configuration, allez jeter un oeil sur le tutoriel developpez.com. Tout y est clairement détaillé avec des captures d’écran.

Bon, les choses sérieuses commencent!

Pour ajouter Spring à votre application, il vous faut copier tous les fichiers jars, situé dans le dossier dist de votre répertoire d’installation de Spring dans le répertoire WebContent/WEB-INF/lib de votre projet.
Faîtes de même avec les jars ANTLR (situé dans le dossier lib de votre répertoire d’installation ANTLR), puis copiez le jar de spring flex (répertoire dist de votre répertoire d’installation de Spring BlazeDS Integration).
Il vous en manque encore (oui oui) mais comme je suis sympa, je vous les ai compressés ici. Ajoutez les également dans WebContent/WEB-INF/lib.

Il vous faut maintenant créer votre fichier de configuration Spring, que j’ai nommé application-context.xml (à la racine de WebContent/WEB-INF).
Voici son contenu :

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:flex="http://www.springframework.org/schema/flex" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="
    http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
    http://www.springframework.org/schema/flex 
    http://www.springframework.org/schema/flex/spring-flex-1.0.xsd">
    <bean id="welcomeServiceBean" class="fr.sokaris.service.WelcomeService"/>
    <flex:message-broker/>
    <flex:remoting-destination ref="welcomeServiceBean" />
</beans>

Comme vous pouvez le constater, nous définissons un bean correspondant à une classe WelcomeService.
Dans le répertoire src de votre projet, créez une nouvelle classe Java nommée WelcomeService et contenant le code suivant :

public class WelcomeService {
	public String sayHello(String pLogin){
		return "Bienvenue "+pLogin;
	}
}

Il faut ensuite que vous remplaciez votre fichier services-config.xml (situé dans WebContent/WEB-INF/flex) par celui-ci :

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
  <services>
    <default-channels>
      <channel ref="my-amf"/>
    </default-channels> 
  </services>
  <channels>
    <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
      <endpoint url="http://{server.name}:{server.port}/{context.root}/spring/messagebroker/amf" 
        class="flex.messaging.endpoints.AMFEndpoint"/>
    </channel-definition>
    <channel-definition id="my-polling-amf" 
      class="mx.messaging.channels.AMFChannel">
      <endpoint url="http://{server.name}:{server.port}/{context.root}/spring/messagebroker/amfpolling" 
        class="flex.messaging.endpoints.AMFEndpoint"/>
        <properties>
          <polling-enabled>true</polling-enabled>
            <polling-interval-seconds>4</polling-interval-seconds>
          </properties>
    </channel-definition>
  </channels>
</services-config>

Ce sont les seules modifications à apporter à ce fichier. Regardez-le bien, vous ne l’ouvrirez plus jamais.

Il faut maintenant modifiez le web.xml afin de le configurer pour Spring. Remplacez votre fichier existant par celui-ci :

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
  <display-name>SpringFlex</display-name>
  <servlet>
    <servlet-name>spring-flex</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>/WEB-INF/application-context.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>spring-flex</servlet-name>
    <url-pattern>/spring/*</url-pattern>
  </servlet-mapping>
</web-app>

Voilà, nous y sommes! La configuration est complète…

Nous allons maintenant pouvoir créer l’interface Flex, à proprement parlé, qui va appeler notre classe Java par l’intermédiaire de Spring. Cette interface (reprise du tutoriel developpez.com, je le rappelle) est très simple : une zone de saisie pour indiquer un nom, un bouton pour valider et une zone de texte permettant d’afficher le résultat renvoyé par notre bean Java.

Voici le code du fichier SpringFlex.mxml (situé dans le répertoire flex_src de votre projet) :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical" 
	width="451" 
	height="168" 
	paddingBottom="0" 
	paddingLeft="0" 
	paddingRight="0" 
	paddingTop="0">
 
  <mx:Script>
    <![CDATA[
      import mx.rpc.events.FaultEvent;
      import mx.rpc.events.ResultEvent;
 
      private function doCall():void{
        // Appeler le service distant
        roWelcomeService.sayHello(tiLogin.text);
      }
 
      /**
      * Méthode invoquée en cas de succès de l'appel RPC 
      */ 
      private function onResult(event : ResultEvent):void{
        // Afficher la réponse
        taReponse.text = event.result as String;
      }
 
      /**
      * Méthode invoquée en cas d'échec de l'appel RPC 
      */ 
      private function onFault(event : FaultEvent):void{
        // Afficher le message d'erreur
        taReponse.text = event.fault.message;
      }
 
    ]]>
  </mx:Script>
  <!--La balise mx:RemoteObject permet d'appeler
  le bean welcomeServiceBean--> 
  <mx:RemoteObject id="roWelcomeService" 
    destination="welcomeServiceBean"
    result="onResult(event)"
    fault="onFault(event)"/>
  <mx:Panel width="451" height="168"
    layout="absolute" 
    title="Hello World">
  <mx:Label x="10" y="10" text="Login : "/>
  <mx:TextInput id="tiLogin" 
    text="Guest"
    x="66" y="8" />
  <mx:Button id="btnAppel" 
    label="Appel de WelcomeService"
    x="234" y="8" 
    click="doCall()"/>
  <mx:Label x="10" y="38" text="Réponse :"/>
  <mx:TextArea id="taReponse" 
    x="81" y="37" width="327" height="81"/>
  </mx:Panel>
</mx:Application>

Nous y voilà enfin… Démarrez votre serveur tomcat, puis lancez votre navigateur sur l’URL suivante (à adapter en fonction du nom de votre projet) : http://localhost:8080/SpringFlex/SpringFlex.html

L’interface Flex devrait s’afficher dans la page html. Renseignez une donnée dans le champs login (exemple : Ajrarn) et cliquez sur le bouton Appel de WelcomeService.
Le résultat attendu (exemple : Bienvenue Ajrarn) s’affiche alors…

Vous allez vous dire : tout ça pour ça…

Je vous répondrai tout d’abord que vu le temps que j’y ai passé par rapport à vous pour parvenir à faire marcher tout ça, vous faîtes un bon deal! (^_^)
Deuxièmement, ce n’est évidemment qu’un petit tutoriel simpliste, qui ne fait que gratter la surface des possibilités. L’important derrière ce nouveau projet Spring est toutes les fonctionnalités qu’il apporte à vos applications Flex : authentification, sécurité, etc.
Intéressés? C’est par que ça se passe.

Tags: , , , ,

Flex et son composant mx:Parallel

Posted in Flex on mai 6th, 2009 by Ajrarn

…je voulais vous parler du composant <mx:Parallel> de Flex.

Pourquoi? Parce que je trouve ça tellement simple et intuitif à utiliser que je trouve que ça mérite qu’on s’y arrête rapidement.

Comme son nom le laisse deviner, ce composant permet de réaliser des actions en parallèle.

Pour faire un exemple simple et rapide de son fonctionnement, je vais voir fournir l’exemple d’une “galerie” d’images qui deviennent moins opaques lorsque vous pointez votre souris dessus et s’agrandissent.

Puis nous réaliserons l’effet inverse lorsque l’image perd le focus de la souris.

J’ai utilisé la balise <mx:Fade> pour réaliser le premier effet, en lui ajoutant des paramètres de durée  et <mx:Resize> pour le second.

Pour que les deux effets se déroulent en même temps, j’ai donc inséré mes deux composants dans un <mw:Parallel> pour les deux exemples (focus de l’image et perte de focus) et ai ajouté les paramètres rollOverEffect et rollOutEffect à mes images.

Un peu de visuel vaut mieux qu’un court discours donc :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute"
	themeColor="silver"
	backgroundColor="#FFFFFF"
	paddingTop="5"
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off">
	<mx:Canvas width="640" 
          height="560" 
          horizontalCenter="0">
	  <mx:Image 
	    x="250" 
	    y="30" 
	    source="@Embed(source='assets/flex.jpg')" 
	    width="40" 
	    height="38" 
	    toolTip="Flex" 
	    alpha="0.6" 
	    rollOverEffect="{fadeIn}" 
	    rollOutEffect="{fadeOut}"/>
	  <mx:Image 
	    x="298" 
	    y="30" 
	    source="@Embed(source='assets/air.png')" 
	    width="40" 
	    height="40" 
	    toolTip="Air" 
	    alpha="0.6" 
	    rollOverEffect="{fadeIn}" 
	    rollOutEffect="{fadeOut}"/>
	  <mx:Image 
	    x="346" 
	    y="30" 
	    source="@Embed(source='assets/android.png')" 
	    width="40" 
	    height="40" 
	    toolTip="Android" 
	    alpha="0.6" 
	    rollOverEffect="{fadeIn}" 
	    rollOutEffect="{fadeOut}"/>
	</mx:Canvas>
	<mx:Parallel id="fadeIn" duration="1000">
		<mx:Fade alphaFrom="0.6" alphaTo="1"/>
		<mx:Resize widthTo="50" heightTo="50"/>
	</mx:Parallel>
	<mx:Parallel id="fadeOut" duration="1000">
		<mx:Fade alphaFrom="1" alphaTo="0.6"/>
		<mx:Resize widthTo="40" heightTo="40"/>
	</mx:Parallel>
</mx:Application>

Et voici le résultat.

Plutôt simple et sympa, non?

Tags:

Attest pour préparer sa certification Flex 3

Posted in Flex on mai 2nd, 2009 by Ajrarn

… si, comme moi, vous envisagez dans un avenir plus ou moins proche, de vous présenter à l’examen pour la certification Flex 3, ou si vous voulez seulement voir ou vous en êtes dans vos connaissances sur Flex, je ne peux que vous conseiller de jeter un oeil ici.

Attest 1.5 est la nouvelle version d’un logiciel fonctionnant sur Air permettant de vous mettre dans des conditions très proches de l’examen de Adobe. Il a été réalisé par Dave Flatley de PXL Designs LLC Company et Holly Schinsky de Rich Desktop Solutions Inc. J’en profite pour les remercier pour l’énorme boulot qu’ils ont abattu. D’autant plus que leur logiciel est totalement gratuit pour les développeurs qui souhaitent se former.

D’après certains echos de personnes s’étant évaluées avec Attest et ayant passé la certification ensuite, il semble que les questions d’Attest sont même parfois plus compliquées que dans la réalité. Ca me rassure quelque peu car après quelques essais sur Attest, j’ai l’impression que ma certification est pour un avenir un peu moins proche que prévu! (^_^)

Tags: , , ,

La gestion de Camera avec Flex et les surprises de Google

Posted in Flex on mai 1st, 2009 by Ajrarn

… j’ai voulu tester dernièrement la gestion de ma webcam dans une application Flex.

Je me suis donc rendu sur les APIs de Adobe et ai découvert la méthode getCamera() de la classe flash.media.Camera. Selon les préconisations que j’y ai trouvé j’ai donc appelé bêtement cette méthode et l’ai attaché à un composant MXML VideoDisplay que j’ai identifié par la référence videoCamera :

var webcam:Camera = Camera.getCamera();
 
if(webcam) {
  videoCamera.attachCamera(webcam);
}
else {
  Alert.show("Vous ne semblez pas avoir de webcam."); 
}

Je lance mon application Flex et… rien. Le grand noir dans mon composant. Il semble donc que l’appli détecte quelque chose (sinon, j’aurai eu l’alerte) mais qu’elle ne m’affiche pas l’image…

Je vérifie les branchements de ma webcam, je la teste à travers une autre application. Aucun problème… Tout fonctionne normalement.

Je me dis que j’ai raté un truc et je me rends sur des sites qui fournissent des exemples d’applis utilisant la webcam comme celui-ci.

Idem.

Je décide donc de voir ce qui se passe sous le capot. Je rajoute notamment cette ligne de code pour voir quelles caméras sont détectées :

var cameraNames:ArrayCollection = 
                  new ArrayCollection(Camera.names);

Je passe en mode debug sur Flex Builder et là, surprise! L’appli ne me détecte pas une mais trois caméras! La première possède un libellé qui semble correspondre à la mienne et les deux autres sont : Google Camera Adapter 0 et Google Camera Adapter 1. De plus, il semble que, bizarrement, même si ma webcam est en première position dans la liste, ce soit le Google Camera Adapter 1 qui soit retourné par la méthode getCamera().

La surprise passée, je cherche un peu sur la toile et ne trouve que très peu d’infos sur ces 2 références. Il semble que lorsqu’on utilise GTalk pour dialoguer en vidéo, Google installe des composants sur votre ordinateur. Pas de quoi fouetter un chat, mais embêtant pour les applis Flex.

Je modifie donc mon code pour que la méthode getCamera() choisisse la première de la liste :

var webcam:Camera = Camera.getCamera("0");

Ca y est! Tout marche bien…

Vous trouverez ici un exemple dans lequel je liste les caméras détectées par Flex et demande de choisir celle qu’on souhaite utiliser pour afficher l’image.

Tags: , ,

Flex et quelques désagréments avec les polices embarquées

Posted in Flex on avril 30th, 2009 by Ajrarn

… peut-être vous êtes-vous dit, comme moi, qu’utiliser la capacité de Flex à pouvoir embarquer des polices directement dans les fichiers swf générés pouvait être intéressante pour éviter les sempiternelles Verdana, Arial and co qu’on croise à peu près partout sur la toile!

Alors, je me lance!

Je me rends sur le site http://www.dafont.com/fr/ et je télécharge pour l’exemple la police STARGUIDES. Je copie le fichier starguides.ttf dans mon répertoire C:\WINDOWS\Fonts pour pouvoir en profiter et je me lance dans mon code Flex :

[Bindable]
 
[Embed(source="C:\\Windows\\Fonts\\STARGUIDES.ttf",
           fontName="fontStarguides")]
 
private var fontStarguides:Class;

Petite précision : Ajouter des polices dans Flex augmente de manière conséquente la taille du fichier swf compilé. Idéalement, il faut définir les caractères qui seront utilisés pour réduire cette taille au minimum mais comme je suis fainéant, j’ai oublié cette étape!

Je teste avec des Text et des Label, la vie est belle, je passe au Button et… Là, c’est le drâme… Un bon vieux Times New Roman est venu reprendre son bon droit!!

Bien embêté, je commence des recherches pour résoudre ce problème et je finis par me rendre compte que la police que j’ai téléchargé n’a pas son pendant bold… Et c’est par défaut la décoration qui est utilisée par Flex dans l’affichage du libellé du bouton… Il faut donc prévenir Flex de changer ça en surchargeant le style du bouton dans une balise <mx:Style> :

Button {
  embedFonts: true;
  fontWeight: normal;
  fontFamily: "fontStarguides";
}

;

Ça résout mon problème! Je me lance alors dans un TabNavigator et… rebelotte. La colonne sélectionnée par l’utilisateur est incorrecte. Voici comment corriger ça :

TabBar {
  selectedTabTextStyleName: "fontStarguides";
}

Je vous le donne en mille, l’accordéon n’échappe pas à la règle. Il faut lui préciser la police des headers et la décoration de celle-ci :

Accordion {
  headerStyleName: accordionHeaderStyleName;
}
 
.accordionHeaderStyleName {
  fontFamily: "fontStarguides";
  fontWeight: normal;
}

Voilà, avec ces quelques configurations, nous pouvons profiter pleinement de notre nouvelle police de caractères et se démarquer un peu des autres.

La preuve en image : ici

Tags: , , , , , ,