Skip to content

TagsField

Jump to bottom
Dirk Lemmermann edited this page Mar 11, 2022 · 5 revisions

This field is a specialisation of the SearchField control and supports the additional feature of using the selected object as a tag. Tags are shown in front of the text input field. The control provides an observable list of the currently added tags. In addition, the field also allows the user to select one or more of the tags. The selection state is provided by the selection model. The field adds and removes tags via undoable commands which means that, for example, a deleted tag can be recovered by pressing the standard undo (or redo) shortcut.

tags-field

Usage

  • Tag deletion can be done by pressing BACKSPACE after selecting one or more tags. The user can also press BACKSPACE inside the text field area. If no more text is available in the text field then the control will start deleting tags.
  • Tag selection operations are fully supported via a tag selection model. The user can select single tags, multiple tags (by pressing CTRL (Windows, Linux) or COMMAND (Mac). Selecting a range of tags is also possible by pressing SHIFT while selecting a start and an end tag.
  • Tags views are instances of Label. If an application requires a more complex tag view then it can provide a custom tag view factory. Any type of node can be used to represent a tag. An example would be the standard Mail client on Mac. Here the user can type email addresses and after committing to one the address turns into a tag / chip view. That view behaves like a MenuButton and offers various options when pressing on it.
  • Adding, removing, clearing tags should always be done via the methods addTags(), removeTags(), or clearTags() as these methods execute their work as an undoable command. This way the field supports undo / redo behaviour so that changes to the tags list can be undone or redone easily. The standard shortcuts for undo / redo are available (CTRL-Z on Windows / Linux, and Command-Z on Mac). That said, when simply initialising a tags field with an already existing set of tags then the application can simply call getTags().setAll(...).
Clone this wiki locally