Premier Pojet Flex 0

Puis on choisit : Flex builder > Flex Projet et on Valide

Premier Pojet Flex 1

Maintenant on donne un nom au projet, et on peut aussi changer le dossier de l’application. On peut aussi Choisir de faire une RIA (dans un navigateur) ou une RDA (application hors du navigateur). Pour l’instant on laisse Web Application. On peut dors et deja cliquer sur finish, les menus d’après ne servant qu’a definir des librairies et des répertoires par default. A la fin de la préparation du projet, eclipse nous propose de changer de perspective, il suffit de valider.

Voila on a une bonne structure pour commencer a travailler …

Articles en rapport : :

• Installer le plugin Flex pour eclipse sous Linux
• Installer Flex Builder 3 sous windows
• Mon premier projet en Flex
• Adobe flex builder avec Linux Ubuntu 9.04
• Initialisation d’un projet Zend Framework Avec Zend_Tool

Auteur : © Greg pour LyRiX Blog.
Article publié le : 17-06-2009, dans : Flex. Liens direct vers l'article (permalink)
Mot Clé : Flex, Flex Builder, Projet

1. On installe Eclipse Ganymede

On commence par télécharger eclipse Ganymede 32 bits pour Linux. Puis on va dans le dossier de téléchargement et on extrait l’archive. Ensuite, il faut passer en root sur son pc pour pouvoir copier eclipse dans le dossier /opt. On fait donc « ALT + F2″ puis on tape : « gksudo nautilus » puis on rentre son mot de passe. Il faut maintenant copier le dossier eclipse extrait de l’archive dans le dossier /opt.

2. On installe Adobe Flex Builder 3

On passe a Adobe flex builder pour linux, c’est toujours une alpha … il suffit de le télécharger puis de l’installer. Il faut ouvrir un terminal dans le dossier ou vous avez téléchargé flex builder,  on le rend executable, et on l’execute :

• chmod +x flexbuilder_linux_install_a4_081408.bin
• gksudo ./flexbuilder_linux_install_a4_081408.bin
• on accepte la licence
• on choisit le répertoire d’installation : /opt/Adobe_Flex_Builder_Linux
• on choisit le répertoire d’eclipse : /opt/eclipse
• sur l’écran d’après on clique sur « proceed with caution »
• on peut decocher « Adobe Flash player 9 for firefox » car je pense que vous avez deja la 10 !
• puis on finit l’installation en cliquant sur suivant

3. On met a jour Adobe Flex SDK 3.3

Voila, maintenant il faut télécharger le SDK 3.3 de Flex : ici, il faut ensuite de dézippé et le renomer en 3.3 puis le copier dans : /opt/Adobe_Flex_Builder_Linux/sdks  (il faut encore une fois etre en root). Normalemnt vous avez la meme architecture de fichier dans /opt/Adobe_Flex_Builder_Linux/sdks/3.0.0 que dans /opt/Adobe_Flex_Builder_Linux/sdks/3.3.

N.B. : Si vous ne voulez pas passé en root a chaque fois, il est possible de changer les droits utilisateur a ces dossier :

sudo chown -R $USER:$USER /opt/eclipse/
sudo chown -R $USER:$USER /opt/Adobe_Flex_Builder_Linux/

4. On met a jour Adobe Air SDK (Facultatif) :

On le télécharge ici. Puis  on le décompresse, pour enfin le copier dans : /opt/Adobe_Flex_Builder_Linux/sdks/3.3/bin (l’architecture du dossier dezziper doit correspondre a celle de /opt/Adobe_Flex_Builder_Linux/sdks/3.3/bin). Il y a des fichiers en conflit, il suffit de les ecraser

on doit par contre renomer deux fichiers (dans une console) :

cd /opt/Adobe_Flex_Builder_Linux/sdks/3.3/bin
mv adl adl_lin
mv adt adt_lin

5. On Configure Eclipse

On peut lancer FlexBuilder grace a la commande : /opt/Adobe_Flex_Builder_Linux/Adobe_Flex_builder.sh que l’on peut exécuter a partir du menu « ALT + F2″

