Changes for page XWiki JavaScript API

Last modified by Simon Urli on 2022/09/14

<
From version < 43.4 >
edited by Oana Florea
on 2019/09/13
To version < 44.1 >
edited by Vincent Massol
on 2020/03/23
>
Change comment: There is no comment for this version

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.OanaTabaranu
1 +XWiki.VincentMassol
Content
... ... @@ -371,3 +371,44 @@
371 371   #end
372 372   )))
373 373  {{/velocity}}
374 +
375 += Example of understanding initialization =
376 +
377 +Let's take the example of the Rights page of the Admin UI and understand how its LiveTable is initialized.
378 +
379 +The browser will read the HTML from top to bottom. We have the following HTML content:
380 +
381 +{{code language='html'}}
382 +...
383 + <head>
384 + ...
385 + <script type='text/javascript' src='/xwiki/resources/js/prototype/prototype.js?cache-version=1584467090000'></script>
386 + ...
387 + <script type='text/javascript' src='/xwiki/bin/skin/resources/js/xwiki/xwiki.js?cache-version=1584467090000&defer=false&amp;minify=false'></script>
388 + ...
389 + <script type='text/javascript' src='/xwiki/bin/skin/resources/js/xwiki/table/livetable.js?cache-version=1584467090000&minify=false' defer='defer'></script>
390 + ...
391 + </head>
392 + <body>
393 + ...
394 + function startup() {
395 + ... Rights LT init...
396 + }
397 + ...
398 + (XWiki && XWiki.isInitialized && startup()) || document.observe('xwiki:livetable:loading', startup);
399 + ...
400 +{{/code}}
401 +
402 +So here are the steps performed:
403 +1. ##prototype.js## is executed first and registers a function ({{code}document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);{/code}}) to execute when the ##DOMContentLoaded## event is sent. This event is sent after the DOM has been parsed, thus after the scripts of the page have been executed. The ##fireContentLoadedEvent## function will fire the [[##dom:loaded## event>>http://api.prototypejs.org/dom/document/observe/]] when called.
404 +1. ##xwiki.js## is executed and registers a function ({{code}}document.observe("dom:loaded", XWiki.initialize.bind(XWiki)){{/code}}) to execute when the ##dom:loaded## event is sent. In turn it'll fire 2 events ##xwiki:dom:loading## and ##xwiki:dom:loaded## when called.
405 +1. ##livetable.js## is not executed at this stage since it's marked as ##defer##.
406 +1. The Rights UI is executed and {{code}}XWiki && XWiki.isInitialized && startup(){{/code}} evaluates to false since the XWiki object has not been initialized yet at this stage. However it registers a function for the ##xwiki:livetable:loading## event.
407 +1. The browser gets to the end of the HTML, and [[reads the ##livetable.js## script that was marked as deferred>>https://javascript.info/onload-ondomcontentloaded#domcontentloaded]]. The following executes: {{code}}(XWiki.isInitialized && init()) || document.observe('xwiki:dom:loading', init);{{/code}}. The {{code}}XWiki && XWiki.isInitialized && startup(){{/code}} part evaluates to false since the XWiki object has not been initialized yet. The ##init## function is registered for the ##xwiki:dom:loading## event. When fired, it will trigger the ##xwiki:livetable:loading## event.
408 +1. Now that the DOM has been read, the browser sends the ##DOMContentLoaded## event.
409 +1. Thus the prototype function is called and the ##dom:loaded## event is triggered.
410 +1. Thus the ##xwiki.js##'s ##initialize## function is called and the ##xwiki:dom:loading## event is fired.
411 +1. Thus the ##livetable.js##'s ##init## function is called and the ##xwiki:livetable:loading## event is fired.
412 +1. Thus the Rights UI's ##startup## function is called and its LiveTable is initialized.
413 +
414 +

Get Connected