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 Quantum Visualizer, but can also be added from code. For general information on using widgets in Quantum Visualizer, see Designing an Application in the Visualizer User Guide.

For general information on the RichText widget see the RichText topic in the Quantum Visualizer 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: kony.ui.RichText

var RichText1 = new kony.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 kony.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:

<label style="color:#FF0000">This is a red colored text</label>

NOTE: If you need to apply multiple formats on the same text, the tags given in the above table can be nested. For example: <b><i><u>BoldItalicandUnderlined</u></i></b>.

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.
• iPhone: <img> 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 <postscriptname>.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.