Article complet: Créer un album Photo avec Flex/Rails ? 1/?

01/06/2007

00:22:18, Catégories: RoR, Flex On Rails, Récapitulatif Web, 663 mots

, bolo

[Web] Créer un album Photo avec Flex/Rails ? 1/?

Je dois créer une galerie photo avec une partie admin et Resful
Front end Flex
back end RoR.
J'en profite pour vous faire un petit tuto autour de ca.
Dans ce premier Article, nous allons mettre en place notre projet avec le Flex builder et le SDK

[Suite:]

Avec Flex builder

Création du projet sous Rails.

rails AlbumPhoto

Création du projet flex.

Il faut créer 2 dossiers
$ mkdir app/flex $ mkdir public/bin

Bon ici il y a deux possibilités soit vous utiliser Flex builder soit le SDK.

Avec Flex Builder
Créer une nouveau projet dans flex File/New/Project

on lui donne un nom todoList et sélectionne le dossier de l'application rail

Clique sur Next, changez la source du main folder et output folder comme l'image ci-dessous

on clique sur finish et voila !

Le SDK sur Mac OSX

N'ayant qu'un mac je ne peut vous fournir une procédure pour Windows
1. Téléchargez la flash player 9
2. Télécharger le SDK
3. Puis taper ces lignes de commandes. On crée un dossier flex_sdk_2 puis on dézippe le contenu dedans

Bolo:~ bolomichelin$ mkdir flex_sdk_2
Bolo:~ bolomichelin$ mv Desktop/flex_sdk_2.zip flex_sdk_2/
Bolo:~/flex_sdk_2 bolomichelin$ cd flex_sdk_2/
Bolo:~/flex_sdk_2 bolomichelin$ unzip flex_sdk_2.zip

4. Testons les samples fournient dans le sdk
Bolo:~/flex_sdk_2 bolomichelin$ cd samples/ Bolo:~/flex_sdk_2/samples bolomichelin$ ./build-samples.sh

5. Allons voir si tout se passe bien

file://localhost/Users/bolomichelin/flex_sdk_2/samples/flexstore/flexstore.html

Le bundle flex pour textmate

Si comme vous utilisez Textmate, il vous faut les deux bundles (FLex et AS3).
sudo svn co http://macromates.com/svn/Bundles/trunk/Review/Bundles/Flex.tmbundle/
sudo svn co http://macromates.com/svn/Bundles/trunk/Review/Bundles/ActionScript%203.tmbundle/

Si vous avez réussi a installer le bundle et que tout fonctione nous créer notre projet.

Création du projet sous Rails.

rails album_photo

Création du projet flex.

Il faut créer 2 dossiers
$ mkdir app/flex $ mkdir public/bin

Dans app/flex on crée le fichier album_photo.mxml avec ce code.
<?xml version="1.0" encoding="UTF-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" frameRate="25" backgroundColor="0xCCCCCC" paddingTop="0" paddingLeft="0" paddingRight="0" paddingBottom="0" creationComplete="onCreationComplete()"> </mx:Script> <mx:Button id="hello" label="helloword" /> </mx:Application>

Il faut aussi créer deux fichiers dans app/flex
mysource.js

document.write("<object id='MultipleButtons' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' height='100%' width='100%'>"); document.write("<param name='src' value='main.swf'/>"); document.write("<embed name='MyApp' src='main.swf' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' height='100%' width='100%'/>"); document.write("</object>");

album_photo.html

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Album Photo</title> <script src="mysource.js"></script> <style> body { margin: 0px; overflow:hidden } </style> </head> <body> <noscript> <object id='album_photo' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0'height='100%' width='100%'> <param name='src' value='main.swf'/> <embed name='MultipleButtons' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' src='main.swf' height='100%' width='100%'/> </object> </noscript> </body> </html>