Ebase Xi Fundamentals

Ebase Xi Version 4
ADP Fundamentals
Module 01
Overview
Copyright Ebase Technology Ltd. 2012
Module Objectives
Ebase Xi Architecture
Demonstration of an application developed in Ebase Xi
Client / Server environment
Starting Ebase Xi Server and Client
ADP Fundamentals Module 1 - 2
Ebase Xi Server and Client

Ebase Server
Runs on server machine(s)
Processes forms at runtime
Communicates with back-end systems such as databases and email
Ebase Client the Designer

Runs on forms developers PCs
Communicates with Ebase Server during development
Saves all changes to the server

Database
Ebase Designer is
a multi-user,
security controlled
GUI
Ebase
Server
Developers running Ebase Designer

Repository
Stores all Ebase
elements
Processes forms
at runtime
Runs design
environment for
Ebase clients

Start Ebase Server
System admin should set up and start the Ebase Server
e.g. by running C:\Ebase\UfsServer\start_ebase_server.exe
or by configuring this as an automatic startup
Start Ebase Designer (the client)

Run the supplied .exe or .bat file
e.g. by running C:\Ebase\UfsClient\designer.exe
the designer.vmoptions should be configured by system admin to
communicate with the Ebase Server
Module Summary
In this module you have learnt about:
Client / Server environment
Starting Ebase Xi Server and Client
Module Review
1. What is the purpose of the Ebase server?
2. What is the purpose of the Ebase Client?
3. What is the Ebase repository?
Lab Exercise
There is no Lab Exercise for this Module.
Ebase Xi Version 4
ADP Fundamentals
Module 02
Form Concepts
Module Objectives
High level introduction to:
Forms
Pages
Controls
Fields
Tables
Texts
Languages
External resources, field mappings
Events model
Page sequencing
Introduction
Form:
is what gets invoked from a url

http://localhost:3030/ufs/ufsmain?formid=MYWORLD
is a collection of one / more pages
Introduction
Page:
is what is displayed in the browser

may contain fields, images, menus, buttons etc
Introduction
Control: is anything which can be placed on a page
e.g. field control, table control, button control, image control
tabs
text
fields
image
button
menu
Introduction
Field:
holds a single piece of data

data may be entered by a user or populated some other way
Each of these is
a Field control,
Most have a label
Introduction
Table:
holds tabular data any number of rows and columns

data may be entered by a user or populated some other way
Each column has the same properties as a Field

Introduction
Texts:
can be stand-alone or embedded into a control

can be translated into other languages
Stand alone text
Embedded texts
Languages
A form can support any number of languages
Default language is English (configuration parameter)
At runtime, all texts will be shown in the required language
http://localhost:3030/ufs/ufsmain?formid=MYWORLD&LANGUAGE=EN
External resources
External resources
Allow interchange of data with Ebase form fields, e.g. Form fields may be:
Read from / written to a database
Sent in an email
Written to a PDF file

Used to communicate with a web service
Mappings
Form fields are mapped to resource fields
Only the mapped fields take part in interchange of data
Mappings
Event Model
Events get fired at various stages throughout form processing
e.g. when the form starts, when user clicks a button etc
Action scripts can be attached to these events
set title = '';

set name = '';
set username = '';
set telephone = '';
set
update accounts;
Page Sequencing
A form can contain any number of pages
Form pages follow a sequence
Form
Page 1
Page 2
Page 3
Done
Page sequences can be modified at:

Design-time
Run-time
Module Summary
In this module, you have had a High level introduction to:
Forms
Pages
Controls
Fields
Tables
Texts
Languages
External resources, field mappings
Events model
Page sequencing
Module Review
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
What part of a form does a user see at runtime?

What is a Control? name a few.
What is a Field?
How does data get populated into a Table?
What kind of texts are there?
Can an embedded text be translated into another language?
Can the same form be run in different languages?
What is the purpose of an external resource?
What do you understand by the term Field Mappings?
What do we mean by events?
Is there a limit on the number of pages in a form?
Can the sequence of pages be changed at runtime?
Lab Exercise
Ebase Xi Version 4
ADP Fundamentals
Module 03
The Designer
Module Objectives
Upon completion of this module you will know about:
Tree view of the designer
Functions of the designer
Projects
Internationalization
Documentation and help
Importing and exporting elements
Designer - Tree View

Organisation of elements
Many element types e.g. form, script, list etc.
interact to produce a fully functioning form or
application
Business Projects
Forms
Scripts
Messages
IT elements
Lists
Presentation
Workflow
Integration Server
System
Designer
Can contain any number of open elements
Multiple
open
elements
Basic Functions
Open an existing element
Double click on an element from the tree view
Close an element
Click X in top right-hand corner of the visual editor
Save an element
Click the Save button in the visual editor
Create a new element

Use File New from the drop-down menu
or
Right click on a tree node and select the appropriate Create option
Other operations copy, delete, move, rename etc

Right click on the element name and select operation
Designer Locks
Opening a lock:
Selecting an element from the tree view will open and lock the element
so that other users may not edit the element, but they may view the
element
Closing a lock:
The lock is released by closing the element
When a user exits the Ebase Designer all their locks are released
Only a system administrator can remove locks , using
Tools System Administration Designer Locks
Removing a lock could cause another users element to be overwritten
Users should regularly close elements that are not in use
Project
Project is a collection of:
Forms
Scripts
Messages
Project is for organisational purposes

2 special projects
Global
Library
More on these later
Form names must be unique across

projects
Search
Quick search Ctrl-Q or
As characters are entered into the search
box, elements starting with these
characters are shown in the list
Wild cards * (any number of characters)

and ? (a single character) can be used
Double clicking on a displayed element will
open it
Search
Element search Ctrl-Alt-F or
Any combination of the search criteria can
be specified
Wild cards * and ? can be used
Results are displayed in the References
Panel
Double clicking on a displayed element will
open it
Form Editor
All views, except the WYSIWYG view, are dockable.

They can be relocated, floated, docked, hidden etc.
Form Editor
Target window size
Synchronize WYSIWYG
view with outline view
Toggle
designer view
Each of the 7
views, except
WYSIWYG,
may be closed,
docked etc.
Right click
Toggle
print view
New fields
wizard
html source
View manager
Undo / Redo
Drag and Drop
All controls can be dragged onto either the WYSIWYG or Outline views
Adding a new control a field control in this example

drag into Outline view
drag into WYSIWYG view
Adding a control based on an existing field or table in these examples
Copy and Paste
Controls can be copied or cut from one location and pasted to another
Right click, copy
Right click, paste
Its also possible to copy from one form and paste into another
When pasting, controls are inserted as the last child of the selected item
Paste is only enabled when the pasted controls can legitimately be added as a
child of the selected item
Cut/copy/paste are also available for pages, fields, tables etc.
Undo / Redo
Undo icon - undoes the most recent action
Undo dropdown - shows a list of all available undoable actions, supports

undoing all actions to a selected point
Redo icon - redoes the most recent action
Redo dropdown - shows a list of all available redoable actions, supports

redoing all actions to a selected point
Form Editor Multi Browser support

When running a form from the designer, it is possible to select which
browser to use
Browsers are added using the Form Options tab of Designer
Preferences Dialog
Configure browser
A form can support any number of languages
Default language is English (configured inside UfsSetup.properties)
Languages may be configured using
Tools -> System Preferences -> Internationalization
You can change the runtime language dynamically by scripting
Elements allowing multiple languages:
All Texts
Form
Shared
System
Messages
Static lists
Formatting language
determines format used for
numbers and dates
Help
General Help
Via the designer drop-down menu
Help Specific to an element being edited

Clicking the
icon, or
Pressing F1
Help Specific to a selected control

Clicking the icon at the top of the
properties view, or
Pressing F1
Online Documentation
Searchable Help
Import/Export
Is used for:
Migrating elements from one server to another
Import/Export:
Allows users to import and export all elements
Can export an application with all its related elements
Export
Enter the export file name
Select what to export
Import
Browse available
import files
Import
Caution! Import replaces existing elements without warning

Select what to
import
Module Summary
In this module you have learnt that:
Ebase elements consist of Business projects, IT elements,
Presentation and a few others
Projects are in turn broken down into form, script, and message
elements
Search is available to locate elements
Every Ebase element can be edited with its own editor
Help is available via the top drop-down menu, the various function
editors, and a browser
Import / export is used for migrating elements from one server to
another
Module Review
1.
2.
3.
4.
5.
Is it possible to change position of the views within the form editor?

Are the WYSIWYG and the Outline views connected in any way?
How does Ebase designer support a multi-developer environment?
Can the same form name be used in two different projects?
Can the following be shared among projects?
IT elements
Scripts
Messages
6. For what purposes might you want to use the import/export facility?
Lab Exercise
A Lab Exercise exists for this Module.

If you are running this online, the Lab files can be found via the
websites course module start page.
If you have downloaded this course and are working offline, the Lab
files can be found within the folder installed on your machine (via the
downloaded .zip file or those provided by your Ebase Trainer).
Ebase Xi Version 4
ADP Fundamentals
Module 04
Form Design
Module Objectives
Upon completion of this module you will know about :

Fields
Field types and most field properties
Creating new fields and field controls

Buttons
FPL scripts and messages
Field central to many things
Message
Text
Control
Database
Page 1
City
Email
YORK
Field
XML
CITY : YORK
Page 2
Web
Service
Welcome to YORK
Others?
Any text
in the form
Programming
Logic
Fields
Fields are fundamental part of any form they hold data
Each field has properties such as type, length etc
Each field consists of 3 parts

Editor - holds data
Label - optional
Help - optional
Properties View
Allows viewing and changing properties for all controls, pages, fields and
tables
Fields
A Field is defined at form level

New Field
button
Editor properties
Label
Help
Field properties
Field name can be changed here

Field type See Notes
Default value allows an initial value
Rounding and Decimal digits numeric fields only
Presentation !
Display type
Some Display types have additional properties:
Number of rows Text Area only
Alignment / Label Position Radio Button and Checkbox
Show digit group separator Integer, numeric and

currency field types only
Display length
Date/Time options
Contains HTML Character field types only
Fields and Field controls
Some fields are never placed on a page
NO field controls
When a field is placed on a page, a field control is created
Fields and Field controls

Page 1
FORM
Field controls
Surname
Fields
SURNAME
..
Type: char
Label: Surname
Value: Smith
...
..
Smith
Page 2
Field controls
Surname
..
Smith
Each Field control

has properties
which affect its
presentation ONLY
Control Properties
The general tab lists control properties which are common to most controls
Control name must be unique within the form
Display only
Hidden
Message options covered later
New line
Control properties can be set dynamically
Field control properties
General tab discussed earlier in this module
Field Name link to the underlying field
Mandatory a value must be entered at runtime
Hyperlink - the fields value will be displayed as a

hyperlink
Display Label / Editor / Help - Indicate whether the

label/editor/help part of the field should be displayed
Other properties discussed later
Fields and Field Controls
Configure visible
parts of the field
Adding a Field control

1) Drag existing Field from Fields panel to outline or WYSIWYG view
2) Drag a field
control from
the palette to
outline or
WYSIWYG
view
3) Use the New

field(s) wizard
Buttons
A Button Control represents a button that can be clicked by the user