Puis on va dans : Window -> Preferences -> Flex -> Installed Flex SDKs

install-eclipse-0

Puis On ajoute de dernier SDK qui se situe dans : « /opt/Adobe_Flex_Builder_Linux/sdks/3.3″  :

install-eclipse-1

6. Problème :

Il y a un léger problème avec ubuntu 9.04 et la version 3.4 de eclipse : il est impossible d’ouvrir dans eclipse des fichier mxml. Mais ne vous inquiétez pas il existe une solution très simple a mettre en œuvre.

Télécharger l’archive : plugins

Il suffit de dezipper l’archive dans : /opt/Adobe_Flex_Builder_Linux/eclipse/plugins
Si les noms des deux nouveaux .jar sont un petit peu différent des .jar existant, renommer les.

Et voila, l’installation est finit. Il ne reste plus qu’a commencer un nouveau projet. Pour les questions, y’a les commentaires

[poll id="2"]

Articles en rapport : :

• Installer le plugin Flex pour eclipse sous Linux
• Son premier projet en flex
• Installer Flex Builder 3 sous windows
• Adobe Flex
• Liste de sites pour bien commencer avec Flex

Auteur : © Greg pour LyRiX Blog.
Article publié le : 17-06-2009, dans : Flex. Liens direct vers l'article (permalink)
Mot Clé : Eclipse, Flex Builder, Installation, Plugins, Ubuntu

• Adobe AIR Tutorials. Articles, resources, tutorials, and downloads [EN]
• Adobe Flex 2 Component Explorer [EN] Description des éléments en Flex 2 par l’exemple
• Flex Examples [EN]
• Adobe Flex resources [EN] Ressource Flex 3 (site d’adobe)
• Flex.org – Rich Internet Application Development [EN]
• Code moi un mouton [FR] blog traitant de Flex
• Adobe FLEX Developer Connection [EN] Portail développer de Flex (site d’adobe)
• Adobe – Flex Developer Center [EN] Comment bien débuter avec flex (site d’adobe)
• Flex 2, Flex 3 et AIR – tutoriaux [FR]
• All Packages – Adobe® Flex™ 3 Language Reference [EN] FlexDoc des composants Flex 3

Et en bonus une petite astuce pour firefox : il est tout a fait possible de faire du Drag&Drop (glisser déposer) depuis la bibliotèque de liens (CTRL+MAJ+B) vers un textarea (une zone de texte dans un formulaire)

Articles en rapport : :

• Tuto Adobe
• Installer Flex Builder 3 sous windows
• Adobe flex builder avec Linux Ubuntu 9.04
• Adobe Flex
• Installer le plugin Flex pour eclipse sous Linux

Auteur : © Greg pour LyRiX Blog.
Article publié le : 24-11-2008, dans : Flex. Liens direct vers l'article (permalink)
Mot Clé : Flex, Site

Il y a aussi (que je n’avais pas vu hier soir) des exemples d’utilisations de connexion avec une base de donnée etc…

Bref le Flex Tour c’est une application en AIR, donc il suffit de la télécharger sur le site de flex.org . Si vous n’avez pas AIR, l’application vous propose directement d’installer AIR !! Quoi demander de plus ? honnêtement je ne sais pas !

Articles en rapport : :

• Application de site E-Commerce [Code-Source]
• Zend framework : Initializer et boot strap
• Architecture de Zend Framework en MCV
• Installation et parametrage d’un serveur @home sous linux ubuntu – partie 2
• Son premier projet en flex

Auteur : © Greg pour LyRiX Blog.
Article publié le : 19-11-2008, dans : Flex. Liens direct vers l'article (permalink)
Mot Clé : Code Source, Flex, Flex Tour, Tuto

Il y a une mise a jour de ce tuto a cette adresse :

http://blog.lyrixx.info/flex/son-premier-projet-en-flex/

Bon voila, flex est maintenant fraichement installé sous windows ou sous linux. Il ne reste plus qu’a créer un nouveau projet.

