Multi Text Boxes

Last Updated Time: 09/25/2023

See \02_demo\test_project\res\content\maps\ui_demo.fmap for details of the example in this documentation.

Overview

The Multi Text Box is used to store and display text information that can not be edited by users. The control supports part of the HTML syntax, multi-line text and hyperlinks.

HTML Text Format

Element	Property	Description
img	src	Specify the URL for displaying images.
	rect	Generate rectangular areas.
	halign	Image horizontal alignment (left, center, right).
	valign	Image vertical alignment (top, center, bottom). Note: It takes effect when the property Line Height of the Multi Text Box control is larger than the image height.
	only	true: The image takes up a line. false: The text surrounds the image. line: The text stays on the same line with the image and does not surround it.
	data	Image data. Note: The image data is obtained through the MultiTextBox:GetImageData interface.
font	color	Text font color.
	face	Text font style.
Hyperlink	href	Specify the URL of the link target.
	style	Define the style information of the hyperlink text.

img Properties

img-src Image Path

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\">
")

img-halign Image Horizontal Alignment

left-default, center, right

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" halign=\"left\"><br/>
<img src=\"skin\\home\\23_iphone_2.png\" halign=\"center\"><br/>
<img src=\"skin\\home\\23_iphone_2.png\" halign=\"right\">
")

img-valign Image Vertical Alignment

Note

Vertical alignment effect will be implemented when the Line Height property value of the Multi Text Box control is larger than the image height and smaller than or equal to the height of the Multi Text Box.

top-default

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" valign=\"top\">
")

center

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" valign=\"center\">
")

bottom

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" valign=\"bottom\">
")

img-only The Image Taking up a Line

false-default

The text surrounds the image.

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" only=\"false\"><font>MultiTextBox MultiTextBox MultiTextBox</font>
")

true

The image takes up a line.

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" only=\"true\"><font>MultiTextBox MultiTextBox MultiTextBox</font>
")

line

The text stays on the same line with the image and does not surround it.

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" only=\"line\"><font>MultiTextBox MultiTextBox MultiTextBox</font>
")

img-rect Generating Rectangular Areas

MultiTextBox.HtmlText = nx_widestr("
<img rect=\"0,0,63,63\"><font>MultiTextBox MultiTextBox MultiTextBox MultiTextBox</font>
")

img-data Image Data

Get it through the GetImageData interface of the Multi Text Box control.

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" data=\"MultiTextBox\">
")

nx_msgbox("MultiTextBox:GetImageData = " .. nx_string(MultiTextBox:GetImageData(0,0)))

font Properties

font-color Font Color

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" valign=\"bottom\"><font color=\"#FF0000\">Text</font>
")

font-face Font Style

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" valign=\"bottom\"><font color=\"#00FF00\" face=\"Default30I\">Text</font>
")

HyperLink Properties

HyperLink-href Hyperlink Address Text

The hyperlink address is obtained through the GetHyperLinkData interface of the Multi Text Box control, and the events on_mouseout_hyperlink, on_mousein_hyperlink, on_click_hyperlink, on_doubleclick_hyperlink and on_right_click_hyperlink pass the hyperlink address as a parameter.

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" valign=\"bottom\"><font color=\"#00FF00\" face=\"Default30I\">Text</font><br/>
<a href=\"www.baidu.com\">HyperLink Address</a>
")

HyperLink-style Hyperlink Text Style

Style modifies the color and text size of the text in default state, mouse in state, mouse pressed state, and disabled state.

HLSTypeCustom is defined through the configuration file (skin\\HyperLinkStyle.xml).

<HyperLinkStyle Name="HLSTypeCustom">
    <Style Type="Normal" TypeID="0" FontName="FZCY13" Color="255,0,255,120" Size="13"/>
    <Style Type="MouseIn" TypeID="1" FontName="FZCY13" Color="255,80,80,230" Size="13"/>
    <Style Type="Press" TypeID="2" FontName="FZCY13" Color="255,220,220,50" Size="13"/>
    <Style Type="Disable" TypeID="3" FontName="FZCY13" Color="255,50,50,50" Size="13"/>
</HyperLinkStyle>

HyperLinkStyle description:

Type Name	Description
Type	Custom type name.
TypeID	0 -（Normal）Normal state 1 - （MouseIn）Mouse in state 2 - （Press）Mouse pressed state 3 - （Disable）Disabled state
FontName	Font name (refer to the file skin\res_font.xml).
Color	Font color.
Size	Not supported for now.

The HTML text shown in the image above is as follows:

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" valign=\"bottom\"><font color=\"#00FF00\" face=\"Default30I\">Text</font><br/>
<a href=\"www.baidu.com\" style=\"HLSTypeCustom\">HyperLink Address</a>
")

Properties

Property	Description
HTML Text	Content parsed and displayed by the control.
Block Normal Text Message	Used to block messages generated by mouse operations on text.
Block Image Message	Used to block messages generated by mouse operations on images.
Block Hyper Link Message	Used to block messages generated by mouse operations on hyperlinks.

Events

Callback Name	Callback Function
on_click_image	The callback when an image is clicked.
on_lost_capture	The callback when losing the focus.
on_get_capture	The callback when getting the focus.
on_click_hyperlink	The callback when a hyperlink is clicked.

Lua Script Example

self.Text = "MultiTextBox"
self.AlwaysVScroll = true

--The callback will be executed when an image is clicked.
function on_click_image(self)
    local str=nx_string(self.HtmlText)
    nx_msgbox(str) 
end