When the user clicks the button, the on click event is executed
(events are discussed later)
Server side Programming
Currently Ebase supports 2 languages: Javascirpt and FPL

FPL (Forms Processing Language) is the Ebase-specific language
Right click on script name for Delete, Copy,

Rename, Move etc.
Scripts can be associated with controls, e.g. a button control
Messages
Allow an application to communicate with the user, e.g. error message
A message can only be issued by a script within the same project
Module Summary
In this module, you have learnt about :

Fields
Field types and most field properties
Creating new fields and field controls

Buttons
Proramming scripts and messages
Module Review
1. What is a Field?
Name a few Field properties.
2. What is a Field control?

3. What is the purpose of control properties?
Can they be changed programmatically?
4. What programming languages does Ebase support?
What is FPL?
4. What happens when an Ebase button is clicked at runtime?
5. What causes a message to be shown at runtime?
Lab Exercise

Ebase Xi Version 4
ADP Fundamentals
Module 05
Web Page Design 1
Module Objectives
Upon completion of this module you will:
Understand what controls and containers are and their properties
Have a good understanding of layouts
Know that all properties are configured using a properties view

Have a good understanding about how to control:
Widths
Alignment
Spacing / gaps between controls
What is a Form
A form contains pages
Form
Page 1
Page 2
Page 3
A form can contain fields and tables

Form
Field 1
Field 4
Field 2
Field 5
Field 3
Field 6
Field 7
Fields, tables, and many other controls can be placed on pages
Controls and Containers

Pages contain Controls - A Control is anything which is placed on a page
Some controls are capable of containing other controls these are
Container controls
Container
Controls
Each control has its own properties
Containers
A container is a control which may contain other controls

Each container can be thought of as a rectangle
Each container has many properties, such as width, height, borders etc.
One very important property of a container is its Layout type
The Layout type of a container defines how its child controls are
positioned within the container, relative to each other
Containers
Panel
Is a simple container whose primary purpose is to act as a container for other
controls - controls will be laid out according to the selected layout
Panels are used frequently primarily for applying a specific layout and style to
controls contained within each panel
Containers and Layouts

Any web page can be thought of as a number of interconnected
rectangles
The layout of a container defines:

how the child controls of the container are positioned relative to each other simple examples are horizontally and vertically
the size of the gaps between adjacent controls
alignment of controls within the container
Layout is a most important concept within Ebase Xi and provides the

ability to very quickly set out the basic design of a web page
Layout properties
Once a container is given a layout, an additional property, Layout
properties, is shown.
appropriate layout property assistant
Interim Review
1.
2.
3.
4.
5.
What are the main parts of an Ebase form?

What is a control? Name a few.
What is a container?
What is the purpose of applying a Layout to a container?
What are the main layout properties?
Horizontal Box Layout

Controls are laid out horizontally
Window re-sizing by the user may result in rightmost controls to

disappear
In this case a scroll bar will appear
Horizontal Box Layout properties
Interim practical work
To re-enforce basic concepts of layouts and layout properties
Vertical Box Layout

Each control is placed on a new line
Vertical Box Layout properties
Column Layout
Each Column Layout has a defined number of columns
Controls are laid out in a grid formation where each control is placed in
the next available table cell
A sample panel with column layout 3 columns
Column layout is particularly useful when the number of controls is

unknown at design time repeater control discussed later
Column Layout properties
Flow Layout
Similar to no layout allows for gaps and alignment to be configured
Results in successive controls being displayed horizontally across the
page
Window re-sizing by the user effects the point at which output flows onto
the next line
Flow Layout properties
Field Grid Layout

A special layout to provide alignment for input fields and labels
Field controls are displayed in a grid structure
Label
Editor
Help
This is the only layout which enables the New line property for all
controls; when New line is unchecked for control, the control will be
placed on the same line as the previous control
Field Grid Layout properties
Interim Review
1. What is a layout applied to?
2. What is the purpose of a layout?
3. What is a flow layout?
4. What is a Field Grid?
5. How is a Field control displayed within a Field Grid layout?
6. How are other controls displayed within a Field Grid layout?
7. How is a Field control displayed within a Flow layout?
8. How are other controls displayed within a Flow layout?
9. What happens to the contents of a container with flow layout, when the browser
window is re-sized?
10. How many rows and columns can a container have where the layout is Column?
11. How many rows and columns can a container have where the layout is Vertical?
Understanding width
The width property is used to set an explicit width for a control
Can be %
% width refers to a percentage of the width of the controls parent

So the parent control must have an actual width as 100% of 0 is 0
Minimum for a Container control means that the control will be as wide as it
needs to be to accommodate its content
Maximum for a Container control means that the control will use the width of the
parent container
Width 200px
Width Maximum (use parent width)
Understanding width
If the width property of a container control is omitted:
the control will be as wide as it needs to be to accommodate its content
if there is no content, the control will be invisible
Parent has no width

no width
Minimum width
Maximum width
100% width
no content
Understanding width
It is possible for a control to break out of the width occupied by its parent
Panel Width 400px
Group panel width 100%
Left margin 20px
Total width is 420px
CSS box model says:

any specified padding, borders or margin should be added to an elements
declared width
Effect of Width on Horizontal Alignment
Alignment is a Layout property

In all cases, the container is a Panel with a Horizontal Box Layout
Panel with no width specified
(Horizontal alignment has no effect)
Panel with explicit width
Left aligned
Center aligned
Right aligned
Left aligned
Center aligned
Right aligned
Horizontal alignment only has meaning when the containers width is large
enough to accommodate horizontal repositioning of child controls
Block and Cell Alignment
Block Alignment
Block Alignment : Fill
Cell Alignment
Left
Left
Center
Center
Right
Right
Block and Cell Alignment
Spacing between controls
3 possible ways:
1) Use the Gaps Between Controls property
Applies to all controls within a container
Available in Horizontal box Layout, Vertical Box Layout and Flow Layout
2) Use the Spacer control to introduce horizontal and/or vertical space between
controls
3) Use Margins and Padding Next slide

These can be configured for individual controls, unlike the Gaps Between
Controls property
Margins and Padding
Where padding ends and margin starts becomes

visible only when the element has border and or
background colour
Other Containers
Group Panel
Is a titled box which has three texts header, information and trailer
Other Containers
Titled Panel
Is a container with a title bar and border
Other Containers
Grid
Represents a grid consisting of any number of rows and columns
Useful control for setting up the basic layout of a page

Each grid cell contains a single Grid Cell Control which acts as a container
Any content can be added to a grid cell

A Grid Cell is a system control - cannot be added from the palette
Other Containers
Grid
Content
Content
Content
Content
Content
Any control, including other container controls, can be added to any cell
Other Containers
Grid
2 rows and
3 columns
rows 1
rows 2

Any layout can be applied to any container, except Grid Control
Containers
Group Panel
Panel
Titled panel
Page Panel
Grid cell
Tab
Grid
Layouts
Field Grid Layout

Horizontal Layout
Vertical Layout
Column Layout
Flow Layout
No Layout
Module Summary
In this module you have learnt that:
Pages contain Controls - A Control is anything which is placed on a
page
Some controls are capable of containing other controls these are
Container controls
Each control has its own properties
Each container is given a Layout
Each layout has properties which allow spacing and alignment of
contents to be configured
Widths, Alignment and spacing / gaps between controls can all be
configured
Module Review
1.
What does a % width represent? % of what?
2.
What controls are Minimum and Maximum widths applicable to?
3.
What happens if the width of a container is not specified?
4.
How do you get a number of controls to appear next to each other?
5.
How do you control the gaps between successive controls?
6.
What situations cause a control to overflow the boundaries of its container?
7.
Is alignment a property of a container or a layout?
8.
If you change the alignment of a layout, and this has no effect, what is the
reason?
9.
What is the most basic container?
10. What is the main difference between a panel container and a group container?
11. Can layout be specified for a grid cell?
How about for a grid?
Lab Exercise

Ebase Xi Version 4
ADP Fundamentals
Module 06
Web Page Design 2
Module Objectives
Upon completion of this module you will:
Understand what most controls are and their properties
Understand how to use the styling assistant
Controls - Recap
Everything which is placed on a page is a Control
Image
Field
Hyperlink
Button
Text
Controls - Recap
All controls, are available from the
Controls
Field control
Button control
Image control
Text control
Hyperlink control
Html control
Navigation Button controls
Message control
Include control
Tab Set control
Tab control
Horizontal Menu control
Vertical Menu control
Menu Item control
Table controls covered in the Tables Module
General
Miscellaneous
Tabs
Menus
Control Properties - Recap

The general tab lists control properties which are common to most controls
Control name must be unique within the form
Display only
Hidden
Message options covered later
New line
Control properties can be set dynamically
Controls
Page Control
acts as the root container for each page
is automatically added to each new page as it is created - cannot be deleted
Very important control for configuration of properties such as:

width, alignment, border, background color etc.
Recommendation: set an explicit value for Page Control Width
Controls
Button Control
represents a general purpose button that can be clicked by the user
when the user clicks the button, the on click event scripts are executed
covered later
Controls
Image Control
image loaded from a URL can be configured in one of 3 ways:
1. is not clickable nothing happens when the user clicks on the image
2. is configured as a hyperlink - activates a URL upon being clicked

3. is not configured as a hyperlink the on click event is executed upon being
clicked
Controls
Text Control
represents a text
can contain form field variables which are dynamically substituted at runtime
firstname, lastname are

form fields
Controls
Hyperlink Control
is a text displayed as a hyperlink
text is configured in the same way as a Text Control
Link / URL configured in the same way as an Image Control
Controls
Html Control
any content that is valid within the BODY of an HTML page can be inserted
similar to a Text Control, except that multiple languages are not supported
Navigation Button Controls

Next page Button Control
is displayed only when a next page has been configured
Previous Page Button Control

is displayed when a previous page exists; i.e. will not be displayed on the 1st
page of a form
Finish Button Control

is displayed when no next page has been configured
Controls
Message Control
represents a location on a page where messages are displayed
allows the designer to set up message areas and send messages to these areas
Controls
Include Control
represents an external JSP or HTML file that can be inserted into any location
on the page
Controls
Tab Set Control and Tab Control
any number of tabs
may be added to a
Tab Set
Tab Set Control represents the entire tabbed set - most configuration
properties are configured on this control, e.g. border, selected, unselected etc
Tab Control represents a single tab plus the contents of that tab it is a
container control and therefore:
has layout
any other control may be added to it
Controls
Menu Controls
Vertical Menu
Horizontal Menu
Controls
Horizontal Menu Control
Top level menu is always visible
Lower levels dropdown
dynamically as the user
moves the mouse over the
menu items
any number of menu levels are supported

each menu item can contain a text and/or an image
each menu item can be disabled, meaning that it cannot be clicked by the user
Controls
Vertical Menu Control
Top level menu is
always visible
Lower levels can be shown

vertically with the menu expanding
to accommodate them
Lower levels can also be shown as