Bon le plus gros du travail , commencer par cliquer sur le raccourci flex buider pour le lancer .
Ensuite il faut faire : File>New>Flex Projet

• On donne un nom au projet, ici « MonPremierProjet« , ainsi qu’un chemin sur votre disque dur de l’emplacement du projet, ici « D:\Prog\flex\MonPremierProjet« .
• On peut ensuite choisir le type d’application : Web application ou Desktop application. Web application est une application qui sera exécuté dans un navigateur, et qui sera en fait un fichier flash (.swf). Il faudra bien entendu que l’utilisateur de l’application est préalablement installé Flash Player. Pour rappel, le Flash player a un taux de pénétration supérieur a 99%, donc ne vous faites pas de soucis. Desktop application est une application qui sera exécuté directement par le système d’exploitation, mais nous y reviendront plus tard.

On selectionne donc Web Application.

• La dernière partie sert a selectionné le type de d’application serveur que l’on utilise (php, J2EE,.NET etc) pour l’instant nous resterons sur none.

On peut d’ors et déjà cliquer sur finish.

Les petits curieux cliqueront sur next et obtiendront la fenetre suivant :

• Le « output folder » indique le répétoire ou les fichier seront compilés. Il y aura donc au moins un fichier .html et un fichier .swf.

Nous laissons bin-debug et cliquons sur next.

Il y a ici quelques informations à donner. Cependant je vous conseil de garder les informations par défaut.

• « Main source folder » sert a indiquer le répertoire de vous sources (.mxml …). Ici on laisse src.
• « Main Application file » sert a indiquer votre fichier principal (comme le main en java ou le index.php en php), ici on laisse MonPremierProjet.mxml (c’est le ‘nom du projet’.mxml).
• « Output folder url » sert a indiquer l’url du serveur ou seront exporter les fichiers compilés. Comme nous n’utilisons pas de serveur, on laisse ce champs vide.
• On peut aussi ajouter d’autre répertoire de fichier source, mais nous n’en avons pas besoin ici.
• Enfin on peut aussi ajouter d’autre librairie (dans le 2eme onglet « Librairie path »), mais nous commencerons avec les librairie par default.

On peut enfin cliquer sur finish.

Nous voila enfin dans flex builder. Pour ceux qui ne sont pas trop familier avec l’IDE, je vais vous faire une résumé rapide de l’environement (Cliquer pour agrandir):

1. Le répertoire src ou il y a vos fichiers sources. Ici il n’y a que MonPremierProjet;mxml. ce Répertoire est dans un dossier : MonPremierProjet.
2. Il y dans la version windows un gros avantage a la version linux : on peut passer en mode design. Dans Flex Builder Il y a deux grand mode de développement : Le mode design et le mode source. En mode design vous pouvez tout simplement glisser deposer des components (composants, qui se trouve dans la boite 3). Et en mode source, vous pouvez directement coder vos composants, ainsi que coder les scripts en AS3. On peut facilement faire une analogie avec Dreamweaver (pour ceux qui connaissent et/ou utilisent).
3. Dans cette boite, vous retrouverez tout les composants dont vous aurez besoin (bouton, image, label, lien, text etc …)
4. Et enfin dans cette boite vous retrouverez tout les informations et propriété de l’élément sélectionné.

On va maintenant faire une toute petite application qui vous donnera l’heure quand vous cliquerez sur un bouton. Il faut etre en mode design, c’est plus simple pour commencer.

Allons dans la boite 3 : Components, puis dans le dossier control, puis glisser deposer l’element button n’importe ou dans l’espace de travail (la zone bleu-gris).
Maintenant allons dans la boite 4 Flex Properties dans le champs id mettre : « MonBoutton« . Dans le champs label mettre « Clique moi !!!« .
C’est dans la boite 4 qui vous pouvez définir un style a tous vos éléments. N’hésiter pas à essayer des petits réglages perso.

L’ID du bouton est « MonBoutton » c’est grâce a lui que l’on pourra facilement l’identifier. Chaque ID doit etre unique.
Il est réelement préférable d’avoir deja des connaissances en création de site web en XHTML et CSS, ainsi que des connaissances en POO. Il y a de tres bon cours sur internet si vous voulez apprendre, comme sur le site du zéro.

