20 It is good practice to name cube specific js files after the name of |
20 It is good practice to name cube specific js files after the name of |
21 the cube, like this : 'cube.mycube.js', so as to avoid name clashes. |
21 the cube, like this : 'cube.mycube.js', so as to avoid name clashes. |
22 |
22 |
23 .. XXX external_resources variable (which needs love) |
23 .. XXX external_resources variable (which needs love) |
24 |
24 |
25 CubicWeb javascript API |
25 Server-side Javascript API |
26 ~~~~~~~~~~~~~~~~~~~~~~~ |
26 ~~~~~~~~~~~~~~~~~~~~~~~~~~ |
27 |
27 |
28 Javascript resources are typically loaded on demand, from views. The |
28 Javascript resources are typically loaded on demand, from views. The |
29 request object (available as self._cw from most application objects, |
29 request object (available as self._cw from most application objects, |
30 for instance views and entities objects) has a few methods to do that: |
30 for instance views and entities objects) has a few methods to do that: |
31 |
31 |
37 |
37 |
38 * `add_onload(self, jscode)` which adds one raw javascript code |
38 * `add_onload(self, jscode)` which adds one raw javascript code |
39 snippet inline in the html headers. This is quite useful for setting |
39 snippet inline in the html headers. This is quite useful for setting |
40 up early jQuery(document).ready(...) initialisations. |
40 up early jQuery(document).ready(...) initialisations. |
41 |
41 |
42 CubicWeb javascript events |
42 Javascript events |
43 ~~~~~~~~~~~~~~~~~~~~~~~~~~ |
43 ~~~~~~~~~~~~~~~~~ |
44 |
44 |
45 * ``server-response``: this event is triggered on HTTP responses (both |
45 * ``server-response``: this event is triggered on HTTP responses (both |
46 standard and ajax). The two following extra parameters are passed |
46 standard and ajax). The two following extra parameters are passed |
47 to callbacks : |
47 to callbacks : |
48 |
48 |
51 |
51 |
52 - ``node``: the DOM node returned by the server in case of an |
52 - ``node``: the DOM node returned by the server in case of an |
53 ajax request, otherwise the document itself for standard HTTP |
53 ajax request, otherwise the document itself for standard HTTP |
54 requests. |
54 requests. |
55 |
55 |
56 Important AJAX APIS |
56 Important javascript AJAX APIS |
57 ~~~~~~~~~~~~~~~~~~~ |
57 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
58 |
58 |
59 * `asyncRemoteExec` and `remoteExec` are the base building blocks for |
59 * `asyncRemoteExec` and `remoteExec` are the base building blocks for |
60 doing arbitrary async (resp. sync) communications with the server |
60 doing arbitrary async (resp. sync) communications with the server |
61 |
61 |
62 * `reloadComponent` is a convenience function to replace a DOM node |
62 * `reloadComponent` is a convenience function to replace a DOM node |
70 |
70 |
71 |
71 |
72 A simple example with asyncRemoteExec |
72 A simple example with asyncRemoteExec |
73 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
73 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
74 |
74 |
75 In the python side, we have to extend the BaseController class. The |
75 In the python side, we have to extend the ``BaseController`` |
76 @jsonize decorator ensures that the `return value` of the method is |
76 class. The ``@jsonize`` decorator ensures that the return value of the |
77 encoded as JSON data. By construction, the JSonController inputs |
77 method is encoded as JSON data. By construction, the JSonController |
78 everything in JSON format. |
78 inputs everything in JSON format. |
79 |
79 |
80 .. sourcecode: python |
80 .. sourcecode: python |
81 |
81 |
82 from cubicweb.web.views.basecontrollers import JSonController, jsonize |
82 from cubicweb.web.views.basecontrollers import JSonController, jsonize |
83 |
83 |
223 In this example, the url argument is the base json url of a cube |
223 In this example, the url argument is the base json url of a cube |
224 instance (it should contain something like |
224 instance (it should contain something like |
225 `http://myinstance/json?`). The actual JSonController method name is |
225 `http://myinstance/json?`). The actual JSonController method name is |
226 encoded in the `params` dictionary using the `fname` key. |
226 encoded in the `params` dictionary using the `fname` key. |
227 |
227 |
228 A more real-life example from CubicWeb |
228 A more real-life example |
229 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
229 ~~~~~~~~~~~~~~~~~~~~~~~~ |
230 |
230 |
231 A frequent use case of Web 2 applications is the delayed (or |
231 A frequent need of Web 2 applications is the delayed (or demand |
232 on-demand) loading of pieces of the DOM. This is typically achieved |
232 driven) loading of pieces of the DOM. This is typically achieved using |
233 using some preparation of the initial DOM nodes, jQuery event handling |
233 some preparation of the initial DOM nodes, jQuery event handling and |
234 and proper use of loadxhtml. |
234 proper use of loadxhtml. |
235 |
235 |
236 We present here a skeletal version of the mecanism used in CubicWeb |
236 We present here a skeletal version of the mecanism used in CubicWeb |
237 and available in web/views/tabs.py, in the `LazyViewMixin` class. |
237 and available in web/views/tabs.py, in the `LazyViewMixin` class. |
238 |
238 |
239 .. sourcecode:: python |
239 .. sourcecode:: python |
315 function trigger_load(divid) { |
315 function trigger_load(divid) { |
316 jQuery('#lazy-' + divd).trigger('load_' + divid); |
316 jQuery('#lazy-' + divd).trigger('load_' + divid); |
317 } |
317 } |
318 |
318 |
319 |
319 |
320 |
|
321 |
|
322 .. XXX reloadComponent |
|
323 .. XXX userCallback / user_callback |
320 .. XXX userCallback / user_callback |
324 |
321 |
325 Javascript library: overview |
322 Javascript library: overview |
326 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
323 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
327 |
324 |