Quand il y a des clients riches dans l'Air (RIA et Adobe Flex)

Quand il y a des clients
riches dans l'Air

Plan

• Qui parle?
• Voyage au monde des RIA
• Flex in a nutshell

Plan

• Qui parle?
• Général
• Etudes
• Expérience


Qui parle? > Général

Qui parle?

• Camille Roux
• 23 ans
• Ingénieur étude et conception chez
• http://www.camilleroux.com

Qui parle? > Cursus

Etudes

• Polytech'Nice-Sophia
• Filière : Architecture logicielle
• Options : CLAW, Web sémantique, BD
avancées, Crypto/Sécurité, algo. avancée
• Promotion 2008

Qui parle? > Expérience

Expérience
• +1an de Flex/Air
• Utilisation avancée
• Dialogue fréquent avec des professionnels
et experts Flex
• Participation à des événements dédiés
• Veille quotidienne

Plan
• Qui parle?
• Un peu d'histoire
• Déﬁnition et classiﬁcation des RIA
• Les technologies RIA
• Conclusion


Voyage au pays des RIA > Un peu d'histoire

Evolution des Desktops
I. 1945 : Batch System 0D

II. 1955 : Interface orientée ligne 1D

III. 1965 : Plein écran 2D

IV.1980 : Interface utilisateur graphique 2.5D

V. 1995 : Nouvelle génération +3D

Voyage au pays des RIA > Un peu d'histoire

Evolution du web

Voyage au pays des RIA > Déﬁnition et classiﬁcation des RIA

Desktop Web

Rich
Internet Application
(embarqué dans le
navigateur)

RDA RIA


Desktop Web

Rich Desktop
Application
(standalone)

RDA RIA


Desktop Web

!Bonne exploitation !Pas d'installation/update
des ressources
!Déconnecté !Portable
!Conﬁdentialité des données !Fortement connecté
!Continuité du contexte !Traçage de l'utilisateur
possible
!Gestion/afﬁchage possible de !Pas de piratage de licence
grandes quantités de données

RDA RIA


Pas de serveur

Application
Desktop

Logique de
présentation
Client

Logique
business

Données
Serveur


Pas de serveur
•Page web statique
Application •Pas interactif Site web
Desktop classique

Logique de
Navigateur
présentation
Client

Logique
business

Données

Logique de
présentation
Serveur

Logique
business

Données

RIA
(Rich Internet Application)
Expérience
utilisateur similaire à
Application Client lourd celle des Desktops Site web
Desktop classique

Logique de Logique de
Navigateur
présentation présentation
Client

Logique Logique
business business

Données

Logique de
présentation
Serveur

Logique
business

Données Données

RIA
Partionnement de la
Application Client lourd Hybride logique business Site web
Desktop classique

Logique de Logique de Logique de
Navigateur
présentation présentation présentation
Client

Logique Logique Logique
business business business

Données

Logique de
présentation
Serveur

Logique
Logique
business
business

Données Données Données

RIA
Partionnement de la
Application Client lourd Hybride Hybride logique de présentation web
Site
Desktop classique

Logique de Logique de Logique de Logique de
Navigateur
présentation présentation présentation présentation
Client


Données

Logique de Logique de
présentation présentation
Serveur

Logique Logique
Logique
business business
business

Données Données Données Données

RIA
(Rich Internetle moteur de
Seul Application)
présentation est coté
Application Client lourd Hybrideclient Hybride Client léger Site web
Desktop classique

Logique de Logique de Logique de Logique de Moteur de
Navigateur
présentation présentation présentation présentation présentation
Client


Données

Logique de Logique de Logique de
présentation présentation présentation
Serveur

Logique
business

Données Données Données Données Données

Voyage au pays des RIA > Les technologies RIA

<xul/>

Les technologies RIA


Du client léger au client lourd :
Les technologies mises en jeu

Desktop RDA RIA Site web

Client Applications Air, Flash/Flex Client
AJAX HTML
lourd natives JavaFX Silverlight léger

Java+Swing/SWT XUL+XULRunner XUL GWT
OpenLazlo

Voyage au pays des RIA > Les technologies RIA > Silverlight

