UI DSL - Revision history

Wu: /* mobileTab */

2017-10-27T16:02:04Z

‎mobileTab

Wu: /* horizontalButtonGroup */

2017-10-27T07:47:58Z

‎horizontalButtonGroup

Wu: /* switchIt */

2017-10-26T16:42:21Z

‎switchIt

Wu: /* Alignment */

2017-10-26T16:36:16Z

‎Alignment

Wu: /* Mobile UI */

2017-10-26T16:31:26Z

‎Mobile UI

Wu: /* textfield */

2017-10-26T16:27:36Z

‎textfield

Wu: /* textarea */

2017-10-26T16:20:05Z

‎textarea

Wu: /* table */

2017-10-26T16:16:10Z

‎table

Wu: /* searchfield and searchPanel */

2017-10-26T15:29:43Z

‎searchfield and searchPanel

Wu: /* optionsgroup */

2017-10-26T14:43:37Z

‎optionsgroup

@@ Line 1,008: / Line 1,008: @@
 =====<code>mobileTab</code>=====
 =====<code>navRoot</code>=====
 =====<code>navbarActions</code>=====

@@ Line 981: / Line 981: @@
 =====<code>horizontalButtonGroup</code>=====
 =====<code>mobileTab</code>=====
 =====<code>navRoot</code>=====

← Older revision		Revision as of 16:42, 26 October 2017
Line 967:		Line 967:

	In the above example, a "sliding style" switch is created with the <code>switchIt</code> keyword.		In the above example, a "sliding style" switch is created with the <code>switchIt</code> keyword.
		+
		+	====Mobile Layouts====
		+	As has been stated above, vertical and horizontal layouts, search panels and tabsheets are available also in mobile UIs, albeit with another keyword. In these layouts, the simple UI elements listed above can be used in order to render mobile UIs.
		+
		+	In addition to
		+
		+	* <code>mobileHorizontalLayout</code>
		+	* <code>mobileSearchPanel</code>
		+	* <code>mobileTab</code>
		+	* <code>mobileVerticalLayout</code>
		+
		+	there are a few mobile-only layouts without desktop UI counterparts available:
		+
		+	=====<code>horizontalButtonGroup</code>=====
		+	=====<code>mobileTab</code>=====
		+	=====<code>navRoot</code>=====
		+	=====<code>navbarActions</code>=====
		+	=====<code>navButton</code>=====
		+	=====<code>verticalGroup</code>=====
		+
		+
		+	====Mobile Navigation====

	===Alignment===		===Alignment===

← Older revision		Revision as of 16:36, 26 October 2017
Line 935:		Line 935:

	If these model elements are used in a mobile environment, they will be rendered by the appropriate UI elements for Vaadin mobile UIs.		If these model elements are used in a mobile environment, they will be rendered by the appropriate UI elements for Vaadin mobile UIs.
		+
		+	====Mobile-only Elements====
		+
		+	In addition to the mobile version of "desktop" UI elements, currently there is one additional UI element that can only be used in mobile UIs:
		+
		+	=====<code>switchIt</code>=====
		+
		+	A toggle switch for use in mobile UIs is generated with the <code>switchIt</code> keyword. Switches serve the same purpose in mobile UIs that checkboxes do for desktop UIs. A switch can receive a name, an <code>i18n</code> key, a string with CSS styles and a <code>readonly</code> flag.
		+
		+	Validator assignments, databinding instructions and visibility processor directives may be defined in braces. After the closing braces, an alignment may be specified.
		+
		+	'''Syntax''':
		+
		+	<syntaxhighlight lang="java">
		+	switchIt [( [i18n <i18nKey>] [styles <stylesString>] [readonly] )] [<name>] {
		+	[<validator assignments>]
		+	[bind <binding>]
		+	[visibility <directive>]
		+	} [align <alignment>]
		+	</syntaxhighlight>
		+
		+	'''Example''':
		+
		+	<syntaxhighlight lang="java">
		+	mobile Sample {
		+	verticalGroup Options {
		+	switchIt Active
		+	} align fill-fill
		+	}
		+	</syntaxhighlight>
		+
		+	In the above example, a "sliding style" switch is created with the <code>switchIt</code> keyword.

	===Alignment===		===Alignment===

