SVGs

Drawing

Use the 'add' method of an SVG in order to draw SVG elements. Available elements are classes named SVGxxx. If you know SVGs, the use in TUI should be straightforward for you.

SVG svg = new SVG(300, 150);
svg.add(new SVGRectangle(10, 20, 30, 40))
.withFillColor(Color.GREEN)
.withFillOpacity(0.5);

Stripes

You can create a SVGPatternStripes in one SVG and use it to fill components.

SVG svg = new SVG(300, 150);
SVGPatternStripes patternStripes = svg.addStripes(new SVGPatternStripes("stripes", 2, Color.orange, 2, Color.gray));
SVGCircle circle = new SVGCircle(200, 75, 50);
circle.withFillPattern(patternStripes);
svg.add(circle);

Triggering clicks

You can catch some clicks in one SVG in order to trigger the refresh of one (or many) component of your page. To do so, you have to add a 'ClickableZone' to your SVG. A clickable zone is defined by an area (where to catch the mouse's clicks) and a set of (key,value) parameters. This optional set of parameters will then be sent to the backend for every components to be refreshed.

SVG svg = new SVG(300, 150);
svg.addClickableZone(new SVGRectangle(50, 50, 20, 20), Map.of("zoneId", "1"));
svg.connectListener(componentToRefresh);

When the user clicks on the rectangle, the browser will call the backend webservice of 'componentToRefresh' and send additional parameter:

zoneId=1

The clickable zones are not drawn, but the cursor changes when the mouse is hovering a zone.