Nom : Silverlight
Editeur : Microsoft
Date de création : avril 2007

Licence : Propriétaire Ide : Visual Studio +
Langages : XAML / .net Expression Bend
Signes particuliers :
quot;Non compatible Linux
quot;Moonlight
quot;Non compatible Opera
quot;Version mobile en 2009


MS Visual Studio


MS Expression Bend

Voyage au pays des RIA > Les technologies RIA > Silverlight > Showcase

Voyage au pays des RIA > Les technologies RIA > Flex

Nom : Flex
Editeur : Adobe
Date de création : mars 2004

Licence : Open source Ide : Adobe Flex Builder
/Propriétaire (plugin Eclipse)
Langages : MXML Signes particuliers :
/ActionScript 3 quot;Repose sur Flash
quot;Flex 4 en 2009
quot;Adobe Air (Desktop)

Voyage au pays des RIA > Les technologies RIA > Flex

Adobe Flex Builder

Voyage au pays des RIA > Les technologies RIA > Flex > Showcase

Voyage au pays des RIA > Les technologies RIA > XUL

<xul/> Nom : XUL
Editeur : Fondation Mozilla

Licence : Format ouvert Ide : Plusieurs IDE
Langages : XUL/HTML disponibles
/CSS/DOM/Javascript Signes particuliers :
/XML
quot;Prononcer quot;zoulquot;

Voyage au pays des RIA > Les technologies RIA > XUL > Showcase

Showcase

Voyage au pays des RIA > Les technologies RIA > JavaFX

Nom : JavaFX
Editeur : Sun Microsystems
Date de création : mai 2007

Licence : Propriétaire Ide : Netbeans + plugin
Langages : Java Signes particuliers :
/JavaFX script quot;Langage de script, wrap
de Swing et Java 2D/3D
quot;JavaFX 1.0 sorti le 4
dec 2008


Java Swing JavaFX Script

import javax.swing.JFrame; import javafx.ui.*;
import javax.swing.JLabel; Frame {
import javax.swing.SwingUtilities; title: quot;My Java Applicationquot;
width: 500
public class FrameApplication { height: 300
content: Label {
public static void main(String[] args) { text: quot;Hello World!quot;
SwingUtilities.invokeLater(new Runnable() { }
public void run() { visible: true
JFrame win = new }
JFrame(quot;My Java Applicationquot;);
win.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
win.setSize(500, 300);
JLabel label = new JLabel(quot;Hello World!quot;);
win.add(label);
win.setVisible(true);
}
});
}

}


Netbeans + plugin JavaFX


AJAX?


GWT?


Titanium?


Popularité

Nombre relatif de requêtes sur Google

Source : Google Insights (décembre 2008)


Pénétration du marché
Microsoft Silverlight Adobe Flash Player

Version 1 Non installé ou < 9
6% Version 2 7%

17% Version 10
19%

Non installé Version 9
77% 75%

Version 1 Version 9
Version 2 Version 10
Non installé Non installé ou < 9
Source : riastats.com


Points communs
• Multi-plateformes (grâce à un player)
• 1 langage de description du UI + 1 langage
de programmation
• Programmation orientée événement
• UI riches
• Connectés : REST, SOAP, AMF, ...
• ...


Critères de choix
• Type d'application
• Public visé
• Utilisations avancées désirées (3D, son,
vidéo...)
• Performance / complexité de l'application
• Rendu graphique
• Communauté
• ...

Plan
• Qui parle?
• Qu'est-ce que Flex?
• Les langages
• Actionscript 3
• MXML
• Culture Flex
• Retour sur expérience
• Ressources

Flex in a nutshell > Qu'est-ce que Flex?

Qu'est-ce que Flex?


Un moyen de faire des SWF

C'est pour les développeurs

Cela permet de faire des applications

sur le web (Flex)

et sur desktop (AIR)


Historique

• Flex 1.0 : mars 2004 (Macromedia)
• Flex 1.5 : octobre 2004
• Flex 2.0 : juin 2006
• Flex 3.0 : février 2008
• Flex 4.0 (quot;Gumboquot;) : 2009

Flex in a nutshell > Les langages

