GraphicText
Developer’s Guide Home
Installation and Configuration
Components Index
Calendar
Chart
Confirmation
Data Table
Date Chooser
Drop Down Field
Dynamic Image
Folding Panel
Graphic Text
Hint Label
Popup Layer
Suggestion Field
Tab Set
Tabbed Pane
Tree Table
Two List Selection
Focus
Load Bundle
Scroll Position
Ajax Support
Validation Framework
Tag Reference

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.


API Reference | Tag Reference
Online Demo

Key Features

Basic configuration

To add the GraphicText component to the page, use the <q:graphicText> tag. The value attribute of the <q:graphicText> tag lets you specify the text for the component.

In the following example the GraphicText component with a "GraphicText" text is displayed.

<q:graphicText value="GraphicText" />

Like the UIOutputText component the GraphicText component supports the following attributes: id, converter, rendered, value, lang, style, title, binding.

Text Rotation

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.

<q: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

Customizing Styles

You can define a style for the GraphicText component using the style attribute.
The following CSS properties are supported:

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.

Client-Side Events

The GraphicText component supports a set of standard client-side events such as onclick, ondblclick, onmousedown, onmouseover, onmousemove, onmouseout, onmouseup.
© 2008 TeamDev Ltd. QuipuKit