ADOBE FLEX 4

© Logica 2010. All rights reserved No. 2

• Introduction

• Flex en action

• Autour de Flex

• Logica

Le programme

Introduction

No. 4© Logica 2010. All rights reserved

Flex

Qu’est ce que Flex ?

Introduction

RDA

RIA InteractiveWebApp

WEB 1.0

WebAPP

© Logica 2010. All rights reserved No. 5

• Rich Internet Application

• Avantages :• Pas d’installation• « Portable »• Fortement connecté• Récupération des données utilisateur

• Inconvénients• Pas d’installation• Fortement connecté• Récupération des données utilisateur

RIA ?

© Logica 2010. All rights reserved No. 6

• Atouts majeurs

• Alléger le serveur pour les traitements de l’affichage

• Facilite la logique métier

• Entraîne vers une diffusion « multi-canal »

RIA ?

No. 7© Logica <YEAR>. All rights reserved

Microsoft Silverlight

• Avril 2007• Version 4• Visual Studio

JavaFX

• depuis Décembre 2008• Version 1.3

Flex, et les autres ?

No. 8© Logica <YEAR>. All rights reserved

Entendue des installations

Flex en action …

© Logica 2010. All rights reserved No. 10

• Architecture

• Langages et Interface

• Données

Flex en action

No. 11© Logica 2010. All rights reserved

Flex

• Machine virtuelle

• Monothread

• Modulaire

Architecture

OSNavigateur

Flash PlayerFlex

No. 12© Logica 2010. All rights reserved

Langages

MXML

Action Script 3

© Logica 2010. All rights reserved No. 13

• Basé sur le XML• Description de l’interface• Structure• Dessin (Sprite)

Langages - MXML

No. 14© Logica 2010. All rights reserved

Interface – Décomposition d’un élément

Button

text = ‘Button’ text

Skin

text

© Logica 2010. All rights reserved No. 15

• Permet de modifier le comportement en fonction de l’état

• Manière « élégant » et « flexible » de modifier l’interface

Interface - States

© Logica 2010. All rights reserved No. 16

Interface - States

No. 17© Logica <YEAR>. All rights reserved

Exemples

No. 18© Logica <YEAR>. All rights reserved

Exemples

© Logica 2010. All rights reserved No. 19

• CSS • Modification rapide du style• Permet d’externaliser l’aspect de l’interface

• Skin• Modification profonde d’un élément• Permet de modifier le comportement graphique

Interface - Styles CSS et Skin

© Logica 2010. All rights reserved No. 20

• Avantages• Interactivité de l’interface• Améliore l’expérience utilisateur

• Inconvénients• Alourdissement inutile• Piège de l’excès

• Utilisation• Automatique : xxxEffect = « Fade »• Manuelle : Définition de l’effet + Demande de lecture

Interface - Animations

© Logica 2010. All rights reserved No. 21

• Langage Objet

• « Fortement » typé

• Système de getter / setter

• Système d’attributs

Langages – Action Script 3

© Logica 2010. All rights reserved No. 22

• Déclaration d’une classe

• Déclaration d’une variable

• Déclaration d’une fonction

• Getter et Setter

Langages – Action Script 3

© Logica 2010. All rights reserved No. 23

• Ce qu’on a :• Langage Objet réflexif• Objet dynamiques• Définition d’une classe• Définition d’interface• Héritage simple (comme en Java)

• Ce qu’il manque :• Définition de classes abstraites• Pas de singleton (Construction privé)

Langages – Action Script 3

© Logica 2010. All rights reserved No. 24

• Possibilité de lier l’interface à la donnée• Simplicité à la lecture• Simplicité à la programmation

Données - Bindings

Model

View

Controller

ModelServeur

© Logica 2010. All rights reserved No. 25

• Gestion « native »• Facilité de manipulation• Aide à la communication client / serveur

Données - XML

© Logica 2010. All rights reserved No. 26

2 méthodes principales :

• HTTPService• Méthode classique• Permet d’établir un connexion HTTP entre le serveur et le client

• AMF (Action Message Format) ou RemoteObject• Méthode « avancée »• Obligation d’avoir un serveur adapté• Permet l’échange d’objets plus facilement

Données - Communication

Autour de flex

© Logica 2010. All rights reserved No. 28

• Frameworks

• Utilisation d’un serveur

• Liens pratiques

Autour de Flex

© Logica 2010. All rights reserved No. 29

• Cairngorm• Plus ancien des frameworks• Permet de bien diviser son application

• Pure MVC• Même fonction que Cairngorm• Aide au packaging de son application

• Spring Action Script• Spring java adapté à Flex• IOC• Utilitaire de communication

Frameworks

© Logica 2010. All rights reserved No. 30

• Serveur HTTP simple

• Utilisation d’AMF• Blaze Data Service• Live Cycle Data Service• Granite Data Service• WebOrb

Comparaison entre les différentes solutions

Utilisation d’un serveur

© Logica 2010. All rights reserved No. 31

• API : Flex 4

• Documentation : Flex Developer Center

• Tutoriaux : Adobe® Flex™ Tutorial

• Exemple d’interface : Tour de flex

• Tout le reste : ???

Liens pratiques

Question ?

LOGICA

© Logica 2010. All rights reserved No. 34

• Partie flex : Alexandre Jannottaalexandre.jannotta@logica.com

• Partie Logica : Nora Chaouchinora.chaouchi@logica.com

Contacts