Cours AJAX Framework Spry de Adobe

Ajax : FrameWorks
Par M.Youssfi
Frameworks Ajax
 Pour éviter à un développeur Ajax d’écrire
beaucoup de code java script, de nombreux
frameworks javascript intégrant Ajax ont
été développé. Exemple :
 Spry de Adobe
 Rico
 Prototype
 Google
 Yahoo
 ….
 Dans cette partie, nous allons nous
intéresser à Spry.
Framework Spry
 Le cadre applicatif Spry 1.4 pour Ajax est une
bibliothèque JavaScript qui permet aux concepteurs
Web de créer des pages Web offrant une expérience
enrichie aux visiteurs de leurs sites.
 Avec Spry, vous pouvez utiliser du codeHTMLet CSS,
ainsi qu'une quantité minime de JavaScript, afin
 d'incorporer des données XML dans vos documents
HTML,
 de créer des widgets tels que des accordéons et des
barres de menus, ou encore ajouter différents effets
à divers éléments de page.
 Le cadre applicatif Spry est conçu de telle sorte que le
code soit simple et facile à utiliser pour toute
personne possédant une connaissance de base du
langage HTML, de CSS et de JavaScript.
Composants de Spry
 Le cadre applicatif Spry 1.4 comprend trois composants
principaux qui permettent de créer des pages dynamiques :
 Les widgets,
 les ensembles de données XML
 et les effets.
 Les widgets sont des éléments de page, comme des
accordéons et des panneaux à onglets, qui accroissent
l'attrait et l'interactivité d'une page.
 Les ensembles de données XML permettent d'afficher sur la
page Web des données provenant d'une source de données
XML,
 Enfin, les effets Spry, tels que Fondu ou Ecraser,ajoutent du
mouvement à la page, de manière à améliorer l'expérience
de l'utilisateur.
 vous pouvez afficher des données XML à l'intérieur d'un
widget et lui ajouter des effets afin de créer des pages plus
riches que ce que permet le code HTML statique.
Intégrer Spry à votre projet
 Préparation des fichiers
 Téléchargez et liez les fichiers appropriés.
 Téléchargez le fichier ZIP de Spry sur le site
Adobe® Labs. et décompressez-le sur votre
disque dur.
 Pour intégrer la totalité du framework, copiez le
dossier Spry à l’intérieur du dossier de votre
projet
 Vous pouvez renommer le dossier Spry en
choisissant un nom quelconque. Généralement
ce dossier est nommé SpryAssets
Utilisation des widgets Spry
 Un widget Spry est un élément de page qui

combine du code HTML, CSS et JavaScript
pour permettre l'interaction de l'utilisateur.
 Le widget Spry se compose des éléments
suivants :
 Structure du widget Bloc de code HTML qui
définit la composition structurelle du widget.
 Comportement du widget Du code JavaScript
qui détermine comment le widget répond aux
événements provoqués par l'utilisateur.
 Style du widget Du code CSS qui définit
l'apparence du widget.
Utilisation des widgets Spry
 Les widgets intégrés dans le framework

Spry 1.4 sont :
 Accordéon
 Panneau réductible
 Panneaux à onglet
 Barre de menus
 Champ de texte de validation
 Zone de texte de validation
 Validation de la sélection
 Validation de case à cocher
Widget Accordéon
 A. Onglet du panneau accordéon

 B. Contenu du panneau accordéon
 C. Panneau accordéon (ouvert)
Code du Widget Accordéon
 Dans l’entête de votre page HTML

 Lier la feuille de style SpryAccordion.css à votre
page
 <link href="SpryAssets/SpryAccordion.css"
rel="stylesheet" type="text/css" />
 Inclure le code javascript SpryAccordion.js dans
votre page
 <script src="SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
Code du Widget Accordéon
<body>
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 1</div>
<div class="AccordionPanelContent">
Contenu1
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 2</div>
<div class="AccordionPanelContent">
Contenu2
</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
Widget Panneau réductible
A B
 A. Développé
 B. Réduit
