2

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?).

goldim
  • 466
  • 1
  • 3
  • 13

1 Answers1

5

A dynamic possibility to include css files, e.g. 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, e.g. 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.

level420
  • 829
  • 5
  • 8
  • Is there a way to be notified if `qx.bom.Stylesheet.includeFile` failed or succeeded? `qx.util.DynamicScriptLoader` class has these special events. I know `qx.bom.Stylesheet.includeFile` is static and no return value but maybe other classes/methods do this work. – goldim Feb 17 '21 at 09:43
  • 1
    `qx.bom.Stylesheet.includeFile` creates a dom node of type link and sets the `type` to `css/text`, `rel` to `stylesheet` and `href` to the URL of the css file and adds it then to the documents head section. You could also do this yourself manually and assign `onload` and `onerror` event handlers to that link element. It may also be desirable to have a `qx.util.DynamicCSSFileLoader` with a similar interface as offered by `qx.utilDynamicScriptLoader`. But it does not exist yet. – level420 Feb 17 '21 at 09:58