Les langages


MXML

• Description de l'interface
+ logique business
+ connexion à des webservices, REST, ...
• Basé sur XML
• Intégré avec l'AS : syntaxe {...}


ActionScript 3.0
• Norme ECMAScript 4.0 (draft edition)
• Proche de Java et JavaScript
• Orienté objet
• Typé (mode strict par défaut)
• Pseudo-compilé
• Dynamique (dynamic class)
• Réﬂexif


“The power of the ActionScript language tools along with the hybrid type
checking (mostly static for tool support in Flex Builder, but dynamic
whenever it’s convenient) makes for a programming experience that I ﬁnd
much more straightforward and pleasing than Java.”

Bruce Eckel
Auteur de quot;Thinking in Javaquot;


Runtime

• Langage pseudo-compilé (byte code)
• Compilation à la volée (Just In Time Compilation)
• Monothreadé
• Ramasse-miette

Flex in a nutshell > Les langages > ActionScript 3

ActionScript 3


Variable

• var variable:String;
• var variable:String = quot;Ma chainequot;;


Constante

• const CONSTANTE:String = quot;ma chainequot;;


Quelques types de base
Types primitifs Types complexes
Boolean Object
int Array
Null Date
Number Error
String Function
uint RegExp
void XML
XMLList


Traitement
conditionnel
var entier:Number = 5;
if (entier < 0)
{
trace(quot;< 0quot;);
}
else if (entier == 0)
{
trace(quot;= 0quot;);
}
else
{
trace(quot;> 0quot;);
}


Traitement
conditionnel
var entier:String = quot;5quot;;
switch(entier)
{
case quot;5quot;:
trace(quot;le nombre est 5quot;);
break;
case quot;6quot;:
trace(quot;le nombre est 6quot;);
break;
default:
trace(quot;le nombre est différent de 5 et 6quot;);
}


Boucles

for(var i:uint ; i<10 ; i++)
{
trace(i);
}


Boucles

var i:uint = 1;
while(i<10)
{
trace(i);
i++;
}


Boucles
var i:uint=1
do
{
trace(i);
i++;
}
while(i<10);


Boucles
• var tableau:Array = new Array(quot;unquot;,quot;deuxquot;,quot;troisquot;);
for(var p:* in tableau) //itère sur les index
{
trace(p + quot; :: quot; + tableau[p]);
}

• for each (var p:* in tableau) //itère sur les valeurs
{
trace(p)
}


Programmer avec classe
package com.camilleroux.ﬂex
{
import mx.control.Button;

public class MicroOnde extends Device implements IMicroOnde
{
protected var temperature:Number;

public function MicroOnde()
{
}
public function start():void
{
}
}
}


importation de classes et
interfaces
{

{

{
}
{
}
}
}


internal : visible
package com.camilleroux.ﬂex que
{ dans son package
public : visible par
import mx.control.Button; tous

{

{
}
{
}
}
}


+ ﬁnal : ne peut
être étendue
+ dynamic : possibilité de lui ajouter
{
des attributs et méthodes au
runtime
{

{
}
{
}
}
}


•internal
package com.camilleroux.ﬂex (par défaut)
{ •public
•protected
•private
• + static
{

{
}
{
}
}
}


{

{ •internal (par défaut)
•public
•protected
•private
{ • + static
}
{
}
}
}


Interface
{
public interface IMicroOnde
{
function start():void;
}
}


Accesseurs

• public function get maVariable():Type
• public function set
maVariable(value:Type):void

Flex in a nutshell > Les langages > MXML

MXML


Hello World
Du vrai XML

<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>
<mx:Application xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;>
! <mx:Panel width=quot;200quot; height=quot;200quot;>
! ! <mx:Button label=quot;Hello worldquot;/>
! </mx:Panel>
</mx:Application>


Hello World
Base de tout
document MXML

! </mx:Panel>
</mx:Application>


Hello World
Espace de
<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>nommage
! </mx:Panel>
</mx:Application>


Hello World
mx:Application
! </mx:Panel>
mx:Panel
</mx:Application>
mx:Button


