symfony AJAX integration

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 <script> 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 d’options 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

Le helper JavaScript de base <?php use_helper('Javascript') ?> <?php echo javascript_tag("  function foobar() { ... } ") ?> <script type="text/javascript"> //<![CDATA[ //]]> </script>

Link_to_function Permet d’associer du code javascript a un lien <?php echo link_to_function('Click me!', "alert('foobar')") ?> <a href="#" onClick="alert('foobar'); return none;">Click me!</a> button_to_function() existe également Pour associer du code à une image link_to_function(image_tag('myimage'), "alert('foobar')")

Mettre à jour un élément de la page avec JavaScript <div id="indicator">Data processing beginning</div> <?php echo javascript_tag("  document.getElementById("indicator").innerHTML = "<strong>Data processing complete</strong>"; ") ?>   Avec le helper update_element_tag() <div id="indicator">Data processing beginning</div> <?php echo javascript_tag( update_element_function('indicator', array( 'content' => "<strong>Data processing complete</strong>"  )) ) ?>

Vous ne voyez pas l’inté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', ))

Mode dégradé <noscript> contient de l’HTML pour les navigateurs sans javascript <?php if_javascript(); ?> <p>You have JavaScript enabled.</p> <?php end_if_javascript(); ?> <noscript> <p>You don't have JavaScript enabled.</p> </noscript>

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');

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');