Code du Widget Panneau réductible

 Lier la feuille de style SpryCollapsiblePanel.css à
votre page
 <link href="SpryAssets/SpryCollapsiblePanel.css
" rel="stylesheet" type="text/css" />
 Inclure le code javascript SpryCollapsiblePanel.js
 <script src="SpryAssets/ SpryCollapsiblePanel.js "
Code du Widget Panneau réductible
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>

var C1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>
</body>
Widget Panneau à onglets
 A. Onglet
 B. Contenu
 C. Widget Panneaux à onglet
 D. Panneau à onglet
Code du Panneau à onglets

 Lier la feuille de style SpryTabbedPanels.css
 à votre page
 <link href="SpryAssets/SpryTabbedPanels.css "
 Inclure le code javascript SpryTabbedPanels.js
 <script src="SpryAssets/ SpryCollapsiblePanel.js "
Code du Widget Panneau à onglets
<body>
<div class="TabbedPanels" id="TabbedPanels1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab">Tab 1</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Tab 1 Content</div>
</div>
</div>
var Tab1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
Widget Barre de menus
Widget Barre de menus (consistant en balises <ul>, <li> et <a>)
• Elément de menu avec sous-menu

• Elément de sous-menu avec sous-menu
Code du Widget Barre de menus

 Lier la feuille de style SpryMenuBarHorizontal.css
 à votre page
<link href="SpryAssets/SpryMenuBarHorizontal.css "
 Inclure le code javascript SpryMenuBar.js
<script src="SpryAssets/SpryMenuBar.js "
Code du Widget Panneau à onglets
<body>
<ul id="menubar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
……
</li>
</ul>
var mb1 = new Spry.Widget.MenuBar("menubar1",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
Widget champ de texte validation
 A.Widget Champ de texte, conseil activé

 B.Widget Champ de texte, état valide
 C.Widget Champ de texte, état non valide
 D. Widget Champ de texte, état obligatoire
Code du Widget Champ de texte
validation
 Inclusion des styles CSS et des

bibliothèques java script
<head>

<script src="SpryAssets/SpryValidationTextField.js"

<link href="SpryAssets/SpryValidationTextField.css"
</head>
Code du Widget Champ de texte
validation
<body>
<form id="form1" name="form1" method="post" action="">

<span id="sprytextfield1">
<input type="text" name="mytextfield" id="mytextfield" />

var sptf1 = new Spry.Widget.ValidationTextField("sprytextfield1");
</script>
</body>
Widget Zone de texte validation
 A. Compteur de caractères restants

 B. Widget Zone de texte activé, nombremaximal de caractères
 C.Widget Zone de texte activé, état valide
 D.Widget Zone de texte, état obligatoire
 E. Compteur de caractères tapés
Code du Widget Zone de texte
validation
 Inclusion des styles CSS et des bibliothèques

java script
<head>
<script src="SpryAssets/SpryValidationTextarea.js"
<link href="SpryAssets/SpryValidationTextarea.css"
</head>
Code du Widget Zone de texte
validation
<body>

<span id="sprytextarea1">
<textarea name="textarea1" id="textarea1" cols="45"
rows="5"></textarea>

<span class="textareaRequiredMsg">A value is required.</span>
</span>
</form>

var sprytextarea1 = new
Spry.Widget.ValidationTextarea("sprytextarea1");
</script>
</body>
Widget Validation de la sélection
 A.Widget Validation de la sélection activé

 B.Widget Validation de la sélection, état valide
 C.Widget Validation de la sélection, état obligatoire
 D.Widget Validation de la sélection, état non valide
Code du Widget Validation d’une
sélection

java script
<head>
<script src="SpryAssets/SpryValidationSelect.js"
<link href="SpryAssets/SpryValidationSelect.css"
</head>
sélection
<body>
<span id="spryselect1">
<select name="select1" id="select1">
<option>--Please select an item--</option>
<option value="item1">Item 1</option>
<option value="-1">Invalid Item</option>
<option>Empty Item</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span>
</span>
</form>
var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1");
</script>
</body>
Widget Validation d’une case à cocher
 A. Groupe de widgets Validation de case à cocher,

nombre minimal de sélections
 B.Widget Validation de case à cocher, état obligatoire
case à cocher

java script
<head>
<script src="SpryAssets/SpryValidationCheckbox.js"
<link href="SpryAssets/SpryValidationCheckbox.css"
</head>
case à cocher
<body>

<span id="sprycheckbox1">
<input type="checkbox" name="checkbox1" value="1"/>
<input type="checkbox" name="checkbox2" value="2"/>

<span class="checkboxRequiredMsg">Please make a
selection.</span>
</span>
</form>

var sprycheckbox1 = new
Spry.Widget.ValidationCheckbox("sprycheckbox1");
</script>
</body>
Utilisation des ensembles de
données XML Spry
 Un ensemble de données XML spry est un
objet JavaScript qui permet d'afficher, sur
une pageWeb, des données provenant d'un
fichier de source de données XML.
 Vous pouvez ensuite utiliser ces données
pour créer des régions principale et de
détails sur la page.
 Ces régions sont mises à jour selon les
sélections réalisées par les visiteurs du site.
Exemple
 Soit un fichier XML dans la structure est
la suivante:
<?xml version="1.0" encoding="UTF-8"?>
<specials>
<menu_item id="1">
<item>Summer Salad</item>
<description>organic butter lettuce with apples, blood
oranges, gorgonzola, and raspberry vinaigrette.
</description>
<price>7</price>
</menu_item>
<menu_item id="2">
……..
</menu_item>
</specials>
Exemple
 L'exemple suivant crée un ensemble de données Spry
nommé dsSpecials et charge les données depuis un fichier
XML nommé cafetownsend.xml:
<head>
<title>Spry Example</title>

<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/SpryData.js">
</script>

</head>
<body>
var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml",
"specials/menu_item");
</script>
</body>
Exemple
 La portion de code javascript,
