You are here: Creating a RichText Using a Constructor: voltmx.ui.RichText

RichText Widget

A RichText widget displays a user defined HTML string. It is capable of displaying text, links and images.

Following are a few real-time examples of RichText widget:

• You can display subscript or superscript using the RichText widget. For instance, when you want to write display percentages, you must use superscripts.

• You can use RichText widget for links.

Widgets are normally added to your application using Volt MX Iris, but can also be added from code. For general information on using widgets in Volt MX Iris, see Designing an Application in the Iris User Guide.

For general information on the RichText widget see the RichText topic in the Volt MX Iris User Guide.

This widget supports drag and drop of text for iOS 11 on iPad.

The RichText widget capabilities can be broadly categorized into the following:

• Layout
• Animations
• Data Management
• 3D Touch
• User Input Handling
• UI Appearance
• Enabling RTL
• Miscellaneous
• Configurations Common To All Widgets

Layout

Animations

Data Management

3D Touch

Gestures

UI Appearance

Enabling RTL

Miscellaneous

Configurations Common To All Widgets

RichText Widget Basics

Use the Rich Text widget to display well formatted text using HTML formatting tags.

RichText widget is used to display non-editable and well formatted text on the Form. HTML formatting tags are used in RichText widget to display text with styles (bold, underlined etc.), links, and images.

You can use a RichText widget to show a read-only view of a well formatted text and to display text with different formatting styles.

For example, you can use the RichText widget in the “Contact Us” Form of an Application. You can use the widget’s text styles (bold, italics etc.) to display the contact information, URL’s telephone numbers instead of using multiple widgets like Label, Phone, and Link widgets on the Form.

Creating a RichText Using a Constructor: voltmx.ui.RichText

var RichText1 = new voltmx.ui.RichText(basicConf, layoutConf, pspConf);

• basicConf is an object with basic properties.
• layoutConf is an object with layout properties.
• pspConf is an object with platform specific properties.

Note: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored.

Example

//The below function is the callback function for onClick event of RichText widget.
function onClickCalBck(richText) {
    //Write your logic here
}

//Defining properties for a RichText with onClick:onClickCalBck
var rTextBasic = {
    id: "rText",
    skin: "rTextSkin",
    linkSkin: "lnkSkin",
    text: "Sample text",
    isVisible: true,
    onClick: onClickCalBck
};

var rTextLayout = {
    containerWeight: 100,
    padding: [5, 5, 5, 5],
    margin: [5, 5, 5, 5],
    paddingInPixel: true,
    marginInPixel: true,
    hExpand: true,
    vExpand: false
};

var rTextPSP = {};

//Creating the RichText.
var rText = new voltmx.ui.RichText(rTextBasic, rTextLayout, rTextPSP);

Supported HTML formatting tags

The intended use of Rich Text is to display well formatted text using the following HTML formatting tags:

Tags	Description
Text	Displays Text in Bold.
Text	Displays Text in italics.
Text	Displays Text underlined.
	This tag is used to display a link. It supports optional href attribute.> Note: The skin attribute of the tag, does not change the skin of the link inside the RichText widget. You must use the linkSkin Property to change the skin of the text given inside the tag.
</img>	This tag is used to display an image and supports src attribute. The path for the image can be local or url based.> Note: Specify the absolute path of an image for MobileWeb platforms.
Subscript	Displays text as Subscript.
Superscript	Displays text as Superscript.
	Displays the text in the color specified. To display a red colored text, enter the following:This is a red colored text
	Inserts a line break.
	Displays a telephone number on Native Applications.
	Displays a telephone number on Mobile Web platforms.
> Note: If you need to apply multiple formats on the same text, the tags given in the above table can be nested. For example: BoldItalicandUnderlined.

Customizing Appearance

You can customize the appearance of the RichText widget using the following properties:

• widgetAlignment: Specifies the alignment of the widget.
• margin: Defines the space around a widget.
• padding: Defines the space between the content of the widget and the widget boundaries.
• skin: Specifies the skin.

Important Considerations

The RichText widget has the following considerations:

• All Platforms: If you specify a skin for the RichText widget, all the font level settings (color style, or size etc.) is applied to the complete content in RichText widget. You can use the label style HTML formatting tag to override the text color specified at the skin level.

• The onclick attribute of the <a href> tag does not invoke in native applications. The onclick attribute is respected only on browser-based applications(such as Mobile Web, SPA, etc). For example, in the code below, when you click Click here , the javascript confirm function does not invoke on a native application. The function invokes only in Mobile Web and SPA applications.

  <a href=”#” onclick=confirm(“Do you want to proceed”)>Click here</a>

• iPhone: HTML formatting tag is not supported. While integrating custom fonts, the name of the font file should match its PostScript name. You have to determine the PostScript name using some tool (in Mac you can install the font to find the PostScript name) and make sure that you name the font file as the .ttf. For example, if the PostScript font file name is "DBOzoneX-BoldItalic", then the font name during integration should be "DBOzoneX-BoldItalic.ttf". OpenType fonts (OTF) are also supported.