Formation Flex 4.5 Tours Région Centre Architecte du Logiciel

Formation Flex 4.5 avec Flash Builder d'Adobe

Flex 4.5 est le framework cross-plateforme d'Adobe, écrit en ActionScript 3, dédié à la réalisation d'applications web (dans un navigateur avec plugin Flash), desktop (dans l'environnement AIR) et mobile (sous iOS, Android et BlackBerry tablet). Il ajoute aux fonctionnalités de base de Flash, une panoplie d'outils centrés sur la manipulation de données. Il est donc très efficace pour l'écriture d'applications métiers, back-office, publication de données, outils de gestion, partage d'information etc. tout en offrant le rendu exceptionnel et les possibilités graphiques de Flash au sein de l'application.

La formation Flex 4.5 est proposée en 2 journées dont les détails vous sont donnés ci-dessous. Elle est centrée sur la pratique avec les composants Spark en priorité. Le contenu peut être modifié pour votre cas spécifique en fonction du contexte et du niveau d'expertise des utilisateurs.

Public concerné : La formation est conçue pour les développeurs ayant une expérience dans un langage structuré (Php, C#, Java, C++, As3 etc.). La connaissance de As3 n'est pas obligatoire mais aide à la pratique des exercices.

Objectif : Le développeur saura créer de nouveaux projets Flex 4.5 dans les 3 environnements : web, desktop et mobile. Il saura manipuler les composants Spark essentiels de Flex. Le déploiement sur les 3 environnements sera abordé pour éviter les écueils.

Lieu : Tours (37) Région Centre (Orléans, Blois, Chartres, Châteauroux, Bourges), Paris (Ile de France)

Cliquez ici pour nous contacter ou appelez au 06 09 83 64 49

Plan de la formation :

Journée 1

Présentation

Explications générales sur Flash, Flex, As3, FlashBuilder
Manipulation de documentation et liens utiles

Exercices

Premier affichage "hello world", structure du code mxml/as3 et fonctionnement de FlashBuilder
Interactions utilisateur et formulaire
Echanges avec le serveur php, requêtes HTTP et transfert de données bi-directionnel
Datagrid et présentation des listes de données

Journée 2

Exercices

Skinning et CSS
Localisation d'une application Flex
Gestion des state pour les états d'un formulaire
Les groupes et leurs layouts, arrangement d'objets
Tween et animation
Stockage Sqlite
Initiation au développement mobile

Conclusion

Questions/réponse et outils pratiques

Aperçu de la formation :

Première application

Le développeur verra comment est construite une application Flex.

Les espaces de noms :

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">

Les code As3 inclus dans le xml :

<fx:Script>

<![CDATA[

Les composants de base : <s:VGroup> <s:Label> <s:TextInput> <s:Button>

Utilisation des assistants FlashBuilder pour la saisie du code source, des événements etc.

Echanges client/serveur en texte

Le loader :

var ld:URLLoader=new URLLoader();

var req:URLRequest=new URLRequest();

var vars:URLVariables=new URLVariables();

Réception de la réponse par un EventListener :

ld.addEventListener(Event.COMPLETE,SumComplete);

Précautions sur la gestion de la mémoire des EventListener.

Les outils pour visualiser l'attente serveur :

CursorManager.setBusyCursor();

waitpan.x=0;

Echanges client/serveur en binaire

Utilisation de la librairie Hessian de Caucho.com :

implements="mx.rpc.IResponder"

var requestobj:Request=new Request(val1.text,val2.text);

var token:AsyncToken=action.GetSum.send(requestobj);

token.addResponder(this);

Serveur Php avec la librairie Hessian :

include_once("hessian/HessianService.php");

$options = new HessianOptions();

$options->typeMap["PhpResult"]="Result";

$options->typeMap["PhpRequest"]="Request";

$service = new HessianService(new ADLHessianService(),$options);

$service->handle();

Utilisation des Datagrid

Binding, DataProvider et ArrayCollection :

[Bindable] public var historylist:ArrayCollection=new ArrayCollection;

<s:DataGrid width="100%" height="100%" dataProvider="{historylist}" ...>

et customisation des colonnes avec <s:GridItemRenderer>

Modification de style avec les CSS et le Skinning

Modifications globales et par classes :

s|Button

{

color:#339933;

}

.AdlButtonStyle

{

color:#0000FF;

}

Création d'un skin pour TextInput avec l'assistant Flash Builder:

<s:TextInput id="val2" skinClass="skins.AdlTextInputSkin"/>

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:fb="http://ns.adobe.com/flashbuilder/2009"

alpha.disabledStates="0.5" blendMode="normal">

Localisation de l'application / Chargement de traductions au démarrage

Méthode conseillée pour la gestion textuelle des traductions (utile pour SVN et pour l'étude des évolutions)

I18n.Init(FlexGlobals.topLevelApplication.parameters.lang);

setStyle("locale",I18n.m_lang);//for DateFormatter

<s:Label text="{I18n._('title')}" fontSize="20"/>

Utilisation des états (State) pour la gestion de l'interface

Déclaration :

<s:states >

<s:State name="member"/>

<s:State name="invited"/>

</s:states>

Utilisation :

<s:FormItem label="pass" includeIn="member">

Les Layout

Modification dynamique d'un layout de groupe :

container.layout=new HorizontalLayout;

container.layout=new VerticalLayout;

Création d'un layout qui organise les éléments de manière circulaire

public class AdlCircularLayout extends LayoutBase

{

override public function updateDisplayList(width:Number, height:Number):void {...}

}

Animation et Tween

Méthode mxml :

<mx:Move id="showeffect" xTo="0" xFrom="2000" duration="2000" easingFunction="Bounce.easeOut" target="{history}"/>

Méthode manuelle :

new Tween(this,0,100,2000,24,TweenRun,TweenEnd);

Méthode par AnimateProperty :

an=new AnimateProperty;

an.target=element;

an.duration=500;

an.property="alpha";

an.fromValue=element.alpha;

an.toValue=1;

an.play();

Et application dans le layout précédent pour animer le changement de position des objets du groupe.

Stockage dans Sqlite (pour AIR et mobile uniquement)

Stokage des données :

try

{

var cnx:SQLConnection=new SQLConnection();

var fl:File=File.desktopDirectory;

fl=fl.resolvePath("data.sqlite");

cnx.open(fl);

if (cnx.connected)

{

var st:SQLStatement=new SQLStatement();

st.sqlConnection=cnx;

st.text="create table if not exists data (id integer primary key autoincrement,val1 double,val2 double,result double)";

st.execute();

st.text="insert into data (val1,val2,result) values ("+v1+","+v2+","+res+")";

st.execute();

}

cnx.close();

}

catch(er:Error)

{

Alert.show("Exception:"+er.message).isPopUp=false;

}

Et application dans le projet DataGrid en lecture/écriture

Projet Flex Mobile

Ré-utilisation d'un projet simple réalisé dans la journée, mais dans un contexte mobile, différence avec l'environnement web, précautions, publication, mobiles compatibles etc.

Cliquez dans le menu ci-dessous pour découvrir les réalisations d'Architecte du Logiciel, et le menu à gauche pour en savoir plus sur les services proposés.