Developer

Html formatting

1. Introduction


Many controls in NextSuite have capability to display simple HTML formatted content. This feature is further improved for version 6 with support for CSS styling.

Code used for rendering HTML is located in Next Standard 6 package and it is shared between controls. You may also extend your code with using our HTML rendering class TNxHTMLView.

2. Properties


Which properties are required for displaying HTML are different for each control, but it usually involve:

1) Setting string property to contain HTML code. For TNxHTMLLabel6 is Caption property, for TNxHTMLColumn6 is a content of cell (AsString).
2) Connecting StylesSheet property to TNxStylesSheet6 non-visual component placed on form.

Example:


NxHTMLLabel61.Caption := 'Click on <a href="www.bergsoft.net">link</a> to visit our <span class="alert">site</span>.'; NxHTMLLabel61.StylesSheet := NxStylesSheet61;
Second step is optional, but with style sheets you will be able to customise fonts, link color, header sizes etc. For example: content of A tag may be in different color than blue. We may define that CSS class "alert" is painted in yellow, and so on...

NextGrid have a HTML column type where HTML is rendered inside cell. In this case HTML is content of AsString property of cell. Same as for Label component, there is StylesSheet property.

Example:


NextGrid61.Cell[NxHTMLColumn61.Index, NextGrid61.LastAddedRow].AsString := 'simple <strong>html</strong> code in cell!'; NxHTMLColumn61.StylesSheet := NxStylesSheet61;

3. Supported tags


Our goal is to provide fastest as possible drawing for simple html code since html may be rendered even inside dozens of components on form at same time (even inside grid cells). Therefore, only limited number of tags is supported, but they are customisable via StyleSheets.

Currently supported tags:

A (and href attribute), BR, DIV, EM, H1, H2, P, SPAN, STRONG

From v6.0.22 following tags are also supported: B, I, SUB, SUP

Tag also can include standard class attribute:

Example:
<span class="selected">Text</span>

See also