An EGL Rich UI application is normally deployedinto a single HTML and downloaded to user’s browser as a whole when the applicationstarts. There are times you may want to download code only when it is beingcalled to reduce the initial loading size and to speedup the starting of theapplication. The Dynamic Loading feature gives developers control of when to load applicationcode. The initial version of Dynamic Loading has been available on the EGL Café for about 2 years and nowan updated, enhanced version is formally included in RBD 8.0.1.2.
A quick look at Dojo Sample
You can get the Dojo Sample from Help->Samplesmenu in RBD. Gallery.egl is the main handler which provides the screen layout, header,footer and left navigation. When a button in the left navigation is clicked, thecorresponding sample will be launched in the content area in the middle.
Turn Dojo Sample into dynamic loading
The showSample() function is responsible tolaunch sample, it checks for the text of the button being clicked and decidewhich sample handler to be instantiate and put to the content area.
function showSample(e Event in)
…
case (button.text)
…
when ("CheckBox")
content.appendChild( new DojoCheckBoxSample{}.ui );
when ("BarGraph")
content.appendChild( new DojoBarGraphSample{}.ui );
…
end
end
First, instead of use key word “new” to instantiatethe sample Handler, we will use DynamicLoader.loadHandler() to load andinstantiate the handler at runtime. You will have to use the quoted string toreference the handler name.
function showSample(e Event in)
…
case (button.text)
…
when ("CheckBox")
DynamicLoader.loadHandler("dojo.samples.perwidget.DojoCheckBoxSample");
when ("BarGraph")
DynamicLoader.loadHandler("dojo.samples.perwidget.DojoBarGraphSample");
…
end
end
Each dynamic load is asynchronous. Next, you will write the listener function which responds to the load completion even andadd the loaded handler instance into content area.
//The listener function
function attach(event HandlerLoadedEvent in)
//attach the initialUI widgets to the content area
content.children=event.initialUI;
end
Register the listener functionto DynamicLoader when the Gallery starts. The call to showDebugView() function isoptional, debug view can display loading status which is helpful at developmenttime.
function start()
//register listener to DynamicLoader
DynamicLoader.loadDoneListeners ::= attach;
//open a debug view so we can see the
//dynamic loading status at development time
DynamicLoader.showDebugView();
…
end
With above changes to Gallery handler, the sample loads dynamically. Run the new sampleapplication in Preview mode to see dynamic loading status in the debug view. To experience the performance gain, run the application in deployed mode.
Deploy the dynamic loaded Dojo Sample
In the EGL deployment descriptor, specify the handlers to load dynamically so that the code and necessary resources for thesehandlers are prepared for loading at runtime. Go to the Rich UI Deployment tab, select the new versionof Gallery handler and click the Configure button in Dynamic loading settingsection. 
In the popup dialog, add the samplehandlers which are going to be dynamically loaded to the list on the right andclick finish to save the settings.
Now you are ready to deploy the dynamic DojoSample. After deployment, the HTML file size of the dynamic version is367Kb which is nearly half of the static version which is 674Kb. If you considerthe 280Kb runtime footprint for a RUIHandler, the improvement of initial load sizeis quite significant. The larger your application grows, the more benefit you’llget from a dynamic loading infrastructure.
You find more details about the Dynamic Loading feature in the RBD 8.0.1.2 Information Center.
Enjoy!