GraphicText |
||||||||||||||||||||||||||||||||||||||||||||
Developer’s Guide Home
Installation and Configuration Common Concepts Components Index Border Layout Panel Calendar Chart Command Button Command Link Composite Filter Confirmation Data Table Date Chooser Day Table Drop Down Field Dynamic Image Folding Panel For Each Graphic Text Hint Label Input Text Input Textarea Layered Pane Level Indicator Popup Layer Popup Menu Select Boolean Checkbox Select Many Checkbox Select One Radio Spinner Suggestion Field Tabbed Pane Tab Set Tree Table Two List Selection Window Focus Load Bundle Scroll Position Ajax Framework Validation Framework Tag Reference API Reference |
Key FeaturesBasic ConfigurationTo 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. Text RotationThe 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:
Here are the examples of the GraphicText rotation angles:
Customizing StylesLike 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:
The GraphicText's background is always transparent. Client-Side EventsThe GraphicText component supports a set of standard client-side events such as onclick, ondblclick, onmousedown, onmouseover, onmousemove, onmouseout, onmouseup. |
|||||||||||||||||||||||||||||||||||||||||||
© 2010 TeamDev Ltd. | ![]() |