On va maintenant glisser déposer un element TextInput sur notre zone de travail (de la même manière que précédemment). Et on va lui assigner les valeurs suivante : ID = « resultat » et pas de Text

Voila, notre plan de travail est pret, nous allons donc maintenant coder l’application pour qu’elle affiche l’heure lorque l’on clique sur le bouton « Clique moi !!!« .
Il faut donc passer maintenant en mode Source. Le mode source est une représentation de vote application en XML. vous n’avez pas besoin de grandes compétance en XML, cependant il est recommendé de savoir ce qu’est un namespace. En Flex, le namespace par default de mx, tous les composants commencent donc par mx:

On va tout d’abord ajouter une zone de code AS3 au code deja présent. D’ailleur vous pouvez voir qu’il y a belle et bien vos deux composants avec les propriétés que vous leurs avez mises.
On va donc ajouter la balise script a l’interieur de la balise Application. il suffit de se place en dessous de la balise <mx:application …> (inserer une ligne si il le faut) puis taper juste : ‘<mx:S‘. Normalement un menu apparait et affiche toutes les balises disponibles (si ce menu ne s’affiche pas, il suffit de faire CTRL+ESPACE (comment dans tout bonne IDE), il vous suffit alors de choisir ‘<mx:Script’ et de cliquer sur entrer puis de femer la balise. normalement la balise fermante s’ajoute ainsi qu’une zone CDATA.
Bon normalement vous arrivez a quelques chose comme ca :

       
		]]>

	

	

	

[/code]

Voila Maintenant il n'y a plus qu'a faire de l'AS3 ...

Je vous donne directement le code. Je l'expliquerai dans un autre articles.



	

		
			import flash.events.MouseEvent;

            import mx.events.FlexEvent;

            private function creationCompleteHandler(event:FlexEvent):void {

                MonBoutton.addEventListener (MouseEvent.CLICK, clickHandler);

            }
            private function clickHandler ( event:Event ):void {

                resultat.text = "Hello, World!";

            }

		]]>[/code]

Bon pour compiler il suffit de faire CTRL+B mais normalement c'est en automatique, donc suffit de savuegarder le projet avec CTRL+S
Et voila la demo :

Articles en rapport : :

Installer Flex Builder 3 sous windows
Installer le plugin Flex pour eclipse sous Linux
Son premier projet en flex
Liste de sites pour bien commencer avec Flex
Sortie de Flex Tour





Et on peut meme partager l'article:


	
	
	
	
	
	
	
	
	
	
	
	
	
	






Auteur : © Greg pour LyRiX Blog.

Article publié le :  18-11-2008, dans : Flex.
Liens direct vers l'article (permalink) 

Mot Clé : Flex, Flex Builder, Projet

]]>
			http://blog.lyrixx.info/flex/mon-premier-projet-en-flex/feed/
		0
		
		
		
		http://blog.lyrixx.info/flex/installer-flex-builder-3-sous-windows/
		http://blog.lyrixx.info/flex/installer-flex-builder-3-sous-windows/#comments
		Mon, 17 Nov 2008 13:49:00 +0000
		Greg
				
		
		
		

		http://lyrixx.info/blog/flex/?p=35
		
			On a vu comment installer Flex Builder sous linux. Cependant, il est plus simple de faire du flex sous windows car il y a plus d’assistants au codage, comme par exemple la création de page en mode design (on y reviendra plus tard) grâce à une liste impressionnante de composants que l’ont peut glisser/déposer sur l’espace de travail.

Nous allons donc installer Flex Builder 3 sous windows en mode StandAlone, c’est a dire sans avoir préalablement installer Eclipse. (En opposition avec le mode plugin pour eclipse)



Il faut donc commencer par télécharger Flex builder. Si tout ce passe bien vous devriez arrivé sur cette page : 



Sur la page du site d’abode, vous devez vous logguer, si vous n’avez pas encore de compte, il suffit de s’en faire un, il y en a pour deux minutes.
Un fois enregistré ou loggué vous arrivez sur cette page :

