//">

La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Symfony AJAX integration. Compatibilité & Javascript JavaScript est un langage client-side –Problème de compatibilité selon le navigateur Symfony automatise.

Présentations similaires


Présentation au sujet: "Symfony AJAX integration. Compatibilité & Javascript JavaScript est un langage client-side –Problème de compatibilité selon le navigateur Symfony automatise."— Transcription de la présentation:

1 symfony AJAX integration

2 Compatibilité & Javascript JavaScript est un langage client-side –Problème de compatibilité selon le navigateur Symfony automatise certaines actions javascripts via des helpers Le helper javascript affiche des tags standards La librairie javascript prototype est intégrée Les helpers AJAX permettent de rafraîchir une portion de page, sur un clic de lien, une modification ou une soumisssion de formulaire –Beaucoup doptions disponibles pour un maximum de souplesse La librairie JavaScript script.aculo.us, est aussi intégré pour les effets visuels La JavaScript Object Notation (JSON) est un standard permettant de faire communiquer le serveur et le script client

3 Le helper JavaScript de base //

4 Link_to_function Permet dassocier du code javascript a un lien Click me! button_to_function() existe également Pour associer du code à une image link_to_function(image_tag('myimage'), "alert('foobar')")

5 Mettre à jour un élément de la page avec JavaScript Avec le helper update_element_tag() Data processing beginning " Data processing complete " )) ) ?> Data processing beginning

6 Vous ne voyez pas lintérêt? // Remove the element before the 'indicator // and only if $condition is true update_element_function('indicator', array( 'action' => $condition ? 'remove' : 'empty', 'position' => 'before', ))

7 Mode dégradé contient de lHTML pour les navigateurs sans javascript You have JavaScript enabled. You don't have JavaScript enabled.

8 prototype La librairie prototype apporte les fonctions dont vous avez toujours rêvées pour manipuler le DOM en JavaScript node = document.getElementById('elementID'); Devient node = $('elementID'); Ou encore en tableau délément nodes = $('firstDiv', 'secondDiv');

9 Prototype et les sélecteurs CSS nodes = document.getElementByClassName('myclass'); Devient nodes = $$('.myclass'); De manière plus général avec les sélecteurs CSS nodes = $$('body div#main ul li.last img > span.legend');

10 Protoype II Litérateur each var vegetables = ['Carrots', 'Lettuce', 'Garlic']; vegetables.each(function(food) { alert('I love ' + food); }); NB pour faire du prototype stand-alone il faut linclure (il est distribué avec symfony) $prototypeDir = sfConfig::get('sf_prototype_web_dir'); $this->getResponse()->addJavascript($prototypeDir.'/js/prototype'); Ou all: javascripts: [%SF_PROTOTYPE_WEB_DIR%/js/prototype] Mais il est inclus automatiquement par les helpers AJAX

11 Helper AJAX Permet de rafraîchir un élément non plus avec du JavaScript, mais avec du code PHP exécuté par le serveur 'myzone', 'url' => 'mymodule/myaction', )) ) ?> Prototype encapsule lobjet xmlHttpRequest –Compatibilité entre navigateurs

12 Interaction AJAX Une interaction ajax se décompose en trois parties –Lappel (un lien, bouton, une minuterie, …) –Une action a exécuter côté serveur –Une zone de la page où afficher le résultat de laction Il est possible deffectuer des interactions plus complexes, si le résultat de laction est à exécuter par fonction JavaScript côté client

13 Les helpers AJAX Symfony propose de nombreux helpers AJAX –Ils contiennent tous le mot clé remote –Ils acceptent tous un tableau de paramètres AJAX –Le code produit est du HTML et non du JavaScript

14 Lien AJAX 'feedback', 'url' => 'post/delete?id='.$post->getId(), )) ?> Quand un clic sur le lien Delete this post rafraîchira la zone ayant pour id feedback avec le contenu renvoyer par laction delete de lobjet post

15 Options du liens AJAX ' s', 'url' => ), array( 'class' => 'ajax_link', ) ) ?>

16 Les formulaires AJAX pure 'item_list', 'url' => 'item/add', )) ?> Item: Lors de la soumission du formulaire la zone ayant pour id item_list est rafraîchie avec le résultat de laction add de lobjet item

17 Les formulaires AJAX pure Un formulaire AJAX ne peut pas être multipart pas dupload de fichiers

18 Les formulaires AJAX mix Item: 'item_list', 'url' => )) ?>

19 Les forumlaires AJAX mix II Le bouton AJAX ne sera visible que si JavaScript est activé Si lutilisateur presse la touche entrée cest laction spécifiée dans le formulaire qui sera exécutée –Pas laction AJAX

20 Champs de formulaire AJAX Item: 'item_suggestion', 'url' => )) ?>

21 Champs de formulaire AJAX II Le module/action associé à la règle de sera exécuté à chaque fois que lutilisateur modifie le champs observé (item), sans soumission du formulaire. Laction sera capable de récupérer la valeur de item via les paramètres de requêtes Il est possible de passer des valeurs autres que celles du champs item, sous forme dexpression JavaScript via le paramètre with

