[doc/book] talk about reloadComponent, misc tweaks and notes stable
authorAurelien Campeas <aurelien.campeas@logilab.fr>
Tue, 06 Apr 2010 18:36:09 +0200
branchstable
changeset 5157 1202e6565aff
parent 5156 0ec436cba1a6
child 5164 4d99cccffe36
child 5171 1c2567af37dd
child 5206 b33469113dd1
[doc/book] talk about reloadComponent, misc tweaks and notes
doc/book/en/annexes/faq.rst
doc/book/en/development/devweb/js.rst
doc/book/en/development/entityclasses/application-logic.rst
web/data/cubicweb.ajax.js
web/views/basecontrollers.py
--- a/doc/book/en/annexes/faq.rst	Tue Apr 06 18:03:52 2010 +0200
+++ b/doc/book/en/annexes/faq.rst	Tue Apr 06 18:36:09 2010 +0200
@@ -395,5 +395,5 @@
 How do I translate an msg id defined (and translated) in another cube ?
 -----------------------------------------------------------------------
 
-You should but these translations in the `i18n/static-messages.pot`
+You should put these translations in the `i18n/static-messages.pot`
 file of your own cube.
--- a/doc/book/en/development/devweb/js.rst	Tue Apr 06 18:03:52 2010 +0200
+++ b/doc/book/en/development/devweb/js.rst	Tue Apr 06 18:36:09 2010 +0200
@@ -4,9 +4,8 @@
 ----------
 
 *CubicWeb* uses quite a bit of javascript in its user interface and
-ships with jquery (1.3.x) and parts of the jquery UI
-library, plus a number of homegrown files and also other thirparty
-libraries.
+ships with jquery (1.3.x) and parts of the jquery UI library, plus a
+number of homegrown files and also other thir party libraries.
 
 All javascript files are stored in cubicweb/web/data/. There are
 around thirty js files there. In a cube it goes to data/.
@@ -23,7 +22,7 @@
 
 XXX external_resources variable (which needs love)
 
-CubicWeb javascript api
+CubicWeb javascript API
 ~~~~~~~~~~~~~~~~~~~~~~~
 
 Javascript resources are typically loaded on demand, from views. The
@@ -57,13 +56,18 @@
 Important AJAX APIS
 ~~~~~~~~~~~~~~~~~~~
 
+* `asyncRemoteExec` and `remoteExec` are the base building blocks for
+  doing arbitrary async (resp. sync) communications with the server
+
+* `reloadComponent` is a convenience function to replace a DOM node
+  with server supplied content coming from a specific registry (this
+  is quite handy to refresh the content of some boxes for instances)
+
 * `jQuery.fn.loadxhtml` is an important extension to jQuery which
-  allow proper loading and in-place DOM update of xhtml views. It is
+  allows proper loading and in-place DOM update of xhtml views. It is
   suitably augmented to trigger necessary events, and process CubicWeb
   specific elements such as the facet system, fckeditor, etc.
 
-* `asyncRemoteExec` and `remoteExec` are the base building blocks for
-  doing arbitrary async (resp. sync) communications with the server
 
 A simple example with asyncRemoteExec
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -89,20 +93,108 @@
 
 .. sourcecode: javascript
 
