This page contains an overview of available widgets.

Widget categories

The available widgets can be grouped roughly into categories. Most categories contain a basic widget, from which all other widgets of the category are derived. This is usually the widget mentioned first in the lists below. Most use cases can be realized with the basic widget, whereas the derived widgets simplify certain specific tasks. For instance, basic widgets like Dropdown, DynamicTable and Accordion  have counterparts ResourceDropdown, ResourceTable and ResourceAccordion, which are used to display information based on OGEMA Resources of specific types, and another set of Pattern Widgets, which display information based on OGEMA ResourcePatterns. For the very start, it is recommended to focus on the basic widgets, in order to get a grasp of the concepts, before moving on to the variety of derived widgets. See also the Concepts page for some background on the different types of widgets.

  • Buttons
    • Button: the base class for all buttons, suitable and sufficient for many use cases involving buttons.
    • RedirectButton: a button that opens a new tab when clicked. The target URL can be configured in your app.
    • ButtonConfirm: a button that opens a popup asking for confirmation before sending its POST request.
    • ConfigButtonRow: a special widget consisting of three buttons, labelled "Ok" ( -> save and close page), "Cancel", "Save", which often comes handy for configuration pages that allow the user to edit some settings related to your app. (Work in progress)
  • Labels
    • Label: simply displays some text. The text can be dynamic, however, depending for instance on some user entry in another widget. Html markup can be used in the text.
    • Textarea: display the text in a text box. See the <textarea> Html-tag.
    • Header: like a label, but the text is displayed as a header, i.e. larger and bold. The size of the header can be configured.
    • TimeIntervalLabel: a label that displays a time interval
    • ResourceLabel: a label that displays content related to a Resource, i.e. an entry of the OGEMA database.
    • ValueResourceLabel: a label that displays the content of a ValueResource (subtype of ResourceLabel)
    • TimeResourceLabelResourceLabel: a label that displays the content of a TimeResource (subtype of ValueResourceLabel); note that absolute timestamps are always stored in ms since Jan 1st 1970 in OGEMA, and the ValueResourceLabel simply displays the milliseconds for a TimeResource. The TimeResourceLabel provides a more human-friendly representation of the timestamp.
  • Text fields
    • TextField: displays text and allows the user to edit it. The base class for all text fields, suitable and sufficient for many use cases involving text fields.
    • NumberInputField: a text field that only accepts numerical input. See also Slider.
    • Slider: an input widget for numerical values, in the form of a slider.
    • Autocomplete: a text field with autocomplete functionality
    • ResourceTextField: a text field that displays editable data associated to a Resource.
    • ValueResourceTextField: a text field that displays the content of a ValueResource, and allows the user to edit it. See also TimeValueResourceTextField and BooleanResourceCheckbox.
    • TimeResourceTextField: a special ValueResourceTextField for TimeResources, see also TimeResourceLabel.
    • ResourcePathAutocomplete: an Autocomplete widget that allows for the selection of a Resoure by its Resource path. Since the resource path is not really meant to be human readable, it is recommended to use this widget only for debugging or administration pages, not for user oriented GUIs. A ResourceDropdown is often the better choice.
  • Dropdowns
    • Dropdown: a dropdown that allows the user to select one option out of a predefined set of values. The base class for all dropdowns, suitable and sufficient for many use cases involving dropdowns.
    • TemplateDropdown: a dropdown whose entries correspond to instances (objects) of a class T, which can be specified as a generic parameter.
    • ResourceDropdown: a TemplateDropdown modeled on a Resource Type. The set of entries for the dropdown can either be set explicitly in the app (UpdateMode.MANUAL), or the widget can be configured to simply display all available resources of the specified type (UpdateMode.AUTO_ON_GET).
    • ResourceListDropdown: a special ResourceDropdown that displays not all resources of a given type, but all resources contained in some ResourceList.
    • ReferenceDropdown: a special dropdown that allows the user to select the reference target for a Resource.
    • ResourceTypeDropdown: a special dropdown that allows the user to select a Resource Type.
    • PatternDropdown: a special TemplateDropdown whose entries are modeled on ResourcePattern instances. The set of entries can be either set explicitly, or can be determined by the widget, similarly to ResourceDropdown.
    • ContextPatternDropdown: a special PatternDrodown for ContextSensitivePatterns. The context can be set per user session, and only pattern matches for the given context are displayed.
  • Multiselect
    • Multiselect: similar to a Dropdown, but allows the selection of multiple items.
    • TemplateMultiselect: similar to a TemplateDropdown, but allows the selection of multiple items.
    • ResourceMultiselect: similar to a ResourceDropdown, but allows the selection of multiple items.
    • PatternMultiselect: similar to a PatternDropdown, but allows the selection of multiple items.
    • ContextPatternMultiselect: similar to a ContextPatternDropdown, but allows the selection of multiple items.
  • Checkboxes
    • Checkbox: allows the user to select or unselect a set of options.
    • SimpleCheckbox: Checkbox that represents a single boolean value and allows to edit it
    • BooleanResourceCheckbox: a special Checkbox that displays and sets the value of a BooleanResource.
  • Alert
    • Alert: Displays a message to the user. Not a popup, but rather an element on the page that is dynamically shown and hidden, with configurable background color.
  • PageSnippet
    • PageSnippet: a special widget that only serves as container for other widgets. Subwidgets can be appended like for a WidgetPage itself.
  • Popups
    • Popup: a popup, i.e. an element that is normally hidden but can be faded in as a result of some user interaction. It is possible to add subwidgets to the popup, so that one can build fairly complex popup menus, by adding a PageSnippet as subwidget, with can be thought of as a page of its own.
  • Tables
    • StaticTable: not strictly a widget (it does not implement the OgemaWidget interface), but rather a static Html element that can be used to structure widgets on the page, if no dynamic behaviour like adding or removing of cells is required. Its cell entries can be either a widget, static text, or some other static Html element.
    • DataTable: a table that displays String values in its cells. Does not provide much dynamic behaviour, but it is possible to trigger an action, like showing a popup, when the user clicks on a row. Paging available.
    • DynamicTable: a table whose cells contain other widgets, and which allows the dynamic addition and removal of rows. Rows are modeled on some class T, which can be specified as a generic parameter, and a row template has to be provided that is used to create new rows.
    • ResourceTable: a DynamicTable modeled on some Resource Type. The set of Resources (i.e. the rows) that are shown can be specified explicitly (UpdateMode.MANUAL), or can be determined by the widget (UpdateMode.AUTO_ON_GET). In the latter case, all Resources of the specified type are shown.
      Note that with UpdateMode.MANUAL in many cases also the basic DynamicTable can be used parametrized with the respective resource type with almost no overhead compated to the ResourceTable.
    • ResourceListTable: a special ResourceTable that displays the content of a ResourceList.
    • PatternTable: a DynamicTable modeled on some ResourcePattern class. Like for ResourceTable, the entry set of the table can be set explicitly, or can be determined by the widget, in which case all pattern matches for the specified class are shown.
    • ContextPatternTable: a PatternTable for ContextSensitivePatterns. See ContextPatternDropdwown.
  • Accordions
    • Accordion: the base class; displays a set of tabs that can be opened and closed by the user.
    • TemplateAccordion: an Accordion with tabs modeled on some class T.
    • PatternAccordion: a TemplateAccordion with tabs modeled on some ResourcePattern type.
  • Drag & Drop widgets
    • DragDropAssign: allows to define a set of containers and a set of draggable object, which can be assigned to the containers.
    • PatternDragDropAssign: a DragDropAssign where the containers corresponds to ResourcePatterns of a specific type, and the draggable objects to ResourcePatterns of another type. Can be used, for instance, to set a reference from one resource of the draggable object pattern to a resource of the container pattern where it is dropped (example: containers correspond to rooms, draggables to devices, then the location of the device will be updated whenever it is dragged to a new room).
  • Specialized Dialogs
    • FileDownload: Widget that allows to set a File object by the application and makes this file accessible for download by the user. Use setFile to define the file, overwrite onGet to generate and set the file "on the fly" directly before the download.  The widget itself provides no element visible to the user. Opening the dialog needs to be triggered a separate button.
    • FileUpload: Opens dialog that allows the user to upload a file. When the upload is finished the onFinished method is called. The widget itself provides a button to choose a file to upload. Triggering the upload itself must be done by a separate button or other widget action like in FileDownload
  • Miscellaneous Html
    • ResourceColorpicker: display and set the color stored in a ColorResource
    • Icon: A set of free icons that can be used on your page. Currently, the selection is still rather limited.
    • Meter: can be used for instance to display the state of charge of some device. See the Html5 <meter>-tag.
    • ProgressBar: displays the progress of some activity. See the Html5 <progress>-tag.
    • Flexbox: An Html flexbox. See for instance https://css-tricks.com/snippets/css/a-guide-to-flexbox/. It serves as a container for multiple subwidgets, and controls their positioning on the page.
  • Special Time widgets
    • Datepicker: a menu that lets the user select a date, and optionally also the time of the day
  • Pattern manipulation widgets
    • PatternEditor: allows the user to edit the content of a ResourcePattern. A set of additional annotations for the pattern fields allow to exclude certain fields, determine whether a field is set as  reference or not, etc.
    • PatternCreator: allows the user to create new ResourcePattern instances.

