Archive for 'Flex'
Flex allégé : Utilisez le framework en RSL
Posted on 02. avr, 2009 by admin.
Rappelez-vous lorsque vous avez créé votre premier “Hello World” en Flex. Avez-vous eu la curiosité de regarder la taille du fichier swf généré ?
Avec Flex 3, ce fichier pèse environ 275 Ko (et 170 Ko en version release). A l’heure des bandes passantes à 8Mb/s ce n’est certe pas grand chose, mais tout de même. Si votre site, et je vous le souhaite, est visité par des milliers d’utilisateurs par jour, ce sont quelques Ko de trop.
La raison est assez simple : chaque application Flex contient une partie du framework. Le Flash Player ne contient aucune classe Flex, ce qui le rend plus léger au téléchargement et aussi plus indépendant des évolutions.
Adobe nous donne cependant la possibilité de séparer notre swf applicatif des classes du framework.
Il y a un gros avantage à cette façon de déployer notre application. Le framework peut donc être disponible au téléchargement en tant qu’entité propre (sans classes applicatives). Il se trouve alors sous la forme d’un fichier d’extension .swz (signé par Adobe, qui pour le moment est la seule société à pouvoir signer des librairies). Ce fichier signé, une fois téléchargé, peut alors résider dans le cache du Flash Player (et pas du navigateur comme un vulgaire swf).
Vous voyez tout de suite l’intérêt si toutes les applications Flex étaient compilées de cette manière. Plus personne n’aurait à télécharger le framework, et les applications Flex seraient allégées en poids.
Comment procéder ? C’est très simple. Sous Flex Builder, dans les propriétés du projet (clic droit sur le projet puis Properties), sélectionnez “Flex Build Path” dans le panel de gauche.
Là, la combo box intitulée “Framework linkage” affiche par défaut “Merge into code” (c’est à dire que le framework est intégré dans le swf de votre application).
Il suffit de sélectionner l’autre option “Runtime shared library (RSL)” pour externaliser le framework.
Après cette opération, le projet est recompilé, et vous pouvez voir apparaître dans le répertoire bin-debug, les fichiers framework_3.2.0.3958.swz et framework_3.2.0.3958.swf.
Ces deux fichiers sont à déployer sur votre serveur de production, dans le même répertoire que votre application Flex.
(Note: Le swf est pour les Flash Player < 9.0.115 )
Le fichier du framework pèse environ 550 Ko. C’est donc pénalisant lors du premier chargement (quand le Flash Player ne l’a pas dans son cache). Mais par la suite on gagne quelques centaines de Ko.
Une petite action de plus pour sauver la planète !
Continue Reading
Générer des swf Flash Player 10 avec FlexBuilder 3.0.2
Posted on 05. fév, 2009 by admin.
1- Récupérer une version de debug du FP10
Sur downloads dans la rubrique “Adobe Flash Player 10 Update for Flash CS4 Professional” télécharger le gros zip de 41 Mo.
Dézipper et dans le répertoire Debug, prendre l’installeur qui vous correspond. (ActiveX pour IE, Plugin pour FireFox) et aussi les versions standalone.
2- S’assurer d’avoir la version 3.0.2 de FB
En effet, celle-ci contient le SDK 3.2 dont le compilateur sait générer des swf pour le FP10. Pour vérifier votre version de FB, menu Help/About Adobe FlexBuilder 3 en bas à gauche pour la version (procédure de maj ?)
3- Récupérer le projet
Ce projet contient une appli qui utilise la nouvelle API du FP10 pour le File Reference (en parler)
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:net="flash.net.*"> <mx:Script> <![CDATA[ private function saveAsFile():void { fr.save(logArea.text, "MyFile.txt"); } private function loadFile():void { fr.browse(); } private function loadComplete():void { var bt:ByteArray = fr.data as ByteArray; logArea.text = bt.readUTFBytes(bt.length); } ]]> </mx:Script> <net:FileReference id="fr" complete="loadComplete()" select="fr.load()"/> <mx:Panel height="100%" width="100%"> <mx:TextArea id="logArea" height="100%" width="100%"/> <mx:ControlBar> <mx:Button label="Load" click="loadFile()"/> <mx:Button label="Save" click="saveAsFile()"/> </mx:ControlBar> </mx:Panel> </mx:Application>
Normalement, par défaut ce projet ne devrait pas compiler (l’API FP10 n’est pas reconnue)
4- FP10 Pour le projets de type ‘Flex Project’
Il suffit d’aller dans les propriétés du projet ;
dans l’onglet “Flex compiler” mettre la version du wrapper à 10 - 0 - 12
C’est tout (normalement, ça devrait recompiler tout seul) et les erreurs devrait partir. Si ce n’est pas le cas, faire un clean
-Yann
Continue Reading
Créer une java web app (jsp) avec Flex builder 3 et Tomcat 6
Posted on 04. jan, 2008 by olivier.
Note : Si vous avez installé Europa EE et Flex Builder 3 plugin, configuré Tomcat, vous allez voir qu’il est assez simple de créer une application mixte Java et Flex.
Sinon rendez-vous sur mon billet sur ce même blog.
1- Créons la JavaFlexApp
a- Création du projet Flex
Dans la perspective Flex Development allez dans le menu File->New->Flex Project
b- Etape 1
- Project Name : JavaFlexApp
- Application Type : Web Application
- Application server Type : J2EE
- Décochez Use remote object…service
- Cochez Create combined…WTP
- Changez le java source folder : srcjava
Next…
c- Etape 2
J’ai laissé toutes les valeurs par défaut
Next…
d- Etape 3
J’ai changé pour srcflex (je préfère 
Finish…
Pour ceux qui ont connu l’équivalent en Flex 2, c’est trop simple
2- Codons la partie serveur
a- Créons la classe Clock
Basculons dans la perspective J2EE pour créer la classe Java com.baao.test.Clock (cliquez droit sur le répertoire Java Resources: srcjava puis New-> Class) dont voici le code:
package com.baao.test; import java.util.Date; public class Clock { public String getTimeAsString() { return (new Date()).toString(); } }
b- Créons la JSP ClockView.jsp
Cliquons droit sur le répertoire WebContent puis New->JSP. Recopions le code ci-dessous:
<xml version="1.0" encoding="utf-8"?> <%@page import="com.baao.test.Clock;"%> <% //Pour éviter la mise en cache par le navigateur de la réponse response.setHeader("Cache-Control","no-cache"); response.setHeader("Pragma","no-cache"); response.setDateHeader ("Expires", 0); %> <info> <date><%= (new Clock()).getTimeAsString() %></date> </info>
Testons
- Lancer le serveur s’il ne tourne pas (dans la vue serveur)
- Sélectionnons la JSP par un click droit Run as->Run on server
- Sélectionnez le bon serveur (Tomcat 6 chez moi)
- Ajoutons JavaFlexApp au projet
- Update du Context Root
- Finish…
3- Du Flex, du flex, du flex !
Création
Dans srcflex, remplaçons le contenu de la JavaFlexApp.mxml par:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="clockService.send()"> <mx:HTTPService id="clockService" url="ClockView.jsp"/> <;mx:Label id="clockLabel" text="{clockService.lastResult.info.date}"/> <mx:Button label="Refresh!" click="clockService.send()"/> </mx:Application>
b- Exécution
Sur ce mxml, click droit puis Run as->Flex Application
Bienvenue dans le monde JavaFlexApp
-Yann
Continue Reading
BlazeDS avec Flex builder 3, Tomcat 6 et les webtools
Posted on 03. jan, 2008 by olivier.
“Y’a des mecs qui retirent leur galure en entendant son blaze !”– Michel Audiard
BlazeDS, c’est la véritable bombe thermonucléaire de Flex 3. Le SDK ou le builder n’ont pas été radicalement changé en version 3, mais la partie serveur de Flex, vendue très chère en version 2, voit certains de ses services passés opensource. le nom de l’affaire : BlazeDS !
Premier service que je vous propose d’étudier, l’un des plus important, la connexion directe du client Flex avec une classe façade Java (dans le monde Flash/Flex, cela s’appelle le Remoting).
Damned !, une JavaFlexApp, un fichier de config et le tour est joué !
0- Les installations
- un FB3 beta 3 avec Europa EE et Tomcat (ou équivalent) : voir mon doux billet d’installation.
- avoir récupéré BlazeDS beta 1 (c’est un zip) : la page sur le lab et l’url de download
- dézippez BlazeDS. Je désignerai le répertoire de dézip par Répertoire-BlazeDS
1- Créons la BlazeApp
a- Créer le projet
Dans la perspective Flex Development allez dans le menu File->New->Flex Project
b- Dans le wizard 1
Project Name : BlazeApp
- Application Type : Web Application
- Application server Type : J2EE
- Cochez use remote object en choisissant LiveCycle Data Service
- Cochez Create.. WTP
- Changez le java source folder : srcjava
Next…
Création du projet avec le magicien - Vue 1
c- Dans le Wizard 2
Sélectionnez Apache Tomcat v6.0 pour le Target runtime. J’ai laissé toutes les autres valeurs par défaut sauf le Flex war file que j’ai positionné à : Répertoire-BlazeDS/blazeds.war (si une erreur apparaît ici, vérifiez bien que vous utilisez la version beta 3 ou + du plugin Flex builder). Next…
Création du projet par le magicien - Vue 2
d- Dans le Wizard 3
J’ai changé le Main source folder pour srcflex (je préfère :-). Finish…
Création du projet par le magicien - Vue 3
Mazette, c’est presque prêt !
2- Configurons un peu
a- Les jars
L’installation Blazeds sur Tomcat nécessite de placer 2 jars dans le lib de Tomcat (pas dans le lib de l’application)
Répertoire-BlazeDS/tomcat/lib/blazeds/flex-tomcat-server.jar dans Répertoire-Tomcat6/lib
Répertoire-BlazeDS/tomcat/lib/blazeds/flex-tomcat-common.jar dans Répertoire-Tomcat6/lib
b- Changer le nom du Context root (bug ?)
Ouvrez les propriétés du projet (clic droit sur son nom dans la vue Flex Navigator), puis cliquez sur l’élément Flex Server pour changer le Context root en /BlazeApp.
Changement du ContextRoot
3- Codons un peu
La classe Java
Créons la classe Java com.baao.test.Clock (dans la perspective J2EE, cliquons droit sur le dossier Java Resources: srcjava puis dans le menu contextuel New Class) dont voici le code:
package com.baao.test;
import java.util.Date;
public class Clock
{
public String getTimeAsString()
{
return (new Date()).toString();
}
public Date getTime()
{
return new Date();
}
}
Configuration Serveur
Référençons cette classe Java dans le fichier de config du remoting.
Dans le projet, éditons /WebContent/WEB-INF/flex/remoting-config.xml. A la fin du fichier, juste avant le tag </service>, ajoutons la référence à notre classe :
<destination id="clock">
<properties>
<source>com.baao.test.Clock</source>
</properties>
</destination>
Côté Flex
Dans BlazeApp.mxml, connectons-nous à cette classe:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="clockService.getTimeAsString()">
<mx:RemoteObject id="clockService" destination="clock"/>
<mx:Label id="clockLabel" text="{clockService.getTimeAsString.lastResult}"/>
<mx:Button label="Refresh!" click="clockService.getTimeAsString()"/>
<mx:Label id="clockLabelTime" text="{clockService.getTime.lastResult}"/>
<mx:Button label="Refresh!" click="clockService.getTime()"/>
</mx:Application>
Testons
Dans la vue du serveur, arrêtons le serveur s’il tourne pour lui ajouter la nouvelle application
- click droit sur le serveur puis Add/Remove Project
- ajoutons BlazeApp
- Finish
- relançons le serveur
Lançons l’application Flex en cliquant droit sur le fichier BlazeApp.mxml puis Run as->Flex Application
Exécution de l'application
Bienvenue dans le monde BlazeApp
-Yann
Continue Reading
Flex3 (standalone) et Tomcat 6 pour Mac
Posted on 02. jan, 2008 by olivier.
Préambule : On peut installer Flex 2 et Flex 3 en même temps sur la même machine. Il faut toutefois faire attention à 1 point : Ne pas mettre un projet Flex 2 et un projet Flex 3 dans le même Workspace.
Bien que j’ai l’habitude de travailler avec Eclipse directement et d’y ajouter les plugins, la nouvelle version 3 de FlexBuilder en standalone (qui intègre directement Eclipse) permet d’ajouter les plugins qui nous intéressent (contrairement à la version précédente). C’est donc une installation tout à fait utilisable dans “la vraie vie Flex”.
En revanche, la version packagée d’Eclipse n’intègre pas directement les WebTools, nécessaires pour faire du développement Web Java et du BlazeDS par exemple. Nous ferons donc la petite manipulation pour l’intégrer.
Afin de pouvoir exécuter des applications Flex dans le monde Java, je vais aussi installer Tomcat.
Autre chose importante, un gestionnaire de version. Lorsqu’on commence à travailler en équipe, c’est indispensable d’avoir ce genre d’outil. Chez BaaO nous travaillons avec Subversion. Allez hop, compris dans ce billet
Dernière chose, nous avons essayé de prendre les dernières versions pour tous
les environnements
Remarques : prenez bien la version EE (Enterprise Edition) qui contient en particulier les Webtools qui permettent de gérer Tomcat en développement.
1- Installons FlexBuilder 3 beta 3 standalone
Url de téléchargement : flex builder 3 version standalone (Prendre l’installeur “Standalone Installer”)
Installation :
- Vous remarquerez que l’installeur propose le choix d’une langue au début. Bon ya que l’anglais pour l’instant mais peut-être une version française bientôt disponible ?
- Acceptez la licence : 30 jours de démo…
- J’ai installé l’aplication dans l’endoit par défaut : /Application
- J’ai installé les players proposés mais pas les extensions pour Coldfusion ni le plugin JSEclipse
- “Install” et laissez mijoter quelques minutes et voilà, c’est prêt
Installation de Flex Builder réussie !
Pour tester rapidement si tout fonctionne, lancez /Applications/Adobe Flex Builder 3/Flex Builder.app. Je l’ai mis dans le dock. Vous êtes normalement invités à utiliser la licence d’essai (trial)…
Par défaut votre espace de travail, le WorkSpace d’eclipse (un répertoire où vous mettrez les ressources des projets), se trouve avec FlexBuilder 3 dans /Users/<votre-compte>/Documents/Flex Builder 3. Mon expérience m’a montré que l’on avait besoin de plusieurs WorkSpace pour les projets que l’on fait ou que l’on récupère etc. Je vous suggère donc de créer un répertoire WorkSpaces, que je mets dans Documents, dans lequel je mets tous mes WorkSpace. Par exemple, ici, j’ai créé un répertoire WTest dans mon WorkSpaces.
Après la page de bienvenue, vous arrivez normalement dans la perspective Flex Dev (perspective par défaut de Flex Builder). Dans cette perspective, créez un nouveau projet Flex (Menu File/New/Flex Project - Project Name : Test - Finish). Ajoutez un Label à l’application. Testez (Dans Flex Navigator, click droit sur Test.mxml -
Run as/Flex Application). Bienvenue dans Flex 3 !
2- Ajoutons les WebTools
- Menu Help/Software Updates/Find and install
- Choisissons Search for new features to install
- Cochons Europa Discovery Site puis Finish
- Choisissons un site mirroir
- Nous avons alors une liste de fonctionnalités à installer
- Cochons la dernière : Web and JEE Development
- Ce module dépend d’autres modules, d’où la croix rouge…
- Cliquons sur Select Required… et oh! magie, toutes les dépendences sont résolues
- Cliquons sur Next, acceptons les licences, acceptons les modules optionnels (Next) puis cliquons sur finish
Il est suggéré de redémarrer ; redémarrons donc…
Pour finir, la mise en place des WebTools nécessite un petit nettoyage des workspaces utilisés avant l’installation du plugin. C’est assez simple à faire, il faut relancer eclipse avec l’option -clean.
Arrêtons donc Eclipse.
Click droit sur /Applications/Adobe Flex Builder 3/Flex Builder.app et choisissons Afficher le contenu du paquet (sous Mac, les applications sont des répertoires)
Dans Contents/MacOS ouvrons FlexBuilder.ini avec TextEdit par exemple
Ajoutons sur la première ligne (et pas sur une autre) l’option -clean (avec un retour à la ligne). Exemple :
-clean -vmargs -Xdock:icon=../Resources/flexbuilder.icns -Xdock:name=Flex Builder -XstartOnFirstThread -Xms128m -Xmx512m -XX:MaxPermSize=256m -XX:PermSize=64m -Dorg.eclipse.swt.internal.carbon.smallFonts -Dorg.eclipse.swt.internal.carbon.noFocusRing
Relançons Flex Builder ; vous devriez noter que c’est un peu plus long (2 ou 3s) …
Voilà, c’est propre. Nous pouvons retirer le -clean du fichier ini. Notez que vous pouvez le laisser. Le démarrage sera juste plus long, mais vos workspace seront toujours propres. A vous de voir.
Pour tester rapidement, amenons la perspective Java EE dans notre espace de travail (Menu Window/Perspective/Other ; Prenons Java EE) ; Bien, bien. Pour faire quelque chose de sérieux, installons Tomcat.
3- Tomcat 6
Url de téléchargement : serveur Tomcat (version core .zip)
Une fois le répertoire dézippé (apache-tomcat-6.0.14 chez moi), déplaçons-le sous /Bibliothèque. Voilà, c’est installé.
Vous pouvez, de la meme manière installer une version 5.5 de Tomcat si vous préférez. Les 2 peuvent d’ailleurs cohabiter (attention toutefois au port 8080 de lancement qui est le même pour les 2)
Pour tester rapidement que Tomcat se lance bien, revenez dans Eclipse, basculez dans la perspective Java EE.
En bas dans la vue Server créer un serveur :
- Click droit New/Server
- Choisissez Apache/Tomcat v6.0 Server puis Next
- Clickez sur browse pour récupérer la racine de notre serveur Tomcat (/Bibliothèque/apache-tomcat-6.0.14)
- Cliquez sur Finish.
Voilà, il reste plus qu’à le lancer : cliquez sur bouton vert à droite de la vue Server 
Le serveur ronronne
…
Vous êtes fin prêt pour créer votre première JavaFlexApp
-Yann
Continue Reading
Flex3 (standalone) et Tomcat 6 pour Windows
Posted on 02. jan, 2008 by olivier.
Préambule : On peut installer Flex 2 et Flex 3 en même temps sur la même machine. Il faut toutefois faire attention à 1 point : Ne pas mettre un projet Flex 2 et un projet Flex 3 dans le même Workspace.
Nous allons mettre en place la version 3 du 28/02/08. Il est nécessaire de désinstaller les versions 3 précédentes (beta 1, beta 2 ou beta 3) avant de mettre cette version finale.
Bien que j’ai l’habitude de travailler avec Eclipse directement et d’y ajouter les plugins, la nouvelle version 3 de FlexBuilder en standalone (qui intègre directement Eclipse) permet d’ajouter les plugins qui nous intéressent (contrairement à la version précédente). C’est donc une installation tout à fait utilisable dans “la vraie vie Flex”.
En revanche, la version packagée d’Eclipse n’intègre pas directement les WebTools, nécessaires pour faire du développement Web Java et du BlazeDS par exemple. Nous ferons donc la petite manipulation pour l’intégrer.
Afin de pouvoir tester notre installation, nous allons aussi installer Tomcat.
Dernière chose, nous avons essayé de prendre les dernières versions pour tous
les environnements au moment de la rédaction de l’article
1- Installons FlexBuilder 3 standalone
Url de téléchargement : flex builder 3 version standalone
Installation :
- Vous remarquerez que l’installeur propose le choix d’une langue au début. Bon ya que l’anglais pour l’instant mais peut-être une version française bientôt disponible ?
- Acceptez la licence : 60 jours de démo…
- J’ai installé l’application dans l’endroit par défaut : c:Program FilesAdobeFlex Builder 3
- J’ai installé les players proposés mais pas les extensions pour Coldfusion ni le plugin JSEclipse
- “Install” et laissez mijoter quelques minutes. Voilà ! C’est prêt
Installation réussie!
Pour tester rapidement si tout fonctionne, lancez l’application (démarrer->Tous les programmes->Adobe->Adobe Flex Builder 3). Vous êtes normalement invités à utiliser la licence d’essai (trial)…
Par défaut votre espace de travail, le WorkSpace d’eclipse (un répertoire où vous mettrez les ressources des projets), se trouve avec FlexBuilder 3 dans C:Documents and SettingsPropriétaireMy DocumentsFlex Builder 3.
Après la page de bienvenue, vous arrivez normalement dans la perspective Flex Dev (perspective par défaut de Flex Builder). Dans cette perspective, créez un nouveau projet Flex (Menu File/New/Flex Project - Project Name : Test - Finish). Ajoutez un Label à l’application. Testez (Dans Flex Navigator, click droit sur Test.mxml -
Run as/Flex Application). Bienvenue dans Flex 3 !
2- Ajoutons les WebTools
- Menu Help/Software Updates/Find and install
- Choisissons Search for new features to install
- Cochons Europa Discovery Site puis Finish
- Choisissons un site mirroir
- Nous avons alors une liste de fonctionnalités à installer
- Cochons la dernière : Web and JEE Development
- Ce module dépend d’autres modules, d’où la croix rouge…
- Cliquons sur Select Required… et oh! magie, toutes les dépendances sont résolues
- Cliquons sur Next, acceptons les licences, acceptons les modules optionnels (Next) puis cliquons sur finish
Il est suggéré de redémarrer ; nous allons redémarrer après une petite manipulation…
En effet, la mise en place des WebTools nécessite un petit nettoyage des workspaces utilisés avant l’installation du plugin. C’est assez simple à faire, il faut relancer eclipse avec l’option -clean dans un fichier de paramétrage de l’outil.
Arrêtons donc FlexBuilder 3.
Dans notepad, ouvrons le fichier de configuration FlexBuilder.ini qui se trouve dans le répertoire C:Program FilesAdobeFlex Builder 3.
Ajoutons sur la première ligne (et pas sur une autre) l’option -clean (avec un retour à la ligne). Exemple :
-clean -vmargs -XstartOnFirstThread -Xms128m -Xmx512m -XX:MaxPermSize=256m -XX:PermSize=64m
Relançons Flex Builder ; vous devriez noter que c’est un peu plus long (2 ou 3s…)
Voilà, c’est propre. Nous pouvons retirer le -clean du fichier ini. Notez que vous pouvez le laisser. Le démarrage sera juste plus long, mais vos workspace seront toujours propres. A vous de voir.
Pour tester rapidement, amenons la perspective Java EE dans notre espace de travail (Menu Window/Perspective/Other ; Prenons Java EE) ; Bien, bien. Pour faire quelque chose de sérieux, installons Tomcat.
3- Tomcat 6
Url de téléchargement : serveur Tomcat (prendre la version version core .zip)
Une fois le répertoire dézippé (apache-tomcat-6.0.16 chez moi), déplaçons-le sous C:Program Files. Voilà, c’est installé.
Vous pouvez, de la même manière installer une version 5.5 de Tomcat si vous préférez. Les 2 peuvent d’ailleurs cohabiter (attention toutefois au port 8080 de lancement qui est le même pour les 2 par défaut)
Pour tester rapidement que Tomcat se lance bien, revenez dans Eclipse, vous devez normalement être dans la perspective Java EE (sinon allez-y).
En bas, dans l’onglet de la vue Server créer un serveur :
- Clic droit dans la fenêtre puis New/Server
- Choisissez Apache/Tomcat v6.0 Server puis Next
- Cliquez sur browse pour récupérer la racine de notre serveur Tomcat (C:Program Filesapache-tomcat-6.0.14)
- Cliquez sur Finish.
Voilà, il reste plus qu’à le lancer : cliquez sur bouton vert à droite de la vue Server 
…
Le serveur ronronne
Vous êtes fin prêt pour créer votre première JavaFlexApp
-Yann
Continue Reading
Flex3 (plug-in) et Tomcat 6 avec Europa pour Windows
Posted on 27. déc, 2007 by olivier.
Afin de pouvoir travailler tranquillement, installons proprement et professionnellement Flex 3.
Préambule : On peut installer Flex 2 et Flex 3 en même temps sur la même machine. Il faut toutefois faire attention à 2 points :
- Il ne faut pas installer le plugin de Flex 3 dans le même Eclipse que celui de Flex 2 ;
- On ne peut pas mettre un projet Flex 2 et un projet Flex 3 dans le même Workspace.
J’ai l’habitude de travailler avec Eclipse directement et d’y ajouter les plugins. Cela me permet de savoir quel est l’Eclipse que j’ai installé et d’y mettre les plugins que je veux.
Je ferai donc une installation de FlexBuilder 3 sous forme de plugin et non pas flexbuilder avec Eclipse
packagé (version appelée standalone par Adobe).
Afin de pouvoir exécuter des applications Flex dans le monde Java, je vais aussi installer Tomcat et tout ce qu’il faut pour développer dans Tomcat avec Eclipse et FlexBuilder.
Dernière chose, nous avons essayé de prendre les dernières versions pour tous les environnements
JDK 6
Url de téléchargement : environnement java
Installation : J’ai dit oui à toutes les valeurs par défaut.
Remarques : le JRE devrait être OK si vous préférez. Ca devrait aussi passer avec Java 5 (1.5.X) mais je n’ai pas testé.
Eclipse 3.3 EE, nom de code Europa (contient les Webtools)
Url de téléchargement : IDE éclipse J2EE
Installation : L’installeur d’éclipse est en fait un zip. Installer, c’est donc dézipper.
Je vous propose de dézipper dans Program Files. J’ai renommé le répertoire principal Europa pour ne pas confondre avec mes versions précédentes d’eclipse.
J’ai de plus changé le fichier eclipse.ini. Faites-en d’abord une sauvegarde et remplacez son contenu par :
-vmargs -Xms128m -Xmx512m -XX:MaxPermSize=256m -XX:PermSize=64m -Djava.net.preferIPv4Stack=true
Ce sont les paramètres de l’installation standalone de FB3. Sans eux, la création de projets de type J2EE plante… Si vous avez la chance d’avoir 2 Go de RAM, vous pouvez pousser -Xmx512m à -Xmx1024m.
Remarques : prenez bien la version EE (Enterprise Edition) qui contient en particulier les Webtools qui permettent de gérer Tomcat en développement.
flexbuilder 3 plugin
Url de téléchargement : flex builder plugin (Prendre l’installeur “Eclipse Plugin”)
Installation :
- Vous remarquerez que l’installeur propose le choix d’une langue au début. Bon ya que l’anglais pour l’instant mais peut-être une version française bientôt disponible ?
- Acceptez la licence : 30 jours de démo…
- J’ai installé le plugin dans l’endoit par défaut : C:Progam FilesAdobe.
- Le répertoire où vous avez installé eclipse précédemment. Moi c’est C:Program FilesEuropa (cf point 2-)
- J’ai installé les players proposés mais pas les extensions pour Coldfusion ni le plugin JSEclipse
(Note : Contrairement à de nombreux plugins Eclipse, FlexBuilder installe d’abord tous ses fichiers dans un répertoire à lui et dans un deuxième temps l’installeur fait le lien entre Eclipse et son répertoire d’installation)
Laissez mijoter quelques minutes et voilà, c’est prêt
Remarques : Pour tester rapidement si tout fonctionne, lancez C:Program FilesEuropaeclipse.exe. J’en ai fait un raccourci sur le bureau. Sélectionnez un Workspace (un répertoire de travail où vous mettrez les ressources des projets). Mon expérience m’a conduit à créer un répertoires WorkSpaces dans lequel je mets tous mes WorkSpace.
Ici j’ai par exemple créé un répertoire WEuropaTest dans WorkSpaces.
Après la page de bienvenue, vous arrivez normalement dans la perspective J2EE (perspective par défaut d’Europa EE)
Ajouter la perspective Flex (Menu Window/OpenPerspective/Other… = Flex development). Dans cette perspective, créez un nouveau projet Flex
(Menu File/New/Flex Project - Project Name : Test - Finish). Ajoutez un Label à l’application. Testez (Dans Flex Navigator, click droit sur Test.mxml - Run as/Flex Application). Bienvenue dans Flex 3 !
Tomcat 6
Note : Si vous avez déjà un Tomcat 5.5 d’installé vous pouvez l’utiliser ; Il n’est pas possible d’installer 2 versions de Tomcat
(chez moi, il y a un problème de service)
Url de téléchargement : serveur tomcat (prendre la versin core .zip)
Installation :
- Acceptez la licence
- Installation des modules standards : Start Menu Items et Documentation
- Installation dans Program Files
- port 8080 ; admin/votreMotDePasse
- j’ai choisi le répertoire du jdk1.6 sous Program Files/Java (même s’il demande un 1.5)
- A la fin de l’installation, décochez le lancement de Tomcat (nous le lancerons à notre convenance dans Eclipse) ;
Assurez-vous d’ailleurs qu’il ne se lance pas automatiquement sous forme de service.
remarque : pour tester rapidement que Tomcat se lance bien, revenez dans Eclipse, basculez dans la perspective J2EE.
En bas dans la vue Server créer un serveur :
- click droit/new/Server
- choisissez Apache/Tomcat v6.0 puis next
- Faites un browse pour récupérer la racine de notre serveur Tomcat
- (Program Files/Apache…/Tomcat6.0)
- Next puis finish.
Voilà, il ne reste plus qu’à le lancer : bouton vert…
Vous êtes fin prêt pour créer votre première JavaFlexApp
-Yann