Change comment:
There is no comment for this version
Summary
-
Page properties (2 modified, 0 added, 0 removed)
Details
- Page properties
-
- Author
-
... ... @@ -1,1 +1,1 @@ 1 -XWiki. OanaTabaranu1 +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&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 +