InteractionFragment
InteractionFragment
. It is not a subclass of ProcessStep
but they share a common base class (ProcessFragment
). Although it is possible to have interactive process steps it is desirable to have re-usable user interface structures. Interaction fragments provide exactly that, allowing to combine multiple fragments in an interactive step. The root of an interaction always is a process step but that is handled transparently by the framework.InteractionFragment
just need to implement the method init()
. There they declare which process parameters shall be displayed to the user and which of these can receive input from the user. As process parameters are instances of RelationType
(from the ObjectRelations framework) an interaction is defined by a list of parameter relation types. If fragments contain other fragments they just add the parameter lists of the sub-fragments into parameters that have a collection of relation types as their datatype. That means a complex interaction is defined by nested collections of process parameter relation types.UserInterfaceProperties
.ListDisplayMode
. It is defined in the class DataElementList
, a subclass of DataElement
. Data elements are the data transport objects for the communication between server and client (i.e. process and UI). To set the layout of a fragment use the fluent parameter interface:FILL
: This mode simply fills the display area available to a fragment with a single parameter. Placing multiple parameters in this layout is not supported and may result in rendering problems or exception. (HTML: div
with width and height set to 100%)FLOW
: Parameters are arranged in a natural flow as defined by the UI context. For web applications that means that components will be placed by the web browsers layout engine. This can often be controlled by providing CSS styling. (HTML: div
)MENU
: Adds all parameters to a structure that represents a menu or other navigation element. (HTML: nav
)DOCK
: Up to three parameters (or sub-fragments) can be arranged as left, right, and center elements. The left and/or right parameters must have an explicit size set so that the center element will fill the remaining space. To arrange the parameters vertically instead of horizontally the flag VERTICAL
can be set on the fragment parameter.SPLIT
: Similar to DOCK
but the preset sizes of the border areas can be modified interactively by the user afterwards.TABS
: All fragment parameter will be placed in distinct horizontal tabs of which only one can be visible at a time. The user can select the visible tab interactively but the fragment that also query and set the index of the currently active tab through the property CURRENT_SELECTION
.STACK
: Similar to TABS
but the parameters are arranged in a vertical stack instead.DECK
: This mode doesn't provide a interface for the user. Therefore the currently visible parameter can only be set by the fragment through CURRENT_SELECTION
.GRID
: Places parameter in distinct rows depending on the property flag SAME_ROW
. If set on a parameter it will be placed in the same row as the previous parameters. For each parameter without this flag a new row will be created in the UI. In HTML the rows and their elements will become corresponding style names so that a CSS grid system can be applied to the fragment. (HTML: hierarchy of div
elements)FORM
: An input form. Works like GRID
but uses a different UI element. (HTML: form
with div
children)GROUP
: Groups the parameter visually and can have a title by adding a text parameter with the LABEL_STYLE
set to TITLE
. Typically used to group elements in a form. (HTML: fieldset
with div
children)TABLE
: Arranges parameters in a table structure. In the case of HTML this will be a table
element. Because this is the oldest layout mode it is also the default if no explicit mode is set on a fragment. But because the layout of nested tables often leads to problems and rendering tables responsively is difficult it is recommended to use one of the other layouts whenever possible. Table layouts should only be used if a (HTML) table is explicitly needed and only if no further nesting of fragments is necessary.