How to load CSS file in qooxdoo dynamically

Question

Is there a special qooxdoo class to load CSS files dynamically like qx.util.DynamicScriptLoader does for JavaScript files?

For example, depends on user choice what geo maps he wants to use an application loads specific JavaScript and CSS files. I can get .js file via qx.util.DynamicScriptLoader class but for css I use externalResources section in Manifest.json file which always loads a style file (am I right?).

Answer 1

A dynamic possibility to include css files, eg in the constructor of a class, is using qx.bom.Stylesheet.includeFile like this:

qx.bom.Stylesheet.includeFile("https://myserver.com/my.css");

This way I've successfully built completely dynamic wrappers for packages/frameworks where all external resources are loaded only on wrapper class instantiation in conjunction with qx.util.DynamicScriptLoader .

If the css files are within your projects resources, you have to call qx.util.ResourceManager.getInstance().toUri() on the resource name and feed it then into qx.bom.Stylesheet.includeFile .

Lets say you have a css file in your project in resource/myframework/my.css you have to first create an @asset hint like this in your wrapper class:

/*
 * @asset(myframework/my.css)
 */

and afterwards, eg in the constructor you call:

  qx.bom.Stylesheet.includeFile(qx.util.ResourceManager.getInstance().toUri(
    "resource/myframework/my.css"
  ));

In order to avoid multiple loading of the css file, I've added a static class member CSS_INCLUDED to the wrapper class, initialized to false and then set to true after calling qx.bom.Stylesheet.includeFile which results in the this code:

  if(my.wrapper.CSS_INCLUDED === false) {
    qx.bom.Stylesheet.includeFile(qx.util.ResourceManager.getInstance().toUri(
      "resource/myframework/my.css"
    ));
    my.wrapper.CSS_INCLUDED = true;
  }

This way subsequent instantiations do not load the css file again.