22 Champs de formulaire AJAX III 'item_suggestion', 'url' => 'with' => " 'param=' + value ", )) ?> N.B. ce helper ne produit pas de lHTML, mais un comportement pour le champs passer en paramètre Il est possible de surveiller la modification tous les champs dun formulaire –observe_form()

23 Appel périodique de fonctions distantes 60, 'update' => 'notification', 'url' => 'with' => "'param=' + \$F('mycontent')", )) ?> Pratique pour gérer une sauvegarde automatique Valeur par défaut 10 secondes Le paramètre with prend du JavaScript en paramètres et donc des expressions prototypes (fonction $F)

24 Rafraîchissement déléments distincts selon le statut de réponse de laction Hello, World! array( 'success' => 'feedback', 'failure' => 'error ), 'url' => 'post/delete?id='.$post->getId(), )) ?> Seuls les codes derreur HTTP (500, 404, et tous les codes en dehors des 2XX) reverront létat failure, et pas les actions renvoyant sfView::ERROR. Donc pour quune action AJAX renvoie un statut failure, elle doit contenir quelque chose comme $this->getResponse()- >setStatusCode(404)

25 Rafraîchir un élément relativement à un autre Hello, World! 'feedback', 'url' => 'post/delete?id='.$post->getId(), 'position' => 'after', )) ?> Le résultat de laction post/delete sera insérer après lélément feedback –Entre le div et le p Permet daccumuler des résultas dactions

26 Rafraîchir un élément relativement à un autre II La paramètre position peut prendre les valeurs suivantes –before: avant lélément –after: après lélément –top: au début début du contenu de lélément –bottom: à la fin du contenu de lélément

27 Rafraîchir un élément sous condition Message de confirmation JavaScript 'feedback', 'url' => 'post/delete?id='.$post->getId(), 'confirm' => 'Are you sure?', )) ?> test JavaScript (expression prototype) 'feedback', 'url' => 'post/delete?id='.$post->getId(), 'condition' => "$('elementID') == true", )) ?>

28 Spécifier la méthode dun action AJAX La méthode par défaut est POST La paramètre method permet de définir la méthode à utiliser 'feedback', 'url' => 'post/delete?id='.$post->getId(), 'method' => 'get', )) ?>

29 Autorisation dexécution de script Si une réponse AJAX contient du JavaScript, il ne sera pas exécuté par défaut –Réduit les risques dattaques 'feedback', 'url' => 'post/delete?id='.$post->getId(), 'script' => true, )) ?>

30 Statut dune action AJAX before: avant que la requête soit passée after: Immédiatement après que la requête soit passée et avant le chargement loading: quand la réponse distante est chargée par le navigateur loaded: quand le navigateur a fini de charger la réponse distante interactive: quand lutilisateur peut interagir avec la réponse distante, même si le chargement nest pas fini success: quand la XMLHttpRequest est terminée et que le code HTTP est en 2XX failure: quand la XMLHttpRequest est terminée et que le code HTTP nest pas en 2XX 404: quand la requête renvoie un code 404 complete: quand la XMLHttpRequest est terminée (après success ou failure)

31 Indicateur dactivité dune action AJAX Loading... 'feedback', 'url' => 'post/delete?id='.$post->getId(), 'loading' => "Element.show('indicator')", 'complete' => "Element.hide('indicator')", )) ?>

32 Effets visuels scriptaculous Syntaxe scriptaculous Met en surbrillance lélèment 'my_field' Effect.Highlight('my_field', { startcolor:'#ff99ff', endcolor:'#999999' }) Fait disparaître un élément par le bas Effect.BlindDown('id_of_element') Gère une transition sortante sur un élément Effect.Fade('id_of_element', { transition: Effect.Transitions.wobble })

33 Helpers deffets visuels en symfony Symfony encapsule les fonctions deffets visuels scriptaculous dans des helpers I was here all along! Effectuera un appel à Effect.Appear('secret_div') Le helper visual_effect est utilisable dans les statuts de laction AJAX Les effets visuels sont concaténables pour un même statut

34 Helpers deffets visuels en symfony II Loading... 'feedback', 'url' => 'post/delete?id='.$post->getId(), 'loading' => visual_effect('appear', 'indicator'), 'complete' => visual_effect('fade', 'indicator'). visual_effect('highlight', 'feedback'), )) ?>

35 JavaScript Object Notation (JSON) Format déchange de données léger Hash JavaScript utilisé pour décrire les informations dun objet Avantage pour une action AJAX –Facile à lire en JavaScript –Peut réduire le poids de la réponse Si une action AJAX doit renvoyer des données structurées à la page appelante pour un traitement JavaScript ultérieur –JSON est un bon format Cest très pratique si par exemple un appel AJAX est censé rafraîchir plusieurs éléments de la page appelante

