Top Banner
Mon retour d’expérience &
125

Flex & Java @ TourJUG

May 10, 2015

Download

Technology

ma présentation au TourJUG
Retour d'expérience Flex & Java
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Flex & Java @ TourJUG

Mon retour d’expérience

&

Page 2: Flex & Java @ TourJUG

Ah, désolé je parle franglais…

&

&

Page 3: Flex & Java @ TourJUG

François Le Droff

• “Just another Java guy” (doing Flex)

– +11 ans d’expérience (web 1+n.0)– OSS geek :

• membre de l’ossgtp, du ParisJUG, et TTFX• conférencier à MAX, et Solution Linux• blogs :

– http://www.droff.com– http://blogs.adobe.com/francoisledroff/

[email protected]

Page 4: Flex & Java @ TourJUG
Page 5: Flex & Java @ TourJUG

Et vous ?

• Architectes ? Dévelopeurs ?• Vos attentes ?• Java ?

– Spring, ORM, JEE ?– UnitTest (JUnit, TestNG, …) ?– Functional test (Selenium…) ?– Ant and/or Maven ?– Hudson, CC ?

• Flex ?– ActionScript MXML – Flex Remoting, AMF – And may be

• BlazeDS, LCDS• FlexUnit , RIATest, FlexMonkey• Cairngorm, Parsley, Mate, SpringActionScript

Page 6: Flex & Java @ TourJUG

Agenda• La plateforme: Flash, AIR, SDK Flex

• Flex Java : la plomberie

• Flex : Qualité, Architecture et usine logicielle « à la Java »

Page 7: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

La plateforme: Flash, AIR, SDK Flex

Page 8: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 8

RIA : les défis techniques

• Meilleurs temps de réponse• Bande Passante allégée• Charge Serveur diminuée• Moins de tests

Web 1.0 application Rich Internet Application

<page>

<page>

<page>

<page>

<page>

<page>

<page><application>

<data>

Page 9: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 9

La révolution: le Flash Player un socle applicatif

Performances

La VM a été réécrite intégralement avec un compilateur JIT

ActionScript 3 (100% ECMA-262)

Support total sur Windows, Mac et Linux

Nouvelle machine virtuelle : AVM2Conçue pour être rapide tout en consommant un minimum de mémoire

Coexiste avec la AVM1

AVM2 est un projet Open Source Avec la communauté Mozilla (projet Tamarin)

Text layout engine

Page 10: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 10

La technologie Flash a +13 ans

Animation

Interactivité

Rich Media

Applications

Page 11: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 11

DemonstrationsFlash 10

Page 12: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

RIA sur le bureau

AIR

Page 13: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 13

Une génération d’avance…

Adobe AIR est un nouvel environnement d’exécution multi-plateformes qui permet aux développeurs d’utiliser leurs connaissances en développement d’applications web pour réaliser et déployer des applications riches sur le bureau.

Page 14: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe AIR 1.5: Fonctionnalités

Ressources locales

Online/offline détection

Drag-and-drop

Accès au Clipboard

Background processing

Gestion multi-fenêtres

Custom window chrome

Transparent applications

More…

Gestion du HTML avec WebKit

Flash Player 10

Intégration HTML/Flash/PDF

Base de données SQLite

Page 15: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Online / Offline

Page 16: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 16

Pourquoi les RIA sur le bureau ?

Connection permanente

Puissance du desktop Accès aux données Développement optimisé

Personnalisation

Page 17: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 17

Demonstrations

next

Page 18: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Desktop Rich Internet Applications “On AIR”

Deploying to the Desktop with AIR

Page 19: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Parleys.com

Page 20: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

NY times

Page 21: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

RIA sur le mobile

Flash Player 10

Michaël CHAIZE

[email protected]

Page 22: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 22

Deux problématiques à résoudre

Web Browsing

YouTube.com

Standalone Applications

Page 23: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 23

Open Screen Project

Page 24: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

The RIA leader technology: Adobe Flex

ADOBE FLEX 4Action Script 3

MXML

Free, open source framework

Less time needed to develop

Expressive, highly interactive apps

