TTMSFNCListEditor
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. |