# \[Paris on Rails 2006\] RJS, Ajax, JavaScript : notes **URL:** \ **Category:** FR\ **Created:** [November 20, 2006, 3:36pm UTC](https://www.ruby-forum.com/t/paris-on-rails-2006-rjs-ajax-javascript-notes/76692 "2006-11-20T15:36:00Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![Jean-FranSSSSois](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/aeb1de/32.png) [@Jean-FranSSSSois](https://www.ruby-forum.com/u/Jean-FranSSSSois)\ **Post date:** [November 20, 2006, 3:36pm UTC](https://www.ruby-forum.com/t/paris-on-rails-2006-rjs-ajax-javascript-notes/76692/1 "2006-11-20T15:36:00Z")
Paris on Rails, vendredi 17 novembre 2006. 4e présentation (après-midi). == RJS, Ajax, JavaScript - Sébastien Gruhier L’idée : faire du JavaScript sans écrire une ligne de JavaScript. - Exemple de démonstration. [NdU: La démo en ligne et le code de l’appli de Sébastien et d’ores et déjà dispo à [http://demo-por2006.xilinus.com/](http://demo-por2006.xilinus.com/) Là il montre l’équivalent de : [http://demo-por2006.xilinus.com/html](http://demo-por2006.xilinus.com/html) puis [http://demo-por2006.xilinus.com/ajax](http://demo-por2006.xilinus.com/ajax) ] Création d’un nouveau compte. on entre son Nom/Prénom et un identifiant → l’appli web nous dit si le compte est créée et l’identifiant choisi est disponible. Je réessaie mais généralement au bout de 4 fois, j’abandonne et je vais voir ailleurs. - en HTML classique : Click / Wait / Refresh. - en Ajax : traitement asynchrone. Explication : (schéma à visualiser avec une police à chasse fixe) * * * |client | → | actualisation | → | client | | | XHR | par RJS | | | * * * ``` [2] [3] ``` [2] génération de code JS en pur Ruby [3] Prototype voit que c’est du text/js et interprête le code - Deux Frameworks JS : Prototype et [Script.aculo.us](http://Script.aculo.us) grand nombres de helpers - Pourquoi utiliser des frameworks JS ? - Prototype 1.5 Object : extends → simule l’héritage de classe String : sub, gsub, camelize, escapeHTML… Array : first, last, each Event, Function - Nouveaux objets Enumerable, Element, Ajax, Form, Position - Sélection par ID avec $ : $(‘monID’).show() - CSS Sélectors avec $$ : var array = $$(‘span selected’) - syntaxe très proche de celle de Ruby [obj1, obj2, obj3].each( function(objet) { … } ); Chaînage des appels : $(‘monID’).next().show(); Gestion simple des événements Event.observe(document, ‘keydown’, maFonction); - Support d’Ajax new Ajax.Request(‘/mon\_url’, { asynchronous : true, evalScripts : true, onComplete : maCompleteFunction }); - Cross Browser exemple de ce qu’on devait faire avant : (gérer les différences d’implémentation, notamment avec IE) isLeftClick : function(event) { return (((event.which) && (event.which == 1)) || ((event.button) && (event.button == 1))); } avec Prototype : Event.isLeftClick(event); Que se passe si IE7 pas compatible avec IE6 ? faut rajouter un ((event.machin) && (event.machin == 1)) ? Là faudra juste mettre à jour Prototype qui se chargera d’implémenter ça et notre code restera _le même_. Event.isLeftClick(event); (avant et après mise à jour Prototype) - Cheet Sheet (NdU: Sébastien fait référence à ça : [Prototype Dissected - Snook.ca](http://www.snook.ca/archives/javascript/prototype_disse/) ) (à mettre en fond d’écran ?) - [Script.aculo.us](http://Script.aculo.us) - Comparatif framework, graphique trouvé chez [Ajaxian.com](http://Ajaxian.com) (NdU: je crois que c’est ça : [Purchase Intent Data for Enterprise Tech Sales and Marketing | TechTarget](http://ajaxian.com/archives/ajaxiancom-2006-survey-results) ) entre Prototype/Script.aculo.us, Dojo, DWR, Moofx, jQuery, Yahoo UI, Atlas, Mochikit, XAJAX, GWT Prototype en tête. Pas forcément utilisé avec Rails. (NdU : pas sûr : Atlas, ya que M$ qui l’utilise ?) - RJS subtile intégration des frameworks JS dans Rails côté serveur avec techno client. → écrire le moins de code HTML - Vue RJS nouveau type de vue avec extension .rjs render sans layout ( :layout =\> false) Content-Type mis à text/js - Une instance de JavaScriptGenerator (page) dispo dans le template. - #{@item.name} ” page.visual\_effect :highlight, ‘list’ page.hide ‘status-indicator’, ‘cancel-link’ Vue RJS page.select(“p.hint”).each do |hint| hint.visual\_effect :highlight end - Rendu inline Directement dans le contrôleur : render :update do |page| page.visual\_effect :blind\_up, “user\_#{params[:id]}” end → rendu directement dans le contrôleur (viole MVC mais évite un fichier rjs avec une seule ligne de code) - Respond\_to permet de gérer plusieurs types de requêtes. - Code de la démo : vue : un text\_field avec un observe\_field \<%= observe\_field “user\_login”, :frequency =\> 0.5, :url =\> {:action =\> “verify\_login” }, :with =\> “user\_login”, :loading =\> “$(‘progress’).show()”, :loaded =\> “$(‘progress’).hide()” %\> et voir le code de #verify\_login dans ajax\_controller.rb render :nothing =\> true, :status =\> ‘204 No Content’ and return unless request.xhr? and request.post? → au début de l’action pour être sûr d’avoir du POST ou de l’XmlHttpRequest (NdU: mmmh on peut pas utiliser verify à la place ?) Navigation : Rien à faire ! 5 lignes dans le contrôleur et j’ai fait un site Web2.0 ! - Tests ARTS, plugin par Kevin C. (plugin candidat à l’inclusion dans Rails) \*\* Conclusion 2 frameworks JavaScript Rails : premier framework à avoir intégrer Ajax, de manière simple et complet 90% de JS (NdU: euh… à écrire en moins ? ou couvre 90% des besoins ?) demo : [http://demo-por2006.xilinus.com](http://demo-por2006.xilinus.com) (+ sources) - Questions. 1/ render :partial et page ? :partial et page, rien à voir. Mais on peut utiliser RJS pour mettre à jour un partial. (celui qui pose la question décrit ce qu’il a essayé de faire) Euh… ça c’est la mauvaise méthode. 2/ Accessibilité d’AJAX, avec Unobstrusive JS - plugin avec un statut particulier, DHH est tombé amoureux de celui-ci depuis RailsConf Europe, où un talk était consacré à UJS. - à terme dans Rails ? 3/ Comment Prototype et Rails sont liés ? le créateur Sam S. est dans la Core Team, il a dû créer Prototype pour être intégré à Rails. 4/ Ya pas un Page dans le contrôleur, problème du MVC, c’est gênant ? (NdU: quand on fait directement un render :update do |page| dans le contrôleur) MVC : c’est une aspiration, pas une règle strict. (NdU: on peut mettre dans un helper, on met tous les unilignes dans un seul fichier helper, et voilà tout le monde est content. Voir aussi le talk de Jason Molina Jr à RailsConf Europe) ``` -- Jean-François. ```