X-platform, consistent deployment

Page 25: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Fonctionnement et déploiement

Flex Builder IDE

Flex SDK

Flex Class Library

MXML ActionScript

Compile

SOAP HTTP/S AMF/S RTMP/S

Web Server

Existing Applications & Infrastructure

J2EE Application Server

LC Data ServicesXML/HTTPRESTSOAP Web Services

Browser

Flash Player

Page 26: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe Flex Builder 3 Flash Builder 4

IDE basé sur Eclipse Code hinting, debuging

Vue Design WYSIWYG

Communication avec la CS3

Profilers de Memoire et Performance

SDK FB : Charting components, advanced datagrid

Support des tests

Page 27: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Fonctionnement et déploiement

Flex Builder IDE

Flex SDK

Flex Class Library

MXML ActionScript

Compile

SOAP HTTP/S AMF/S RTMP/S

Web Server

Existing Applications & Infrastructure

J2EE Application Server

LC Data ServicesXML/HTTPRESTSOAP Web Services

Browser

Flash Player

Page 28: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe Flash Builder

Page 29: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Nouveautés :

Expérience de coding

Support de modèles

Génération de gestionnaire d’événements

Génération des Getter/setter

Aide Tooltip en ASDoc

Vue de code par States

Package explorer

Développement agile

Tests unitaires

Builds en ligne de commande

Nouveau: Network monitor

Amélioration du debugging, profiling et du re-factoring

Adobe Flash Builder 4 – Améliorer la productivité

Page 30: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe Flash Builder 4 – Intégration de services distantsNouveautés:

Introspection de services Assistants d’introspection et tests d’appel

d’opération Génération automatique de code “exemple”

côté serveur

Vue du modèle de données Configuration visuelle des services Support du Data management et du paging

Génération de composants et binding Génération automatique de formulaires Data-binding par glisser - déposer

SOAP

REST

Page 31: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

“In front of the glass” Flex !“Behind the glass” Java !

Page 32: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 32

Flash Player 9 ou 10

12 ans d’existence

98% des PC équipés

Langage objet AS3

AVM2 JIT Compiler

Open Source: Tamarin

Gratuit, framework open source

Flex Builder basé sur Eclipse

Framework MVC

Accessibilité, Test unitaire, Debug

Component based programming

Dévelopment rapide

LiveCycle Data Services

Data intensive applications

Meilleures perfs du marché

Remoting architecture

Messaging and Data Push

Data Management Services

Offline synchronization

FLASH PLAYER FLEX 3 SDK LIVECYCLE DATA SERVICES

Page 33: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 3333

Flex Back-end Integration

Page 34: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

LiveCycle Data Services ES

Créer des RIA qui manipulent énormément de données avec un minimum de code, et accélérer la mise en production en programmant sur un modèle client-serveur.

Intégrer une RIA avec des applications existantes de l’infrastructure J2EE.

Intégrer facilement des RIA avec des processus documentaires LiveCycle.

Développer des application collaboratives, gérer la synchronisation offline, gérer le temps réel.

Générer des PDF à la demande qui intègrent des éléments graphiques.

34

LiveCycle Data Services est un ensemble de composants J2Ee et d’API utilisés pour:

LiveCycle Data Services ESData Management

RPC Services

Messaging

ServiceAdapters

Data Synchronization

Off-line Applications

Data Paging

Web Service

HTTP Service

Remote Object Service

Publish & Subscribe

Collaboration

Real Time Data Push

Proxy Service

Web-tier Compiler

Portal Deployment

RIA-PDF Generation

LiveCycle

ColdFusion

Hibernate

SQL

JMS

Java

Custom…

Page 35: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 35

Qu’est ce que BlazeDS?

Gratuit et Open Source Ouverture du format d’échange de données

AMF3 (Action Message Format) Technologie de messaging sur le standard

HTTP (équivalent de Comet) Builds certifiées, support entreprise disponible

(LC Community Edition)

BlazeDS est un sous-ensemble Open Source (LGPL) de LCDS. C’est une solution de Remoting et de HTTP messaging.

BlazeDSData Management

