APEX-AT-WORK no image

UILayout: Hide half loaded elements

Von Tobias Arnhold 2.14.2011
One of the problems of an layout extension is the initialization time.
Normally the UILayout needs a couple of seconds to initialize (1-3). Depending on your server connection, your client hardware and your browser (IE6 is slow, FF 3.6 is fast).

To show a similar loading frame like the ExtJS Loading Icon http://apex.oracle.com/pls/apex/f?p=65555:1 use this trick:

Add the following code to the beginning of your Page Template Body or add a new HTML region (No template) on page 0:

<div style="width: 100%; height: 100%; position: absolute; left: 0pt; top: 0pt; background-color: rgb(255, 255, 255); z-index: 4000; opacity: 0.8; display: block;" id="loadingBackground">
<div style="height: auto;left: 50%;position: absolute;top: 50%;text-align: center; color: #555555;font-size: 18px;font-family:Arial,Helvetica,Geneva,sans-serif;padding:8px;42px;"> ... Loading ... </div>

After the initialization of the UILaoyut plug-in use the LoadingIcon plug-in with the option "Stop LoadingIcon"

The initialization feels much smoother now.

Example: http://apex.oracle.com/pls/apex/f?p=AAW_PLUGINS:UILAYOUT_PLUGIN

1 One Comment " UILayout: Hide half loaded elements "

Jaydip Bosamiya 15 February, 2011 05:31

Hi Tobias Arnhold

It was nice work done !!

I was just going through the http://apex.oracle.com/pls/apex/f?p=65555:1 application and i found following in "IR with dynamic rules".

once user selects "Set up IR rule" from drop down for the first time report is working fine. but if user selects different month than it applies both the filter criteria rather than the latest selected.

this i just found and so write it to u.