doc/book/en/development/devweb/js.rst
author Adrien Di Mascio <Adrien.DiMascio@logilab.fr>
Mon, 08 Mar 2010 19:11:47 +0100
changeset 4830 10e8bc190695
parent 4437 21f2e01fdd6a
child 5151 2f70fa8b6854
permissions -rw-r--r--
[javascript] fix #736185: add_onload / jQuery.bind() vs. jQuery.one() This patch introduces a new 'server-response' event and deprecates the 'ajax-loaded' event. - 'server-response' is triggered by postAjaxLoad() (instead of 'ajax-loaded'). - 'server-response' is also triggered on document.ready(). - The add_onload() method binds the javascript code the 'server-response' event whether or not it's an ajax request, thus removing the need of the jsoncall hackish parameter. The binding is done with jQuery.one() instead of jQuery.bind(). - The javascript callbacks will be passed two extra parameters : a boolean to indicate if it's an ajax request or not, the DOM node (result of the HTTP query). As javascript is what it is, callbacks can safely ignore those two parameters if they don't need them. Backward compatibility is maintained by triggerring an 'ajax-loaded' event when a 'server-response' is emitted.
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
1714
a721966779be new book layout, do not compile yet
sylvain.thenault@logilab.fr
parents:
diff changeset
     1
.. -*- coding: utf-8 -*-
a721966779be new book layout, do not compile yet
sylvain.thenault@logilab.fr
parents:
diff changeset
     2
a721966779be new book layout, do not compile yet
sylvain.thenault@logilab.fr
parents:
diff changeset
     3
Javascript
a721966779be new book layout, do not compile yet
sylvain.thenault@logilab.fr
parents:
diff changeset
     4
----------
a721966779be new book layout, do not compile yet
sylvain.thenault@logilab.fr
parents:
diff changeset
     5
3283
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
     6
*CubicWeb* uses quite a bit of javascript in its user interface and
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
     7
ships with jquery (1.3.x) and parts of the jquery UI
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
     8
library, plus a number of homegrown files and also other thirparty
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
     9
libraries.
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    10
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    11
All javascript files are stored in cubicweb/web/data/. There are
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    12
around thirty js files there. In a cube it goes to data/.
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    13
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    14
Obviously one does not want javascript pieces to be loaded all at
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    15
once, hence the framework provides a number of mechanisms and
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    16
conventions to deal with javascript resources.
1714
a721966779be new book layout, do not compile yet
sylvain.thenault@logilab.fr
parents:
diff changeset
    17
a721966779be new book layout, do not compile yet
sylvain.thenault@logilab.fr
parents:
diff changeset
    18
Conventions
a721966779be new book layout, do not compile yet
sylvain.thenault@logilab.fr
parents:
diff changeset
    19
~~~~~~~~~~~
a721966779be new book layout, do not compile yet
sylvain.thenault@logilab.fr
parents:
diff changeset
    20
3283
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    21
It is good practice to name cube specific js files after the name of
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    22
the cube, like this : 'cube.mycube.js', so as to avoid name clashes.
1714
a721966779be new book layout, do not compile yet
sylvain.thenault@logilab.fr
parents:
diff changeset
    23
3283
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    24
XXX external_resources variable (which needs love)
1714
a721966779be new book layout, do not compile yet
sylvain.thenault@logilab.fr
parents:
diff changeset
    25
3441
bdeb91e08278 typo fix
Alexandre Fayolle <alexandre.fayolle@logilab.fr>
parents: 3283
diff changeset
    26
CubicWeb javascript api
3581
669854258b90 [doc] various fixes
Nicolas Chauvat <nicolas.chauvat@logilab.fr>
parents: 3441
diff changeset
    27
~~~~~~~~~~~~~~~~~~~~~~~
3283
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    28
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    29
Javascript resources are typically loaded on demand, from views. The
4437
21f2e01fdd6a update exemples using the 3.6 api and add/fix some sections (schema, vreg, talk about CW_MODE in concepts...). So much to do :'(
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents: 3581
diff changeset
    30
request object (available as self._cw from most application objects,
3283
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    31
for instance views and entities objects) has a few methods to do that:
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    32
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    33
* `add_js(self, jsfiles, localfile=True)` which takes a sequence of
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    34
  javascript files and writes proper entries into the HTML header
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    35
  section. The localfile parameter allows to declare resources which
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    36
  are not from web/data (for instance, residing on a content delivery
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    37
  network).
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    38
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    39
* `add_onload(self, jscode)` which adds one raw javascript code
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    40
  snippet inline in the html headers. This is quite useful for setting
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    41
  up early jQuery(document).ready(...) initialisations.
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    42
4830
10e8bc190695 [javascript] fix #736185: add_onload / jQuery.bind() vs. jQuery.one()
Adrien Di Mascio <Adrien.DiMascio@logilab.fr>
parents: 4437
diff changeset
    43