RPC Services

Messaging

ServiceAdapters

Data Synchronization

Off-line Applications

Data Paging

Web Service

HTTP Service

Remote Object Service

Publish & Subscribe

Collaboration

Real Time Data Push

Proxy Service

Web-tier Compiler

Portal Deployment

RIA-PDF Generation

LiveCycle

ColdFusion

Hibernate

SQL

JMS

Java

Custom…

Page 36: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 36

LCDS.war

Structure du WAR: +WEB-INF/classes Pour placer ses classes Java

+WEB-INF/lib Contient les librairies Java de LCDS

+WEB-INF/flex Contient les fichiers XML de configuration Remoting-config.xml Destinations vers les classes Java Messaging-config.xml Destinations pour le messaging Data-Management-config.xml Destinations vers les assemblers Proxy-config.xml Destinations vers les services HTTP Services-config.xml Configuration des canaux

Un fichier LCDS.war est fourni pour démarrer vos projets Flex / Java.

Page 37: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 37

Architecture Entreprise et Adobe

ClientApplicationTier

Service Tier Repository

Couche d’invocation des services

Interface de prestation de service

Service Container Core Services Business Rules/Workflow

Resource Tier ERP Bases de données LEGACY GEIDE Messages

Queues

HTTP REST XML SOAP WebService

GENERER ET GERER DES PDF

PROTEGERL’INFORMATION

CAPTURERL’INFORMATION

GERER LE VOLUMEDE DONNEES

LIVECYCLE PROCESS MANAGEMENT

& BAM

AMF DATA RTMP MESSAGE CLOUD HTTP API

Page 38: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 3838

Flex : XML sur HTTPmx:HTTPService

Page 39: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 3939

Flex : SOAPmx:WebService

Page 40: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 4040

Flex et les serveurs d’application JavaRemoting, Messaging et Data Management

Page 41: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 4141

Remotingmx: RemoteObject

Page 42: Flex & Java @ TourJUG

®

• Permet aux applications clients d’appeller à distance (remoting) des méthodes sur des objets déployés survotre serveur d’application

• L’information de Type est maintenue• Données compréssées et binaires• Bénéfices :

– Facilité de programmation– et performance (pas de double transformation XML

double)

Flex Remoting Service

Page 43: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

<mx:RemoteObject id="srv" destination="product"/> <mx:Button label="Get Data" click="srv.getProducts()"/> <mx:DataGrid dataProvider="{srv.getProducts.lastResult} "/>

• remoting-config.xml<destination id="product">

<properties><source>flex.samples.ProductService</source>

</properties></destination>

Flex Remoting 101