← Older revision		Revision as of 16:31, 26 October 2017
Line 912:		Line 912:

	===Mobile UI===		===Mobile UI===
		+
		+	The UI DSL supports a variety of elements that are optimised for display on mobile devices. Mobile UIs are described in <code>.uimodel</code> files similar to regular UI models. The main difference is that the top level element in a mobile UI is a "mobile view" (instead of an desktop view or "ideview"), created by the keyword <code>mobile</code>.
		+
		+	Most of the UI elements that can be used in a desktop view (ideview) can be used inside a mobile view as well. In particular, these are:
		+
		+	* <code>combo</code>
		+	* <code>datefield</code>
		+	* <code>decimalField</code>
		+	* <code>horizontalLayout</code> - here they are called <code>mobileHorizontalLayout</code>
		+	* <code>label</code>
		+	* <code>numericField</code>
		+	* <code>optionsgroup</code>
		+	* <code>progressbar</code>
		+	* <code>searchfield</code>
		+	* <code>searchPanel</code> - here called <code>mobileSearchPanel</code>
		+	* <code>tab</code>
		+	* <code>table</code>
		+	* <code>tabsheet</code> - here called <code>mobileTab</code>
		+	* <code>textarea</code>
		+	* <code>textfield</code>
		+	* <code>verticalLayout</code> - here called <code>mobileVerticalLayout</code>
		+
		+	If these model elements are used in a mobile environment, they will be rendered by the appropriate UI elements for Vaadin mobile UIs.

	===Alignment===		===Alignment===

← Older revision		Revision as of 16:27, 26 October 2017
Line 871:		Line 871:

	=====<code>textfield</code>=====		=====<code>textfield</code>=====
		+
		+	A text feld is generated with the <code>textfield</code> keyword. Textfields can receive a name, an <code>i18n</code> key, a string with CSS styles and a readonly flag. Furthermore, the following "datatype validators" may be defined in the parentheses between the keyword and the name:
		+
		+	* <code>maxLength</code> - creates a maximum-length validator for this field
		+	(integer)
		+	* <code>minLength</code> - creates a minimum-length validator for this field
		+	(integer)
		+	* <code>regex</code> - creates a regular expression validator for this field (String)
		+
		+	Validator assignments, databinding instructions, and visibility processor directives may be defined in braces. After the closing braces, an alignment may be specified.
		+
		+	'''Syntax''':
		+
		+	<syntaxhighlight lang="java">
		+	textfield [( [maxLength=<maxLength>]
		+	[minLength=<minLength>]
		+	[regex=<rexegString>]
		+	[i18n <i18nKey>]
		+	[styles <stylesString>]
		+	[readonly] )] [<name>] {
		+	[<validator assignments>]
		+	[bind <binding>]
		+	[visibility <directive>]
		+	} [align <alignment>]
		+	</syntaxhighlight>
		+
		+	'''Example''':
		+
		+	<syntaxhighlight lang="java">
		+	package net.osbee.sample.pos.uimodels
		+
		+	ideview Sample {
		+	verticalLayout Demo {
		+	textfield (regex="[A-Z]-[0-9]{4}") TestText
		+	}
		+	}
		+	</syntaxhighlight>
		+
		+	In the above example, a textfield is created along with validators that check the input in the UI field for conformity to certain conditions. If the requirements are not met, an error mark will be displayed.

	===Mobile UI===		===Mobile UI===

← Older revision		Revision as of 16:20, 26 October 2017
Line 842:		Line 842:

	=====<code>textarea</code>=====		=====<code>textarea</code>=====
		+	A text area is generated with the <code>textarea</code> keyword. Text areas can receive a name, an <code>i18n</code> key, a string with CSS styles and a readonly flag.
		+
		+	Validator assignments, databinding instructions and visibility processor directives may be defined in braces. After the closing braces, an alignment may be specified.
		+
		+	'''Syntax''':
		+
		+	<syntaxhighlight lang="java">
		+	textarea [( [i18n <i18nKey>] [styles <stylesString>] [readonly] )] [<name>] {
		+	[<validator assignments>]
		+	[bind <binding>]
		+	[visibility <directive>]
		+	} [align <alignment>]
		+	</syntaxhighlight>
		+
		+	'''Example''':
		+
		+	<syntaxhighlight lang="java">
		+	package net.osbee.sample.pos.uimodels
		+
		+	ideview Sample {
		+	verticalLayout Demo {
		+	textarea MyText
		+	}
		+	}
		+	</syntaxhighlight>
		+
		+	In the above example, a text area is created with the <code>textarea</code> keyword.

	=====<code>textfield</code>=====		=====<code>textfield</code>=====

