More Related Content
Similar to Technologies pour Clients Riches
Similar to Technologies pour Clients Riches (20)
Technologies pour Clients Riches
- 1. Les technologies de développement d'IHMs
David Sciamma
© Anyware Technologies-All Right Reserved
- 2. Plan
• Anyware Technologies
• Eclipse RCP
• AJAX
• GWT
© Anyware Technologies-All Right Reserved
• Flex
• Autres technologies disponibles
- 4. Anyware Technologies
• Créée en 2000, située à Toulouse et Paris
• 75 personnes dont une équipe de 65 ingénieurs
experts. Bénéficie d'une forte croissance (>70% en
2007)
• Filiale du groupe Wavecom (Q1 2008)
© Anyware Technologies-All Right Reserved
- 5. Anyware Technologies
• 2 Activités :
►M2MSolutions : Gestion centralisée d'équipements
distants basée sur une plate-forme de services
Machine-to-Machine
© Anyware Technologies-All Right Reserved
►Open Source Solutions and Services : Expertise,
conseil et de nombreux services autour de l'Open
Source (Eclipse, Apache...) et les technologies web.
- 7. RCP
• Avant : Eclipse
►Un IDE extensible et ouvert pour tout et rien en
particulier.
• Maintenant : Eclipse RCP
►Une plateforme extensible et ouverte pour n'importe
quelle application.
© Anyware Technologies-All Right Reserved
- 8. Application RCP ?
● RCP : Rich Client Platform
● Une application lancée en local :
►Widgets natifs
►Drag & drop
►Intégrée à l'OS
►Portable
© Anyware Technologies-All Right Reserved
►Uniforme
►Evolutive
►'User friendly'
- 9. Concept RCP
• IHM « riche » et interactive :
►basée sur SWT/JFace
►widgets natifs
• Fonctions d'installations simplifiée
►Java Web Start
►Eclipse RCP minimal + mécanisme d'update Eclipse
© Anyware Technologies-All Right Reserved
- 10. Runtime
● Gestion des plugins :
● Dépendances
● Classloaders
● Basé sur OSGi (Equinox)
● Gestion des points d’extension
● Fournit un ensemble de classes utilitaires.
© Anyware Technologies-All Right Reserved
- 11. Eclipse RAP
• RAP : Rich Ajax Platform
• Apporte le Workbench au Web
►Coté serveur: Equinox
►Coté client: qooxdoo
• La librairie de widget RAP est basée sur SWT
© Anyware Technologies-All Right Reserved
- 12. Outils
• Eclipse SDK 3.4
►PDE (Plug-in Development Environment)
►JDT (Java Development Tools)
• Plug-in additionnels
►RAP SDK 1.1.0 (Rich Ajax Platform)
© Anyware Technologies-All Right Reserved
• L'ensemble sous licence EPL 1.0
• Téléchargement
►
- 14. Hello World
• Fichier plugin.xml pour déclarer une nouvelle vue
<?xml version="1.0" encoding="UTF-8"?>
<?eclipse version="3.2"?>
<plugin>
<extension
point="org.eclipse.ui.views">
<view
category="Helloworld"
class="helloworld.views.HelloView"
icon="icons/sample.gif"
© Anyware Technologies-All Right Reserved
id="helloworld.views.HelloView"
name="HelloView">
</view>
</extension>
</plugin>
- 15. Hello World
• Fichier HelloView.java créant le contenu de la vue
package helloworld.views;
import org.eclipse.swt.SWT;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Label;
import org.eclipse.ui.part.ViewPart;
public class HelloView extends ViewPart {
public void createPartControl(Composite parent) {
© Anyware Technologies-All Right Reserved
Label hello = new Label(parent, SWT.CENTER);
hello.setText("Bonjour tout le monde");
}
@Override
public void setFocus() {
// Do nothing
}
}
- 19. Qu'est ce que l' « Ajax »
• Définition
►Ce n'est pas un language
►Asynchronous Javascript And Xml
►XMLHttpRequest
© Anyware Technologies-All Right Reserved
►Permet de communiquer avec le serveur sans recharger
entièrement la page
- 20. Qu'est ce que l' « Ajax »
• Architectures avec et sans Ajax
© Anyware Technologies-All Right Reserved
- 21. Qu'est ce que l' « Ajax »
• Librairies Graphiques
►Composants graphiques riches
►Boite de dialogue, Arbre, Grille, ...
►Permet le développement d'application riche (Riche
Internet Application)
© Anyware Technologies-All Right Reserved
►S'appuie parfois sur les librairies type « utilitaires »
- 22. Qu'est ce que l' « Ajax »
• Exemples
►Ext JS
►http://extjs.com
►Dojo Toolkit
►http://www.dojotoolkit.org
© Anyware Technologies-All Right Reserved
►Yahoo UI
►http://developer.yahoo.com/yui
- 23. Outils
• Editeur de texte
►Coloration Syntaxique javascript
• Eclipse avec les plugins Web Tools
►http://www.eclipse.org/webtools
►Licence EPL 1.0
© Anyware Technologies-All Right Reserved
• Debugger Javascript
►Firebug (plugin firefox)
►Firebug lite (« firebug » sous IE)
►http://getfirebug.com
►Licence MPL 1.1
- 25. Hello World
• helloworld/hello.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css">
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"/>
<script type="text/javascript" src="/ext/ext-all.js"/>
<script type="text/javascript" src="./hello.js"/>
<title>
Hello World - EXT JS
</title>
</head>
© Anyware Technologies-All Right Reserved
<body style="padding:20px">
<h1>Hello World Exemple</h1>
<br>
<p>Création de 2 panneaux avec Ext js</p>
<br/>
<div id="panel1">
Bonjour
</div>
</body>
</html>
- 26. Hello World
• helloworld/hello.js
Ext.BLANK_IMAGE_URL = '../../ext/resources/images/s.gif';
Ext.onReady(function() {
Ext.QuickTips.init();
//creation du panneau 1 à partir de l'élément id="panel1"
var panel1 = new Ext.Panel({
title: 'Panneau 1',
renderTo:'panel1',
width: 150,
bodyStyle:'padding:5px 5px 0',
© Anyware Technologies-All Right Reserved
margin:'5 5 5 5',
frame:true,
html:'<p>Bonjour tout le monde</p>'
});
});
Í
- 29. Introduction à GWT
• Création en 2006, à l'initiative de Google
• Technologie Open Source (Licence Apache 2)
• Permet d'écrire des applications « Ajax » en utilisant
Java
• Version stable : 1.4
• La version 1.5 sera disponible sous peu
© Anyware Technologies-All Right Reserved
- 30. Principes généraux GWT
• Un seul langage de programmation : Java (1.5)
►Compilé en JavaScript
►Puissance de l'IDE Java à la disposition du développeur
• Paradigme MVC, « à la Swing »
►Composants légers
►« Listeners »
© Anyware Technologies-All Right Reserved
- 31. Support multi-navigateurs
• Le framework GWT garantit l'interopérabilité
• Widget natif du browser quand possible (bouton,
combo, ...)
►performances
►accessibilité
• Émulation avec des div sinon
© Anyware Technologies-All Right Reserved
- 32. ...et aussi
• Animations
• Thèmes
• Internationalisation/Accessibilité
►« BiDi »
►pluralisation
• ...
© Anyware Technologies-All Right Reserved
- 33. Outils
• Eclipse for Java EE Developers
►IDE Java avancé
►Webtools
►http://www.eclipse.org/downloads/packages/
►Licence EPL 1.0
• Plug-in Cypal Studio
© Anyware Technologies-All Right Reserved
►Assistants de création de modules, de services
►« Launch configuration »
►http://www.cypal.in/studio
►Gratuit mais pas open source
- 35. Hello World
package monprojet.monmodule.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
public class MonModule implements EntryPoint {
public void onModuleLoad() {
Label l = new Label("Hello world!");
© Anyware Technologies-All Right Reserved
RootPanel.get().add(l);
}
}
- 38. Qu'est ce que Flex ?
• Technologie d'Adobe basée sur Flash
►Flash est présent sur 95% des PC
►Framework permettant de développer pour Flash
• Open Source depuis 2007
• Format et compilateur ouvert
• Environnement de développement avancé payant
© Anyware Technologies-All Right Reserved
- 39. Architecture d'une application Flex
Projet Flex
Fichier MXML
Fichier MXML
Fichier MXML
décrit l'IHM de
décrit l'IHM de
décrit l'IHM de
manière déclarative
manière déclarative
manière déclarative
compilation
Application Flash
© Anyware Technologies-All Right Reserved
SWF
Fichier ActionScript
Fichier ActionScript
Fichier ActionScript
contient le code gérant
contient le code gérant
contient le code gérant
la logique de l'application
la logique de l'application
la logique de l'application
- 40. Architecture d'une application Flex
• MXML (Macromedia Flex Markup Language)
►Description d'interfaces graphiques via XML
►Ensemble de composants graphiques utilisables dans le
MXML et l'ActionScript
<mx:Label text="Helloworld"/>
►Possibilité d'intégrer de l'ActionScript dans le MXML
© Anyware Technologies-All Right Reserved
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</mx:Script>
<mx:Button label="Action" click="Alert.show('Test');"/>
</mx:Application>
- 41. Architecture d'une application Flex
• ActionScript 3
►Langage de script basé sur ECMAScript
►ActionScript et JavaScript ont une syntaxe semblable
►Orienté Objet !
package com.anwrt.richclient
{
import mx.collections.XMLListCollection;
© Anyware Technologies-All Right Reserved
/**
* This class is in charge ...
*/
public class MyClass extends MyAbstractClass
{
override public function myMethod(model:Object = null):Boolean
{
var branch:Boolean = false;
...
}
...
}
- 42. Outils
• SDK Flex
►Open Source (MPL 1.1)
►Ensemble des librairies Flex
►Compilateur en ligne de commande
mxmlc src/Main.mxml -o Main.swf -default-size 100 50
© Anyware Technologies-All Right Reserved
- 43. Outils
• Flex Builder 3
►Payant
►Basé sur Eclipse
►Compilateur intégré
►Editeurs textuels avancés (auto-complétion, syntax
highlight...)
© Anyware Technologies-All Right Reserved
►Editeur WYSIWIG
►Debug
- 45. Hello World
• Fichier MXML : Helloworld.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
include "Helloworld.as";
]]>
© Anyware Technologies-All Right Reserved
</mx:Script>
<mx:Label text="Helloworld" fontSize="24"/>
<mx:Button label="Action" id="actionButton" click="actionToExecute();"/>
</mx:Application>
- 46. Hello World
• Fichier ActionScript : Helloworld.as
// ActionScript file
import mx.controls.Alert;
/**
* Action executed when the user click on the button
*/
private function actionToExecute() : void
{
© Anyware Technologies-All Right Reserved
Alert.show('Action executed');
}
- 49. Silverlight et WPF
• WPF : Windows Presentation Framework
• Développement en .NET et XAML
• Silverlight permet de faire fonctionner une
application WPF dans un navigateur
© Anyware Technologies-All Right Reserved
• Compatible Windows et MacOS
• Moonlight : version Linux
- 50. JavaFX
• Solution développée récemment par Sun pour
revenir sur le marché du client riche
• Langage de script orienté interface graphique
• La logique applicative est ensuite développé en
Java
© Anyware Technologies-All Right Reserved
• Fonctionne dans un navigateur mais aussi sur le
Desktop et à terme sur les terminaux mobiles
- 51. XUL
• XUL : XML User Language
• Technologie de la Fondation Mozilla plutôt
ancienne
• Logique applicative en JavaScript
© Anyware Technologies-All Right Reserved
• Base de Firefox, Thunderbird et l'ensemble des
application Mozilla
- 53. Conclusion
• Critères de choix
►Open Source / Propriétaire
►Outillage
►Maturité
►Communauté
►Modularité
© Anyware Technologies-All Right Reserved
- 54. Conclusion
• Le choix de la technologie dépend avant tout du
besoin
►Utilisation de l'application : continu, ponctuelle...
►Type d'application :
− CRUD,
− Saisie de masse,
© Anyware Technologies-All Right Reserved
− Supervision / Analyse de données,
− Configuration / Edition graphique...
- 55. Tableau comparatif
PF
AX
W
AJ
/
AP
ht
IR
rie
lig
/A
/R
FX
er
ai
T
va
x
P
L
br
lv
W
e
XU
RC
Ja
Si
Li
Fl
G
Open Source
Outils
Mode déconnecté
Déploiement
Communauté
© Anyware Technologies-All Right Reserved
RIA
RDA
Terminaux mobiles
Maturité
Modularité