Développement Web Frameworks AJAX

Dimension: px

Commencer à balayer dès la page:

Download "Développement Web Frameworks AJAX"

Yolande Langevin
il y a 8 ans
Total affichages :

1 1 / 27 Développement Web Frameworks AJAX Jean-Michel Richer jean-michel.richer@univ-angers.fr

2 2 / 27 Objectif Objectif du cours découverte de quelques frameworks AJAX comprendre comment ils peuvent simplifier le développement Web et augmenter l interactivité avec l utilisateur

3 3 / 27 Plan Plan 1 Framework Protoype 2 Framework Scriptaculous 3 Framework Dojo

4 4 / 27 Framework Protoype Prototype Le Framework Prototype

5 5 / 27 Framework Protoype Le Framework Prototype mis au point par Sam Stephenson à partir de 2005, permet : gestion du DOM requêtes XMLHttpRequest (objet Ajax) gestion des classes chargement d un seul fichier prototype.js

org mis au point par Sam Stephenson à partir de 2005, permet

6 6 / 27 Framework Protoype Fonctionnalités liées aux objets Les objets prototype introduit un ensemble de fonctions pour gérer les objets : boolean Object.isArray(obj) boolean Object.isFunction(obj) boolean Object.isNumber(obj) boolean Object.isString(obj) boolean Object.isHash(obj) boolean Object.isElement(obj) boolean Object.isUndefined(obj) Array Object.keys(obj) Array Object.values(obj)

isFunction(obj) boolean Object.isNumber(obj) boolean Object.isString(obj) boolean Object.

7 7 / 27 Framework Protoype Fonctionnalités liées aux objets Les objets Object.clone(obj) : permet de réaliser une copie d un objet mais les valeurs ne sont pas dupliquées Object.extend(obj) : simule l héritage Object.toHTML(obj) : convertir en HTML

8 8 / 27 Framework Protoype Les chaînes de caractères Fonctions liées à la suppression string strip() : supprime les espaces en début et fin de chaîne string striptags() : supprime les balises ouvrantes et fermantes au début et en fin de chaîne string truncate([length=30]) : tronque la chaîne en fonction de la longueur

string striptags() : supprime les balises ouvrantes et fermantes au début et en

9 9 / 27 Framework Protoype Les chaînes de caractères Fonctions liées à la casse string camelize() : supprime les délimiteurs et met en majuscule la première lettre de chaque mot string capitalize() : première lettre en majuscule string dasherize() : change les soulignés en signe moins string underscore() : ajoute un caractère souligné

de chaque mot string capitalize() : première lettre en majuscule string dasherize()

10 Framework Protoype Les chaînes de caractères Fonctions liées à la modification string sub(pattern, replacement iterator [,count=1]) string gsub(pattern, replacement iterator) : remplacement d une expression régulière string interpolate(scope [,pattern]) string scan(pattern,iterator) 10 / 27

gsub(pattern, replacement iterator) : remplacement d une expression

11 Framework Protoype Support JSON Support du format JSON string Object.toJSON(obj) string array.tojson() string date.tojson() string hash.tojson() string number.tojson() string string.tojson() Object jsonstring.evaljson([sanitize=false]) 11 / 27

tojson() string hash.tojson() string number.

12 12 / 27 Framework Protoype les fonctions $ elles permettent de simplifier les traitements $() : manipulation des éléments du DOM $w() : transformer une chaîne en tableau $$() : sélection en fonction du style CSS $A() : conversion en tableau $R() : intervalle de valeurs $F() : champs de formulaires $H() : tableau associatif

DOM $w() : transformer une chaîne en tableau $$() : sélection en fonction du style

13 13 / 27 Framework Protoype Exemples Exemples void la section exemples du cours sur internet.

14 14 / 27 Framework Scriptaculous Scriptaculous Le Framework Scriptaculous

15 Framework Scriptaculous Le Framework Scriptaculous script.aculo.us mis au point par Thomas Fuchs sur-couche de prototype effets d animation, glisser-déposer 15 / 27

16 16 / 27 Framework Dojo Dojo Le Framework Dojo

17 17 / 27 Framework Dojo Le Framework Dojo créé à partir de 2004 par Alex Russell, Dylan Schiemann, David Schontzler ainsi que de nombreux autres contributeurs véritable boîte à outils qui repose sur 3 modules : Dojo coeur de la librairie Dijit (Dojo Widgets) utile pour créer des interfaces Dojox (Dojo Extensions) effets graphiques

de nombreux autres contributeurs véritable boîte à outils qui repose sur 3 modules :

