Hi,
we should start a new thread because the original thread is on
Christoph's suggestion, which I would like to see discussed.... ;-)
As to the loading splash, it works as follows:
<!-- load javascript files-->
<script type="text/javascript" src="lib/js/splash.js"></script>
<script type="text/javascript">splash_start()</script>
<script type="text/javascript">splash_progress("Loading
Dojo",5)</script>
<script type="text/javascript" src="${DojoRoot}/dojo.js"></script>
<script type="text/javascript">splash_progress("Loading
Qooxdoo",10)</script>
<script type="text/javascript" src="lib/js/qx_src_includer.js"></script>
<script type="text/javascript">splash_progress("Loading Bibliograph
${this/version}",50)</script>
As you can see, I use Dojo for AJAX, since it has an exellent and
complete solution for all your AJAX needs.
The relevant javascript files are attached. I don't load the compressed
file, but selected single source files (I skip those widgets which I
don't need). That avoids having to rebuild the source, and normally, the
user loads the application only once and can deal with the longer wait.
But that's a different approach, I don't know if I will still use it in
the next version off the app or rather switch
to the single big compressed file which loads the complete library.
Christian
Priebe, Jason schrieb:
Christian --
Nice job on the UI!
Can you share a little bit about how you implemented the "loading"
progress bars? They are a nice touch.
Jason Priebe
CBC New Media
var qx_src_load_counter = 10;
function inc(pa) {
document.write("<script type=\"text/javascript\"
src=\"lib/js/qooxdoo/source/script/" + pa + ".js\"></script>");
document.write("<script type=\"text/javascript\">splash_progress(\"Loading
Qooxdoo\",Math.floor(qx_src_load_counter));qx_src_load_counter+=.5</script>");
};
// Core
inc("core/QxExtend");
inc("core/QxObject");
inc("core/QxClient");
inc("core/QxDom");
inc("core/QxDebug");
inc("core/QxTarget");
inc("core/QxApplication");
inc("core/QxUserApplication");
inc("core/QxClientWindow");
inc("core/QxBuilder");
// Basic Types
inc("types/QxVariable");
inc("types/QxString");
inc("types/QxNumber");
inc("types/QxInteger");
inc("types/QxColor");
inc("types/QxTextile");
// Basic Events
inc("events/QxEvent");
inc("events/QxMouseEvent");
inc("events/QxKeyEvent");
inc("events/QxFocusEvent");
inc("events/QxDataEvent");
// Basic Widgets
inc("widgets/QxWidget");
inc("widgets/QxBlocker");
inc("widgets/QxClientDocument");
inc("widgets/QxInline");
inc("widgets/QxTerminator");
// Core Managers
inc("managers/QxManager");
inc("managers/QxDataManager");
// Event Handling
inc("managers/QxEventManager");
inc("managers/QxFocusManager");
// Border Handling
inc("core/QxBorder");
// Text Fields
inc("widgets/QxTextField");
inc("widgets/QxPasswordField");
inc("widgets/QxTextArea");
// Timer Support
inc("managers/QxTimerManager");
inc("core/QxTimer");
// Data Loading
inc("core/QxXmlHttpLoader");
inc("core/QxData");
// Image Support
inc("managers/QxImageManager");
inc("managers/QxImagePreloaderManager");
inc("widgets/QxImagePreloader");
inc("widgets/QxImage");
// Drag&Drop Support
inc("events/QxDragEvent");
inc("managers/QxDragAndDropManager");
// Most used Widgets
inc("widgets/QxContainer");
inc("widgets/QxAtom");
inc("widgets/QxButton");
// Radio/Checkbox Support
inc("managers/QxRadioButtonManager");
inc("widgets/QxInputCheckIcon");
inc("widgets/QxCheckBox");
inc("widgets/QxRadioButton");
// Popup Support
inc("managers/QxPopupManager");
inc("widgets/QxPopup");
// Tooltip Support
inc("managers/QxToolTipManager");
inc("widgets/QxToolTip");
// Other Widgets
inc("widgets/QxForm");
inc("widgets/QxListView");
inc("widgets/QxFieldSet");
inc("widgets/QxIframe");
// ToolBar Support
inc("widgets/QxToolBar");
inc("widgets/QxToolBarPart");
inc("widgets/QxToolBarPartHandle");
inc("widgets/QxToolBarButton");
inc("widgets/QxToolBarSeparator");
inc("widgets/QxToolBarCheckBox");
inc("widgets/QxToolBarRadioButton");
inc("widgets/QxToolBarMenuButton");
// List Support
inc("core/QxSelectionStorage");
inc("managers/QxSelectionManager");
inc("widgets/QxList");
inc("widgets/QxListItem");
// Combo Box
inc("widgets/QxComboBox");
// Tabbar Support
inc("widgets/QxTabFrame");
inc("widgets/QxTabBar");
inc("widgets/QxTabPane");
inc("widgets/QxTabPage");
inc("widgets/QxTab");
// Bar Selector
inc("widgets/QxBarSelectorFrame");
inc("widgets/QxBarSelectorBar");
inc("widgets/QxBarSelectorPane");
inc("widgets/QxBarSelectorPage");
inc("widgets/QxBarSelectorButton");
// Menu Support
inc("managers/QxMenuManager");
inc("widgets/QxMenu");
inc("widgets/QxMenuButton");
inc("widgets/QxMenuCheckBox");
inc("widgets/QxMenuRadioButton");
inc("widgets/QxMenuSeparator");
inc("widgets/QxMenuBar");
inc("widgets/QxMenuBarButton");
// Tree Support
inc("widgets/QxTreeElement");
inc("widgets/QxTreeFile");
inc("widgets/QxTreeFolder");
inc("widgets/QxTree");
// Spinner
inc("managers/QxRangeManager");
inc("widgets/QxSpinner");
// Command
inc("core/QxCommand");
// Window
inc("managers/QxWindowManager");
inc("widgets/QxWindow");
//inc("widgets/QxColorPresetPopup");
//inc("widgets/QxColorSelector");
// Native Window
inc("core/QxNativeWindow");
/*
// Layout Core
inc("widgets/QxLayout");
// Box Layout
inc("widgets/QxBoxLayout");
inc("widgets/QxVerticalBoxLayout");
inc("widgets/QxHorizontalBoxLayout");
// Flow Layout
inc("widgets/QxFlowLayout");
// Dock Layout
inc("widgets/QxDockLayout");
// Grid Layout
inc("widgets/QxGridLayout");
*/// Splash window indicating load progress
// v. 0.1
// written Christian Boulanger, this is public domain
// please report improvements to [EMAIL PROTECTED]
splash_start = function()
{
window.status = "Please wait while application is loading.";
var moz_warning = "";
if ( splashCheckBrowser("mozilla") && ! splashCheckBrowser("msie") ) {
moz_warning = 'If you get an error "A script is causing Mozilla to run
slowly..", press "Cancel".';
}
document.write(
'<div id="splash_div" style="padding:50px;margin:200px;border:1px solid
black;background:white;text-align:center;vertical-align:middle">'+
'<div>'+
'<b>Please wait while application is loading...</b><br/><br/>'+
moz_warning +
'</div><br/>'+
"<div id='splash_progressMsg'>Please wait</div><br/>"+
"<div id='splash_progressBar'
style='width:100%;padding:2px;border:1px solid black;text-align:left'>"+
"<div id='splash_progressMeter'
style='width:0;background-color:highlight;height:20px;'>"+
"<div id='splash_percent' style='color:white; left:140;
top:5; font-size:10pt; height:12px overflow:hidden'/>"+
"</div>"+
"</div>"+
'</div></div>' +
'<div id="splash_ouput"/>');
}
splash_progress = function ( txt, per )
{
document.getElementById("splash_progressMsg").innerHTML = txt;
document.getElementById("splash_progressMeter").style.width = per + "%";
document.getElementById("splash_percent").innerHTML = per+" %";
};
splash_end = function ()
{
document.getElementById("splash_div").style.display="none";
document.write("</div");
window.status = "";
}
splashCheckBrowser = function (browser)
{
return ( navigator.userAgent.toLowerCase().indexOf(browser) > -1 ) ;
};
