Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Frameworks AJAX

    Hochgeladen von

    judeakotonou
    29 Ansichten37 Seiten

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    PPT, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PPT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    29 Ansichten37 Seiten

    Frameworks AJAX

    Hochgeladen von

    judeakotonou

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PPT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 37

    Ajax : FrameWorks

    Par M.Youssfi

    Frameworks Ajax

    Pour viter un dveloppeur Ajax dcrire beaucoup de code java script, de nombreux frameworks javascript intgrant Ajax ont t dvelopp. Exemple :

    Dans cette partie, nous allons nous intresser Spry.

    Spry de Adobe Rico Prototype Google Yahoo .

    Framework Spry

    Le cadre applicatif Spry 1.4 pour Ajax est une bibliothque JavaScript qui permet aux concepteurs Web de crer des pages Web offrant une exprience 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 donnes XML dans vos documents HTML, de crer des widgets tels que des accordons et des barres de menus, ou encore ajouter diffrents effets divers lments de page. Le cadre applicatif Spry est conu de telle sorte que le code soit simple et facile utiliser pour toute personne possdant 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 crer des pages dynamiques :

    Les widgets sont des lments de page, comme des accordons et des panneaux onglets, qui accroissent l'attrait et l'interactivit d'une page. Les ensembles de donnes XML permettent d'afficher sur la page Web des donnes provenant d'une source de donnes XML, Enfin, les effets Spry, tels que Fondu ou Ecraser,ajoutent du mouvement la page, de manire amliorer l'exprience de l'utilisateur. vous pouvez afficher des donnes XML l'intrieur d'un widget et lui ajouter des effets afin de crer des pages plus riches que ce que permet le code HTML statique.

    Les widgets, les ensembles de donnes XML et les effets.

    Intgrer Spry votre projet

    Prparation des fichiers


    Tlchargez et liez les fichiers appropris. Tlchargez le fichier ZIP de Spry sur le site Adobe Labs. et dcompressez-le sur votre disque dur. Pour intgrer la totalit du framework, copiez le dossier Spry lintrieur du dossier de votre projet Vous pouvez renommer le dossier Spry en choisissant un nom quelconque. Gnralement ce dossier est nomm SpryAssets

    Utilisation des widgets Spry

    Un widget Spry est un lment de page qui combine du code HTML, CSS et JavaScript pour permettre l'interaction de l'utilisateur. Le widget Spry se compose des lments suivants :

    Structure du widget Bloc de code HTML qui dfinit la composition structurelle du widget. Comportement du widget Du code JavaScript qui dtermine comment le widget rpond aux vnements provoqus par l'utilisateur. Style du widget Du code CSS qui dfinit l'apparence du widget.

    Utilisation des widgets Spry

    Les widgets intgrs dans le framework Spry 1.4 sont :


    Accordon Panneau rductible Panneaux onglet Barre de menus Champ de texte de validation Zone de texte de validation Validation de la slection Validation de case cocher

    Widget Accordon

    A. Onglet du panneau accordon B. Contenu du panneau accordon C. Panneau accordon (ouvert)

    Code du Widget Accordon

    Dans lentte de votre page HTML

    Lier la feuille de style SpryAccordion.css votre page Inclure le code javascript SpryAccordion.js dans votre page

    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />

    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>

    Code du Widget Accordon


    <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 rductible

    A. Dvelopp B. Rduit

    Code du Widget Panneau rductible

    Dans lentte de votre page HTML

    Lier la feuille de style SpryCollapsiblePanel.css votre page Inclure le code javascript SpryCollapsiblePanel.js

    <link href="SpryAssets/SpryCollapsiblePanel.css " rel="stylesheet" type="text/css" />

    <script src="SpryAssets/ SpryCollapsiblePanel.js " type="text/javascript"></script>

    Code du Widget Panneau rductible


    <body> <div id="CollapsiblePanel1" class="CollapsiblePanel"> <div class="CollapsiblePanelTab">Tab</div> <div class="CollapsiblePanelContent">Content</div> </div> <!--Initialize the Collapsible Panel widget object--> <script type="text/javascript"> 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

    Dans lentte de votre page HTML


    Lier la feuille de style SpryTabbedPanels.css votre page

    Inclure le code javascript SpryTabbedPanels.js

    <link href="SpryAssets/SpryTabbedPanels.css " rel="stylesheet" type="text/css" />

    <script src="SpryAssets/ SpryCollapsiblePanel.js " type="text/javascript"></script>

    Code du Widget Panneau onglets


    <body> <div class="TabbedPanels" id="TabbedPanels1"> <ul class="TabbedPanelsTabGroup"> <li class="TabbedPanelsTab">Tab 1</li> <li class="TabbedPanelsTab">Tab 2</li> <li class="TabbedPanelsTab">Tab 3</li> <li class="TabbedPanelsTab">Tab 4</li> </ul> <div class="TabbedPanelsContentGroup"> <div class="TabbedPanelsContent">Tab 1 Content</div> <div class="TabbedPanelsContent">Tab 2 Content</div> <div class="TabbedPanelsContent">Tab 3 Content</div> <div class="TabbedPanelsContent">Tab 4 Content</div> </div> </div> <script type="text/javascript"> var Tab1 = new Spry.Widget.TabbedPanels("TabbedPanels1"); </script> </body>

    Widget Barre de menus

    Widget Barre de menus (consistant en balises <ul>, <li> et <a>) A. Elment de menu avec sous-menu B. Elment de sous-menu avec sous-menu

    Code du Widget Barre de menus

    Dans lentte de votre page HTML


    Lier la feuille de style SpryMenuBarHorizontal.css votre page Inclure le code javascript SpryMenuBar.js
    <script src="SpryAssets/SpryMenuBar.js " type="text/javascript"></script>

    <link href="SpryAssets/SpryMenuBarHorizontal.css " rel="stylesheet" type="text/css" />

    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> <li><a href="#">Item 1.2</a></li> <li><a href="#">Item 1.3</a></li> </ul> </li> <li><a class="MenuBarItemSubmenu" href="#">Item 1</a> </li> </ul> <script type="text/javascript"> 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 bibliothques java script


    <head>
    <!-- Link the Spry Validation Text Field JavaScript library -->

    <script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>


    <!-- Link the CSS style sheet that styles the widget -->

    <link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" /> </head>

    Code du Widget Champ de texte validation


    <body> <form id="form1" name="form1" method="post" action=""> <!-- Create the text field widget and assign a unique id--> <span id="sprytextfield1"> <input type="text" name="mytextfield" id="mytextfield" /> <!--Display an error message>
    <span class="textfieldRequiredMsg">A value is required.</span>

    </span> </form> <!-- Initialize the Validation Text Field widget object--> <script type="text/javascript"> </script> </body>

    var sptf1 = new Spry.Widget.ValidationTextField("sprytextfield1");

    Widget Zone de texte validation

    A. Compteur de caractres restants B. Widget Zone de texte activ, nombremaximal de caractres C.Widget Zone de texte activ, tat valide D.Widget Zone de texte, tat obligatoire E. Compteur de caractres taps

    Code du Widget Zone de texte validation

    Inclusion des styles CSS et des bibliothques java script


    <head> <script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script> <link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" /> </head>

    Code du Widget Zone de texte validation


    <body> <form id="form1" name="form1" method="post" action=""> <!-- Create the text area widget and assign a unique id--> <span id="sprytextarea1"> <textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea> <!--Display an error message-->
    <span class="textareaRequiredMsg">A value is required.</span>

    </span> </form> <!-- Initialize the Validation Text Area widget object--> <script type="text/javascript"> var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1"); </script> </body>

    Widget Validation de la slection

    A.Widget Validation de la slection activ B.Widget Validation de la slection, tat valide C.Widget Validation de la slection, tat obligatoire D.Widget Validation de la slection, tat non valide

    Code du Widget Validation dune slection

    Inclusion des styles CSS et des bibliothques java script


    <head> <script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>

    <link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" /> </head>

    Code du Widget Validation dune slection


    <body> <form id="form1" name="form1" method="post" action=""> <span id="spryselect1"> <select name="select1" id="select1"> <option>--Please select an item--</option> <option value="item1">Item 1</option> <option value="item2">Item 2</option> <option value="-1">Invalid Item</option> <option value="item3">Item 3</option> <option>Empty Item</option> </select> <span class="selectRequiredMsg">Please select an item.</span> </span> </form> <script type="text/javascript"> var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1"); </script> </body>

    Widget Validation dune case cocher

    A. Groupe de widgets Validation de case cocher, nombre minimal de slections B.Widget Validation de case cocher, tat obligatoire

    Code du Widget Validation dune case cocher

    Inclusion des styles CSS et des bibliothques java script


    <head>
    <script src="SpryAssets/SpryValidationCheckbox.js" type="text/javascript"></script> <link href="SpryAssets/SpryValidationCheckbox.css" rel="stylesheet" type="text/css" />

    </head>

    Code du Widget Validation dune case cocher


    <body> <form id="form1" name="form1" method="post" action=""> <!-- Create the checkbox widget and assign a unique id--> <span id="sprycheckbox1"> <input type="checkbox" name="checkbox1" value="1"/> <input type="checkbox" name="checkbox2" value="2"/> <!--Add an error message--> <span class="checkboxRequiredMsg">Please make a selection.</span> </span> </form> <!-- Initialize the Validation Checkbox widget object--> <script type="text/javascript"> var sprycheckbox1 = new Spry.Widget.ValidationCheckbox("sprycheckbox1"); </script> </body>

    Utilisation des ensembles de donnes XML Spry

    Un ensemble de donnes XML spry est un objet JavaScript qui permet d'afficher, sur une pageWeb, des donnes provenant d'un fichier de source de donnes XML. Vous pouvez ensuite utiliser ces donnes pour crer des rgions principale et de dtails sur la page. Ces rgions sont mises jour selon les slections ralises 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 cre un ensemble de donnes Spry nomm dsSpecials et charge les donnes depuis un fichier XML nomm cafetownsend.xml:
    <head> <title>Spry Example</title> <!--Link the Spry libraries--> <script type="text/javascript" src="includes/xpath.js"></script> <script type="text/javascript" src="includes/SpryData.js"> </script> <!--Create a data set object--> </head> <body> <script type="text/javascript"> var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml", "specials/menu_item"); </script> </body>

    Exemple

    La portion de code javascript,

    Permet de crer un objet javascript de la classe XMLDataSet qui permet de charger le fichier XML cafetownsend.xml du dossier data du serveur. Slectionner les lments XML en utilisant lexpression Xptah "specials/menu_item . Ce qui

    var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml", "specials/menu_item");

    permet de slectionner tous les lments menu_item de llments racine specials.

    Rgion dynamique Spry

    Lorsque vous avez cr un ensemble de donnes Spry, vous pouvez afficher les donnes dans une rgion dynamique Spry. Une rgion dynamique Spry est une partie d'une pageWeb lie un ensemble de donnes. Cette rgion affiche les donnes XMLprovenant de l'ensemble de donnes et met automatiquement jour les donnes affiches chaque fois que l'ensemble de donnes 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>

    Das könnte Ihnen auch gefallen