Etudions un exemple
! ! <mx:TextInput id=quot;inputquot;/>
! ! <mx:Label text=quot;Texte : {input.text}quot;/>
! ! <mx:Button label=quot;Resetquot; click=quot;{input.text=' '}quot;/>
! </mx:Panel>
</mx:Application>


Etudions un exemple
Composant
MXML
! </mx:Panel>
</mx:Application>


Etudions un exemple
id
! </mx:Panel>
</mx:Application>


Etudions un exemple
<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> Propriété
! </mx:Panel>
</mx:Application>


Etudions un exemple
! <mx:Panel width=quot;200quot; height=quot;200quot;> Binding
! </mx:Panel>
</mx:Application>


Etudions un exemple
! ! <mx:TextInput id=quot;inputquot;/> Evénement
! </mx:Panel>
</mx:Application>


Génère de l'AS
MXML Original Code généré
Option de compilation : -keep
private var _documentDescriptor_ : mx.core.UIComponentDescriptor =
new mx.core.UIComponentDescriptor({
type: mx.core.Application
,
propertiesFactory: function():Object { return {
childDescriptors: [
new mx.core.UIComponentDescriptor({
<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> type: mx.containers.Panel
,
<mx:Application xmlns:mx=quot;http:// propertiesFactory: function():Object { return {
width: 200,
www.adobe.com/2006/mxmlquot;> height: 200,
childDescriptors: [
! <mx:Panel width=quot;200quot; height=quot;200quot;> new mx.core.UIComponentDescriptor({
! ! <mx:Button label=quot;Hello worldquot;/> type: mx.controls.Button
,
! </mx:Panel> propertiesFactory: function():Object { return {
label: quot;Hello worldquot;
</mx:Application> }}
})
]
}}
})
]
}}
})


Compilation
MXML vers ActionScript 3
CSS vers ActionScript 3
ActionScript 3 vers Byte code
Assets vers SWF
Byte code vers SWF
Exécution du SWF sur Flash Player

Flex in a nutshell > Les langages > Les événements

<mx:Button label=quot;showquot; click=quot;{Alert.show('event')}quot;/>


<mx:Script>
! <![CDATA[
! ! import mx.controls.Alert;
! ! !
! ! private function showAlert(event:Event):void
! ! {
! ! ! Alert.show('event')
! ! }
! ]]>
</mx:Script>

<mx:Button label=quot;showquot; click=quot;showAlert(event)quot;/>


<mx:Script>
! <![CDATA[
! ! import mx.controls.Alert;
! !
! ! private function showAlert(event:Event):void
! ! {
! ! ! Alert.show('event')
! ! }
! ]]>
</mx:Script>

<mx:creationComplete>
! <![CDATA[
! ! bouton.addEventListener(MouseEvent.CLICK, showAlert);
! ]]>
</mx:creationComplete>

<mx:Button id=quot;boutonquot; label=quot;showquot;/>

Flex in a nutshell > Les langages > Les bindings

<mx:TextInput id=quot;inputquot;/>
<mx:Label text=quot;Texte : {input.text}quot;/>


<mx:Script>
! <![CDATA[
! ! [Bindable]
! ! private var bind:String;
! ]]>
</mx:Script>

<mx:TextInput id=quot;inputquot; change=quot;{bind=input.text}quot;/>
<mx:Label text=quot;Texte : {bind}quot;/>


<mx:creationComplete>
! <![CDATA[
! ! BindingUtils.bindProperty(lab,quot;textquot;,input,quot;textquot;);
! ]]>
</mx:creationComplete>

<mx:TextInput id=quot;inputquot;/>
<mx:Label id=quot;labquot;/>

Flex in a nutshell > Les langages > Les états

Exemple
<mx:states>
! <mx:State name=quot;monEtatquot;>
! ! <mx:SetProperty target=quot;{views}quot;
name=quot;selectedIndexquot; value=quot;2quot; />
! ! <mx:RemoveChild target=quot;{backButton}quot; />
! </mx:State>
</mx:states>

Chaque composant possède une variable currentState qui contient
l'étant courant. Il sufﬁt de le modiﬁer pour le changer d'état.
L'état par défaut a pour valeur quot;quot;.

