SVG push button class.
An SVG push button typically defines at least the following two faces:
You can define an SVG push button using UiBinder templates. Use
the svgui:upFace, svgui:upDisabledFace, svgui:upHoveringFace
svgui:downFace, svgui:downDisabledFace, svgui:downHoveringFace
tags to defined faces.
Depending on your needs, you can either define the SVG inline with
the svgui:element tag. This can be convenient if you want to
localize the button label, or use styles defined in the template.
Or you can use an
org.vectomatic.dom.svg.ui.SVGResource with the resource attribute,
if your SVG is large or if you want to keep your template more readable.
Each face contains one or more svgui:styleChange tags.
The classNames attribute specifies the name of the
CSS class selectors to be applied to the SVG element when the face
is activated.
The following section shows a sample UiBinder template:
<svgui:SVGPushButton ui:field="clickMeButton">
<svgui:element>
<svg viewBox="0 0 200 60" width="200" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect class="btn-shape" x="3" y="3" width="194" height="54" rx="10" ry="10" />
<text class="btn-text" x="16" y="43">Click me !</text>
</svg>
</svgui:element>
<svgui:upFace><svgui:styleChange classNames="{style.btn1} {style.btn1-up}"/></svgui:upFace>
<svgui:downHoveringFace><svgui:styleChange classNames="{style.btn1} {style.btn1-down-hovering}"/></svgui:downHoveringFace>
</svgui:SVGPushButton>
Note that by default the inline SVG in SVGPushButtons is validated against the SVG 1.1 XSD schema.
You can opt out of validation by setting the
validated="false"
attribute on the
svgui:element tag.