A media player can be either a video player or an audio player, depending on the input type. It can play media from a URL, via the
url tag (e.g. a YouTube link), or from an uploaded file, by linking the UI element to a domain class and the relevant file attribute.
Depending which modeling tool you’re using, add the following component from the palette into the wireframe:
|Domain data||The component can be linked to a domain class, via the |
|Reactive||The component can listen to UI events triggered by another component, via the |
|Bind target||Other components can listen and react to this component’s’ UI events, via their |
| ||Makes this UI Element listen to another UI element for events (e.g. row item selected), via a Redux UI global state selector. |
This tag is the same as connecting the elements with a Dependency arrow. However, you can use this tag, for example, if the other UI element is on a different wireframe.
The following component types can be ‘state-bound’ (i.e. listen to another UI Element via the bind tag or dependency arrow):
Button, Checkbox, ComboBox, Link, ListBox, MapPicker, MediaPlayer, PasswordField, RangeInput, Table, TextArea, TextField
| ||Links a component to a domain class, and optionally an attribute. |
Depending on the component, it will then use the domain data in some way, e.g. to populate a table or listbox with domain data for selection.
The linked data will be loaded via the domain class’ matching REST API endpoint, with loading state managed in the UI via a Redux domain selector.
Please note: This tag is the same as connecting the element to a domain class with a Dependency arrow.
| ||Specifies which domain class attribute to display. For cases where the display attribute/relationship is different from the ‘data’ domain attribute/relationship.|
| ||For Domain Chooser UI Elements (listbox, ComboBox), where the form attribute/relationship is different from the ‘data’ domain attribute/relationship, as two domain classes are involved.|
| ||Define a single-line predicate (valid TypeScript expression that evaluates to a boolean) to filter a UI list.|
| ||Any CSS class name, without a preceding ||Adds the specified CSS class (or classes) to the UI element. If you define a class in a custom CSS file, you can apply it to a component using this tag. CodeBot will also recognise any ‘standard’ Bootstrap CSS classes such as |
|Must be one of: primary, secondary, success, danger, warning, info, light, dark, link||Changes a UI Element’s appearance. The allowed values are based on Bootstrap’s variant CSS classes. |
For React Labels, this will turn the label into an “Alert” component, with a background and text colour matching the variant. Useful for callouts, notes and static warnings (“Clicking OK will delete all your data”).