-    function async_hello(name) {
+    function asyncHello(name) {
         var deferred = asyncRemoteExec('say_hello', name);
         deferred.addCallback(function (response) {
             alert(response);
         });
-        deferred.addErrback(function () {
+        deferred.addErrback(function (error) {
             alert('something fishy happened');
         });
      }
 
-     function sync_hello(name) {
+     function syncHello(name) {
          alert( remoteExec('say_hello', name) );
      }
 
+Anatomy of a reloadComponent call
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+`reloadComponent` allows to dynamically replace some DOM node with new
+elements. It has the following signature:
+
+* `compid` (mandatory) is the name of the component to be reloaded
+
+* `rql` (optional) will be used to generate a result set given as
+  argument to the selected component
+
+* `registry` (optional) defaults to 'components' but can be any other
+  valid registry name
+
+* `nodeid` (optional) defaults to compid + 'Component' but can be any
+  explicitly specified DOM node id
+
+* `extraargs` (optional) should be a dictionary of values that will be
+  given to the cell_call method of the component
+
+A simple reloadComponent example
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The server side implementation of `reloadComponent` is the
+js_component method of the JSonController.
+
+The following function implements a two-steps method to delete a
+standard bookmark and refresh the UI, while keeping the UI responsive.
+
+.. sourcecode:: javascript
+
+    function removeBookmark(beid) {
+        d = asyncRemoteExec('delete_bookmark', beid);
+        d.addCallback(function(boxcontent) {
+	    reloadComponent('bookmarks_box', '', 'boxes', 'bookmarks_box');
+            document.location.hash = '#header';
+            updateMessage(_("bookmark has been removed"));
+         });
+    }
+
+`reloadComponent` is called with the id of the bookmark box as
+argument, no rql expression (because the bookmarks display is actually
+independant of any dataset context), a reference to the 'boxes'
+registry (which hosts all left, right and contextual boxes) and
+finally an explicit 'bookmarks_box' nodeid argument that stipulates
+the target DOM node.
+
+Anatomy of a loadxhtml call
+~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+`jQuery.fn.loadxhtml` is an important extension to jQuery which allows
+proper loading and in-place DOM update of xhtml views. The existing
+`jQuery.load`_ function does not handle xhtml, hence the addition. The
+API of loadxhtml is roughly similar to that of `jQuery.load`_.
+
+.. _`jQuery.load`: http://api.jquery.com/load/
+
+
+* `url` (mandatory) should be a complete url (typically referencing
+  the JSonController, but this is not strictly mandatory)
+
+* `data` (optional) is a dictionary of values given to the
+  controller specified through an `url` argument; some keys may have a
+  special meaning depending on the choosen controller (such as `fname`
+  for the JSonController); the `callback` key, if present, must refer
+  to a function to be called at the end of loadxhtml (more on this
+  below)
+
+* `reqtype` (optional) specifies the request method to be used (get or
+  post); if the argument is 'post', then the post method is used,
+  otherwise the get method is used
+
+* `mode` (optional) is one of `replace` (the default) which means the
+  loaded node will replace the current node content, `swap` to replace
+  the current node with the loaded node, and `append` which will
+  append the loaded node to the current node content
+
+About the `callback` option:
+
+* it is called with two parameters: the current node, and a list
+  containing the loaded (and post-processed node)
+
+* whenever is returns another function, this function is called in
+  turn with the same parameters as above
+
+This mechanism allows callback chaining.
+
+
 A simple example with loadxhtml
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
@@ -110,7 +202,7 @@
 injected in the live DOM. The view will be of course selected
 server-side using an entity eid provided by the client side.
 
-.. sourcecode: python
+.. sourcecode:: python
 
     from cubicweb import typed_eid
     from cubicweb.web.views.basecontrollers import JSonController, xhtmlize
@@ -121,7 +213,7 @@
         entity = self._cw.entity_from_eid(typed_eid(eid))
         return entity.view('frob', name=frobname)
 
-.. sourcecode: javascript
+.. sourcecode:: javascript
 
     function update_some_div(divid, eid, frobname) {
         var params = {fname:'frob_status', eid: eid, frobname:frobname};
@@ -131,7 +223,7 @@
 In this example, the url argument is the base json url of a cube
 instance (it should contain something like
 `http://myinstance/json?`). The actual JSonController method name is
-encoded in the `params` dictionnary using the `fname` key.
+encoded in the `params` dictionary using the `fname` key.
 
 A more real-life example from CubicWeb
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -144,7 +236,7 @@
 We present here a skeletal version of the mecanism used in CubicWeb
 and available in web/views/tabs.py, in the `LazyViewMixin` class.
 
-.. sourcecode: python
+.. sourcecode:: python
 
     def lazyview(self, vid, rql=None):
         """ a lazy version of wview """
@@ -161,7 +253,7 @@
                    load_now('#lazy-%(vid)s');});"""
             % {'event': 'load_%s' % vid, 'vid': vid})
 
-This creates a `div` with an specific event associated to it.
+This creates a `div` with a specific event associated to it.
 
 The full version deals with:
 
@@ -177,7 +269,7 @@
 
 The javascript side is quite simple, due to loadxhtml awesomeness.
 
-.. sourcecode: javascript
+.. sourcecode:: javascript
 
     function load_now(eltsel) {
         var lazydiv = jQuery(eltsel);
@@ -205,10 +297,10 @@
 computation-intensive web page could be scinded into one fast-loading
 part and a delayed part).
 
-In the server side, a simple call to a javascript function is
+On the server side, a simple call to a javascript function is
 sufficient.
 
-.. sourcecode: python
+.. sourcecode:: python
 
     def forceview(self, vid):
         """trigger an event that will force immediate loading of the view
@@ -218,49 +310,17 @@
 
 The browser-side definition follows.
 
-.. sourcecode: javascript
+.. sourcecode:: javascript
 
     function trigger_load(divid) {
         jQuery('#lazy-' + divd).trigger('load_' + divid);
     }
 
 
-Anatomy of a lodxhtml call
-~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-The loadxhtml extension to jQuery accept many parameters with rich
-semantics. Let us detail these.
-
-* `url` (mandatory) should be a complete url, typically based on the
-  JSonController, but this is not strictly mandatory
-
-* `data` (optional) is a dictionnary of values given to the
-  controller specified through an `url` argument; some keys may have a
-  special meaning depending on the choosen controller (such as `fname`
-  for the JSonController); the `callback` key, if present, must refer
-  to a function to be called at the end of loadxhtml (more on this
-  below)
-
-* `reqtype` (optional) specifies the request method to be used (get or
-  post); if the argument is 'post', then the post method is used,
-  otherwise the get method is used
-
-* `mode` (optional) is one of `replace` (the default) which means the
-  loaded node will replace the current node content, `swap` to replace
-  the current node with the loaded node, and `append` which will
-  append the loaded node to the current node content
 
 
-About the `callback` option:
-
-* it is called with two parameters: the current node, and a list
-  containing the loaded (and post-processed node)
-
-* whenever is returns another function, this function is called in
-  turn with the same parameters as above
-
-This mecanism allows callback chaining.
-
+XXX reloadComponent
+XXX userCallback / user_callback
 
 Javascript library: overview
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
--- a/doc/book/en/development/entityclasses/application-logic.rst	Tue Apr 06 18:03:52 2010 +0200
+++ b/doc/book/en/development/entityclasses/application-logic.rst	Tue Apr 06 18:36:09 2010 +0200
@@ -8,7 +8,7 @@
 .. _`ORM`: http://en.wikipedia.org/wiki/Object-relational_mapping
 
 Entities objects are used in the repository and web sides of
-CubicWeb. In the repository side of things, one should manipulate them
+CubicWeb. On the repository side of things, one should manipulate them
 in Hooks and Operations.
 
 Hooks and Operations provide support for the implementation of rules
@@ -19,7 +19,7 @@
 So a lot of an application's business rules will be written in Hooks
 (or Operations).
 
-In the web side, views also typically operate using entity
+On the web side, views also typically operate using entity
 objects. Obvious entity methods for use in views are the dublin code
 method like dc_title, etc. For separation of concerns reasons, one
 should ensure no ui logic pervades the entities level, and also no
--- a/web/data/cubicweb.ajax.js	Tue Apr 06 18:03:52 2010 +0200
+++ b/web/data/cubicweb.ajax.js	Tue Apr 06 18:36:09 2010 +0200
@@ -239,7 +239,7 @@
 function asyncRemoteExec(fname /* ... */) {
     setProgressCursor();
     var props = {'fname' : fname, 'pageid' : pageid,
-                      'arg': map(jQuery.toJSON, sliceList(arguments, 1))};
+                 'arg': map(jQuery.toJSON, sliceList(arguments, 1))};
     var deferred = loadRemote(JSON_BASE_URL, props, 'POST');
     deferred = deferred.addErrback(remoteCallFailed);
     deferred = deferred.addErrback(resetCursor);
--- a/web/views/basecontrollers.py	Tue Apr 06 18:03:52 2010 +0200
+++ b/web/views/basecontrollers.py	Tue Apr 06 18:36:09 2010 +0200
@@ -409,6 +409,7 @@
         extraargs = extraargs or {}
         stream = comp.set_stream()
         comp.render(**extraargs)
+        # XXX why not _call_view ?
         extresources = self._cw.html_headers.getvalue(skiphead=True)
         if extresources:
             stream.write(u'<div class="ajaxHtmlHead">\n')