Flex in a nutshell > Les langages > Les états

Actions possibles
SetProperty
AddChild
RemoveChild
SetEventHandler
SetStyle

Flex in a nutshell > Culture Flex > Modules et RSL

Modules
Application
principale
main.swf

Chargement
dynamique

module1.swf module2.swf module3.swf


Runtime Shared Library
Library1.swf Library2.swf

Application
principale
main.swf



Runtime Shared Library
Library1.swf Library2.swf

Application Une autre
principale application
main.swf main2.swf


Flex in a nutshell > Culture Flex > Air

Quoi de plus dans AIR?
UI natif
Accès au système (fenêtres et menus)
de ﬁchier PDF
Processus en SQLite
tâche de fond WebKit
API pour les Stockage local Monitoring de la
mises à jour connexion réseau
Contrôle du
Système de notiﬁcation
chrome


Installation d'une
application AIR

Flex in a nutshell > Retour sur expérience

• Api parfois minimalistes
• Architecture (MVC + structure par
composants)

• IDE incomplet
• Communauté active

Flex in a nutshell > Retour sur expérience

• Scroll sous Mac OS
• Temps de compilation parfois long
• Machine virtuelle à optimiser
• Développement rapide du UI

Flex in a nutshell > Ressources

Liens à connaître
• Flex Language Reference
langref/)
(http://livedocs.adobe.com/flex/3/

• Flex ressources (http://www.adobe.com/support/documentation/en/
flex/)

• Flex in a week (http://www.adobe.com/devnet/flex/videotraining/)
Vidéos et tutoriels pour apprendre Flex en 1 semaine

• Flex.org (http://flex.org/)
Agrégation d'actualités provenant de la sphère Flex/Air

• TourDeFlex (http://flex.org/tour)
RDA en Air pour explorer des ressources et des composants Flex


Frameworks
• Cairngorm (http://opensource.adobe.com/wiki/display/cairngorm/)

• PureMVC (http://puremvc.org/)

• Mate (http://mate.asfusion.com/)

• ...

• Architectures et Framework Flex / Air
par Matthieu Segret
http://techtalks.intellicore.net/2008/05/29/architectures-frameworks-ﬂex/


Frameworks

Source : Google Insights (décembre 2008)


Bibliothèques
• FlexUnit
Tests unitaires
(http://code.google.com/p/as3flexunitlib/)

• Thunderblolt (http://code.google.com/p/flash-thunderbolt/)
Logger extension

• Flexlib (http://code.google.com/p/flexlib/)
Composants graphiques

• Degrafa (http://www.degrafa.org/)
Framework graphique


Merapi

Communication par message entre AIR et JAVA

http://merapiproject.net/

Sources

• Rich Internet Applications (RIA): A Convergence
of User Interface - Florian Moritz
http://www.flomedia.de/diploma/documents/DiplomaThesisFlorianMoritz.pdf

• Flash, Flex & AIR: A brief survey - Travis Isaacs
http://www.slideshare.net/tbisaacs/flash-flex-air-a-brief-survey

• Pratique d’ActionScript 3 - Thibault Imbert
http://pratiqueactionscript3.bytearray.org

• AdvancED Flex 3 - Shashank Tiwari & Elad Elrom

Illustrations

• http://www.flickr.com/photos/gamin/383003317/

• http://www.flickr.com/photos/katej/2326033102/

• http://www.flickr.com/photos/gustty/95378937/

• http://www.flickr.com/photos/stuckincustoms/2049233526/

• http://www.flickr.com/photos/chris_gin/2197585153/

• http://www.flickr.com/photos/pgoyette/94520121/

• http://www.flickr.com/photos/gustty/95378937/

Quand il y a des clients riches dans l'Air (RIA et Adobe Flex)

Recomendados

Recomendados

Más contenido relacionado

Similar a Quand il y a des clients riches dans l'Air (RIA et Adobe Flex)

Similar a Quand il y a des clients riches dans l'Air (RIA et Adobe Flex) (20)

Más de Camille Roux

Más de Camille Roux (20)

Quand il y a des clients riches dans l'Air (RIA et Adobe Flex)