dynamic dropdown menus in the
same way as for a Horizontal Menu
Property Levels Before Dropdown controls the number of menu levels, including Top
level, that will expand vertically. After this, subsequent menu levels will be shown as
dynamic dropdowns. For the above menu example, this was set to value of 2.
Controls
Shared menus
It is often desirable to place the same menu on several forms and or pages of the
same form, in such a way that its runtime state is shared and the correct menu
item is marked as selected as the user moves between pages and forms
To achieve this, use shared menus (see notes page), then:
either copy the menu onto all required pages,
or
Recommendation:
Instead of copying the menu, Place the Menu Control in a part-page
component then insert the component into form pages as required
Components are covered in a later module
Styling Assistant
Each control has a styling assistant
The styling assistant allows you to quickly and easily style the control
e.g. apply a border to a container, change text to bold, set colors etc.
Styling Assistant
Each styling assistant has an interactive preview so you can see the effect of
each change you make
Hint:
Adding a border to a container
helps during initial design.
Remove it later if not required.
Hint:
A border has 3 attributes:
Thickness: e.g. 2px
Style: e.g. Dotted
Colour (Default is Black)
If you forget to set thickness or
style, you will have NO border
Styling Assistant
To get from
to
Set layout of each inner panel to 2-column layout
and block horizontal alignment to Fill
For each image, override parent layout and set horizontal

alignment to Right
Styling Assistant
To get from
to
For each inner panel:

Set top & bottom padding
Set bottom border
Finally, remove temporary border and

add top border to the outer panel
Module Summary
In this module you have learnt about:
Most controls are and their properties
How to use the styling assistant
Module Review
1. What are page navigation buttons?
2. What is the purpose of chaining pages at design time?
3. What happens when the display only property of a container is set?
4. To which layout(s) does a New line property apply?

5. What happens when a user clicks a button at runtime?
6. Can an image be treated as a hyperlink?
7. What is the difference between a text control and an HTML control?
8. What is the use of a Message control? Is it necessary to use one to convey an
error message at runtime?
9. What does an Include control represent?
Contd
Module Review
10. What are Tab and Tab Set controls?
11. How many levels can a menu have?

12. Is it possible to hide the entire menu? What causes lower levels of a menu to
become visible?
13. Can a menu item contain an image?

14. What is the recommended way of adding the same menu to different forms /
pages?
15. Do all controls have styling assistants? How about containers?

16. What is one good way of checking the actual space occupied by a container?
17. What situations cause a control to overflow the boundaries of its container?
Lab Exercise

Ebase Xi Version 4
ADP Fundamentals
Module 07
Web Page Design 3
Module Objectives
Upon completion of this module you will know about :
Property Sets
Presentation Templates
Style Sheets
Property Sets
It is often desirable to apply the same style to many controls
Using the styling assistant to style
each control is an option
A property set allows you to save
a collection of styling properties,
for a specific control, and then
apply this to any control of the
same type
Reusability and ease of use
A form may be associated with a Presentation Template using form
properties
Purpose: separation of styling from the form

Property Sets are stored in a Presentation Template
Options: Linking or Loading (copying)

Presentation Template editor

Same
sections and
order as
Palette View
More than 1
property set
may be
defined for
each control
One property set

may be set as
default
small + at top
Same styling
assistant as
for styling a
form control
Designer Preferences
Each designer can set their own preferences
Creating a new property set

Two ways to create a property set:
1)
2)
The property set

can be saved in
ANY presentation
template
Orphaned Controls
Attempting to delete or rename a property set which is linked to one or
more controls, causes warning messages
If these warnings are ignored, all controls linked to that property set
become orphaned:
The Property Set name is shown in red at the top of the Properties View and is
marked as Not found.
The control loses its styling and all configured properties revert to using the
internal system defaults
Recommendation
Check property set references
(within presentation template)
before deleting or renaming
Advanced Styling
In addition to facilities provided by styling assistants, it is also possible to
apply CSS classes and inline styles to individual controls
Classes are defined within style sheets

One or more style sheets may be associated with a Presentation
Template
Style Sheet Editor
Selectors
Design View
Always synchronised
Code View
External Style Sheet
Clicking the Preview CSS button allows the external style sheet to be
viewed in read-only mode
An internal style sheet may be created by copying and pasting the style
sheet content into a new style sheet definition
Presentation Template editor
A Presentation Template may contain one or more (Ebase) Style Sheets

These have 2 purposes:
they are the default style sheets assigned to each page of forms using this presentation
template
all classes of all style sheets assigned to a page are available to controls on that page
Configuring Page Style Sheets
Each page of a form can be configured to

override these defaults, remove style sheets
or add other style sheets
Order of additional style sheets matters
Module Summary
In this module, you have learnt about:
Property Sets
Style Sheets
Module Review
1.
What is an alternate way of styling a control, not using the styling assistant?
2.
What does a property set represent?
3.
What is the benefit of using property sets?
4.
Where are property sets stored?
5.
What are the rules regarding property set name uniqueness?
6.
When applying a property set to a control, what options are there?
7.
Why would you use property set linking?
8.
What is a default property set?
Module Review
9. Can a property set be automatically applied to all new controls of a given type?
10. When loading/linking a property set, is there an option to use one in a
presentation template other than the one associated with the form?
11. What is the relationship between presentation templates and style sheets?
12. Are all classes in all style sheets associated with a presentation template
available to controls within a form?
Lab Exercise

Ebase Xi Version 4
ADP Fundamentals
Module 08
Validation & Events
Module Objectives
Upon completion of this module, you will be able to:

Understand client side vs. server side validation
Understand how the Ebase event model works
Understand the role of scripts within Ebase
Add scripts to before and after form, page, and field control events
Use the script builder wizard to create and add scripts to events
Understand immediate validation
Create and edit error, warning, and final messages
Client Side vs. Server Side Validation
Client side validation happens locally and does not require a trip back
to the server
Server side validation cannot happen locally and requires a trip back
to the server
System Validation
Mandatory fields
Blank field results in an error message
Field types
Boolean, Character, Integer, Numeric, Date, Currency
Incorrect or incompatible type results in error message
Validators
Min / Max lengths
Patterns / Regular Expressions
Email address
Credit card
Mandatory Fields
Indicates
field is
required
Mandatory Fields
Field Types
Patterns Regular expressions
Regular expressions (also known as Regex) form a powerful text

parsing language
Used to find a particular pattern within a given string that matches

whatever rules were expressed using this language
Ebase allows use of XML regular expressions. Any form field defined
with a pattern will be validated server side only - and rejected if
entered data does not match the pattern
Regex is beyond the scope of this
training course
Heres a pattern to find a match for an
email address using regular
expressions \w+@\w+\.\w+((\.\w+)*)?
Business Rules / Validation
Ebase provides full support for server-side programming using

Javascript
Scripts can do a wide variety of things including server side validation
Script execution can be monitored or debugged by viewing the
execution log
Current script
Scripts for this

project
Validation Using Scripts
Here are examples of some business rules which could be implemented

using a script
Rule1
If the loan amount the user enters is less than 15,000 then display an error
message to the user and make them try again.
Rule2
If the loan amount the user enters is greater than the property value they
enter, then display an error message to the user and make them try again.
Example 1
Heres what the corresponding Javascript code would look like:
Rule1
if [fields.LOANAMOUNT.value < 15000]
event.owner.addErrorMessage(Sorry. Properties worth less
than 15,000 do not qualify.);
endif
Rule2
if [fields.LOANAMOUNT.value > fields.PROPERTY_VALUE.value]
event.owner.addErrorMessage(You may not borrow an amount
which exceeds your property value.);
endif
Example 1
Ebase Event Model
Events get fired at various stages throughout form processing
Scripts can be attached to these events to ensure that the logic is

invoked at a particular time
Three types of events:

Form level events
Page level events

Control level events
Ebase Form level Events
Form level events when they run:

Before Form
Event
Runs only once, before the form loads
After Form
Event
The last event to run, when the user clicks the

finish button (on the last page)
Irrelevant if there is no finish button
On Error Event Runs whenever the form fails for any reason
Browser Back
Button Event
Runs when the user clicks the browser back

button and then clicks on a control (button or
hyperlink) from a previous page
Ebase Form level Events
Form level events typical use:
Before Form
Event
Any processing before the first page is displayed

to the user, e.g. load information from a database
After Form
Event
Any final processing, e.g inserting database

records, sending emails
On Error Event To allow a form to fail gracefully when the

database is down, to route control to an error
display page
Browser Back
Button Event
To reset any application flags, or

To clear any data entered on pages after the
current page
Ebase Page level Events
Page level events when they run:

Before Page Event
Runs before the page is loaded
After Page Event
Runs when the user clicks the next page button

Irrelevant if there is no next page button
Previous Page
Button Event
Runs when the user clicks the previous page

button
Irrelevant if there is no previous page button
Ebase Page level Events
Page level events typical use:

Before Page Event Any preliminary processing for the page e.g.
loading database data, displaying or hiding
fields
After Page Event
Perform page level validation or cross field

validation or to set the next page
Previous Page
Button Event
Perform validation field validation events are

not executed when the user clicks the previous
page button
Ebase Control level Events
Control level events when they run:

Before Control
Event
Runs before each individual Control but only 1st

time a page is loaded
Validation
Event
Runs whenever the field has a value and is

enterable and is visible and the system considers
that the field is invalid
On Change
Event
Runs whenever the value of an immediate

validation field is changed by the user
On Click Event Runs whenever any of the following are clicked:

button, hyperlink , image, menu item, tab
Ebase Control level Events
Control level events typical use:

Before Control
Event
To set an initial value for a field
Validation
Event
To perform field validation, and issue error

messages when appropriate
On Change
Event
To fetch additional information from a

database, to hide or show subsequent fields
on the page
Should NOT issue error messages
On Click Event To perform an explicit task e.g. display

detailed information, go to another page,
insert a row in a table
Form Events
An * denotes
presence of a
script for that
event
Click on form
properties to
access form
events
Page Events
Click to edit the

appropriate
event
Control Events
Click to edit the

appropriate
event
Immediate Validation
A Field Control can be marked for immediate validation
Causes Validation and On-Change events to fire as soon as a field

value changes, as opposed to when a button or hyperlink is clicked
Results in validation of all form fields on current page, up to and

including the current field
Can be used to dynamically change the rest of the current page

Example:
If user selects leasehold, we need to ask how many years left in the lease,
otherwise we do not
Immediate Validation - Example
Field no longer hidden

based on user input
Field Control Events
Immediate Validation field
Button
Hyperlink
(and normal field)
Only applicable events can be configured

Immediate validation fields have both a validation event and an On
Change event both will run if configured
On Change event should not be used to perform validation where error
messages are issued to the user use the validation event instead
On Click event can be configured for normal fields (support for dynamic
hyperlinks)
Events view of a Form
Click the Display event

map icon
Only shows configured

events for this form
Double click to open a

script
References dialog stays

open
Understanding Events
Design Time
Run Time
Normal field
No immediate validation
Field has a Validation event
User enters invalid Property Value,

then clicks Next Page
Validation event fires
User unable to move to next page
until value >= 15,000
Sorry. Properties worth less than 15,000 do not qualify
Property Value
Property Value
Next Page
Validation Event
if (fields.PROPERTY_VALUE.value < 15000) {
event.owner.addErrorMessage('Sorry...');
}
10,000
Next Page
Understanding Events
Design Time
Run Time
Normal field
No immediate validation
Field has a Validation event
Field also has an On Change event
User enters invalid Property Value, then