← Older revision		Revision as of 16:16, 26 October 2017
Line 792:		Line 792:

	=====<code>table</code>=====		=====<code>table</code>=====
		+	A table is generated with the table keyword. Tables can receive a name, an <code>i18n</code> key and a string with CSS styles.
		+
		+	Within curly braces, a table may be given a datatype (e.g. a DTO) that can be set with the type keyword. The selection type (<code>single</code>, <code>multi</code> or <code>none</code>) can optionally be controlled with the <code>selectionType</code> keyword. If images are to be displayed in the table, the image source path within the datatype can be set with the <code>imageField</code> keyword. Furthermore, the flags <code>useBeanService</code> (to look for registered OSGi services from where data can be retrieved) and readonly may be set.
		+
		+	The values that are to be displayed can be fed into the table by databinding (see section "databinding" below). The columns displayed and their order are determined by the column keywords in the columns section of the table. Validator assignments, databinding instructions and visibility processor directives may be defined.
		+
		+	After the closing braces, an alignment may be specified. Columns are enumerated within the columns environment. For each column, the content has to be specified. This can be done by specifying a property of the datatype contained within the table. These properties may be nested.
		+
		+	'''Syntax''':
		+
		+	<syntaxhighlight lang="java">
		+	table [( [i18n <i18nKey>] [styles <stylesString>] )] [<name>] {
		+	[type <type>]
		+	[selectionType <selectionType>]
		+	[imageField <imageField>]
		+	[useBeanService]
		+	[readonly]
		+	[columns {
		+	[column <content>] [icon <iconString>]
		+	}]
		+	[<validator assignments>]
		+	[bind <binding>]
		+	[<visibility directive>]
		+	} [align <alignment>]
		+	</syntaxhighlight>
		+
		+	'''Example''':
		+
		+	<syntaxhighlight lang="java">
		+
		+	table DataTable {
		+	useBeanService
		+	type net.osbee.sample.foodmart.dtos.general.VegetableDto
		+
		+	columns {
		+	column category
		+	column weight
		+	column color
		+	column origin
		+	}
		+
		+	bind tableRefresh --> [this].refresh
		+	} align fill-fill
		+
		+	</syntaxhighlight>
		+
		+	In the above example, a table is created with the <code>table</code> keyword. A BeanService is used, and a datatype is assigned to the table. Columns and their order are specified in the columns section.
		+	The values are entered into the table by databinding.

	=====<code>textarea</code>=====		=====<code>textarea</code>=====

← Older revision		Revision as of 15:29, 26 October 2017
Line 760:		Line 760:

	=====<code>searchfield</code> and <code>searchPanel</code>=====		=====<code>searchfield</code> and <code>searchPanel</code>=====
		+
		+	A search field is generated with the <code>searchfield</code> keyword. Search fields must be located inside a search panel. They provide wildcard support for search actions. A search field can be given an i18n key and a string with CSS styles. The property of the datatype that is searched must be specified.
		+
		+	The datatype that is searched is defined in the <code>searchPanel</code> around the search field. A search panel can be given a name, an <code>i18n</code> key and a string with CSS styles. In curly braces, the datatype that shall be searched can be specified, and search fields for various properties of this datatype (nested properties are supported), databinding instructions and visibility processor directives may be defined. After the closing braces, an alignment may be specified. More about search is covered in section "search" below.
		+
		+	'''Syntax''':
		+
		+	<syntaxhighlight lang="java">
		+	searchPanel [( [i18n <i18nKey>] [styles <stylesString>] )] [<name>] {
		+	[type <type>]
		+	[searchfield [( [i18n <i18nKey>]
		+	[styles <stylesString>] )] <property>]
		+	[bind <binding>]
		+	[visibility <directive>]
		+	} [align <alignment>]
		+	</syntaxhighlight>
		+
		+	'''Example''':
		+
		+	<syntaxhighlight lang="java">
		+
		+	searchPanel SearchPanel {
		+	type net.osbee.sample.dtos.CurrencyDto
		+	searchfield abbrivation
		+	searchfield fullname
		+	} align top-fill
		+
		+	</syntaxhighlight>
		+
		+	In the above example, two search panels are created with the <code>searchPanel</code> keyword. They may be given a datatype to be searched. The single properties in which can be searched are specified in search fields.

	=====<code>table</code>=====		=====<code>table</code>=====

@@ Line 637: / Line 637: @@
 <syntaxhighlight lang="java">
-    optionsgroup [( [i18n <i18nKey>] [styles <stylesString>] )] [<name>] {
+optionsgroup [( [i18n <i18nKey>] [styles <stylesString>] )] [<name>] {
          [type <type>]
          [selectionType <selectionType>]