GraphicText 2.x
TOCSTART
TOCEND
GraphicText is a component that displays styled rotated text. It has API similar to the standard <h:outputText> component, though unlike the <h:outputText> component, the GraphicText component displays a text with an image generated on the server. This component can be useful for displaying vertical headers in a table having a lot of thin columns, vertical TabSet components, etc.
To add the GraphicText component to the page, use the <o:graphicText> tag. The value attribute of the <o:graphicText> tag lets you specify the text for the component.
In the following example the GraphicText component with a "GraphicText" text is displayed.
<o:graphicText value="GraphicText" />
Like the UIOutputText component the GraphicText component supports the following attributes: id, converter, rendered, value, lang, style, styleClass, title, binding. In addition, there's a textStlyle attribute that specifies text-related style attributes those are used when generating an image. See the Customizing Styles section for details.
The user can rotate the text with the GraphicText to any angle. To use this feature, you should set the direction attribute. This attribute specifies rotation angle in degrees. The following example demonstrates the "Example text" text with an angle of 315 degrees.
<o:graphicText value="Example text" direction="315"/>
In addition, the direction attribute can get one of the following values:
- leftToRight (default)- equivalent to 0.
- rightToLeft - equivalent to 180.
- topToBottom - equivalent to 270.
- bottomToTop - equivalent to 90.
Here are the examples of the GraphicText rotation angles:
| direction attribute value | Result |
|---|---|
| leftToRight |  |
| rightToLeft |  |
| topToBottom |  |
| bottomToTop |  |
| 145 degrees |  |
| 225 degrees |  |
| 315 degrees |  |
Like in any other component, you can define a style for the GraphicText component using the style attribute and styleClass attributes. Though it is important to note that there is some specifics related to the fact that GraphicText component actually displays text as an image. The style attribute and styleClass attributes do not affect the way how the image is generated and are applied to the image itself instead. In addition, there's a textStyle attribute that in turn specifies the way that an image is generated. So the style attribute and styleClass attributes can be used for specifying the general component styling parameters such as border, layout, etc. And the textStyle attribute can be used to change the way that the text itself should be styled, e.g. font and color attributes.
Below is a list of CSS properties can be specified in the textStyle property:
| Name | Example | Default | Description |
|---|---|---|---|
| font-family | Tahoma | Verdana | Font name. |
| font-size | 15pt | 12px | Font size. Can be defined with px or pt units. |
| color | #CC6600 | black | The color used for the text. |
| font-style | italic | normal | Font style. Can be set only to normal or italic. |
| font-weight | bold | normal | Font weight. Can be set to normal or bold. |
The GraphicText's background is always transparent.
The GraphicText component supports a set of standard client-side events such as onclick, ondblclick, onmousedown, onmouseover, onmousemove, onmouseout, onmouseup.