The base concrete class for all Viewables is ViewElement. It defines the foundation components used by all other controls. A ViewElement has three component layers: insets, border, background. The following apply to all controls:
A Button is a simple interactive control that fires an Actionable when
the user clicks on it. If the Button has focus, then the Actionable is
invoked on the <Enter> keystroke.
A CheckBox is a binary state toggle that is either active or inactive. The state is flipped on a mouse click or, if the Checkbox has focus, by the <Enter> keystroke. By default, the associated value of this control is Boolean.TRUE when active and null when inactive. These values can be reset to anything you would like.
A Container is a parent element that organizes its children via a layout. A Container has four component layers: insets, border, background, layout. Unlike most controls, a Container does not inherently add to the fully qualified selector id. The assumption is that a container is just organizing its children, not influencing any style. Panel is a container that does add its elementID into the selector id. Or if you specify an explicit elementID for Container, then that becomes part of the selector id.
A DragPanel is a special container that is sensitive to the mouse click, and can be dragged by the user. The panel is dynamically moved while the mouse button is down, and retains its final position once the button is released. The orientation= attribute controls if the panel can be dragged horizontally, vertically, or freely in 2D.
A Dialog is a special container that operates as a popup. It will be defined in the top of the visual hierarchy and will be included with the special layout Constraint position='Popup'. This means that the Dialog only becomes visible on explicit action. Once visible, the Dialog intercepts all mouse and key activity for its own use. It is then closed on explicit action, releasing its intercept at that time. One Dialog can open another.
A DropDown is a text display element that shows an active entry from a given list (DropDowList) of possibilities. The list is hidden until the user clicks on the DropDown, at which point the list is opened and positioned over the DropDown. The list supports some count of visible entries, with scrolling supported if there are more entries than the given count. Clicking on an entry closes the list and changes the value displayed in the DropDown.
The DropDownList defines the set of listItem for the DropDown and is only visible while the user is selecting a value.
A Hint is a special container that operates as a popup. It will be included within some other ViewElement, and is invisible until the mouse hovers over the parent element, unmoving for a given amount of time. The Hint will then be made visible and positioned over its parent. Once the mouse moves, the Hint is hidden once again.
While the Hint is a full container and can be as complex as desired, remember that the Hint auto-closes on any user activity, so it cannot be truely interactive.
A Label is a text display element that acts as the foundation for many other controls. Its layered components consist of: insets, border, background, icon, shadow text, text. Icon expects to be filled with an IconComponent, which is typically an image that consumes a given amount of space in the overall control. Text and shadow text share the same textual attributes, and same run of text characters, but the shadow text is of a different color and is offset a bit from the master text. This gives you a 'shadow' depth effect.
The run of text is laid out horizontally until either an explicit newline is encountered or a maximum width is exceeded. At that point, a new line is started.
A ListBox defines a set of listItems, only one of which is active. The active item supplies the value of the ListBox itself. A fixed number of list items is displayed, and if the list is longer, then scrolling through the items is supported.
A Panel is a minor variation of a container that always includes its elementID (Panel) within the fully qualified selector name. If you want layout with no impact on styling, use a Container.
A RadioButtonGroup is a specialization of a container that parents RadioButton elements. Each RadioButton is like a CheckBox, in that it is either active or inactive and displays accordingly. But all RadioButtons coordinate with their parent group so that only one button is active at a time.
The RadioButtonGroup has a layout, and the individual RadioButtons are added to the group just like any child is added to a container. However, it is possible for application Model processing to define the desired set of options within the group. To this end, rather than declaring hard-coded RadioButton children, you can define a template that will be cloned so support each option provided by the Model.
Each RadioButton is very much like a CheckBox, either in an active or inactive state. It has an associated data 'value', which becomes the value of the overall RadioButtonGroup when it is active.
A Screen is a specialization of a container that has a special size and position. All controls, even normal containers, take there size and position from the layout processing of their parent control. But you have to start somewhere, so you start with a Screen.
By definition, a Screen is positioned in the upper left of the display (0,0) and has a width/height that matches the physical display width/height. As a container, it has a layout that arranges its children within those bounds.
In 3D rendering, a Screen has a bit more flexibility. You can set the explicit origin and adjust scaling. And preferredSize will override the defaults taken from the physical screen.
A ScrollPanel is a custom container that has a limited height (based on a count of rows) and the ability to scroll when there are more layout rows than the given height.
A Slider is a control with a thumb that can be dragged from one extreme to another. The value of the Slider is the percentage of the distance spanned. End points of the Slider can act as buttons that move the thumb when pressed. The Slider can be oriented either horizontally or vertically (and just for grins, neither/both where the thumb can be dragged in 2D, adjusting both an x and y percentage at the same time)
The details of the Slider appearance are left to the styling applied. A Slider can be configured to look like a volume control, or a scroll bar. The Slider can be configured to render Model supplied text in the end point buttons, and can dynamically display a changing value within the thumb itself.
A TabGroup is a specialization of a container that parents a set of Tab elements. Each Tab is a combination of text display element (the visual tab) and a tab panel which is a container with its own children. The visual Tabs form a static display, but all tab panels overlay each other, with only a single tab panel being visible at a time. The size of the TabGroup is determined by the fixed size of the Tabs, plus a large enough space to display the biggest tab panel.
Each Tab is similar to a RadioButton, in that only a single Tab is active at a time. The Tabs coordinate with the TabGroup to select which tab panel is visible.
A TextBlock is a multi-line display of text, with a scrollbar that activates if there is more text than what will fit in the given visual area. The text display itself is via TextString and the assumption is that you will apply styling via the selector TextBlock.TextString. You can also provide your own <textElement>.
TextEntry is an interactive control that allows the user to type-in text. When this control has focus, a text cursor will be displayed showing the text insert point. The cursor can be repositioned by the mouse or by standard, directional keystrokes. If the text is larger than the display area, then it will be scrolled to keep the cursor visible.
Callbacks can be triggered on every keystroke, or only when editing is considered to be 'complete'. Currently, the editing is complete when focus is lost, or upon the explicit keystroke <Shift ENTER>.
A TextString is a simple display of a run of text characters. It is similar to Label, but does not support an icon or shadow text.