Sélectionner comme sur le screenshot la version anglaise pour windows et procéder au téléchargement…
Voila, c’est bon vous avez votre flex builder … il ne reste plus qu’a l’installer, la c’est pas dur, ça s’installe comme tout logiciel. Il suffit maintenant de suivre les instructions de l’installateur.
A la fin de l’installation Adobe Flex Builder vous demande un numéro de licence, si vous n’en n’avez pas cliquer sur « continue triale ». Cependant si vous etes étudiant vous pouvez obtenir une clé de licence gratuite.
Voila vous pouvez maintenant commencer votre premier projet en flex
Articles en rapport : :

Adobe Flex
Adobe flex builder avec Linux Ubuntu 9.04
Son premier projet en flex
Installer le plugin Flex pour eclipse sous Linux
Mon premier projet en Flex





Et on peut meme partager l'article:


	
	
	
	
	
	
	
	
	
	
	
	
	
	






Auteur : © Greg pour LyRiX Blog.

Article publié le :  17-11-2008, dans : Flex.
Liens direct vers l'article (permalink) 

Mot Clé : Flex Builder, Installation, Windows

]]>
			http://blog.lyrixx.info/flex/installer-flex-builder-3-sous-windows/feed/
		0
		
		
		
		http://blog.lyrixx.info/flex/licence-adobe-flex-3-gratuite-etudiants/
		http://blog.lyrixx.info/flex/licence-adobe-flex-3-gratuite-etudiants/#comments
		Mon, 17 Nov 2008 13:43:00 +0000
		Greg
				
		
		
		
		

		http://lyrixx.info/blog/flex/?p=39
		
			Vous êtes étudiant et vous voulez vous mettre ou flex ou tout simplement avoir une licence gratuite pour flex builder 3 ? Et bien pour se faire il suffit de se rentre sur ce site , d’accepter les conditions et de choisir « students« , puis de remplir tout les champs du formulaire. Attention il faut un justificatif :

Proof of Eligibility 

To receive the product, you must upload a valid proof of eligibility to get the serial numbers to activate the product. Valid proofs of eligibility are:

1. a   student ID showing current enrollment,

2. a   Faculty ID showing current employment

3. an employee ID showing current employment, or

4. a letter on an educational institution letterhead stating that you are either a current student, a current faculty member or a current employee of the institution.
Bon pour ceux qui galère avec l’anglais, il faut soit une carte d’étudiant valide (recto verso…) ou une lettre de votre école attestant que vous etes bien étudiant.
Obtenir Un licence gratuite


Articles en rapport : :

Installer Flex Builder 3 sous windows
Adobe Flex
Liste de sites pour bien commencer avec Flex
Adobe flex builder avec Linux Ubuntu 9.04
Sortie de Flex Tour





Et on peut meme partager l'article:


	
	
	
	
	
	
	
	
	
	
	
	
	
	






Auteur : © Greg pour LyRiX Blog.

Article publié le :  17-11-2008, dans : Flex.
Liens direct vers l'article (permalink) 

Mot Clé : Adobe, Flex, Flex Builder, Gratuit, Licence

]]>
			http://blog.lyrixx.info/flex/licence-adobe-flex-3-gratuite-etudiants/feed/
		3
		
		
		
		http://blog.lyrixx.info/flex/plugins-flex-eclipse-linux/
		http://blog.lyrixx.info/flex/plugins-flex-eclipse-linux/#comments
		Sat, 15 Nov 2008 12:49:00 +0000
		Greg
				
		
		
		
		
		
		
		
		

		http://lyrixx.info/blog/flex/?p=7
		
			UPDATE du 17/06/2009 : 
Il y a une mise a jour de ce tuto a cette adresse : 
http://blog.lyrixx.info/flex/adobe-flex-builder-avec-linux-ubuntu-9-04/
Comment installer le sdk flex et flex builder sous linux
Pour se faire, vous devez avoir une version de java supérieure ou égale à la 1.5 :

java -version