Available Widgets

Note: You can see the widgets in operation and access the respective source code by adding the app widgets-overview to your rundir / to your workspace. The code for creation and configuration of the widgets is available in the class https://github.com/ogema/tutorial/blob/master/src/widgets-overview/src/main/java/de/iwes/widgets/overview/StartPageBuilder.java.

Widget Type Example Basic Html tag / LibraryExplanation API Link
 AccordionAccordion Bootstrap Panel  
 AlertAlert Bootstrap Alert  
 ButtonButton <button>  
 CheckboxCheckbox <input type="checkbox">  
 Colorpicker (TextField of type COLOR)
or
ResourceColorpicker
Colorpicker <input type="color">  
  DragDropAssignDragDropAssign jQuery UI Library  
 DropdownDropdown <select>  
 DynamicTableDynamicTable <table>, with Bootstrap styling  
 IconIconIcon2Icon3Icon4<img>, icons from Tango set: https://commons.wikimedia.org/wiki/Tango_icons  
  LabelLabel  <span>  
 Meter, ProgressBarProgressBar <meter>, <progress>  
MultiselectMultiselect <select>, plus chosen jQuery plugin
(https://harvesthq.github.io/chosen/)
  
 PlotFlot (experimental)PlotFlot Flotcharts library:
http://www.flotcharts.org/
  
 PopupPopup Bootstrap Modal  
 SliderSlider <input type="range">  
 TextFieldTextField <input>Offers various types such as Password, Color, Email, Time, Month, Week Number, Range, Time, URL etc. 
 TextAreaTextArea <textarea>  
Tags:
Created by Jan Lapp on 2016/08/31 13:13