Working with Presentation Templates
Field Column
widths
See also:
Setting Installation Preferences
Standards
for Naming Web Resources
A presentation template contains all of the options used to
customize the appearance of a form when presented to an internet browser. The
template is separate from the form and each template can be associated with any
number of forms. The association is made using the general tab of Form properties. A
template is maintained using the template editor which can be opened either by
double clicking on an existing template in the hierarchy tree panel (Shared
elements -> Presentation templates) or creating a new template from the
file menu with (File -> New -> Presentation template).
Each presentation template consists of a number of template sheets.
Each sheet can be associated with one or more form pages and/or field groups
thus allowing very precise control over the visual appearance of a form. When a
template is created, the system initially creates a single sheet named DEFAULT.
When a template is associated with a form, the attributes in the DEFAULT sheet
are applied unless an alternative sheet is specified at the page or field group
level. Thus, template sheets are applied to a form hierarchically: if a field
group sheet is specified, it will be used; if not, the page sheet will be used
if it exists; if neither a page sheet or a field group sheet has been
specified, the DEFAULT sheet will be used.
Template sheets are added, copied, renamed and deleted by
right-clicking on the corresponding tab. When adding a new sheet, the
attributes are copied from the currently displayed sheet.
The Test button can be used to test the appearance of
a template. This runs a simple one page form TEMPLATE_TEST from the
UFS_INTERNAL project. This test form can be changed if desired.
The template editor display looks like this:
Use of colours
There are a number of places within the template editor
where you can select a colour. The system allows a colour to be entered in one
of three ways:
- by
selecting a colour by name from a dropdown list (the list of colours
displayed is taken from the installation
preferences XML file)
- by
entering the colour code directly (this option can be disabled using the installation preferences XML file)
- using
the colour selection dialog box (this option can be disabled using the installation preferences XML file)
If you enter the colour code directly, then the format is
#RRGGBB where RR, GG, BB are hexadecimal numbers in the range 00 - FF (see any
HTML book for more information). Please note that browser safe colours (i.e.
colours which generally display correctly regardless of which browser is used)
consist of colour pairs where each digit is either 0 or a multiple of 3 and
both digits are the same, e.g. #336699, #0000FF, #CCCCCC are all browser safe
colours, #1E8276 is not.
When using the colour selection dialog, all colours
displayed on the Swatches tab of the dialog box are browser safe.
Specifying image
locations
See naming web resources
for a recommended convention for the naming of all web resources.
Template options
Info text
position
This option determines where field information texts (field
help texts) are located. Ebase supports three options:
- to the
right of the data entry field (this is the default)
- underneath
the data entry field
- as a
pop-up window
If pop-up window is selected, the options button can
be used to specify the dimensions for the window and also the location of the
clickable image that will be displayed to the right of the data entry field.
The image is displayed with an alternate text taken from system text number 50
which can be customized as required.
Form
background colour
This specifies the background colour used for the entire
displayed page including any JSPs. If you choose, a colour other than white,
you will probably need to set some of the text background colours to the same
colour to achieve the desired effect.
Field widths
This box contains the default widths - specified as either a
percentage or a pixel value - to be used for the field label (left), field
entry (centre), and field information (right). The fields of the page will be
displayed in a table with these widths. If specified as a percentage, the
widths must total 100%. If the info text position option 'underneath entry
field' was selected, the field information value is not used. The values
specified in the presentation template are default values and these can be
overridden at page or group level using the Form Editor. See Form Page Layout for more information.
Please note that if a form contains a field with a large
length, the size of the field entry table cell will dynamically expand to
accommodate the extra length. This can lead to a misalignment of the table
cells between different field groups. If you notice this, please check the
lengths of the fields displayed.
Striping
If this option is selected, alternate lines of the page will
be displayed with the two striping colours as shown in this example:
Left Column
widths
This contains the width - specified as either a percentage
or a pixel value - of the left hand column of a multi-column display. The right-hand
column will occupy the remainder of the total space specified in the Form
Panel field of the panel
widths box.
Panel widths
These fields specify the relative widths - specified as
either a percentage or a pixel value - of the left side JSP panel, the form
panel, and the right-side JSP. If specified as a percentage, the widths should
total 100%. (See Customizing
Presentation for more information)
JSPs
This button
presents a pop-up window where you can specify the file locations of the JSPs
used to surround the form. The file locations specified are relative to the
document root of the Ebase web application.
Note that jsps can also be specified at form level.
When present, form level jsps override template level jsps.
Navigation
buttons
This button presents a pop-up window with the following
options:
·
Top of page buttons: the locations used
for the images of the next page, previous page, and finish buttons. These
images will be placed on the right-hand side of the form header and are
intended to help the user page backwards and forwards without the need to
scroll to the bottom of the page. Please note that if the form does not specify
a form header text, these buttons are not displayed. (See Form Page Layout for more information)
·
Bottom of page buttons: the locations
used for the images of the next page, previous page, finish, save and restore
buttons. These images will be displayed only if the corresponding 'display as
image' option is selected within form properties and page properties
for the associated form. If the 'display as button' option is selected, the
images specified here are ignored. The Height and Width fields can
be used to adjust the size of these images.
- Simulation
of immediate validation: specifies whether to use a 'Go' button or an
image for immediate validation fields when the client browser has
JavaScript disabled, and allows the image file name to be specified. (See
JavaScript)
Borders
This button presents a pop-up window with the various
options that can be used to alter the display of the tables containing the
fields i.e. field labels, data entry and field information:
·
Group Border Style: Ebase currently supports two basic presentation styles: block (the
default) and portlet. Block gives a conventional rectangular type of layout.
Portlet is more complex and contains a number of images to give a more rounded
feel.
NOTE: PORTLET STYLE IS DEPRECATED STARTING FROM EBASE V3.3.
·
Portlet style options: Pressing the options button with portlet
style selected displays a dialog where you can enter the file locations of the
images to be used to build the portlet style.
·
Grid Block style options: Pressing the options button with block style
selected displays a dialog where you can choose whether or not you would like a
border around each group of fields. The default is no border. Below is an
example of using field group borders where the field group border colour is the
same as the field group header background colour.
- Cell
padding: the internal cell padding used - number of 5 or greater is
recommended.
- Cell
spacing: the external cell padding used. If you specify a number
greater than 0, the space between the cells will be displayed with the
colour specified in background colour. This gives the affect of
drawing an outline around the table cells as illustrated below (background
colour is light blue, cell spacing = 5).
- Border
width: if this field has a value greater than 0, a border will be
displayed with the colour specified in border colour.
Tables
Clicking this button displays a separate dialog box which
allows specification of all presentation attributes that relate to tables.
The diagram below shows how these
attributes relate to a displayed table:
All image icons i.e. column header sort icons and scrolling
icons are displayed with customisable alternate texts taken from system texts 389 - 397.
Clicking the Table Scrolling button in the panel above displays an additional dialog where table scrolling options can be configured:
The effect of changes can be seen in the preview pane. The main options supported are:
- Scrolling bar can be displayed above or below the table or both
- Alignment can be left, central or right
- Page numbers are optional, and the number of displayed numbers can be configured
- The top and bottom scroll elements are optional
- All scroll elements (top, bottom, left, right) can be specified as a text or as an image. When specified as a text, system texts 381 – 384 are used which are supplied as <<, <, >, >>.
- A prefix text such as “Go to page:” can optionally be displayed before the main scroll control. If specified, the text is taken from system texts 380.
- All
stylesheet attributes can be configured
Focus
Options
This button presents a pop-up window with options for
highlighting fields as the user clicks in them or tabs to them, and the
highlighting of error fields. The focus options will be automatically disabled
if a client browser does not provide sufficient support.
- Use
colour to show standard field focus: if this option is selected, the
corresponding colours for text colour and background colour will be
applied when a field is in focus i.e. the user clicks in a field.
- Use
colour to highlight error fields: if this option is selected, the
corresponding colours for text colour and background colour will be
applied when an error occurs for a specific field, e.g. field is
mandatory, invalid data entered etc. This highlighting can be very useful
on long pages with scrolling as it immediately draws the user's attention
to the field in error.
Highlighting styles
Highlighting styles are groups of presentation attributes
that can be applied to individual fields, table rows or single table cells.
Styles are applied to fields, rows or cells using the FPL highlight
command and removed using the unhighlight command. Highlighting styles
are organized within their owning presentation template - i.e. when a highlight
command is issued, the system searches for the style within the current
template being used by the form. Styles are not specific to a template sheet
and are shared by all template sheets in a template. (See FPL Script Command Syntax for more
information)
This facility can be used to provide visual highlighting,
e.g. overdrawn accounts could be shown in red in a table of accounts.
To create a new style or to maintain existing styles, click
the Highlight styles... button from the main presentation template maintenance
screen. This is only available from the DEFAULT template sheet.
The following dialog is presented where you can create,
maintain or delete styles:
The attributes that can be specified in a style are:
|
Style name: |
The name of the style - this is used in the highlight
command |
|
Font: |
The font to be applied |
|
Text size: |
The size of the text (should be specified in relative units, em is recommended) |
|
Text colour: |
The text colour (See use of colours) |
|
Background colour: |
The background colour (See use of colours) |
|
Attributes: |
Bold, italic, underline |
|
Alignment: |
Left, Centre or Right |
Attributes
for texts
This table allows you to specify the font, font size,
foreground and background colours for all the different types of texts
supported. You can also specify whether to use bold, italic and underline for
each. See Form page layout for a
description of each text. To access the colour selection dialog, right-click
over a colour. The list of colours and fonts is taken from the installation preferences XML file and
can be changed to meet installation standards.
All font sizes for texts should be specified using relative
font units either em or %, the recommendation is to use
em
to comply with web accessibility requirements. (0.8em is approximately equivalent
to 12px and corresponds roughly with a 'normal' font size.)
Note that if you type
information directly into either the font, text colour or background fields,
you must press ENTER or tab in order for the system to recognize the change.