Installation d’eclipse :
Il faut une version supérieure ou égale à la 3.3, si ce n’est pas le cas télécharger eclipse ici.

Ensuite il faut l’extraire dans un dossier (ici le répertoire home) :
cd ~
tar zxvf ./eclipse-cpp-ganymede-linux-gtk.tar.gz
Eclipse est donc installé donc le répertoire ($HOME/eclipse)

Pour ceux qui sont sous ubuntu, un simple clic droit, extraire ici fonctionnera

Installation de Flex Builder 4 Alpha pour linux
Le Télécharger et l’installer:
chmod +x ~/flexbuilder_linux_install_a4_081408.bin
~/flexbuilder_linux_install_a4_081408.bin
Choisir un nouveau dossier pour l’installation : $HOME/Adobe_Flex_Builder_Linux

Choisir le dossier d’installation d’eclipse : $HOME/eclipse à la question « « Existing Eclipse Folder » »

Choisir « Proceed with caution » si demandé

Installation du Flex SDK 3.1
Le télécharger depuis la platforme adobe :

Choisir la version 3.1.0.2710, Adobe Flex SDK dated Aug 15, 2008

Dezipper la dans un nouveau dossier « 3.1″ dans  » ~/Adobe_Flex_Builder_Linux/sdks » :
cd ~/Adobe_Flex_Builder_Linux/sdks
mkdir 3.1
cd 3.1
unzip ~/flex_sdk_3.1.0.2710.zip


Installation de AIR SDK
Le télécharger puis le decompresser le dans ~/Adobe_Flex_Builder_Linux/sdks/3.1 :
cd ~/Adobe_Flex_Builder_Linux/sdks/3.1
tar jxvf ~/adobeair_linux_sdk_b1_091508.tbz2
Renomer 2 fichiers (adl en adl_lin et adt en adt_lin) :
cd bin
mv adl adl_lin
mv adt adt_lin


Mettre le SDK 3.1 par default dans eclipse
lancer eclipse :
./eclipse/eclipse
Window -> Preferences -> Flex -> Installed Flex SDKs



Cliquer sur ajouter et selectionner : ~/Adobe_Flex_Builder_Linux/sdks/3.1, puis rentrer Flex 3.1 comme « Flex SDK name »

Enfin selectionner Flex 3.1 et cliquer sur OK 

Problème avec ubuntu 8.10 et Eclipse 3.4 et le Flexbuilder
Il y a un léger problème avec ubuntu 8.10 et la version 3.4 de eclipse : il est impossible d’ouvrir dans eclipse des fichier mxml. Mais ne vous inquiétez pas il existe une solution très simple a mettre en œuvre.

Télécharger cette archive

(Vu qu’a priori ce bug n’est que sur ubuntu, je m’adresse uniquement a des utilisateurs d’ubuntu. Donc il se peut que certaines commandes ou fonctionnalitées ne fonctionne pas)

Extraire le deux fichiers JAR de l’archive (« FB3_Eclipse34_patch.zipFlex Builder 3 Plug-ineclipseplugins ») dans le répertoire des plugins d’eclipse (~/eclipse/plugins)

Si les noms des deux nouveaux .jar sont un petit peu différent des .jar existant, renommer les. Personnellement, je n’en ai eu qu’un a renommer.

 Source du patch

Source du tuto
Et voila, maintenant il ne reste plus qu’a commencer un premier projet
Articles en rapport : :

Adobe flex builder avec Linux Ubuntu 9.04
Installer Flex Builder 3 sous windows
Adobe Flex
Son premier projet en flex
Liste de sites pour bien commencer avec Flex





Et on peut meme partager l'article:


	
	
	
	
	
	
	
	
	
	
	
	
	
	






Auteur : © Greg pour LyRiX Blog.

Article publié le :  15-11-2008, dans : Flex.
Liens direct vers l'article (permalink) 

Mot Clé : AIR, Eclipse, Flex Builder, Installation, Linux, Plugins, SDK, Ubuntu

]]>
			http://blog.lyrixx.info/flex/plugins-flex-eclipse-linux/feed/
		3