CubicWeb javascript events
10e8bc190695 [javascript] fix #736185: add_onload / jQuery.bind() vs. jQuery.one()
Adrien Di Mascio <Adrien.DiMascio@logilab.fr>
parents: 4437
diff changeset
    44
~~~~~~~~~~~~~~~~~~~~~~~~~~
10e8bc190695 [javascript] fix #736185: add_onload / jQuery.bind() vs. jQuery.one()
Adrien Di Mascio <Adrien.DiMascio@logilab.fr>
parents: 4437
diff changeset
    45
10e8bc190695 [javascript] fix #736185: add_onload / jQuery.bind() vs. jQuery.one()
Adrien Di Mascio <Adrien.DiMascio@logilab.fr>
parents: 4437
diff changeset
    46
* ``server-response``: this event is triggered on HTTP responses (both
10e8bc190695 [javascript] fix #736185: add_onload / jQuery.bind() vs. jQuery.one()
Adrien Di Mascio <Adrien.DiMascio@logilab.fr>
parents: 4437
diff changeset
    47
  standard and ajax). The two following extra parameters are passed
10e8bc190695 [javascript] fix #736185: add_onload / jQuery.bind() vs. jQuery.one()
Adrien Di Mascio <Adrien.DiMascio@logilab.fr>
parents: 4437
diff changeset
    48
  to callbacks :
10e8bc190695 [javascript] fix #736185: add_onload / jQuery.bind() vs. jQuery.one()
Adrien Di Mascio <Adrien.DiMascio@logilab.fr>
parents: 4437
diff changeset
    49
10e8bc190695 [javascript] fix #736185: add_onload / jQuery.bind() vs. jQuery.one()
Adrien Di Mascio <Adrien.DiMascio@logilab.fr>
parents: 4437
diff changeset
    50
  - ``ajax``: a boolean that says if the reponse was issued by an
10e8bc190695 [javascript] fix #736185: add_onload / jQuery.bind() vs. jQuery.one()
Adrien Di Mascio <Adrien.DiMascio@logilab.fr>
parents: 4437
diff changeset
    51
    ajax request
10e8bc190695 [javascript] fix #736185: add_onload / jQuery.bind() vs. jQuery.one()
Adrien Di Mascio <Adrien.DiMascio@logilab.fr>
parents: 4437
diff changeset
    52
10e8bc190695 [javascript] fix #736185: add_onload / jQuery.bind() vs. jQuery.one()
Adrien Di Mascio <Adrien.DiMascio@logilab.fr>
parents: 4437
diff changeset
    53
  - ``node``: the DOM node returned by the server in case of an
10e8bc190695 [javascript] fix #736185: add_onload / jQuery.bind() vs. jQuery.one()
Adrien Di Mascio <Adrien.DiMascio@logilab.fr>
parents: 4437
diff changeset
    54
    ajax request, otherwise the document itself for standard HTTP
10e8bc190695 [javascript] fix #736185: add_onload / jQuery.bind() vs. jQuery.one()
Adrien Di Mascio <Adrien.DiMascio@logilab.fr>
parents: 4437
diff changeset
    55
    requests.
10e8bc190695 [javascript] fix #736185: add_onload / jQuery.bind() vs. jQuery.one()
Adrien Di Mascio <Adrien.DiMascio@logilab.fr>
parents: 4437
diff changeset
    56
10e8bc190695 [javascript] fix #736185: add_onload / jQuery.bind() vs. jQuery.one()
Adrien Di Mascio <Adrien.DiMascio@logilab.fr>
parents: 4437
diff changeset
    57
3283
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    58
Overview of what's available
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    59
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    60
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    61
* jquery.* : jquery and jquery UI library
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    62
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    63
* cubicweb.python.js : adds a number of practical extension to stdanrd
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    64
  javascript objects (on Date, Array, String, some list and dictionary
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    65
  operations), and a pythonesque way to build classes. Defines a
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    66
  CubicWeb namespace.
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    67
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    68
* cubicweb.htmlhelpers.js : a small bag of convenience functions used
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    69
  in various other cubicweb javascript resources (baseuri, progress
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    70
  cursor handling, popup login box, html2dom function, etc.)
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    71
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    72
* cubicweb.ajax.js : concentrates all ajax related facilities (it
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    73
  extends jQuery with the loahxhtml function, provides a handfull of
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    74
  high-level ajaxy operations like asyncRemoteExec, reloadComponent,
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    75
  replacePageChunk, getDomFromResponse)
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    76
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    77
* cubicweb.widgets.js : provides a widget namespace and constructors
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    78
  and helpers for various widgets (mainly facets and timeline)
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    79
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    80
* cubicweb.edition.js : used by edition forms
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    81
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    82
* cubicweb.preferences.js : used by the preference form
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    83
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    84
* cubicweb.facets.js : used by the facets mechanism
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    85
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    86
xxx massmailing, gmap, fckcwconfig, timeline-bundle, timeline-ext,
4f53eb3f1331 more doc
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents: 1714
diff changeset
    87
calendar, goa, flotn tazy, tabs, bookmarks