clicks anywhere else on Page
Validation event fires - Error
On Change does not fire due to error
User unable to move to next page until
value >= 15,000
Sorry. Properties worth less than 15,000 do not qualify
Property Value
Property Value
Next Page
Validation Event
if (fields.PROPERTY_VALUE.value < 15000) {
event.owner.addErrorMessage('Sorry...');
}
On Change Event
log ('Property value has changed to ' +
fields.PROPERTY_VALUE.value);
10,000
Next Page
User enters valid Property Value, then

clicks anywhere else on Page
Validation event fires No error
On Change event fires
Messages
Means by which information can be conveyed to the user dynamically
Three types of messages
Error
Warning
Final
Message texts have multilingual support and are maintained within the
forms designer
Messages
Are issued from within scripts
Message texts can include parameters for dynamic substitution from the
issuing script
Text contains && to represent parameter value substitution
Unlimited number of parameter substitutions
Order of parameters is important
Example:
You may not borrow an amount which makes your total borrowing
(&&) exceed your property value
Error Messages
Issued from within scripts that are tied to previous page, after page and
field control validation events only
Should not be issued from On Change or On Click events
Cause form execution to stop immediately, control returned to user to

correct the error
When tied to an after page event

Error message appears at the bottom of the page
When tied to a validation event

Error message appears above the field control, unless a message
control is associated with the field control
Error Messages
Warning Messages
Issued from within scripts that are tied to after page and field control
validation events only
Should not be issued from On Change or On Click events
Similar to error messages but form processing will not stop
Must be acknowledged by the user
When tied to an after page event

Warning message appears at the bottom of the page
When tied to a validation event

Warning message appears above the field control, unless a message
control is associated with the field control
Final Messages
Normally contain information about what the form has done or feedback
to the user
Are displayed on the final page only Final page is displayed only if the
Finish button is pressed by the user
Are issued from scripts
Can be issued any time during form processing
Are accumulated until final page is displayed
Example:
An order number that was created
Maintaining Messages
Multiple
languages
Messages
for this
project
Double click on
Message No. to
open edit box
Module Summary
Ebase events for forms, pages, and controls offer many convenient
application control points during form processing
Javascript can be used for input validation, implementation of business

logic, and database and user interaction
Dynamic application error, warning, and information messages can be

centrally administered in multiple languages
Module Review
1. Which field control property determines whether or not validation
happens as soon as the user inputs/changes the value?
2. How can you verify the order in which Ebase events are executed?
3. What is the difference between error messages and warning
messages?
4. When are after page events executed? What about before page
events?
5. What is an on change event used for?
6. Can a field control have a validation event and also an on change
event?
7. Can a normal (not immediate validation) field control have an on click
event?
Lab Exercise

Ebase Xi Version 4
ADP Fundamentals
Module 09
Scripting Language
(Javascript)
Module Objectives
Upon completion of this module, you should be able to:

Understand use of Javascript for server-side programming
Understand Javascript syntax
Use Javascript scripts to dynamically change form values and control form
behaviour at runtime
Use functions in your scripts
Understand how to debug Javascript scripts
ADP Fundamentals - Module 9 - 2
Javascript
server-side Javascript includes all the features of core Javascript (as described
by the ECMAScript V5 standard)
client-side Javascript as found in a browser and used by web developers

consists of core Javascript, but also includes large number of client-side
extensions e.g. Document, Form, Element, Input objects etc.
Ebase provides full support for server-side programming using Javascript

discussed in this module
This is implemented with the Mozilla Rhino runtime engine
Basic Javascript Syntax
Declaring and initializing variables

var
var
var
var
c = "Hello";
n = 1;
d = new Date();
cond1 = true;
//
//
//
//
Note that
variable types are
dynamic
i.e. Not declared but determined by content
If statements
if (n == 0) {
n++;
}
else {
n = +3;
}
Statements should be terminated by a semi-colon with the

exception of if/else constructs and loop constructs such as for covered later in the course
Literal values should be enclosed within double quotes (or single

quotes)
Comments may be inserted anywhere in a script. A comment

starts with //
Comments may also be enclosed in /* and */
Debugging
The Execution log, available from the designer (View > Execution log) contains
the following information:
The start of each script is logged
Each failure is logged, including a Javascript stacktrace that shows the stack
of invoked functions. Script line numbers are shown.
All output from the log() function, which is supplied by Ebase
The log() function can be very useful. e.g.

log ("Test1 c1 is null");
log ("USERID="+fields.USERID.value);
log (n.toString());
The print() function, also supplied by Ebase, writes its output to System.out (the
server console or log file)
Testing for null

var c1;
if (c1==null) {
}
else {
log ("Test1 c1 is not null");
}
c1 = "hello";
if (!c1) {
}
else {
log ("Test2 c1 is not null");
}
Working with arrays

var aList = ["5", "items", "in", "this", "array"];
index
value
items
in
this
array
Or
var aList = [];
aList[0]= "5";
aList[1]= "items";
aList[alist.length]= "in";
aList[alist.length]= "this";
aList[alist.length]= "array";
then
for each (var x in aList)
{
log (x);
}
for (var n in aList)

{
log (aList[n]);
}
An Object variable can be used to store complex structures
Declaring and initializing a Javascript Object

// This example creates 4 key/value pairs
var parms = {};
// parms is an object
parms.MSG = c;
// c, n, d, cond1 were populated
earlier
parms.COUNT = n;
parms.SDATE = d;
parms.DONE = cond1;
// alternate to parms.MSG = c;
var x = "MSG";
parms[x] = c;
Loops
// loop thru parms
for each (var p in parms)
{
log (p);
}
Or
for (var n in parms)
{
log (parms[n]);
}
Using a Javascript function
Example code
Configure the script as a Library script, using the form Events tab
To invoke this function from any other script:
Access to Java objects and classes
Java objects and classes can be accessed directly from Javascript code
Possible to use any available Java package or to write specific functionality in Java and
invoke this directly from a Javascript script
Java class must be on the servers classpath
See section Adding Java libraries in Server-Side Javascript Developers Guide of the
documentation for more on this
Example code
var path = "C:/temp/myfile.xml";
var f1 = new java.io.File(path);
Or
importPackage(java.io);
var path = "C:/temp/myfile.xml";
var f1 = new File(path);
then
var c = f1.getName();
log (c + " exists? " + f1.exists());
Ebase API
Access to the Ebase form elements e.g. to fields, controls, pages etc is provided via a
comprehensive API (the API is written in Java)
The API is accessible to Javascript scripts via a number of variables which are added
automatically to each script:
Variable
Name
Description
fields
Access to all fields in the form or integration service, or process attributes in a workflow process
controls
Access to all controls on all pages (only applies to forms)
pages
Access to all pages (only applies to forms)
event
Access to the controlling event e.g. Button Control on-click event, before page event
form
Core object for the form API. Provides methods to access all other form elements. It also provides a
number of methods to perform user actions such as: go to page, call form, call URL, generate PDF,
upload file etc.
system
Access to many additional system services: includes system variables, transactions, sequences,
security etc
client
Access to information and methods pertaining to the browser client
resources
Access to all resources within the business view of the form, integration service or workflow process
components Access to all elements for a deployed component this supports changing the context so that
elements are accessed as if from a specific deployed component e.g. to load data from a table
defined within a component
tables
Access to tables, resources, components and the browser client
Javascript editor
A script is linked to a form
The linked form determines the list of available fields, tables, controls etc shown
when using code-assist features
Code-assist (Intellisense) is activated in the Javascript Editor when:

Ctrl+Space is pressed
a period (.) is entered after a variable or method call
Code-assist shows lists of form fields, tables, controls etc and available methods
and properties
As Javascript supports dynamic types, it isnt always possible to know which

type a variable (or expression) is. Therefore, some available methods and
properties may not be shown by code-assist
Using Javadoc to document code
A Javadoc block is a comment block that begins with /** and ends with */
/**
* Multiplies two numbers together and returns the result
* @param n1 the first number
* @param n2 the second number
* @return the result
*/
function multiplyTwoNumbers( n1, n2 ) {
return n1 * n2;
}
For functions documented using Javadoc notation, the documentation is shown

in the editor by the code-assist feature
Javascript Samples using the API
Getting a field value

// get the value of the START_DATE field
var sdate = fields.START_DATE.value;
// computation based on the INCOME and EXPENDITURE fields
var profit = fields.INCOME.value fields.EXPENDITURE.value;
Setting a field value

fields.DEPARTMENT.value = "Personnel";
fields.COUNTER.value = 1;
fields.START_DATE.value = new Date();
fields.USER_MSG.value= "You are already registered";
fields.ADDRESS.value = null;
fields.PASSWORD_CONFIRM.value = fields.PASSWORD.value;
Working with Controls

controls.BUTTON1.backgroundColor = "Yellow";
controls.PANEL5.hide();
Controls.FIELDCONTROL1.hidden = true;
// these 2 lines
Controls.FIELDCONTROL1.hide();
// do the same thing
controls.PAGEPANEL1.displayOnly = false;
Issuing Messages
controls.FIELDCONTROL13.addErrorMessage("You entered diff... ");
// Message location is as configured for FIELDCONTROL13
event.owner.addErrorMessage("Your input is invalid.");
// Message location is as configured for the triggering control
event.owner.addWarningMessage("Additional charges apply for this service.");
event.owner.addErrorMessage(1001, null);
Conditional statements
var pass1 = fields.PASSWORD.value;

var pass2 = fields.PASSWORD_CONFIRM.value;
if ( pass1 != pass2 )
{
event.owner.addErrorMessage ("You entered diff... ");
}
var f1 = new File("C:/temp/myfile.xml");
if (f1.exists())
{
...
}
Navigating to other pages or forms

form.gotoPage(pages.LOGIN);
form.gotoForm("ADDRESS_FORM", parms);
form.callForm("REGISTER");
// LOGIN is the page

// 2nd (optional) parameter allows
// passing parameters
// into the target form
// (Next+1 slide)
Navigating back to the calling form

form.returnFromForm();
Working with Menu Controls

if (controls.VERTICALMENU1.selected == "login") {
form.gotoPage(pages.LOGIN);
}
3 value properties of a field
value: returns a (Java) Object when read, and accepts different Object types
when set see documentation for details. For character and numeric types, these
work as expected. Fields of type DATE, TIME and DATETIME are different:
// 3 form fields are Date, Time and DateTime
fields.CURRENT_DATE.value = new Date();
fields.CURRENT_TIME.value = new Date();
fields.CURRENT_DATE_TIME.value = new Date();
// add a day to a date

var d1 = new Date(fields.D1.value);
d1.setDate(d1.getDate() + 1);
fields.D1.value = d1;
displayValue: useful for fields of type DATE, TIME, DATETIME and Lists
fields.ADATE.value;
// returns the date as the number of milliseconds since 1 st Jan 1970
fields.ADATE.displayValue;
// returns a displayable date with local formatting e.g. 25/12/2012,
12/25/2012, 25.12.2012 etc
stringValue: should be used when passing a field value to a form, an Integration

Service or to a workflow job example on next silde
Passing parameters to a form

form.gotoForm("TARGET_FORM");
form.gotoForm("TARGET_FORM", parms);
// no parameters
// parms contains list of parameters
// For the 2nd example, need to build a "list" of key/value pairs
var parms = {};
// this is a javascript Object
parms.P1 = fields.START_DATE.stringValue;
parms.P2 = fields.END_DATE.stringValue;
// Note use of stringValue
form.gotoForm("FORM2", parms);
/* P1 and P2 need to be:
1. in uppercase in the parameters object
2. fields in the called form
3. url parameters in the called form
*/
Issuing Messages
5 methods of issuing messages applies to WarningMessage too