var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml",
"specials/menu_item");
 Permet de créer un objet javascript de la classe
XMLDataSet qui permet de
 charger le fichier XML cafetownsend.xml
du dossier data du serveur.
 Sélectionner les éléments XML en utilisant
l’expression Xptah "specials/menu_item« . Ce qui
permet de sélectionner tous les éléments menu_item de
l’éléments racine specials.
Région dynamique Spry
 Lorsque vous avez créé un ensemble de
données Spry, vous pouvez afficher les
données dans une région dynamique Spry.
 Une région dynamique Spry est une partie
d'une pageWeb liée à un ensemble de
données. Cette région affiche les données
XMLprovenant de l'ensemble de données et
met automatiquement à jour les données
affichées à chaque fois que l'ensemble de
données est modifié.
Tableau dynamique Spry
<div id="Specials_DIV" spry:region="dsSpecials">
<table id="Specials_Table">
<tr>
<th>Item</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr spry:repeat="dsSpecials">
<td>{item}</td>
<td>{description}</td>
<td>{price}</td>
</tr>
</table>
</div>

Cours AJAX Framework Spry de Adobe

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours AJAX Framework Spry de Adobe

Transféré par

Droits d'auteur :

Formats disponibles

Ajax : FrameWorks

 Un widget Spry est un élément de page qui

 Les widgets intégrés dans le framework

 A. Onglet du panneau accordéon

 Dans l’entête de votre page HTML

 Dans l’entête de votre page HTML

 Dans l’entête de votre page HTML

Widget Barre de menus (consistant en balises <ul>, <li> et <a>)

• Elément de menu avec sous-menu

 Dans l’entête de votre page HTML

 A.Widget Champ de texte, conseil activé

 Inclusion des styles CSS et des

 A. Compteur de caractères restants

 Inclusion des styles CSS et des bibliothèques

 A.Widget Validation de la sélection activé

 Inclusion des styles CSS et des bibliothèques

 A. Groupe de widgets Validation de case à cocher,

 Inclusion des styles CSS et des bibliothèques

Vous aimerez peut-être aussi