Enviar pesquisa
Carregar
Technologies pour Clients Riches
•
0 gostou
•
597 visualizações
David Sciamma
Seguir
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 56
Baixar agora
Baixar para ler offline
Recomendados
Présentation Eranea à Open Source Now 2012
Présentation Eranea à Open Source Now 2012
Didier Durand
Codedarmor 2012 - 03/04 - Android, What else?
Codedarmor 2012 - 03/04 - Android, What else?
codedarmor
Formation Usine Logicielle gratuite par Ippon 2014
Formation Usine Logicielle gratuite par Ippon 2014
Ippon
Usine Logicielle 2013
Usine Logicielle 2013
Stéphane Liétard
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
Stéphane Traumat
Gwt oxiane-novae-lr
Gwt oxiane-novae-lr
oxmed
Introduction To Eclipse RCP
Introduction To Eclipse RCP
whbath
Introduction à La Sécurité Informatique 1/2
Introduction à La Sécurité Informatique 1/2
Sylvain Maret
Recomendados
Présentation Eranea à Open Source Now 2012
Présentation Eranea à Open Source Now 2012
Didier Durand
Codedarmor 2012 - 03/04 - Android, What else?
Codedarmor 2012 - 03/04 - Android, What else?
codedarmor
Formation Usine Logicielle gratuite par Ippon 2014
Formation Usine Logicielle gratuite par Ippon 2014
Ippon
Usine Logicielle 2013
Usine Logicielle 2013
Stéphane Liétard
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
Stéphane Traumat
Gwt oxiane-novae-lr
Gwt oxiane-novae-lr
oxmed
Introduction To Eclipse RCP
Introduction To Eclipse RCP
whbath
Introduction à La Sécurité Informatique 1/2
Introduction à La Sécurité Informatique 1/2
Sylvain Maret
Introduction aux Clients Riches
Introduction aux Clients Riches
David Sciamma
PHP dans le cloud
PHP dans le cloud
Microsoft
Php dans le cloud
Php dans le cloud
Christophe Villeneuve
Model de qualité @ msdevmtl
Model de qualité @ msdevmtl
MSDEVMTL
alphorm.com - Formation proxmoxVE 3
alphorm.com - Formation proxmoxVE 3
Alphorm
Introduction JavaEE
Introduction JavaEE
Mourad HASSINI
0251-formation-java-programmation-objet.pdf
0251-formation-java-programmation-objet.pdf
Ombotimbe Salifou
Alphorm.com Formation KVM
Alphorm.com Formation KVM
Alphorm
Migration de technologie J2EE vers PHP à M6Web
Migration de technologie J2EE vers PHP à M6Web
Olivier NOEL
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et ...
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et ...
Jasmine Conseil
Flex & Java @ TourJUG
Flex & Java @ TourJUG
François Le Droff
Structures hybrides : l'apport des infrastructures libres aux moteurs de rech...
Structures hybrides : l'apport des infrastructures libres aux moteurs de rech...
Aref Jdey
Webcast Oracle - Gestion des risques liés à l'obsolescence et la sécurité de ...
Webcast Oracle - Gestion des risques liés à l'obsolescence et la sécurité de ...
Jean-Marc Hui Bon Hoa
WygDay 2010 - Applications Virtuelles
WygDay 2010 - Applications Virtuelles
Wygwam
Stratégie Logicielle Sun Aquarium Paris
Stratégie Logicielle Sun Aquarium Paris
Alexis Moussine-Pouchkine
Objet Direct Formation Java pour devenir autonome
Objet Direct Formation Java pour devenir autonome
formationobjetdirect
AFUP 2010 : Industrialisation de PHP, l'exemple de CANAL+
AFUP 2010 : Industrialisation de PHP, l'exemple de CANAL+
Raphaël Carles
UGAP - Dynamic Tour - Annuaire et solution d'administration
UGAP - Dynamic Tour - Annuaire et solution d'administration
Alcatel-Lucent Enterprise France
Module Encodage Easytouse Light
Module Encodage Easytouse Light
fchaabane
Video Encoding Solution
Video Encoding Solution
sthiebe
Mais conteúdo relacionado
Semelhante a Technologies pour Clients Riches
Introduction aux Clients Riches
Introduction aux Clients Riches
David Sciamma
PHP dans le cloud
PHP dans le cloud
Microsoft
Php dans le cloud
Php dans le cloud
Christophe Villeneuve
Model de qualité @ msdevmtl
Model de qualité @ msdevmtl
MSDEVMTL
alphorm.com - Formation proxmoxVE 3
alphorm.com - Formation proxmoxVE 3
Alphorm
Introduction JavaEE
Introduction JavaEE
Mourad HASSINI
0251-formation-java-programmation-objet.pdf
0251-formation-java-programmation-objet.pdf
Ombotimbe Salifou
Alphorm.com Formation KVM
Alphorm.com Formation KVM
Alphorm
Migration de technologie J2EE vers PHP à M6Web
Migration de technologie J2EE vers PHP à M6Web
Olivier NOEL
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et ...
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et ...
Jasmine Conseil
Flex & Java @ TourJUG
Flex & Java @ TourJUG
François Le Droff
Structures hybrides : l'apport des infrastructures libres aux moteurs de rech...
Structures hybrides : l'apport des infrastructures libres aux moteurs de rech...
Aref Jdey
Webcast Oracle - Gestion des risques liés à l'obsolescence et la sécurité de ...
Webcast Oracle - Gestion des risques liés à l'obsolescence et la sécurité de ...
Jean-Marc Hui Bon Hoa
WygDay 2010 - Applications Virtuelles
WygDay 2010 - Applications Virtuelles
Wygwam
Stratégie Logicielle Sun Aquarium Paris
Stratégie Logicielle Sun Aquarium Paris
Alexis Moussine-Pouchkine
Objet Direct Formation Java pour devenir autonome
Objet Direct Formation Java pour devenir autonome
formationobjetdirect
AFUP 2010 : Industrialisation de PHP, l'exemple de CANAL+
AFUP 2010 : Industrialisation de PHP, l'exemple de CANAL+
Raphaël Carles
UGAP - Dynamic Tour - Annuaire et solution d'administration
UGAP - Dynamic Tour - Annuaire et solution d'administration
Alcatel-Lucent Enterprise France
Module Encodage Easytouse Light
Module Encodage Easytouse Light
fchaabane
Video Encoding Solution
Video Encoding Solution
sthiebe
Semelhante a Technologies pour Clients Riches
(20)
Introduction aux Clients Riches
Introduction aux Clients Riches
PHP dans le cloud
PHP dans le cloud
Php dans le cloud
Php dans le cloud
Model de qualité @ msdevmtl
Model de qualité @ msdevmtl
alphorm.com - Formation proxmoxVE 3
alphorm.com - Formation proxmoxVE 3
Introduction JavaEE
Introduction JavaEE
0251-formation-java-programmation-objet.pdf
0251-formation-java-programmation-objet.pdf
Alphorm.com Formation KVM
Alphorm.com Formation KVM
Migration de technologie J2EE vers PHP à M6Web
Migration de technologie J2EE vers PHP à M6Web
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et ...
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et ...
Flex & Java @ TourJUG
Flex & Java @ TourJUG
Structures hybrides : l'apport des infrastructures libres aux moteurs de rech...
Structures hybrides : l'apport des infrastructures libres aux moteurs de rech...
Webcast Oracle - Gestion des risques liés à l'obsolescence et la sécurité de ...
Webcast Oracle - Gestion des risques liés à l'obsolescence et la sécurité de ...
WygDay 2010 - Applications Virtuelles
WygDay 2010 - Applications Virtuelles
Stratégie Logicielle Sun Aquarium Paris
Stratégie Logicielle Sun Aquarium Paris
Objet Direct Formation Java pour devenir autonome
Objet Direct Formation Java pour devenir autonome
AFUP 2010 : Industrialisation de PHP, l'exemple de CANAL+
AFUP 2010 : Industrialisation de PHP, l'exemple de CANAL+
UGAP - Dynamic Tour - Annuaire et solution d'administration
UGAP - Dynamic Tour - Annuaire et solution d'administration
Module Encodage Easytouse Light
Module Encodage Easytouse Light
Video Encoding Solution
Video Encoding Solution
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
3.
© Anyware Technologies-All
Right Reserved Anyware Technologies
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.
6.
© Anyware Technologies-All
Right Reserved Eclipse RCP
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 ►
13.
© Anyware Technologies-All
Right Reserved Hello World
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 } }
16.
© Anyware Technologies-All
Right Reserved Application d'exemple (RCP)
17.
© Anyware Technologies-All
Right Reserved Application d'exemple (RAP)
18.
© Anyware Technologies-All
Right Reserved AJAX
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
24.
© Anyware Technologies-All
Right Reserved Hello World
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>' }); }); Í
27.
© Anyware Technologies-All
Right Reserved Application d'exemple
28.
© Anyware Technologies-All
Right Reserved GWT
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
34.
© Anyware Technologies-All
Right Reserved Hello World
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); } }
36.
© Anyware Technologies-All
Right Reserved Application d'exemple
37.
© Anyware Technologies-All
Right Reserved Flex
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
44.
© Anyware Technologies-All
Right Reserved Hello World
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'); }
47.
© Anyware Technologies-All
Right Reserved Application d'exemple
48.
© Anyware Technologies-All
Right Reserved Autres technologies
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
52.
© Anyware Technologies-All
Right Reserved Conclusion
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é
56.
© Anyware Technologies-All
Right Reserved Merci Questions ?
Baixar agora