There are two types of EJB DATA boxes: EJB DATA TABLE
and EJB DATA FLOW
.
EJB DATA TABLE
allows a structured and high controlled design of the form.
EJB DATA FLOW
contents and controls adapt to the size of the screen, that will be displayed sequentially. Recommended for use on mobile platforms.
On the EJB DATA boxes, those columns selected in main SQL
statement (or returned by XSQL) can be represented
using several UI
controls.
A control element (sometimes called a control or widget) in a graphical user interface is an element of interaction,
such as a button or a scroll bar. Controls are software components that a computer user interacts with through
direct manipulation to read or edit information about an application.
Each widget facilitates a specific type of user-computer interaction, and appears as a visible part of the application's
GUI as defined by the theme and rendered by the rendering engine. The theme makes all widgets adhere to a unified
aesthetic design and creates a sense of overall cohesion. Some widgets support interaction with the user,
for example labels, buttons, and check boxes. Others act as containers that group the widgets added to them,
for example windows, panels, and tabs.
As JDBC
can not determine the table from resultset metadata, columns must be
correctly mapped to it's table (or virtual table if it's an aggregate) by using
wic_jrep_colout
.
The Table Layout Fields component is the way to view and modify database information, where the fields are placed in a table layout.
This component allows to define the custom layouts, implementing the styles and the colspan and rowspan properties for each cell of the table.
1.1 Layout
Main form area is organized as a table with rows and columns. The number of
rows and columns is automatically determined from it's content.
When you define the main form layout, you are placing data column related
components at a desired position. Positions should not overlap but system
allows Z order layout to generate multiple tabs on a specific position.
You can see an example below about how an EJB Table layout is. You can find that table on a Data Base form.
1.2 Form sample
As it can be seen on the next image, EJB Table is composed by different columns that will be described following this picture.
The Flow Fields component is the easiest way to view and modify database information. This component consists in a list of fields which will be displayed sequentially.
Depending on the component layout configuration, fields could be:
- Displayed vertically (Sample 1)
- Horizontally (Sample 2)
- Multiple columns (Sample 3)
In addition, when adding fields to the list, the field can be set as editable or not editable. According to data type, the column attributes and user privileges which the field displays could also be represented in several formats.
Labels refer to a type of widget which represents a short text used to describe another column.
Ref. |
Type |
Description |
UI
|
1 |
Label
|
A label refers to a table column as defined in object output mappings |
|
2 |
Empty label
|
An empty label can be used to fill a layout hole with null |
|
3 |
Event label
|
An event label can be used to create a style cell of a label which its content is determined on the jsp through an event caption. |
|
Inputs refers to UI
components that renders column values allowing input.
Inputs can be of several types according nature of data (integer, float, date, time, ...)
Ref. |
Type |
Description |
UI
|
1 |
Char
|
This field allows to introduce letters or numbers on the form where required value is shown. value can be from 1 to 128 characters. The generated field can be a writing or reading mode. |
|
2 |
Smallint
|
It accepts numeric values with an implied scale of zero. |
|
3 |
Varchar
|
This field allows to introduce letters, numbers or special characters on the form where required value is shown. value can be from 1 to 128 characters. |
|
4 |
Decimal
|
It accepts numeric values. You may define a precision and a scale in the data type declaration. |
|
6 |
Input
|
This type of field allows to choose an image from the site image gallery.
|
|
7 |
Integer
|
It renders a "number" input field. This is a text field which is good at handling data that's in an integer form. The input number field looks like a text box, excepting that - if the user's browser supports HTML5 - it will have some extra front-end functionality. |
|
8 |
Datetime
|
The Field Input Datetime specifies a date and time input field, with no time zone. |
|
9 |
Lvarchar
|
This field allows to introduce letters, numbers or special characters on the form where required value is shown. value can be from 1 to 2048 characters. |
|
11 |
Binary
|
The binary input shows a link used in order to open a file. It is located on the text box of a form with the intention of introducing a new file or modifying the existing one. |
|
Furthermore, with the attribute of a column you can set advanced types of field inputs. These are some examples:
Ref. |
Type |
Description |
UI
|
5 |
Multiple
|
This field allows to see the value of a column as a series of independents values. The generated field can be a writing or reading mode.
- Adding a value on a list is done through Enter button.
- Deleting last value of the list is done by Backspace button.
- In order to delete an specific value of the list, is needed to select it and click on Delete button.
- It can be also replaced by an existent value by pressing on it and writing the new value. It can be confirmed by Enter button.
- If new value is already on the list, it won't be doubled.
- Intern value of the field, is related with separeted list by pipe character ( | ). For example "Value1|Value2|Value3".
|
|
10 |
Password
|
It creates a text box of password type (when some values are introduced, it can't be seen its content). It's a writing or reading mode. |
|
You can use Field no Entry in order to display the value of a field. It is a read-only field but it is only emitted with hide out input. That means that field section will be on the form.
Ref. |
Type |
Description |
UI
|
1 |
No Entry
|
It is used in order to visualize the field value. It is a read-only field but you can introduce a hide out input. That means that the field value will be on the form. |
|
2 |
IMGSRC
|
This type is used for only display columns, not input columns. They show an image which is not located on the table as the value of the column has the path to a local server image or a URL to an external image.
|
|
3 |
Gauge Progress Bar
|
It creates a cell with a progress bar. It is a read-only field. |
|
4 |
Label
|
Element used in order to value the field related with another. It is used in order to show descriptions of other fields located on the form that vary dynamically when the master field is modified.
It is a read-only field. For this type of column, on its definition is needed to inform the label field.
|
|
5 |
Image
|
It is used in order to show an image stored in a field of the table. The image is shown and it is also introduced a text box on the form in order to insert a new file or modify the existing one.
It is a read-write field.
|
|
6 |
Binary
|
This type of field is used for blob field and it shows a link in order to open a file. It is placed on the text box of a form in order to introduce a new file or modify the existing one.It is a read-write field.
|
|
Strings refers to UI
component that renders column values without allowing input, and may
apply data conversion.
Ref. |
Type |
Description |
UI
|
1 |
Value
|
It is used to represent a field value. It is a read-only field. |
|
If there are links defined on the form, the links will establish by the browser. |
|
2 |
Converted
|
This type converts the field value according to the "include" associated with the column. It is a writing and reading mode field. |
|
If there isn't an "include" associated with the column, the original field value will be shown. |
|
Like in the previous type, if there are links defined on the form, the links will establish by the browser. |
|
Also, if the field is in HTML format, it shows the result with necessary encoding in order to be represented by the browser. |
|
3 |
Tooltip
|
It creates a cell with a loupe icon. If you pass the mouse above it, the field value will be shown. It is only a reading value. |
|