Page 44: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Product.as[RemoteClass(alias="flex.samples.Pr

oduct")]public class Product {

public var id:int;public var name:String;public var description:String;public var price:Number;public var qtyInStock:int;

}

Class Mapping & Serialization/Deserialization

Product.java

public class Product {

private int id;

private String name;

private String description;

private double price;

private int qtyInStock;

// getters and setters

}

L’annotation AS3 [RemoteClass] fournit l’information de mapping

Page 45: Flex & Java @ TourJUG

45

Java type ActionScript type (AMF 3)

java.lang.String String

java.lang.Boolean, boolean Boolean

java.lang.Integer, int

Int - If value < 0xF0000000 || value > 0x0FFFFFFF, the value is promoted to Number due to AMF encoding requirements.

java.lang.Short, short int - If i < 0xF0000000 || i > 0x0FFFFFFF, the value is promoted to Number.

java.lang.Byte, byte[] Int - If i < 0xF0000000 || i > 0x0FFFFFFF, the value is promoted to Number.

java.lang.Byte[] flash.utils.ByteArray

java.lang.Double, double Number

java.lang.Long, long Number

java.lang.Float, float Number

java.lang.Character, char String

java.lang.Character[], char[] String

Conversion de types Java/AS3

Java type ActionScript type (AMF 3)java. math.BigInteger Stringjava.math.BigDecimal String

java.util.Calendar

Date - Dates are sent in the Coordinated Universal Time (UTC) time zone. Clients and servers must adjust time accordingly for time zones.

java.util.DateDate - Dates are sent in the UTC time zone. Clients and servers must adjust time accordingly for time zones.

java.util.Collection (for example, java.util.ArrayList) mx.collections.ArrayCollection

java.lang.Object[] Array

java.util.MapObject (untyped). For example, a java.util.Map[] is converted to an array (of objects).

java.util.Dictionary Object (untyped)

org.w3c.dom.Document XML object

null null

java.lang.Object (other than previously listed types)

Typed Object - Objects are serialized by using JavaBean introspection rules and also include public fields. Fields that are static, transient, or nonpublic, as well as bean properties that are nonpublic or static, are excluded.

Page 46: Flex & Java @ TourJUG

• Si les mécanismes standards de sérialisation et de désérialisation de données entre ActionScript (client) et Java (server) ne sont pas satisfaisants:

– Vous pouvez implémenter l’interface ActionScript sur le client grâce à flash.utils.Iexternalizable

– Vous pouvez créer la correspondance Java et écrire votre propre schéma de sérialisation avec java.io.Externalizable

Mapping personnalisé entre ActionScript et Java

Page 47: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 4747

Messagingmx: Producermx:Consumer

Page 48: Flex & Java @ TourJUG

48

Publish/Subscribe Messaging

MessageService

Livecycle Data Services

Endpoint

PublisherSubscriber

RTMPAMFHTTP

Client A

Client B

Client C

Page 49: Flex & Java @ TourJUG

49

Demo: Chat

Page 50: Flex & Java @ TourJUG

50

Messaging - Data Push

MessageServices

LiveCycle Data Services

Adapter Y

Adapter X

MessagingSystem Y

MessagingSystem X

EndpointJMSProvider

JMS Adapter

PublisherSubscriber

RTMPAMFHTTP

Page 51: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 5151

Data Management

Page 52: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Travailler avec des données:Le mode traditionnel du HTML (page)

Le client est souvent utiliser pour capturer de la données et l’affichage

Le client ne conserve pas une version de la donnée

Pas de réelle manipulation de données côté client

Les données doivent être snchronisées entre le middle-tier et la base

52

data data

Persistence Solutions:

HibernateJDOsEJB 3Others…

Page 53: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Le modèle de la RIA

Le client possède une version de la donnée

Manipulation riche des données côté client

La donnée doit être synchronisée entre le tiers client, le middle-tier ET entre le middle-tier et la base

53

data data data

Page 54: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

L’approche de LiveCycle Data Services

Client-Side API: Flags changes (create, update, delete)

Maintient une version d’origine de la donnée pour appliquer la stratégie de locking

Envoie une liste de changement à LCDS dans un groupe de messages

Gère les conflits, les accès concurrents

54

data

DataService

data

Page 55: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

L’approche de LiveCycle Data Services

Data Service: Désérialise la liste des changements qui proviennent du

client

Sérialise les données avant de les données au client

Passe la liste des changement au bon adapter

Notifie les clients qui sont abonnés à la destination

Adapter: Effectue les changements

Identifie les conflits

Passe les résultats à Data Services

55

data data

JDBC

Object

Hibernate

ColdFusion

DataService

Custom

Page 56: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Data Services

56

LiveCycle Data Services

DataService DAOObject

Adapter

HibernateAdapter

JDBCAdapter

Hibernate

RDBMS

CFCAdapter ColdFusion

Endpoint

Client A

Client B

Client C

Page 57: Flex & Java @ TourJUG

LiveCycle Data Services 3.0 Themes

1. Most productive and powerful solution for building data driven applications using Fiber (aka LCDS Rich Model Driven Development)

2. Most scalable and reliable infrastructure for web-based real time messaging applications

3. Open platform providing tight integration with existing Enterprise solutions

Page 58: Flex & Java @ TourJUG

Code•UI controls / formatters / styles• Calculated fields• Validation Rules• Variants (conditional properties)• Localization• Security• Data Retrieval Logic (paging, lazy loading)• Data Synchronization Logic

Code-Driven Development

Model•Basic Data Description

Model Server-side code Client-side code

Page 59: Flex & Java @ TourJUG

Code• Ad-hoc customization• View composition• External business/validation logic

Fiber: LCDS Model-Driven Development

Model• Rich data model (data and behaviors)• Calculated fields• Validation Rules• Variants (conditional properties)• Localization• Security• UI hints/defaults: controls, formatters, styles

Model includes enough information to derive data retrieval, persistence, and synchronization logic

Model Server-side code Client-side code

Page 60: Flex & Java @ TourJUG

Model

Tools

RuntimeCode Gen

Model-aware runtimes support dynamic model interpretation (no code gen needed)

Model authoring and deploymentModel-aware gestures and artifacts (ie. Model-driven forms)

LCDS Model-Driven Development

Code gen of boilerplate code (value objects, stubs, etc.)

Page 61: Flex & Java @ TourJUG

LCDS Model Driven Development Benefits

Productivity: Less code to write • No persistence code or data sync code• Value objects and service stubs are automatically generated Maintainability: Less code to maintain• Changes to the model are automatically propagatedConsistency• Between client and server (for example, constraints and validation rules are defined in the model, not duplicated using

different languages in the client and the server)• Across views (for example, UI controls, styles, and validation rules are defined in the model, not duplicated across

different views)Approachability• No code to write to implement complex capabilities such as persistence, synchronization, paging, lazy loading, offline,

etc.Innovation:• Offline and client synchronization capabilities• Model is language independent and can be leveraged by different client technologies and tools (Flex, PDF, etc)

Page 62: Flex & Java @ TourJUG

Real Time Platform

Existing in LCDS 2.6• Publish/Subscribe messaging infrastructure• JMS integration• Scalable channels: RTMP and NIO streaming / long polling• Per-client QoS

New in LCDS 3• Reliable messaging• Throttling• Edge Server

Page 63: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved. 6363

Channels

Page 64: Flex & Java @ TourJUG

64

Les Channels dans LiveCycle Data Services ES

Page 65: Flex & Java @ TourJUG

65

Quels canaux utiliser pour le temps réel ?

Channel Description Les Plus Les Moins

AMFLong Polling

Poll ~ 1 minServer parks poll

until data availableWorks with firewalls

Poll roundtrip overhead

Servlet API blocking IO

Streaming AMFServer pushes

infinite messages(HTTP Chunk)

No polling overhead

Works with firewalls

HTTP proxies can swallow messages

Servlet API blocking IO

AMF Simple polling

Piggyback Enabled

Messages/ request/response

piggybacking

Works with firewalls

Page 66: Flex & Java @ TourJUG

66

Quels canaux utiliser pour le temps réel ? (LCDS)

Channel Description Les Plus Les Moins

RTMP(in a ChannelSet with fallback to NIO AMFChannel configured to

Long Poll)

Single duplex connection

Immediate notification when a client is closed

Non standard port blocked by firewalls

NIO AMFLong Polling(no fallback)

Uses an NIO server and minimal HTTP

stack 1000s of clients

Better scalability and no configured upper bound

on no. of parked poll requests

Requires more network configuration

NIO Streaming AMF(in a ChannelSet followed

by the polling AMFChannel below for fallback)

Uses an NIO server and minimal HTTP

stack 1000s of clients

Better scalability and no configured upper bound

on the number of streaming connections

Same as above

NIO AMF Simple polling

Piggyback Enabled

Uses an NIO server and minimal HTTP

stack 1000s of clientsSame as above Same as above

Page 67: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe Flash Catalyst

Page 68: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

BehaviorLogicData

Le modèle de composant de Flex 3

GraphicsLayoutAnimationPartsStates

Component Skin/

Page 69: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

ActionScript MXML

Séparation complète de l’apparence et des fonctionnalités

Le modèle de composant de Flex 4 : MVC

GraphicsLayoutAnimationPartsStates

Component Skin

CSS properties

BehaviorLogicData

Page 70: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

PrototypageMaquette

Design interactifPrototypage

Projet FXPFormat FXG

Flash Builder 4Format FXG

Page 71: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

FXG (XML Graphics for Flex)

<s:Rect y="141.5" x="268.5" height=”50" width=”50"><s:fill>

<s:SolidColor color="#bf8f8f"/></s:fill><s:stroke>

<s:SolidColorStroke color="0x4769C4" caps="none" joints="miter" miterLimit="4" weight="1"/>

</s:stroke></s:Rect>

Page 72: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

FXG (XML Graphics for Flex)

<fx:DesignLayer d:userLabel="Layer 1"><s:Rect y="141.5" x="268.5" height="333" width="281">

<s:fill><s:SolidColor color="#bf8f8f"/>

</s:fill><s:stroke>

<s:SolidColorStroke color="0x4769C4" caps="none" joints="miter" miterLimit="4" weight="1"/>

</s:stroke></s:Rect></fx:DesignLayer>

Page 73: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

FXG (XML Graphics for Flex)

<fx:DesignLayer d:userLabel="Layer 1"><s:Rect y="-35.5" x="290.5" height="333" width="281">

<s:fill><s:LinearGradient rotation="90">

<s:GradientEntry color="0x990000" alpha="1" ratio="0" /><s:GradientEntry color="0xD5D5D5" alpha="1" ratio="1" />

</s:LinearGradient></s:fill><s:stroke>

<s:SolidColorStroke color="0x4769C4" caps="none" joints="miter" miterLimit="4" weight="1"/>

</s:stroke></s:Rect></fx:DesignLayer>

Page 74: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

FXG (XML Graphics for Flex)<s:states>

<s:State name="up"/><s:State name="over"/><s:State name="down"/><s:State name="disabled"/>

</s:states>

<fx:DesignLayer d:userLabel="Layer 1"><s:Rect y="-35.5" x="290.5" height="333" width="281">

<s:fill><s:LinearGradient rotation="90">

<s:GradientEntry color="0x990000" color.down=“0x77DD66” alpha="1" ratio="0" /><s:GradientEntry color="0xD5D5D5" color.down=“0x1100DD” alpha="1" ratio="1" />

</s:LinearGradient></s:fill><s:stroke>

<s:SolidColorStroke color="0x4769C4" caps="none" joints="miter" miterLimit="4" weight="1"/>

</s:stroke></s:Rect></fx:DesignLayer>

Page 75: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Workflow Flash et Flash Builder

Depuis Flash CS3 (Flex Component Toolkit)

Export au format SWC et intégration dans Flex Builder

Workflow toujours possible avec Flash Builder

Page 76: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Demo

Page 77: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Page 78: Flex & Java @ TourJUG

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Page 79: Flex & Java @ TourJUG

Flex : Qualité, Architecture et usine logicielle « à la Java »

Page 80: Flex & Java @ TourJUG

La Qualité du code• Retour sur la Qualité Logicielle Java

– http://www.slideshare.net/francoisledroff/soire-qualite-logicielle-paris-jug-tour-dhorizon-des-outils-open-source

• Avant de voir comment l’appliquer aux projets Flex

Page 81: Flex & Java @ TourJUG

Automatisation du processus de construction en Flex

Page 82: Flex & Java @ TourJUG

Automatisation du processus de construction en Flex

• Ant :– FlexAntTasks

• Ant : Antennae• Maven :

• Flex-mojos• Alternatives :

• ServeBox (Projet Français)• and Israfil

• Archetypes– FlexMojos V3 est un projet sonatype– Sonatype et Adobe travaillent ensemble pour le support FB

dans m2eclipse

Page 83: Flex & Java @ TourJUG

Automated docs and reports

Page 84: Flex & Java @ TourJUG

Automatisation du processus de construction en Flex:gestion des dépendances

Page 85: Flex & Java @ TourJUG

Managing Dependencies• Maven (or Ant + Ivy)

Page 86: Flex & Java @ TourJUG

Managing Dependencies

Page 87: Flex & Java @ TourJUG

Nexus, gestionnaire de référentiel d’artefact de construction

• Externalisez vos artefacts (jar, war, ear, swf, swc…) de votre GCL• Publier les sur un repository commun d’entreprise

Page 88: Flex & Java @ TourJUG

Stratégie des test unitaires en Flex

Page 89: Flex & Java @ TourJUG

Stratégie des test unitaires en Flex

• Retour sur nos « meilleures pratiques » de test– http://www.jroller.com/francoisledroff/entry/automated_testing_and_quality_control

• Test unitaires : FlexUnit• Les bouchons de test• Couverture de test : FlexCover• Les Tests fonctionnels

Page 90: Flex & Java @ TourJUG

Our Agile Testing Principles.

Test Concerns Separately Test Many Things At Once

Test Everything –Frameworks, Integration etc.

Accept and Minimize Untestable Code

Page 91: Flex & Java @ TourJUG

Persistence Layer

Translators / UtilitiesCommands / Delegates

Presentation Behavior Layer

Flex - Testing Concerns Separately

Persistence Definition LayerNetwork Access

Brokers / DataModels

File Access LocalConnection

Presentation Graphic LayerMXML UIComponent DisplayObject

Domain / Application Layer

Utilities / Factories

Domain Models

Utilities

Application Models

Presentation Models

VehicleDescriptorView

AccidentWizardView

VehicleDescriptorPM

AccidentWizardPM

CarCompany

Customer

IncidentDescriptor

SaveReportCommand

IncidentReportTranslator

“saveReport” RemoteObject

Page 92: Flex & Java @ TourJUG

FlexUnit

Page 93: Flex & Java @ TourJUG

Flex Unit• http://opensource.adobe.com/wiki/display/flexunit/FlexUnit

Page 94: Flex & Java @ TourJUG

FlexUnit4• FlexUnit 4 (merge de Fluint et FlexUnit0.9)

• très similaire à JUnit 4• Intégré à Flash Builder 4 Beta

Page 95: Flex & Java @ TourJUG

FlexUnit4• FlexUnit 4 (suite cf. http://docs.flexunit.org/index.php?title=FlexUnit4FeatureOverview )

Page 96: Flex & Java @ TourJUG

FlexUnit within your Build • FlexUnit within your build

Page 97: Flex & Java @ TourJUG

Les bouchons de test Flex

Page 98: Flex & Java @ TourJUG

Au delà de FlexUnit : Les bouchonsHamcrest

http://github.com/drewbourne/hamcrest-as3#readme

containing constraints or predicates allowing 'match' rules to be defined declaratively hasProperty - checks that a property exists and, optionally, that it matches the provided matcher

hasItem, hasItems - test a collection contains elements

Mock Frameworks

mock-as3: http://code.google.com/p/mock-as3

Used by Adobe Consulting

Mock4AS: http://code.google.com/p/mock4as

Mockito flex

Page 99: Flex & Java @ TourJUG

Flex Unit Tests Code Coverage

Page 100: Flex & Java @ TourJUG

Code Coverage – FlexCoverhttp://code.google.com/p/flexcover

Page 101: Flex & Java @ TourJUG

Flexcover – Emma report -headless agent for CI builds

http://www.eyefodder.com/blog/2009/07/flex_code_coverage_process_par.shtml#more

Page 102: Flex & Java @ TourJUG

FlexUnit & Flexcover – in Continuous Integration

Page 103: Flex & Java @ TourJUG

Flex Functional Testing

Page 104: Flex & Java @ TourJUG

Flex Functional Testing• Functional Testing

– RiaTest http://www.riatest.com/video/getting-started/index.html

Page 105: Flex & Java @ TourJUG

Flex Functional Testing• Functional Testing (suite)

– Selenium for Flash– FlexMonkey (http://www.gorillalogic.com/flexmonkey )

– Other commercial products based on Adobe’s Flex Automation API : – Mercury QTP – IBM Rational Functional Tester– RIATest

• Load and Stress Testing– JMeter, OpenSTA, Grinder– Adobe’s Data Services Stress Testing Framework – Other commercial (Flex/AMF specific) products :

– NeoLoad– WebLoad

Page 106: Flex & Java @ TourJUG

Analyse statique de code Flex

Page 107: Flex & Java @ TourJUG

Analyse statique de code: FlexPMD• FlexPMD

• Ce projet est hébergé sur opensource.adobe.com sous license BSD.• Comme son nom l'indique, ce projet suit la trace de PMD pour Java, l'idée

est donc de: • détecter des "pattern" et "anti-pattern" dans l'arbre syntaxique du code

ActionScript et MXML– définir ces patterns et anti-pattern dans des règles FlexPMD

• pouvoir automatiser cette détection à travers le build (ou les outils de développement)

• pouvoir créer facilement des ensembles de règles (des "rulesets") spécifiques aux besoins et aux contraintes de vos projets– et ensuite surveiller le respect de ces règles de façon automatique et systématique

Page 108: Flex & Java @ TourJUG

Analyse statique de code: FlexPMD• FlexPMD dans cette première mouture vient avec 83 règles, ces règles

vous permettront de réaliser l'audit de code Flex à la recherche • de code mortCode mort : Parametre, variable locale, fonction privée, attribut

non-utilisé• Taille de code: Complexité cyclomatique, fonction trop longue, trop d’attribut,

trop de functions• MXML: Bloc script trop long• Conventions de nommage (variable, classe, casse des packages)• de mauvaise pratique architecturale

– dans l'utilisation de cairngorm– dans la gestion d'évènement– dans le référencement de composants visuels dans les modèles– ou de mauvaise encapsulation

Page 109: Flex & Java @ TourJUG

Analyse statique de code: FlexPMD

• FlexPMD– Personalisable selon vos besoins

• http://opensource.adobe.com/svn/opensource/flexpmd/bin/flex-pmd-ruleset-creator.html

– Extensible: créer vos propres règles

Page 110: Flex & Java @ TourJUG

Analyse statique de code: FlexPMD• FlexPMD

– Intégré• Mac automator :

– http://www.youtube.com/watch?v=C5DBuZzHLwc• Tâche Ant• Plugin Maven

Page 111: Flex & Java @ TourJUG

• FlexPMD within your build

Page 112: Flex & Java @ TourJUG

Analyse statique de code: FlexPMD• FlexPMD Eclipse plugin• http://opensource.adobe.com/wiki/display/flexpmd/FlexPMD+Eclipse+plugin

Page 113: Flex & Java @ TourJUG

Analyse statique de code: FlexCPD

• FlexCPD : Détection de copié-collé

Page 114: Flex & Java @ TourJUG

Analyse statique de code: FlexMetrics

• FlexMetrics

Page 115: Flex & Java @ TourJUG

Intégration continue

Page 116: Flex & Java @ TourJUG

Intégration continue

http://www.octo.com/Java-Productivity-Primer.10/Publications

Page 117: Flex & Java @ TourJUG

les contrôles industrialisés• mise en place des règles de style de code• rapport de tests unitaires• rapport de la couverture de ces tests• contrôle automatisé des règles, des pattern et

anti-pattern de code par outils d’analyse statique de code

Page 118: Flex & Java @ TourJUG

Intégration continue: Hudson

Page 119: Flex & Java @ TourJUG

Hudson Quality reports

– Automated Unit and functional test• TestNG• FlexUnit• FlexMonkey and or RIATest

– Automated code Coverage reports• Cobertura• FlexCover

– Automated code analysis• PMD• FlexPMD

Page 120: Flex & Java @ TourJUG

Dashboard Qualité Flex

Page 121: Flex & Java @ TourJUG

Hudson Flex unit Dashboard

Page 122: Flex & Java @ TourJUG

Dashboard Qualité : Sonar

• Présentation de Sonar– http://www.parisjug.org/xwiki/bin/download/Meeting/20090915/2009-15-09-Sonar.pdf

• Sonar :– http://docs.codehaus.org/display/SONAR/Documentation

Page 123: Flex & Java @ TourJUG

Dashboard Qualité : Sonar

• Sonar

Page 124: Flex & Java @ TourJUG

Dashboard Qualité : Sonar

• Sonar Flex plugin– http://docs.codehaus.org/display/SONAR/Sonar+Flex+Plugin

Page 125: Flex & Java @ TourJUG

Questions ?