18 18 / 27 Framework Dojo Utiliser Dojo Utiliser Dojo 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2 " 3 <html xmlns=" lang="fr" xml:lang="fr"> 4 <html> 5 <head> 6 <title>dojo</title> 7 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 8 <link rel="stylesheet" type="text/css" href="css.css" /> 9 <style type= text/css > "dojodir/dijit/themes/soria/soria.css"; "dojodir/dojo/resources/dojo.css"; "dojodir/dojox/grid/resources/grid.css"; "dojodir/dojox/grid/resources/soriagrid.css"; 14 </style> <script type="text/javascript" src="dojodir/dojo/dojo.js" 17 djconfig="parseonload: true, useplainjson:true"> 18 </script> 19 <script type="text/javascript"> 20 dojo.require("dojo.parser"); 21 </script> 22 <body class="soria"> </body> 25 </html>

org/1999/xhtml" lang="fr" xml:lang="fr"> 4 <html> 5 <head> 6 <title>dojo</title> 7 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 8 <link rel="stylesheet" type="text/css"

19 19 / 27 Framework Dojo Introduire les composants nécessaires Introduire les composants 1 <head> <script type="text/javascript"> 4 dojo.require("dojo.parser"); 5 dojo.require("dojo.data.itemfilereadstore"); 6 dojo.require("dijit.layout.contentpane"); 7 dojo.require("dijit.layout.tabcontainer"); 8 dojo.require("dijit.form.validationtextbox"); 9 dojo.require("dijit.tree"); 10 dojo.require("dojox.grid.datagrid"); 11 dojo.require("dojox.data.csvstore"); </script> 15 </head>

require("dijit.layout.contentpane"); 7 dojo.require("dijit.layout.tabcontainer"); 8 dojo.require("dijit.form.

20 20 / 27 Framework Dojo utiliser les widgets dojo Déclarer ou programmer 1 // declarative 2 <div dojotype="dijit.layout.contentpane" 3 href=" 4 </div> 5 6 // or programmatic 7 var pane=new dijit.layout.contentpane({ 8 href: 9 }); 10

21 21 / 27 Framework Dojo les thèmes graphiques Mise en forme Dojo possède 4 thèmes graphiques (CSS) tundra : style base soria : un peu plus recherché nihilo : très simpliste claro (version 1.5.0) il est possible de définir son propre thème

22 22 / 27 Framework Dojo La gestion des formulaires sous Dojo Mise en forme des formulaires Dojo permet de mettre en forme les composants grâce aux dojo widgets : dijit.layout.tabcontainer conteneur de panneaux avec onglet dijit.layout.contentpane panneau avec titre (onglet)

23 23 / 27 Framework Dojo La gestion des formulaires sous Dojo Champs des formulaires Plusieurs widgets peuvent être utilisés pour la saisie : dijit.form.textbox : texte simple dijit.form.validationtextbox : texte simple avec vérification de la valeur saisie dijit.form.datetextbox : saisie d une date dijit.form.combobox : liste déroulante dijit.form.simpletextarea : textarea dijit.form.button : bouton

24 24 / 27 Framework Dojo Récupérer et stocker des données ItemFileReadStore et CsvStore On peut lire les données depuis différents types de fichiers : CSV : on utilise l objet dojo.data.csvstore XML : on utilise l objet dojo.data.xmlstore JSON : on utilise l objet dojo.data.itemfilereadstore

25 25 / 27 Framework Dojo Cas de ItemFileReadStore Format de l objet ItemFileReadStore 1 { 2 identifier: "myid", 3 label: "mylabel", 4 items: [ 5 {"myid": "1", "mylabel": "Intel Q6600",...}, 6 {"myid": "2", "mylabel": "AMD Phenom X4",...}, ] 9 } L identifier permet d identifier les éléments de manière unique et le label est utilisé lors de l affichage, de la recherche ou du tri.

26 26 / 27 Framework Dojo La gestion des tableaux sous Dojo Les DataGrid On utilise le widget DataGrid qui dispose de propriétés à renseigner : store : données à afficher dans le tableau query : les données à sélectionner (filtre) clientsort : booléen qui indique la possibilité de trier suivant les colonnes rowselector : espace laissé à la sélection structure : organisation des colonnes (thead) ;

27 27 / 27 Framework Dojo Autres fonctionnalités Autres fonctionnalités modification du style des éléments de la page gestion des événements dijit.tree.foreststoremodel dijit.tree voir la documentation

Documents pareils

HTML, CSS, JS et CGI. Elanore Elessar Dimar

HTML, CSS, JS et CGI. Elanore Elessar Dimar HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML