How to Implement A Multi-Window Qooxdoo Application
Normally, qooxdoo application will follow the One-Page-One-Application model. But there will be cases where it becomes necessary to use native popup windows which also contain qooxdoo widgets. Qooxdoo windows cannot be moved out of the way since they are limited to the browser viewport.
Here is one way to implement this: A sample index.html could look like this:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bibliograph</title> <!-- script to extract GET and # parameters from URL --> <script type="text/javascript"> /* * GET - parameters */ var s = window.location.search; var gP = window.location.parameters = {}; if (s) { var parts = s.substr(1).split("&"); for (var i = 0; i < parts.length; i++) { var p = parts[i].split('='); gP[p[0]] = typeof p[1] == "string" ? decodeURIComponent(p[1].replace(/\+/g, ' ')) : true; } } function getGetParam(key) { return gP[key]; } function setGetParam( first, second ) { if ( typeof first == "object" ) { for ( var key in first ) { gP[key] = first[key]; } } else { gP[first]= second; } var p =[]; for( var key in gP ) { p.push( key + "=" + encodeURIComponent(gP[key]) ); } with ( window.location ) { href = protocol + "//" + host + pathname + "?" + p.join("&") + hash; } } /* * hash - parameters */ var h = window.location.hash; var hP = window.location.hashParams = {}; if (h) { var parts = h.substr(1).split("&"); for (var i = 0; i < parts.length; i++) { var p = parts[i].split('='); hP[p[0]] = typeof p[1] == "string" ? decodeURIComponent(p[1].replace(/\+/g, ' ')) : true; } } function getHashParam(key) { return hP[key]; } function setHashParam( first, second ) { if ( typeof first == "object" ) { for ( var key in first ) { hP[key] = first[key]; } } else { hP[first]= second; } var p =[]; for( var key in hP ) { p.push( key + "=" + encodeURIComponent(hP[key]) ); } with ( window.location ) { href = protocol + "//" + host + pathname + search + "#" + p.join("&"); } } </script> <!-- qooxdoo runtime settings --> <script type="text/javascript"> qxsettings={}; /* * debugging */ //qxsettings["qx.debug"]="on"; //qxsettings["qx.propertyDebugLevel"]=2; /* * choose application to start */ var params = window.location.parameters; if ( params.application ) { qxsettings["qx.application"] = params.application; } </script> <!-- load qooxdoo and application classes --> <script type="text/javascript" src="script/myapplication.js"></script> <!-- configure debug settings --> <script type="text/javascript"> if (qx.IS_SOURCE) { qx.log.Logger.ROOT_LOGGER.setMinLevel(qx.log.Logger.LEVEL_DEBUG); } else { qx.log.Logger.ROOT_LOGGER.setMinLevel(qx.log.Logger.LEVEL_ERROR); }; </script> </head> </html>
The javascript functions at the beginning are needed to read and write GET and fragment Identifier parameters in the URI, I hope that they will be part in one form or other in the main qooxdoo library and can be moved out of the way here.
With the code above, it is possible to start different qooxdoo application with the same index.html file. You just need to specify the application class name in the URI, e.g.
http://example.com/path/to/index.html?application=custom.AlternativeApplication
The drawback of this method is that whatever application you start, you will always have to compile and load the code for all the applications that will be started this way. There might be ways of avoiding this using sophisticated compiler options or in a later version of qooxdoo.
Programmatically, you can then open windows with applications this way:
var w = new qx.client.NativeWindow("?application=SearchWidgetApplication#continue=true"); w.setAllowScrollbars(false); w.setDimension(800,400); w.open();
From inside the window code, you can reference all classes and objects of the opener window by using the “opener” object. That is, you can get a reference to main application by
var parentApp = opener.qx.core.Init.getInstance().getApplication()
If you want to access the child window application from the main application, you need to wait until the window is fully loaded (and a bit longer):
// w is the window opened above w.addEventListener("load",function(){ qx.client.Timer.once(function(){ var childApp = w._window.qx.core.Init.getInstance().getApplication() },this,200); });