36 JavaScript Object Notation (JSON) II var myJsonData = {"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }}

37 JavaScript Object Notation (JSON) - exemple Code HTML à rafraîchir Basic letter Dear name_here, Your was received and will be answered shortly. Sincerely, Code JSON [["title", "My basic letter"], ["name", "Mr Brown"]]

38 JavaScript Object Notation (JSON) – niveau template 'publishing/refresh', 'complete' => 'updateJSON(request, json) )) ?> Le paramètre complete a accès à len-tête json de la réponse et peut la passer à une fonction tierce. Cette fonction updateJSON() itère sur len- tête JSON et pour chaque élément du tableau, rafraîchit lélément de nom le premier paramètre avec le contenu du second paramètre

39 JavaScript Object Notation (JSON) – niveau action class publishingActions extends sfActions { public function executeRefresh() { $output = '[["title", "My basic letter"], ["name", "Mr Brown"]]'; $this->getResponse()->setHttpHeader("X-JSON", '('.$output.')'); return sfView::HEADER_ONLY; } Le protocole HTTP permet de stocker du JSON dans une en-tête de réponse (limitation de la taille des en-têtes) JSON est devenu un standard notamment au niveau web service Depuis PHP 5.2 json_encode() et json_decode() permettent de passer dun tableau PHP à du code JSON et inversement

40 Autocomplètion Find an author by name: 'off'), array('use_style' => true) ) ?> Retour attendu de author/autocomplete suggestion1 suggestion2... author/autocomplete est appelée à chaque modification du champs author

41 Autocomplètion – options use_style: permet de styler la réponse automatiquement frequency: fréquence dappel périodique (par défault 0.4s). indicator: Id dun indicateur qui sera montré en attendant que le chargement des suggestions commence et caché avec transition une fois quil est fini tokens: autorise lautocompletion incrémentale. Si le paramètre est à false, et que lutilisateur saisit « jane, george », laction ne recevra que la valeur 'george'

42 Dragndrop Carrot true)) ?> Apple true)) ?> Orange true)) ?> Your cart is empty Drag items here to add them to your cart 'cart/add', 'accept' => 'food', 'update' => 'cart', )) ?>

43 Dragndrop - options Les helpers doivent être écrits après lélément auquel il donne le comportement, mais pas forcément juste après … Options pour le helper draggable_element() –revert: true, lélément retournera à sa place une fois relâché. Ce peut être également un fonction arbitraire appelée quand lélément est relâché –ghosting: Clone lélément et déplace ce clone, en laissant lélment original en place jusquà ce quil soit déplacé –snap: false, aucun quadrillage. Sinon lélément déplaçable ne put être déplacé que sur une grille dintervalle x et y, dans ce cas là le paramètre est de la forme xy ou [x,y] ou function(x,y){ return [x,y] }. Option pour le helper drop_receiving_element() –accept: chaîne de caractère ou tableau contenant des noms de classes CSS. Lélément receveur nacceptera que des éléments déplaçable de cette (ces) classe(s) CSS –hoverclass: classe CSS class ajoutée quand lutilisateur déplace un élément déplaçable accepté au dessus de lélément receveur

44 Listes triables What do you like most? Carrots Apples Oranges // Nobody likes Brussel sprouts anyway Brussel sprouts 'item/sort', 'update' => 'feedback', 'only' => 'sortable', )) ?>

45 Listes triables - options Requête associée –POST item/sort HTTP/1.1 order[]=1&order[]=3&order[]=2&_= –La liste entère est passée sous forme de tableau (avec le format order[$rank]=$id, $rank commence à 0, et l$id associé est ce quil y a après le _ dans la propriété id de chaque element de la liste) –LId de la liste sert de nom au tableau de paramètre Options pour le helper sortable_element() –only: chaîne de caractère ou tableau contenant des noms de classes CSS. Seuls les éléments enfants de la liste triable ayant cette (ces) classe(s) pourront être triés –hoverclass: classe CSS ajouté à l élément quand la souris pas au dessus de lui –overlap: horizontal si les éléments sont affichés en ligne (inline), et vertical (valeur par défaut) pour un affichage un élément par ligne –tag: si la liste à ordonner nest pas composer de, on doit définir quel type déléments sont à rendre déplaçable (par exemple, div ou dl).

46 Edit in place You can edit this text 40, 'rows' => 10, ) ) ?> Option pour le helper input_in_place_editor_tag –cols and rows: la taille du textarea affiché (1 => simple input text) –loadTextURL: lURI dune action appelée pour afficher le texte à éditer. Pratique si le contenu éditable utilise un formatage spécial et que lutilisateur doit éditer le texte sans ce formatage –save_text et cancel_text: les texte sur le lien de sauvegarde (par défaut "ok") et celui du lien dannulation (par défaut "cancel").


Télécharger ppt "Symfony AJAX integration. Compatibilité & Javascript JavaScript est un langage client-side –Problème de compatibilité selon le navigateur Symfony automatise."

Présentations similaires


Annonces Google