Marquee analogue or widget in qooxdoo

Question

Did't find something like running string (marquee) in qooxdoo. Running string is needed for qx.ui.basic.Label for cases when string is to long and widget length is not enough. I would write my own wrapper for html marquee tag by myself but it is deprecated component. I know it could be done via CSS. Any code or easy solution suggestions would be nice.

Answer 1

Here are a couple of options.

I find marquees annoying and distracting, so an alternative that I prefer to use is a tooltip that contains the complete text, so that mouseover will reveal it:

let doc = this.getRoot();
let text = "This is a test of the emergency broadcasting system. This is only a test.";
let label = new qx.ui.basic.Label(text);
label.set(
  {
    width       : 100,
    toolTipText : text
  });

doc.add(
  label,
  {
    left : 100,
    top  : 50
  });

In the very distant past, we had a demo of a marquee, but I'm pretty sure it was implemented with a JavaScript timer. For the short term, while the <marquee> tag is still working in all standard browsers, you could simply make use of it like this:

let doc = this.getRoot();
let text = "This is a test of the emergency broadcasting system. This is only a test.";
let label = new qx.ui.basic.Label(`<marquee>${text}</marquee>`);
label.set(
  {
    width       : 100,
    rich        : true,
    toolTipText : text
  });

doc.add(
  label,
  {
    left : 100,
    top  : 50
  });

I'd be careful that text is sanitized, when using rich. You're right, though, that with it deprecrated, you should be working towards a standards-compliant implementation.

Finally, you can implement a marquee style sheet as described at https://www.w3schools.in/css3/css-marquee or many other places, by adding a style sheet for it (look at the source code for qx.ui.table.cellrenderer.Abstract in method _createStyleSheet() for an example of creating a style sheet), and then manipulating the attributes of your label's label.getContentElement().getDomElement().