event.owner.addErrorMessage(msgText);
event.owner.addErrorMessage(msgText, stopProcessing);
event.owner.addErrorMessage(msgNo);
event.owner.addErrorMessage(msgNo, replaceParameters);
event.owner.addErrorMessage(msgNo, replaceParameters, stopProcessing);
msgText
is a literal enclosed in quotes
stopProcessing
is a boolean, defaults to true if not specified
msgNo
must be a valid message in the local or Global project
replaceParameters is an array of one/more parameters
Examples:
event.owner.addErrorMessage("Please try
event.owner.addErrorMessage("Please try
event.owner.addErrorMessage(1001);
event.owner.addErrorMessage(1001, ["Msg
event.owner.addErrorMessage(1001, ["Msg
again...");
again...", false);
Param1"]);
Param1", fields.F1.value], false);
Validation
Handling multiple validation messages

var error = false;
if ( fields.FIRST_NAME.value == null ){
event.owner.addErrorMessage("First name is mandatory", false);
error = true;
}
true stop processing

false - continue
if ( !fields.LAST_NAME.value ){
event.owner.addErrorMessage("Last name is mandatory", false);
error = true;
}
//
//
//
//
if
--------------------------------------If there are validation messages

Stop Execution
--------------------------------------(error){
event.stopExecution();
Validation
Handling multiple validation messages tidier code

var valFields = [fields.FIRST_NAME, fields.LAST_NAME];
if (!validateMandatoryFields(valFields)) {
event.stopExecution();
}
// Function to validate an array of fields
function validateMandatoryFields(fields) {
var validatedFields = true;
for each (var field in fields) {
if (!validateMandatoryField(field)) {
validatedFields = false;
}
}
return validatedFields;
}
// Function to validate a field
function validateMandatoryField(field) {
if (!field.value) {
event.owner.addErrorMessage(field.labelText.text + " is mandatory",
false);
return false;
}
return true;
}
Library Scripts
When you wish to share a script, you need to:
Example does not have to be a function

// Script JS_MPL_CLEAR_REG_DETAILS
function clearRegDetails() {
fields.ADDRESS.value = null;
return true;
}
Configure the script as a Library script, using the form Events tab (Library scripts are
also configurable for Integration services and workflow processes)
To invoke this function from any other script:

clearRegDetails();
//or
if (clearRegDetails()) { . . .
The object field type
Fields of type Object can be used to store complex objects that are not
supported by any of the other types
Values can only be read and set via the scripting API using a language such as
Javascript
Sometimes there is a need to create an object in one script and then use it later
in another script or another form
This is achieved by using a form field of type Object, OBJ1 in the following
example
// In the 1st script
// In another script
var oMap = {};

oMap.P1 = f1;
oMap.P2 = f2;
oMap.P3 = f3;
fields.OBJ1.value = oMap;
var obs = fields.OBJ1.value;

for each (ob in obs)
{
log (ob);
}
Error Handling
Exceptions thrown by Java methods, including the Ebase API, can be caught
and processed by JavaScript code using try, catch and finally statements
try {
resources.CUSTOMER_EMAIL.sendmail();
// no such resource
}
catch (e) {
event.owner.addErrorMessage("Email failed",false);
log (e);
}
Changing Texts
Sometimes it is desirable to set a form text, such as a text control or a field label
or a page header, at run time.
This is achieved by including &&fieldname within any part of a text and

populating fieldname by a value at run time
Example
At design time, a form text is set to:
Department &&DEPT - expenditure for &&YEAR
At run time, if field DEPT has value 'Personnel' and field YEAR has value
'2011', above text is displayed as:
Department Personnel - expenditure for 2011
Best practice
Write functions
Use short code blocks use of functions helps
Share code in library scripts
Use javadoc to document functions
Use switch/case where appropriate
Declare variables using var. e.g. var aList[];
Use naming convention such as validateMandatoryField, valFields
Use semi-colons to terminate commands
Use double quotes for string literals
Use consistent styling for indentation, if/else blocks, for blocks etc.
as opposed to: aList[];
Module Summary
Javascript can be used to dynamically control most aspects of form behaviour

including field values, control properties, navigation, page sequencing,
messages and much more
Application debugging and monitoring techniques are supported through the

execution log, and the 'log' function
Module Review
1.
How do you declare an integer variable in Javascript?
2.
What tools are available for debugging your code?
3.
What does this mean? if (!c1)
4.
Does a function need to return a value?
5.
How are functions made available to a form?
6.
What is a in the following? var a[];
7.
Name 2 ways of iterating through an array.
8.
What makes form elements such as fields and controls available to server-side javascript?
9.
Can a script be linked to: no form at all? Many forms?
10. What does this link make available to the script?

11. How is code-assist activated?
12. Why would you document a function using the Javadoc notation?
13. Are the following both valid?
fields.F1.control.hide();
controls.fieldcontrol12.hidden=true;
14. What is the mechanism for passing parameters from one form to another?
15. When is displayValue useful? How about stringValue?
16. What does the following command do?
event.owner.addErrorMessage(1001, ["Msg Param1", fields.F1.value]);
Lab Exercise

Ebase Xi Version 4
ADP Fundamentals
Module 10
External Resources
Module Objectives
Understand the concept of external resources
Understand the functions of business views and mappings
Assign a business view to a form

Maintain form mappings
Create fields from external resources
External Resources
Ebase has rich built in features to integrate with the following external
resources:
Databases
Email
PDF Printing
Stored Procedures
Web Services
XML
Enable Ebase form applications to read data from and/or write data to
these external resources, for example:
An HR application which retrieves employee data from a back-end
database
An inventory application which sends out email notifications when
inventory is low
External Resources
All external
resources listed here
Different external resources

require different
configuration parameters;
shown here, a database
resource
Resource Fields
Fundamental part of any external resource, including custom resources

Represent the way to pass information back and forth between Ebase
and external resources
Are linked to form fields within a form (next slide)
Do not need to have the same name as the corresponding form field
name (although this is a good convention)
Resource field names are case sensitive
Mappings
IT Separation
Mappings
Form fields are mapped to resource fields

Represent the way form data can be passed to resource fields and
hence to external resources
Each resource field must be mapped to a unique form field
Mappings
Click on the
mappings icon to
access mappings
Manual vs. Automatic Mappings

Manual mapping maintenance can be reduced by allowing Ebase to set
up most of the mappings automatically
Manual way (more work):

First create the form fields using the add a field icon
Then map all appropriate form fields to their respective resource fields
Automatic way (less work):

Create the appropriate form fields by importing fields from external
resources
Verify that the automatic mappings are correct
Doing Mappings Manually

Use the mappings icon to
map appropriate fields
Doing Mappings Automatically

Use the
Import fields from
external resource icon
Doing Mappings Automatically
Select the resource
Select the
fields to
import
Business Views
Name of current business view
One external resource

has been added to this
business view
List of existing
business views
to choose from
Business Views
To import fields from a resource or to set up or maintain mappings, the
form must be told to which external resource(s) it has access
Upon creation, a form does not yet have access to any external
resources
The only way to give the form access to external resources is to
associate the form with a business view
A business view is a collection of external resources
A form has access to all of the external resources contained in its
associated business view
External resources can belong to one or many business views
A form is associated with exactly one business view which grants the
form access to the resources in that business view
A business view can be associated with any number of forms
Business Views
Business view that has

been associated with
this form
Business Views
List of external resources

available through the
business view
Top Down vs. Bottom Up

Ebase supports both a top down and bottom up methodology
Top down approach allows a business user to create the form first and
add the backend elements (databases, external resources, etc.) later
Example: Clicking on the Create an external resource and field
mappings icon to create an external resource based on a form
Bottom up (recommended) approach has the backend elements in place

(usually done by IT personnel) before constructing the form
Example: Clicking on the Import fields from external resource icon to

create a form field based on an existing external resource
Module Summary
Ebase has rich built in features for integrating with external resources
such as databases, email servers, XML, print, and Web services
Ebase integration can be extended with custom resources to integrate

with J2EE services, LDAP, or proprietary systems
The ability to link between external resources, business views, forms,
form fields offers flexibility, reusability, and control in application
development
Module Review
1. What is the difference between a resource field and a form field?
2. What is the difference between a business view and an external
resource?
3. What are the two ways to map form fields to resource fields?
4. How many business views can be associated with a form? How many
forms can be associated with a business view?
5. What is the advantage of creating mappings between resource fields
and form fields as compared to putting resource fields directly onto a
form?
Lab Exercise
Ebase Xi Version 4
ADP Fundamentals
Module 11
Database Resources
Module Objectives
Upon completion of this module you will be able to:

Understand database elements in Ebase
Create and edit a database resource
Understand the interaction between a form and a database resource

Maintain database resource fields and mappings
Write Javascript scripts to interact with database resources
Maintain sequences in Ebase
Database
Ebase can connect to most databases which provide a JDBC driver
To connect Ebase to a database, you need to create a database

connection element
Configuration of the Database requires technical knowledge about user

account, JDBC URL, etc.
There are 3 types of database connections:

Pooled connection the default
Pooled connection configured in application server
Direct non-pooled connection not recommended
Pooled Connection
All connection properties are defined within the Ebase Xi system

Supported by the Database Connection Wizard
Pooled Connection configured in app. server
Connection properties are specified within the application server

e.g. Tomcat 6.0
<Resource name="jdbc/EBASE_SAMPLES" auth="Container"
type="javax.sql.DataSource"
username="ebase_samples" password="ebase_samples"
driverClassName="org.apache.derby.jdbc.EmbeddedDriver"
url="jdbc:derby:ebase_samples;create=true
/>
Database Connection defined within Ebase is simply a link to this resource
Pooled Connection configured in app. server
The datasource is defined within the application server (ufs.xml)

The database connection points to the datasource
Database
Ebase
Database
connection
Datasource
J2EE Application Server
Direct non-pooled connection
Non-transactional and considerably slower than pooled connections

Not recommended - should only be used where the database system
does not have a JDBC driver that supports connection pools
Database Resources
Each database resource uses one of the database connections

A database resource represents a single SQL statement to access the
database
e.g. Select * From Customers
Database
resource
Database
connection
Database
Database Resources
Require SQL knowledge

Have resource fields that facilitate the passing of information to and from
the database
IT Separation
Form
Form Field
Resource Field
Database Resources
Database connection to use

for this database resource
SQL statement for this

database resource
Database Resources
SQL queries can have dynamic fields to be substituted at runtime

A dynamic field is denoted by &&, e.g. &&NI_NUMBER
e.g.
select * from applicants where NI_NUMBER=&&NI_NUMBER
Ebase will replace &&NI_NUMBER with the appropriate field at
runtime before issuing the SQL query to the database
Database Resources
A database resource can read from, write to, update and delete from
database tables
Its a good practice to have a where clause in all database resources,

but it is not mandatory
e.g. ORDER_NUMBER=&&ORDER_NUMBER
Without a Where clause:

a read command will read all rows from the table
an update command will attempt to update all rows of the table
a delete command will be ignored, to avoid the database table from
being emptied
Creating Database Resources from Database

Bottom up approach
A Database resource can be created directly from a Database by
clicking on the Create resource(s) from database schema button
Importing Resource
fields into the form
Form
Form Field
Create resource(s) from

database schema
Resource Field
Click Create resource(s)

from database schema
to import database
resources from database
Select database
connection to import
database resources
2
3
5
SQL and resource

fields are created
automatically
Database resource
created for the
selected table
Creating Database Resources From a Form
Top down approach
Database resources along with other external resources can be created

directly from a form by clicking on the create external resource icon
Using this feature performs the following tasks

Creates the database resource
Adds the new resource to the business view for this form
Creates the mappings between form fields and database resource
fields
Useful to ensure that no steps are missed
Click on Create external resource

icon to begin the process
Select which
Database
Select which
form fields to
include in the
new database
resource
Select which
form field(s) to
include in the
resource where
clause
Database resource created

Database Resource Fields
Database resource fields are the database columns returned by the SQL
statement associated with the database resource
Each column must be represented by one resource field
If the field is required the SQL statement will not be executed until the
required field has a value
Database Resource Fields
Verify button checks

that all &&names are
resource fields
Required field
Javascirpt for Database Resources
There are commands and system variables specific to database

resources
Commands are issued on a database resource, effectively executing the

SQL statement contained within the database resource
resources.RESOURCE_NAME.fetch()
Reads data from database, as specified by the SQL statement in the
database resource
e.g. resources.TEST_DB_RESOURCE.fetch();
Retrieves a single row from the database

If multiple rows are returned by the database only the last row will be
returned to the form
Commands (continued)
resources.RESOURCE_NAME.insert()
Inserts a single record into the database
e.g. resources.TEST_DB_RESOURCE.insert();
If a field is required and has no value when executing the command,
a runtime error will occur and the insert will fail
resources.RESOURCE_NAME.update()
Updates data in database
e.g. resources.TEST_DB_RESOURCE.update();
Caution! Will update all rows that match the where clause; if there is
no where clause all rows will be updated
Commands (continued)
resources.RESOURCE_NAME.delete()
deletes data from database
e.g. resources.TEST_DB_RESOURCE.delete();
If there is no where clause, the command is ignored. i.e. no records
are deleted
System variables
system.variables.$FOUND.value
Available after a fetch command

Contains Y or N, indicating whether a database row was retrieved
system.variables.$FETCH_COUNT.value
Available after a fetch command
Contains the number of retrieved records
system.variables.$UPDATE_COUNT.value
Available after delete, insert, update or updatetable
commands
Contains the number of affected records
Sequence
A Ebase sequence is used to generate the next number in a defined

sequence
Is not just for database operations, though is mostly used there
e.g. Insert a new order into the database with a new order id
Use Ebase sequence to supply the new order id
Alternatively, can use database to generate the new order id

(auto_increment, identity)
Ebase sequence guarantees uniqueness across tables and databases

whereas database auto number only guarantees uniqueness within a
table
Sequence
Sequence are maintained using the Ebase designer
Available sequences
Sequence
Usage example
fields.ORDER_ID.value =
system.sequenceManager.sequence("ORDER_SEQUENCE");
// insert new customer record
resources.ORDER_DB_RESOURCE.insert();
Sequence
Sequences are not included within the scope of an Ebase transaction
When the sequence command is issued, a new sequence number is

immediately assigned and the Ebase sequences database table is
updated
If there is a subsequent failure, the sequence will not be rolled back
Module Summary
A Ebase database resource represents a single SQL query to a

database; the multiple columns associated with the SQL query are in
turn represented by corresponding database resource fields
The mapping between form fields and database resource fields can be
established with a bottom-up or a top-down methodology
Fetch(), update(), insert(), and delete() are 4 methods that can be

applied to a database resource
The sequence method generates the next number in a defined

sequence; the number can be used as a unique ID for a database row
when doing insert
Module Review
1. What are the relationships between a database, datasource, and Ebase
database connection element?
2. Is it better to import database resources from a database schema or to
create them from a form?
3. How does a database resource to form field mapping handle the case
where multiple rows are returned from the database?
4. What actions might you take after examining $FETCH_COUNT after a
fetch?
5. Why might you want to use Ebase sequence functionality to create

unique invoice ids as opposed to using a similar next id or autoincrement functionality of a database?
Lab Exercise

Ebase Xi Version 4
ADP Fundamentals
Module 12
Lists
Module Objectives
Upon completion of this module you will be able to:

Add a list to a form field
Create and maintain static lists
Create and maintain dynamic lists

Maintain dynamic list mappings
Understand the differences between database resources and dynamic
lists
Understand options available for when a dynamic list is built
Create a linked list that depends on another form field
What is a List
An element within Ebase to store multiple values
Contains values that can be applied to form fields

Examples
a title list: Mr., Ms., Mrs., Miss
a yes/no list: Yes, No
a payment type list: Visa, MasterCard, Amex
A list can exist without being associated to a form field
A list is a shared element and can be used by all forms in all projects
Values can be static or dynamic
What is a List
Lists can be
associated with
different form
fields. These
values come from
separate lists
defined within
Ebase
List Types
Static List
Dynamic List
For values that do not change when For values that change when running
running forms
forms
Values entered in designer at
development time
Values loaded from database at

runtime
Display values are language

dependent
Display values are not language

dependent
e.g. a title list: Mr., Ms., Mrs., Miss
e.g. an employee list for a department
Lists & Fields
A list (static or dynamic) is assigned to a field

Can be assigned to more than one field
Add a list to a field through field properties
In this example the

static list
MORTGAGE_TYPES
is assigned to the field
MORTG_TYPE
Static Lists Create a Static List
Create a static list by using the file menu

or right click on Static Lists in the Tree
Static Lists Edit a Static List
Multi
lingual
Sequence can
be changed
Display text is
shown to user
Return value is
stored in the field
code: if (fields.GENDER.value == "M")

Dynamic Lists
Contain values that are extracted from a database at runtime
Require knowledge of database and SQL
Represent a single SQL Select statement
Can return different sets of values based on input parameters in the SQL
query
Dynamic Lists Create a Dynamic List
Click to build a dynamic

list from the selected
database resource
Dynamic Lists Edit a Dynamic List
Requires SQL knowledge
Dynamic Lists Add to a Field
Add a dynamic list to a form field just like a static list, using field
properties
ALL the available

dynamic lists
Dynamic Lists - Mappings
A dynamic list will normally contain several columns
When assigning a dynamic list to a form field you need to know which
column (list field) to use for the form field
Ebase automatically creates mappings if the list field and the form field
have the same name
You can also specify mappings between other list fields and form fields
Mappings can be edited
Dynamic Lists Edit Mappings

Form field NAME has been
mapped to list field NAME
Now open the mappings dialog and map

any other list fields to form fields
Dynamic Lists Return field

This is the field which will be
shown in the list
Value of this field will be

stored in the form field
code:
log ('NAME='+fields.NAME.value);
Dynamic List values
A dynamic list may be built (loaded)

1.
Only the 1st time it is

displayed This is the
default behaviour
2.
Every time it is displayed
3.
Never
For options 1 and 3, use of method buildlist() may be required

e.g.
fields.NAME.list.buildList();
Database Resources vs. Dynamic Lists
Both database resources and dynamic lists access a database

Each database resource and each dynamic list represents a single SQL
statement executed on database
Feature
Database resource
Dynamic list
Read from database?
Yes
Yes
When is database
accessed?
Under script control, when the

fetch method is executed forms
designer has full control
Based on choice of When

List is built listed on
previous slide
Update, Insert, Delete?
Yes
No
Must be in business view?
Yes
No
How are fields mapped?
Resource mappings button on

form toolbar
Dynamic list mappings

button from lists tab of field
properties
Can be created manually?
Yes
Yes
Can be created
automatically?
Yes by importing from database Yes by importing from

element (Import from schema
database resource (Build
button)
dynamic list button)
Display as drop-down list?
No
Yes
Database Resources vs. Dynamic Lists
Form
Business view
Import
Create external resource
mappings
Database resource
+ fields
Field
Build list
Import
Create database table

mappings
Dynamic list
+ fields
Database
DB
Linked Lists
A linked list is a dynamic list whose values are dependent on the input in
a preceding field
Most common case is one list (static or dynamic) driving a second list
(dynamic)
e.g. A departments selection drop-down controlling which values are
displayed for an employees selection drop-down
Linked Lists
Two dynamic drop-down lists; the second list is initially not populated or
displayed
Upon selection of a value from the first list, the second list is populated
and displayed
Linked Lists
If user selects a different item from the first list, the values in the second
list change automatically
There is no need to write any code for this
Linked Lists
Department_ID field
comes from first list
First dynamic list
Linked Lists
Department_ID =&&Department_ID
Second dynamic list

&&Department_ID will be replaced at

runtime by the Department_ID value from
the first list
Linked Lists
Turn on immediate
validation for the first list
Module Summary
Ebase supports both dynamic and static lists to create user selections
for pull down lists, radio buttons, and checkboxes
Dynamic lists can return multiple columns from the database which can
be mapped to various form fields
Both dynamic lists and database resources access the database but
they differ in their applications and abilities
The most common usage of a linked list is a static or dynamic list that
populates the values of a related second dynamic list
Module Review
1. Can dynamic or static lists be re-used across different projects?
2. Is a list specified as a form field property or a field control property?
3. Why might you want to return multiple database columns when
displaying a dynamic list?
4. What are some of the differences and similarities between a dynamic

list and a database resource?
5. Why must the immediate validation attribute be set for the field that is
used as a parameter for populating a second, linked list?
Lab Exercise

Ebase Xi Version 4
ADP Fundamentals
Module 13
Components
Module Objectives

Understand what a component is and what elements it has
Create and test components
Understand component types

Add components to forms
Understand use of a component name prefix
Understand linking vs embedding components
Deploy a component into linked forms
Understand form features which are not applicable to components
Create and test global scripts and messages
What is a Component?
A component is a collection of fields - and possibly tables, pages and

controls - which can exist independently of a form
It may be thought of as a partial form
Components can be added to any form in any project and are

constructed in exactly the same way as forms
Using components is an ideal way to promote reuse of form elements

between your forms projects
Components are always created in the GLOBAL project
Global and Library projects always appear at the bottom of the Business
projects section
Component Types
There are 3 types of components in Ebase
A fields-only component is a set of fields and/or tables which can be inserted
into a form. It has no visible elements
Note: No controls
These fields will be

added to the form
Having inserted it into a form, a designer may place fields/tables of the
component on pages, as required
Component Types
A part-page component is a set of fields and/or tables, and controls

which can be inserted into a page of a form
The component itself has a single unnamed page controls may be
placed on this page
These controls will be

added to the page

added to the form
Component Types
A one-or-more-pages component is a sequence of pages which can be

added to a form
These pages will be

added to the form, after
the selected page

added to the form
Events within Components
Components cannot have component level events
Page level events are allowed in components of type one-or-morepages only
Control level events are allowed in part-page and one-or-more-pages

type components
A component can be run, as if it were a form
Associated events, if any, will run
Adding a Component to a Form
Right click on control
Add a fields-only
component
Insert a one-or-more-pages
component
Insert a part-page
component
A fields-only component may be added to a form by clicking the

Add a fields-only component icon on the form tool bar
Component fields are added to the form fields

Name prefix and link / embed options covered later
A part-page component may be added to a form in one of two ways:

Add control to Container menu of any container
Insert control after Control menu of any existing control(or container)
Component fields and controls are added to the form page, at the
specified location on the page
A one-or-more-pages component may be added to a form in one of two

ways:
Click the Insert one-or-more-pages component icon
Menu available by right-clicking on a page name in Pages panel
Component fields, controls and pages are added to the form

Pages are added after the currently selected page
Component name prefix
When adding a component to a form, a name prefix must be provided.

This is necessary to enable multiple instances of the same component to
be inserted onto the same form and to retain naming uniqueness
For example, an ADDRESS component may be inserted into a form

twice, with prefixes of HOME_ and WORK_
Field names, control (if any) names and page (if any) names created in
the form will be prefixed by
HOME_ADDRESS__ and
WORK_ADDRESS__ respectively (note double underscores)
A script referring to component field/page names will function correctly,

when executed from different instances of the component
More on this later
Upon completion of actions on slide 11, field, page and control names
created in the form will be prefixed by HR_ADDR_PAGE__ (note
double underscores)
Linking vs embedding components

A component may be added to a form in one of 2 ways:
Embedding
A copy of all the elements of the component is inserted into the form
These elements become part of the form and may be freely modified
by the form designer
Any changes to the component will not be reflected in the forms into
which it has previously been embedded
Linking
The form acquires a reference to the component
The form designer may not change any aspect of the component in
situ, i.e. while changing the form
A linked component may be changed using the component editor

Such changes are not automatically reflected within linked forms
Deployment of a linked component is under component designer control
Deploying a component into linked forms
Changes made to a component do not automatically impact linked forms

A component can be deployed to all forms linked to it by clicking the
Deploy changes to all linked forms icon on the component toolbar
Deploying a component into linked forms
When requested to deploy, the component editor lists forms currently

linked to the component
Request to deploy is rejected if any of the linked forms are currently open
for editing
Deploying a component causes any changes to be propagated to all

forms linked to it
Global Scripts
Scripts placed in the Global project are available to all forms
Only global scripts may be associated with components
Global Scripts
Typically, global scripts only refer to elements (fields, controls, etc)

within the component, although this is not a restriction
Global Scripts
Question
What happens when the same field name appears both in a
component and in a form into which the component is inserted?
Answer
The component fields have a prefix, so the 2 can co-exist
If a script is called from a component event, the fields it refers to are
prefixed with that component instances prefix. When a field can
not be found, the script looks for that field name without the prefix
If the script is called from a non-component field or page, no prefix is
attached to fields or controls or pages it refers to
Global Scripts
Global scripts may be overridden in the local project by creating a local

script with exactly the same name as the global script
Ebase will always look for a script in the local project first and, if not
found, it will then look in the global project
Global messages
Messages placed in the Global project are available to all forms
Messages in the Global project automatically start from 100001, as

opposed to 1001 in user-defined projects
This is to avoid conflict with project level messages.
Any script, global or project level, may issue global messages
Module Summary
A component is a self contained collection of fields - and possibly tables,

pages and controls
Components promote reuse of form elements between forms
Components are constructed in the same way as forms
A fields-only component contains no visible elements
A part-page component contains a single unnamed page and controls
and is allowed to have control events
A one-or-more-pages component contains pages and fields and may
have associated page and field level events
Components can include static and dynamic lists
A component can be embedded within a form, or linked to a form in
both cases a name prefix is required
A name prefix allows multiple deployment of the component into a given
form
Module Summary
Changes made to a component do not automatically impact linked forms

deployment is under the control of component designer
Certain form type properties, such as Presentation templates and form
level events, are not available to components
Global scripts and messages are available to all forms in all projects
A global script attached to a component does not need to include the
prefix within referred field and page names
If a local script exists by the same name as a global script, the local one
is used
Global messages are identical to project messages, except that they
start from number 100001
Module Review
1. What is the difference between a part-page component and a one-ormore-pages component?
2. What happens when a fields-only component is inserted onto a page of
a form?
3. What type of events can each component type have?
4. When a component is changed, how does this impact forms linked to
the component?
5. What is the purpose of having a name prefix when adding a component
to a form?
6. Whats the effect of including name prefixes within a global script? How
would this work when attached to different instances of the same
component?
Lab Exercise

Ebase Xi Version 4
ADP Fundamentals
Module 14
Tables
Module Objectives

Understand what a table is in Ebase
Create a table and place it on a page
Understand the relationship between a table and an external resource

Create / import a Database resource for table use
Understand table properties and column properties
Use the Visual (WYSIWYG) Editor with tables
Control table behaviour
What is a table?
A table represents an array of data values that can be displayed in a

tabular format
What is a table?
A table consists of a number of columns

Each column is a form field
Each column has the same properties as a normal field
Each column
is a form field
Field label text is used

as the column header text
External Resources and Tables
A table may be associated with an external resource
Database resources and XML resources are supported
A resource associated with a table is normally expected to return

multiple records
Such a database resource, therefore, should not be used with fetch,

update, delete and insert methods
It is also possible to include fields in a table which are not backed by an

external resource
Importing a Database Resource For Table Use
Not checking the Tables Only checkbox, creates a Database resource

suitable for single record processing, i.e. includes CUSTOMER_ID=&&
CUSTOMER_ID in where clause
Check Tables Only, then click

Columns for Where Clause
to specify which key(s), if any,
to include in the where clause
Adding a Table to a Form
Either click the New table icon in the Tables panel
Or drag a Table control onto the page from the Palette
Table name is
used in scriprts
Resource must be
a Table resource
and must be in the
Business View
Click to create
table columns
Select specific resource

fields, or select All
Selected resource fields

become table columns
Table created - all columns have the supplied prefix

Each column has the same properties as a field
Table name, prefix and

resource may be changed in
the Table properties
Imported
resource
fields are also
mapped to
corresponding
table columns
in the form
Adding a Table to a Page
If the table was created using the New table icon in the Tables panel, it
needs to be dragged into a container
Adding a Table to a Page

A table added to a container automatically gets:
A Table control
A Table Page control

A Table Column control
for each column added
Table Controls
Table Control
is used to display a table
allows configuration of most table properties
Loading a table
Running the form on slide 12 produces an empty table with no data
Need a before table script to read the data into the table
The javascript code is

tables.CUSTOMERS.fetchTable();
where CUSTOMERS is the name of the table, NOT the resource
Changing table behaviour
Now running the form on slide 12 produces:
Browsers scroll was used to obtain the 2nd screen print

Changing table behaviour
How to:
Re-order columns Use the column heading and move left/right

Edit table properties click on table control in outline or wysiwyg view
Adjust the number of rows visible edit table properties
Table Controls (continued)
Table Page Control

represents a horizontal page of table data
acts as a container for column controls
has few properties to configure
when a Table Control contains more than one Table Page Control,
horizontal scrolling is automatically activated
Moving columns to a new Table page
Adding a Table Page control
Table Page Control
Some columns have been moved to a 2nd Table Page
Scroll icons
added
automatically
The 2nd Table Page
Image Column Control

an image in a table column loaded from a URL can be clickable
the image can be treated as a hyperlink
otherwise, an on click event can be specified which is executed when the user
clicks on the image
Changing column properties
How to:
Change a column width

If field is enterable: change display length
If field is display only: change column width using styling assistant
Fix column(s) for scrolling right click column header, fix column
control
Make the table sortable check sortable in column control property
Table Styling Assistant
2 ways to select part of table to

style
Click in required section
within the Interactive
preview
Click the required tab
Like all others, this is interactive,

all changes are immediately
visible
Module Summary
A table can have its data loaded from an underlying database table using
a database resource, or form an xml document using an xml resource
Alternatively, a table might just be used as a temporary working structure

in support of the application logic
A table can also have columns not mapped to a database resource
A number of table properties can be set by the table designer,

e.g. no. of visible rows, allow insertion / deletion of rows
Each column may be set to be hidden / display only / mandatory just as a

normal field control, sortable, fixed (for horizontal scrolling only)
Each column may also be set to be a hyperlink
Module Review
1. Can a table be re-used in different forms?
2. What does a field within a table represent?
3. What are the steps to enable data from a database table to be loaded
into a form table?
4. What are some of the differences and similarities between a database
resource for single row processing and one for table use?
5. Does a table need to be tied to an external resource?
6. Can a table have a mixture of external resource fields and fields which
are not linked to a resource?
Contd
Module Review
7. How does Ebase present a table which is too wide?
8. How do you change a column heading?
9. How do you introduce horizontal scrolling?
10. Can a table exist in a form, without being on a page?
11. Can a table on page be set to display only, hidden, mandatory,
immediate validation?
12. Can a table column be set to display only, hidden, mandatory, immediate
validation?
Lab Exercise

Ebase Xi Version 4
ADP Fundamentals
Module 15
Repeater Control
Module Objectives
Upon completion of this module, you will:
Learn about Repeater Control, which provides an alternate way of
presenting repeating data
Repeating data
Data from an Ebase table can be displayed in one of 2 ways:
1. Tabular format using Table control
Table columns (Table columns controls)

Repeating data
Data from an Ebase table can be displayed in one of 2 ways:
2. Repeater format using Repeater Control
Each of these is
from ONE row of a
table
Repeater Control
A Repeater Control provides a flexible way of displaying data from an
Ebase table
Each row of the table is displayed inside a Repeater Row Control
Repeater Control
A Repeater Row Control is a container, therefore:
it can have any layout
it and can include any other control as a child
Table columns (Field controls)
Repeater Control Layout

2 layouts to be considered:
Layout of the Repeater Control
determines how successive repeater rows are laid out
relative to each other
Layout of the Repeater Row Control
determines how the content of each row is laid out
Repeater Control Layout examples

Example 1
Repeater Layout:
Vertical Box
Repeater Row Layout: Field Grid
Repeater Control Layout examples

Example 2
Repeater Layout:
3-column
Repeater Row Layout: Field Grid
Module Summary
The Repeater Control provides a alternative way of displaying data from
an Ebase table
The layout of the both Repeater control and Repeater Row control are
significant in the way data is presented
Module Review
1. What are the 2 controls used for showing repeating data?
2. Does a repeater control have to be backed by a resource?
3. If table data is shown in a repeater control only, what is the javascript

code used, if any?
4. What controls can a Repeater control contain?
5. What controls can a Repeater Row control contain?
6. What does the layout of the Repeater control determine?
Lab Exercise

Ebase Xi Version 4
ADP Fundamentals
Module 16
Email Resources
Module Objectives
Create and edit an email resource
Understand the interaction between a form and an email resource
Write FPL scripts to interact with email resources
Ebase & Email

Email from Ebase needs to go to an email server which in turn sends out
the email to its recipients
Before an Ebase form can send out email, Ebase server must be
connected to an email server
Configured in file UfsSetup.properties
(in directory <ebase>\UfsServer\tomcat\webapps\ufs\WEB-INF\classes\
where <ebase> is the Ebase installation directory)
e.g. Ufs.emailHostId=localhost
Your email server
name or IP address
Email Resources
Are the interface between Ebase and the connected email server
Enable Ebase to send out emails containing a mixture of static and
dynamic content
Can be created manually or automatically by the create external
resource feature (available for several types of external resources, not
just email resources)
Contain the following properties:
From
To
CC, BCC
Subject
Message
Email Resources
Authentication
details
Email Details
List of
email
resources
Resource fields
&&EMAIL_ADDRESS
Will be substituted with
mapped form field value
Email Resources
Each email resource represents one email template
The content within an email resource can be static and/or dynamic
Dynamic content is achieved by substitution, using the && notation
Substitution must be with a resource field, as per all other resources
Example of static content:
To: John.smith@yahoo.co.uk
Example of dynamic content:
To: &&EMAIL_ADDRESS
Email Resources
Build Fields button can be used to automatically create resource fields
Ebase looks at the email resource and ensures that a resource field
exists for each && variable
e.g. If in an email resource, there are two substitutable fields,
&&TO_EMAIL and &&TO_NAME, clicking the Build Fields button
will create two resource fields, TO_EMAIL and TO_NAME, if they do
not already exist
Creating Email Resources Automatically

An Email resource can be created directly from a form by clicking on the
create external resource icon this is true for most external resources
Using this feature performs the following tasks

Creates the email resource
Adds the new resource to the business view for this form
Creates the mappings between form fields and email resource fields
Useful to ensure that no steps are missed
Click on create external resource

icon to begin the process
Select the form fields to

create matching fields
for the email resource
Code for Email Resources
Simple example
resources.CUSTOMER_EMAIL.sendmail();
Example including attachments

var fileAttachments = [ fields.FILE1.value, fields.FILE2.value ];
var emailOk = resources.CUSTOMER_EMAIL.sendmail(fileAttachments);
if (!emailOk) ....
fileAttachments is an array of file paths

any number of files may be attached to the email
each of FILE1,2 must contain the full path of one file to be attached
if any of these fields contains no value, they will be ignored
Module Summary
Ebase email resources are the interface between Ebase and email
server software connected to Ebase
Ebase email resources can be used to generate dynamic content email
messages
Typically, Ebase email resources are initially configured by IT personnel
and subsequently administered by business users
Creating external email resources automatically is useful to ensure that
no steps are missed
Once configured, FPL is used to control and initiate the distribution of
email, possibly with attachments
Module Review
1. What are the 6 sections within an email resource?
2. Which of these can contain dynamic values?
3. Which of these must contain values, both at design and at run time?
4. Can the sendmail method include attachments?
5. Is there a limit to the number of attachments allowed?
Lab Exercise
Ebase Xi Version 4
ADP Fundamentals
Module 17
Printing
Module Objectives

Understand the 2 options for forms printing
Create and edit a print resource
Understand the interaction between a form and a PDF document
Two Printing Options
Option A
Print pages as designed within Ebase
Option B
Use Adobe PDF forms and Ebase print resources
Option A - Simple page design concept
Any page created in the Form Designer can be output:

to a web browser
or to a PDF
or to both
This means that the same page designer is used to create both web and
print pages
There is no explicit declaration that a particular page is a print page any page can be output as a PDF
The PDF document can then be printed and/or saved as required
PDF Scripting
A PDF is generated at runtime by using the generatePdf() method

form.generatePdf();
By default this will display the current page of the form as a PDF
document in a popup window, but includes options to:
Include all pages or nominated pages of the form
Display in the current window
Suppress the display
Save the PDF as a file
PDF Scripting options

form.generatePdf(opts);
// opts is an object containing name/value pairs
Option name
display
- display the PDF to the user (default true)
save
- save the PDF as a file on the server (default false)
filePath
- the file path when the PDF is saved (default is as configured)
popup
- display the PDF as a popup (default true)
reportMode
- display all HTML form input elements (textfields, textareas) as

display only. This is useful when the length of data in the element may
exceed the specified display size and the generated PDF should
automatically expand to display all data. (default true)
pages
- which pages to include in the PDF (default is the current page)
popupWindowName - the popup window name (no default)

PDF Scripting example
Example including options

var opts = new PdfOptions();
opts.display = true;
opts.save = true;
opts.popup = true;
opts.reportMode = true;
opts.filePath = "C:/temp/pdf123.pdf";
opts.popupWindowName = "pdf1";
opts.pages = [pages.PAGE_2, pages.PAGE_4];
var fileName = form.generatePdf(opts);
Returns the file path of the saved document when the save option is
selected, or null
Designing Print Pages
Switch to Print Design View
Page size and Orientation both properties for

the Page control
They are specified within each page
Page Size and Orientation
Page boundaries are shown with grey dotted lines
Page Size and Orientation
At runtime, generated PDF content is adjusted to fit within the width of

the page
Dynamic Expansion
Generally, a page will expand dynamically to accommodate its contents,

However
Display only input fields and text areas will expand dynamically to
include all data
Editable input fields and text areas will be displayed in boxes that have
a fixed width and height and will not expand dynamically
Width of a field is controlled by the display length property
Height (text areas only) is controlled by the number of rows property
This behavior also applies to pages displayed within a browser
All of the above also applies to table columns
Dynamic Expansion
Tables will always expand dynamically to accommodate all rows

Two properties of Table Control in the PDF section provide options when
a table overflows onto a new page
Column headers re-displayed at the top of each overflow page
Content of a table row will not be split across two pages
Lists
when displayed as radio buttons or checkboxes, will dynamically expand
when displayed as a dropdown, only the current value will be displayed
reportMode option
When set to true, all fields and table columns will be displayed as if they
were display only, and therefore all content will expand dynamically
reportMode option
When this is set to false
When this is set to true
boxes around fields could be

added by applying a border
Headers and Footers
To configure a header:
Set a top margin for the Page Control using PDF style property
Configure a header text - you can enter HTML into this text
Configure the header style
To configure a footer:
Repeat for corresponding bottom and footer properties
Borders can also be configured using PDF style property
When in Print Design view:

margins and borders are shown
header and footer texts are not shown
Page numbering
To display the current page number, include the following HTML in a

text:
<span id='ebPDFPageNumber'/>
To display the total number of pages, include the following HTML in a

text:
<span id='ebPDFPageCount'/>
Example footer text:

Page <span id='ebPDFPageNumber'/> of <span id='ebPDFPageCount'/>
is displayed as:
Page 1 of 2, Page 2 of 2 etc.
Option B - Use of a Print resource
A print resource:
Is used when the requirement is to write to a pre-designed PDF
document
Is the interface between an Ebase form and a PDF document
Allows an Ebase application to exchange data with a PDF document
Can import field definitions from a PDF to an Ebase form
Can populate a PDF document with form data
Use of a Print resource
Code for print resources

resources.RESOURCE_NAME.print();
resources.RESOURCE_NAME.print(save, noDisplay);
Displays the specified PDF document, populated with form data

save and noDisplay are both boolean parameters
The save option results in PDF file being saved, in folder specified by
property Ufs.pdfDirectoryName within UfsSetup.properties
The noDisplay option instructs the system to suppress the display of
the print document. This can only be specified in conjunction with save
Use of a Print resource

e.g. resources.MY_PDF.print(true,
false);
If property Ufs.pdfDirectoryName is left at the default value of

<ebase>/UfsServer/generatedpdfs, and this is the 3rd time a
print and save is being issued (from any form, using any print
resource), the file created will be
<ebase>/UfsServer/generatedpdfs/MY_PDF0000000003.pdf
where the file number(3) is generated using Ebase sequence
UFS_SAVED_PDF_DOCUMENTS
This sequence can be amended to adjust the file numbers if necessary
Create Print Resource
URL or filename to
access PDF
source document
from the server
Add Print Button
On Click event script

print CREDIT_PDF
Display and Print PDF
Module Summary
Any page created in the Form Designer can be output to a web browser,
or to a PDF, or to both
There is no explicit declaration that a particular page is a print page
At runtime, generated PDF content is adjusted to fit within the width of the
page
Generally, a page will expand dynamically to accommodate its contents
Input fields and text areas will behave differently depending on whether
they are enterable or display only
reportMode option of the generatePdf() method causes all content of all
fields and table columns to expand dynamically
An Ebase application may be integrated with an Adobe PDF document
using a print resource
This allows a pre-designed PDF document to be populated by form data
Module Review
1. What Ebase resources which may be created by importing from external
resources?
2. When is it appropriate to use a print resource?
3. What is the command for printing to a print resource?
4. Do you need to design pages specifically for printing?
5. Does generatePdf() include all the pages of a form by default?
6. What happens when the page being output includes a textarea
containing more data than allowed by its number of rows property?
7. What do you need to do to ensure dynamic expansion of all data being
output?
8. What would you need to do to ensure dynamic expansion of all data
being output, without using the report option?
9. What happens to table data when it doesnt fit on one page?
10. How are lists presented in a PDF?
Lab Exercise


Ebase Xi Fundamentals

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ebase Xi Fundamentals

Uploaded by

Copyright:

Available Formats

Ebase Xi Version 4

Copyright Ebase Technology Ltd. 2012

Starting Ebase Xi Server and Client

ADP Fundamentals Module 1 - 2

ADP Fundamentals Module 1 - 3

Ebase Xi Server and Client

Ebase Client the Designer

ADP Fundamentals Module 1 - 4

Ebase Xi Server and Client

Developers running Ebase Designer

Ebase Xi Server and Client

Start Ebase Designer (the client)

ADP Fundamentals Module 1 - 6

ADP Fundamentals Module 1 - 7

ADP Fundamentals Module 1 - 8

There is no Lab Exercise for this Module.

ADP Fundamentals Module 1 - 9

Copyright Ebase Technology Ltd. 2012

ADP Fundamentals Module 2 - 2

is what gets invoked from a url

is a collection of one / more pages

ADP Fundamentals Module 2 - 3

is what is displayed in the browser

ADP Fundamentals Module 2 - 4

ADP Fundamentals Module 2 - 5

holds a single piece of data

ADP Fundamentals Module 2 - 6

holds tabular data any number of rows and columns

Each column has the same properties as a Field

can be stand-alone or embedded into a control

Stand alone text

ADP Fundamentals Module 2 - 8

ADP Fundamentals Module 2 - 9

ADP Fundamentals Module 2 - 10

Written to a PDF file

set title = '';

ADP Fundamentals Module 2 - 12

Page sequences can be modified at:

ADP Fundamentals Module 2 - 13

ADP Fundamentals Module 2 - 14

What part of a form does a user see at runtime?

ADP Fundamentals Module 2 - 15

There is no Lab Exercise for this Module.

ADP Fundamentals Module 2 - 16

Copyright Ebase Technology Ltd. 2012

ADP Fundamentals Module 3 - 2

Designer - Tree View

ADP Fundamentals Module 3 - 4

Create a new element

Other operations copy, delete, move, rename etc

ADP Fundamentals Module 3 - 5

ADP Fundamentals Module 3 - 6

Project is for organisational purposes

Form names must be unique across

ADP Fundamentals Module 3 - 7

Wild cards * (any number of characters)

ADP Fundamentals Module 3 - 8

ADP Fundamentals Module 3 - 9

All views, except the WYSIWYG view, are dockable.

ADP Fundamentals Module 3 - 11

Drag and Drop

Adding a new control a field control in this example

drag into WYSIWYG view

Adding a control based on an existing field or table in these examples