Skip to content

TTMSFNCListEditor

TTMSFNCUIPack98

Architecture

TTMSFNCListEditor is an edit control to edit a list of values in a flexible way similar to the Microsoft Outlook or iOS email address input. It consists of a collection of items that can be edited, added, deleted via the control. Items are displayed in the control as clickable rectangular areas with an appearance that is controlled by the property TTMSFNCListEditor.ItemAppearance. In addition to text, each item can optionally also display an image before and/or after the text. The images can be clicked to perform further actions on.

Appearance

The appearance of the TTMSFNCListEditor is controlled by TTMSFNCListEditor.ItemAppearance. This property holds settings for normal state of items and for selected state. The settings include:

Name Description
FillNormal Sets the background color of items in normal state
FontFillNormal Sets the text color of items in normal state
StrokeNormal Sets the color of the item border in normal state
RoundingNormal Sets the rectangle rounding of the item in normal state
FillSelected Sets the background color of items in selected state
FontFillSelected Sets the text color of items in selected state
StrokeSelected Sets the color of the item border in selected state
RoundingSelected Sets the rectangle rounding of the item in Selected state

Further, there is:

Name Description
HorizontalSpacing Horizontal spacing in pixels between items in the list
VerticalSpacing vertical spacing in pixels between items in the list Note that the size of an item is determined by the text width & height (as well as optionally the width & height of a left and/or right image in the item). This means that to increase the height of an item for example, the font size shall be increased.
DefaultLeftImage, DefaultLeftImageName Sets the image or image name for the (optional) image on the left side of items. When DefaultLeftImage, DefaultLeftImageName is set, all new items get the image specified by DefaultLeftImage or DefaultLeftImageName.
DefaultRightImage, DefaultRightImageName Sets the image or image name for the (optional) image on the right side of items. When DefaultRightImage, DefaultRightImageName is set, all new items get the image specified by DefaultRightImage or DefaultRightImageName.

Note that the image on left side or right side can also be set per item via the item's LeftImage, LeftImageName and RightImage, RightImageName properties.

Note that in order to use DefaultLeftImageName or DefaultRightImageName, a TTMSFNCBitmapContainer must be connected to TTMSFNCListEditor.BitmapContainer. This is a container control that holds multiple images and these images can be accessed via a unique name identifier.

Items

TTMSFNCListEditor.Items is the collection that holds the items for the list. When the user adds or removes items, this is automatically reflected in the items collection. An item has following properties:

Property name Description
LeftImage, LeftImageName sets the image to appear on the left side of the item
RightImage, RightImageName sets the image to appear on the right side of the item
Tag general purpose integer property
Text holds the text of the item
Value additional text property per item, available for storing extra information such as a hyperlink

Adding items can be easily done via TTMSFNCListEditor.Items.Add.Text := 'New item' and deleting an item programmatically via TTMSFNCListEditor.Items.Delete(Index);

Events

In addition to the standard FireMonkey control events, TTMSFNCListEditor exposes some additional events relating to the process of editing items in the editor:

Event name Description
OnEditorCreate event triggered when the inplace editor is about to be created and allows to customize the editor class. The default editor class is TEdit
OnEditorGetSize Event triggered just before the inplace editor will be displayed in the control and allows to customize the size of the editor in the control
OnEditorGetText allows to retrieve a text value for the value of the editor. When the inplace editor derives from TCustomEdit, the .Text property is automatically used but this event allows to use inplace editors that expose the value via another property than .Text for example.
OnEditorHide Event triggered when the inplace editor will be hidden
OnEditorShow Event triggered when the inplace editor will be displayed
OnEditorUpdate Event triggered when the value of the inplace editor has changed
OnItemCanDelete event triggered when the user presses the DEL key for a selected item and allows to query for confirmation before the item is actually deleted
OnItemClick Event triggered when an item is clicked
OnItemDelete Event triggered when an item is deleted
OnItemInsert Event triggered when a new item is inserted via inplace editing
OnItemLeftImageClick Event triggered when the left image for an item is clicked
OnItemRightImageClick Event triggered when the right image for an item is clicked
OnItemUpdate Event triggered when the inplace editing stops and the value needs to be retrieved to update the item with.