Protoype II L’itérateur each var vegetables = ['Carrots', 'Lettuce', 'Garlic']; vegetables.each(function(food) { alert('I love ' + food); }); NB pour faire du prototype stand-alone il faut l’inclure (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

Helper AJAX Permet de rafraîchir un élément non plus avec du JavaScript, mais avec du code PHP exécuté par le serveur <div id="myzone"></div> <?php echo javascript_tag( remote_function( array( 'update' => 'myzone', 'url' => 'mymodule/myaction', )) ) ?> Prototype encapsule l’objet xmlHttpRequest Compatibilité entre navigateurs

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

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

Lien AJAX <div id="feedback"></div> <?php echo link_to_remote( 'Delete this post', array( 'update' => '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 l’action delete de l’objet post

Options du liens AJAX <div id="emails"></div> <?php echo link_to_remote( image_tag('refresh'), array( 'update' => 'emails', 'url' => '@list_emails', ), 'class' => 'ajax_link', ) ) ?>

Les formulaires AJAX pure <div id="item_list"></div> <?php echo form_remote_tag( array( 'update' => 'item_list', 'url' => 'item/add', )) ?> <label for="item">Item:</label> <?php echo input_tag('item') ?> <?php echo submit_tag('Add') ?> </form> Lors de la soumission du formulaire la zone ayant pour id item_list est rafraîchie avec le résultat de l’action add de l’objet item

Les formulaires AJAX pure Un formulaire AJAX ne peut pas être multipart pas d’upload de fichiers

Les formulaires AJAX mix <div id="item_list"></div> <?php echo form_tag('@item_add_regular') ?> <label for="item">Item:</label> <?php echo input_tag('item') ?> <?php if_javascript(); ?> <?php echo submit_to_remote( 'ajax_submit', 'Add in Ajax', array( 'update' => 'item_list', 'url' => '@item_add', )) ?> <?php end_if_javascript(); ?> <noscript> <?php echo submit_tag('Add') ?> </noscript> </form>

Les forumlaires AJAX mix II Le bouton AJAX ne sera visible que si JavaScript est activé Si l’utilisateur presse la touche entrée c’est l’action spécifiée dans le formulaire qui sera exécutée Pas l’action AJAX

Champs de formulaire AJAX <?php echo form_tag('@item_add_regular') ?> <label for="item">Item:</label> <?php echo input_tag('item') ?> <div id="item_suggestion"></div> <?php echo observe_field('item', array( 'update' => 'item_suggestion', 'url' => '@item_being_typed', )) ?> <?php echo submit_tag('Add') ?> </form>

Champs de formulaire AJAX II Le module/action associé à la règle de routage @item_being_typed sera exécuté à chaque fois que l’utilisateur modifie le champs observé (item), sans soumission du formulaire. L’action 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 d’expression JavaScript via le paramètre with

Champs de formulaire AJAX III <?php echo observe_field('item', array( 'update' => 'item_suggestion', 'url' => '@item_being_typed', 'with' => " 'param=' + value ", )) ?> N.B. ce helper ne produit pas de l’HTML, mais un comportement pour le champs passer en paramètre Il est possible de surveiller la modification tous les champs d’un formulaire observe_form()

Appel périodique de fonctions distantes <div id="notification"></div> <?php echo periodically_call_remote( array( 'frequency' => 60, 'update' => 'notification', 'url' => '@watch', '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)

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

Rafraîchir un élément relativement à un autre <div id="feedback"></div> <p>Hello, World!</p> <?php echo link_to_remote( 'Delete this post', array( 'update' => 'feedback', 'url' => 'post/delete?id='.$post->getId(), 'position' => 'after', )) ?> Le résultat de l’action post/delete sera insérer après l’élément feedback Entre le div et le p Permet d’accumuler des résultas d’actions

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

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

Spécifier la méthode d’un action AJAX La méthode par défaut est POST La paramètre method permet de définir la méthode à utiliser <div id="feedback"></div> <?php echo link_to_remote( 'Delete this post', array( 'update' => 'feedback', 'url' => 'post/delete?id='.$post->getId(), 'method' => 'get', )) ?>

Autorisation d’exécution de script Si une réponse AJAX contient du JavaScript, il ne sera pas exécuté par défaut Réduit les risques d’attaques <div id="feedback"></div> <?php echo link_to_remote('Delete this post', array( 'update' => 'feedback', 'url' => 'post/delete?id='.$post->getId(), 'script' => true, )) ?>

Statut d’une 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 l’utilisateur peut interagir avec la réponse distante, même si le chargement n’est 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 n’est pas en 2XX 404: quand la requête renvoie un code 404 complete: quand la XMLHttpRequest est terminée (après success ou failure)

Indicateur d’activité d’une action AJAX <div id="feedback"></div> <div id="indicator">Loading...</div> <?php echo link_to_remote('Delete this post', array( 'update' => 'feedback', 'url' => 'post/delete?id='.$post->getId(), 'loading' => "Element.show('indicator')", 'complete' => "Element.hide('indicator')", )) ?>

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 })

Helpers d’effets visuels en symfony Symfony encapsule les fonctions d’effets visuels scriptaculous dans des helpers <div id="secret_div" style="display:none"> I was here all along! </div> <?php echo link_to_function( 'Show the secret div', visual_effect('appear', 'secret_div') ) ?> Effectuera un appel à Effect.Appear('secret_div') Le helper visual_effect est utilisable dans les statuts de l’action AJAX Les effets visuels sont concaténables pour un même statut

Helpers d’effets visuels en symfony II <div id="feedback"></div> <div id="indicator" style="display: none">Loading...</div> <?php echo link_to_remote( 'Delete this post', array( 'update' => 'feedback', 'url' => 'post/delete?id='.$post->getId(), 'loading' => visual_effect('appear', 'indicator'), 'complete' => visual_effect('fade', 'indicator'). visual_effect('highlight', 'feedback'), )) ?>

JavaScript Object Notation (JSON) Format d’échange de données léger Hash JavaScript utilisé pour décrire les informations d’un 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 C’est très pratique si par exemple un appel AJAX est censé rafraîchir plusieurs éléments de la page appelante

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()"} ] } }}

JavaScript Object Notation (JSON) - exemple Code HTML à rafraîchir <h1 id="title">Basic letter</h1> <p>Dear <span id="name">name_here</span>,</p> <p> Your e-mail was received and will be answered shortly. </p> <p>Sincerely,</p> Code JSON [["title", "My basic letter"], ["name", "Mr Brown"]]

JavaScript Object Notation (JSON) – niveau template <?php echo link_to_remote('Refresh the letter', array( 'url' => 'publishing/refresh', 'complete' => 'updateJSON(request, json)‘ )) ?> <?php echo javascript_tag(" function updateJSON(request, json) { var nbElementsInResponse = json.length; for (var i = 0; i < nbElementsInResponse; i++) { Element.update(json[i][0], json[i][1]); } ") ?> Le paramètre complete a accès à l’en-tête json de la réponse et peut la passer à une fonction tierce. Cette fonction updateJSON() itère sur l’en-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

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 d’un tableau PHP à du code JSON et inversement

Autocomplètion <?php echo form_tag('mymodule/myaction') ?> Find an author by name: <?php echo input_auto_complete_tag('author', 'default name', 'author/autocomplete', array('autocomplete' => 'off'), array('use_style' => true) ) ?> <?php echo submit_tag('Find') ?> </form> Retour attendu de author/autocomplete <ul> <li>suggestion1</li> <li>suggestion2</li> ... </ul> author/autocomplete est appelée à chaque modification du champs author

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

Drag’n’drop <ul id="items"> <li id="item_1" class="food">Carrot</li> <?php echo draggable_element('item_1', array('revert' => true)) ?> <li id="item_2" class="food">Apple</li> <?php echo draggable_element('item_2', array('revert' => true)) ?> <li id="item_3" class="food">Orange</li> <?php echo draggable_element('item_3', array('revert' => true)) ?> </ul> <div id="cart"> <p>Your cart is empty</p> <p>Drag items here to add them to your cart</p> </div> <?php echo drop_receiving_element('cart', array( 'url' => 'cart/add', 'accept' => 'food', 'update' => 'cart', )) ?>

Drag’n’drop - 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 qu’il soit déplacé snap: false, aucun quadrillage. Sinon l’élément déplaçable ne put être déplacé que sur une grille d’intervalle 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 n’acceptera que des éléments déplaçable de cette (ces) classe(s) CSS hoverclass: classe CSS class ajoutée quand l’utilisateur déplace un élément déplaçable accepté au dessus de l’élément receveur

Listes triables <p>What do you like most?</p> <ul id="order"> <li id="item_1" class="sortable">Carrots</li> <li id="item_2" class="sortable">Apples</li> <li id="item_3" class="sortable">Oranges</li> // Nobody likes Brussel sprouts anyway <li id="item_4">Brussel sprouts</li> </ul> <div id="feedback"></div> <?php echo sortable_element('order', array( 'url' => 'item/sort', 'update' => 'feedback', 'only' => 'sortable', )) ?>

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 qu’il y a après le _ dans la propriété id de chaque element de la liste) L’Id 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 n’est pas composer de <li>, on doit définir quel type d’éléments sont à rendre déplaçable (par exemple, div ou dl).

Edit in place <div id="edit_me">You can edit this text</div> <?php echo input_in_place_editor_tag('edit_me', 'mymodule/myaction', array( 'cols' => 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: l’URI d’une action appelée pour afficher le texte à éditer. Pratique si le contenu éditable utilise un formatage spécial et que l’utilisateur 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 d’annulation (par défaut "cancel").