stage introduces the Tersus Studio.
will learn how to create a new Tersus project
completion of this stage you should be familiar with the following
Display, Template. Model vs. Element Name.
& managing the display. Renaming a model.
Button, Popup, Label, Text area.
this stage you will model a browser form for entering requisitions.
resulting web application will include a button that opens a pop-up
form used to enter a new requisition, similar to the following:
following screenshot displays the default appearance of the Tersus
Studio. It includes the Model Editor (with integrated
Palette) on the right, and a tabbed view containing the
Repository Explorer and Outline on the right.
you want to learn more on the Tersus Studio before starting
your first project, refer to Appendix
which covers the following topics:
and the Eclipse Platform
Elements to the Model
Moving and Resizing Elements
start by creating a new application project:
Select File -> New ->
that Tersus Project
is the first option in the New
sub-menu, followed by Project...,
which is a generic eclipse option (see Appendix A for more
Enter a Project name for your new
Select the Template: Legacy Navigation
Press the Finish button.
start modeling we need to open the application root model in the
If you've just created a new project, Tutorial, it should already be open in the model editor. If not, do the following:
Locate the Tutorial project root
(folder) in the Repository Explorer view, and double-click it.
should open a new editor window, which should look as in the
following screenshot, displaying a yellow rectangle, representing the
application. Since we have not modeled anything yet, the rectangle is
empty, except for its name:
web application is something you can see in your browser, so first we
need to define a View. A View model defines what is
displayed in the browser, and contains other display elements
(labels, buttons, tables, etc.).
create the View called Open Requisitions (showing all your
open requisitions), do the following:
In the Palette
(to the right of the model editor), make sure that the Display
category is open (if it is not, just click it to open).
Click on the
View template ()
to select it.
that when you now move the mouse pointer over the editor, it changes
to signify where it is legal to drop View (by
small, gray rectangle).
Position the mouse pointer inside
model and click to insert the view.
view model is created, with the default name View, and the editor
enables you to rename it immediately, as follows:
Requisitions and press
editor exits name edit mode before you have changed it, you can rename
it as follows:
1. Make sure the view model is selected
2. Open the Rename
dialog by pressing [F2]
(or right-click -> Rename)
3. Enter the new name , Open Requisitions,
in the Element name
4. Click FinishFor more details regarding rename and the Rename dialog, see the Rename a model section of this stage, below.
simple model you have just created should be similar to the
Open Requisitions view (the green/blue rectangle) is now a
sub-model of the root model Tutorial (the yellow rectangle).
model in the hierarchy may contain any number of sub-models.
Note that the model screenshots
provided in this tutorial may differ from the models you create,
mainly because of differences in positioning and sizing of elements
in the model, as well as the fact that elements which contain other
elements may be expanded (marked with)
or collapsed ().
This difference does not have an effect on application functionality,
except in the case of display models, as explained later in this
continue with the modeling of the Open Requisitions view. We
will now add a New Requisition button (allowing the user to
enter a new requisition in a popup form).
Select the Button
from the Display
category in the palette (by clicking on the template).
Insert it into the Open
Requisitions view (by clicking inside Open
it New Requisition (Type New Requisition).
model should now look similar to the following:
Both the Repository Explorer
and the Model Editor
captions display an asterisk next to them (e.g. *Tutorial).
This indicates that the latest changes have not been saved.
Save your work by clicking
on the toolbar.
Whenever you save your model, the
Tersus Studio checks (validates) your models. If any errors are found
a message will appear, and the errors will be displayed in the
Validation view. See
Stage 12 for more
details regarding validation.
we have modeled very little, we can already have the first glimpse of
our application in the browser:
Click on the Launch the application button in the studio's main toolbar to load your application in the embedded Tersus Server and open it in a web-browser.
If the Launch the application button is disabled, clicking on the model editor should enable it.
browser should display a page similar to the following:
that the Open Requisitions view appears as a single tab. Later
on, when you insert additional views, they will appear as additional
tabs. Inside the view, we see the New Requisition button.
Switch back to the Tersus Studio. You
may leave the browser open in the background.
often wonder what happens in the computer when they press a button.
It would be nice if we could look through the button and see the
insides of the application's logic, and this is exactly what Tersus
let’s you do by using a “zoom in” technique –
modeling "within" the button the actions that take place
when the button is pressed.
let’s zoom into the New Requisition button and
model the popup form that appears when the button is clicked:
Double-click the New
Requisition button to zoom into it.
Select the Display/Popup
from the palette.
Insert it into the New
Name it Enter New Requisition.
New Requisition button
model should now look similar to the following:
The Popup template is an
example of a template which provides additional pre-built
functionality out of the box.
In the case of a Popup
the pre-built functionality consists of:
A Footer, which will
cause its contents to be displayed at the bottom part of the popup.
An OK button, which does nothing at the present.
3. A Cancel
button, which contains a Close Window model,
so that when Cancel is pressed the popup will close
In general, you are free to change
(or remove) this functionality as you see fit.
Save your work
let's see how your application looks when deployed in the browser:
Switch back to the browser.
browser recognizes that the application has changed since the last
time it was loaded into browser and reloads the application
Once reload has finished, press the New
should see the following:
Click the Cancel button to verify that
it does close the popup as expected.
need a place for the user to type the requisition details, and this
should suffice to begin with.
create a label (“Description:”), which prompts the
user to describe the requisition:
Double-click the Enter
New Requisition popup to zoom into it.
Select the Display/Label
and drop it into the upper part of the popup. Name it Description:
(the colon being part of the name).
insert a text area element in which the user can type the description
of his/her requisition:
Select the Display/Text
Area template ()
and drop it to below the label. Name it Description.
model should now look similar to the following:
Save your work, and switch back to the browser.
popup should look as follows:
Note that the order by which
display elements appear in the form is determined by the relative
positions of the corresponding sub-models in the popup’s model.
In general, the order is governed by a top-to-bottom, left-to-right
rule (as if reading English).
More generally, the way display
elements are arranged in the model hierarchy defines how they show on
the screen. We have already seen two different examples:
Placing a popup inside a button causes the popup to appear when the
button is pressed.
2. Positioning display elements next to each
other (inside a parent model) defines the order in which they are
displayed on the screen.
Enter New Requisition popup
contains the pre-built button, OK,
which we shall use in the next stages to submit the new requisition.
Let's rename it accordingly:
Zoom to the OK button in your model.
Right-click it and select Rename from
Click to select the model, and press [F2].
will open the Rename dialog:
and click Finish.
dialog is used to specify two different names for the model element
you are renaming, an Element Name
and a Model Name.
Model Name is the shared
name of a reusable model (see Stage 4 for further details
regarding reuse). A model name must be unique in a given package.
Element Name is the local
name of a model. An element name must be unique in a given parent.
In the case of display models (such as the View
we have just created), the element name is the name which will be
displayed to the user.
the names are identical, and in these cases, the Keep the
model name and element name equal
check-box is checked by default so that both names are changed
There are however, situations in
which a certain element or model name cannot be used, and in these
cases you may decide to uncheck the check-box, and set different
names. For further details, see the discussion regarding
automatically generated names in Stage 14.
Keep package name equal to model name
check box appears when the model you are renaming has the same name
as the package containing it. It is checked by default, but you may
clear it if you do not wish to rename the package.
The button we have renamed, still
displays its original name in angled brackets (<<OK>>).
This is a reminder that the button originates from the Popup
template. It has no real effect, and will not be displayed at
runtime, therefore you may ignore it.
have completed modeling of the form, however pressing the Submit
button does not save the data anywhere. We shall handle this in
the next stage.
shall now import a ready-made sample project, Tutorial 2-3.
This sample project contains all the functionality modeled thus far,
and will serve as the basis for the next stage of the tutorial:
Import… to open the Import wizard.
Existing Project into Workspace as the import source.
Make sure the Select archive file:
radio button is selected, and click the Browse…
button to open the Select archive containing the projects to
default the dialog should open in the workspace
folder which contains the sample project archives.
double-click) the samples.zip
Note the following:
archive contains sample projects for all stages of the tutorial. You
can import as many samples as you wish, but it is recommended that
you import only the sample you need (Tutorial 2-3
at this stage).
The full path of the archive you
selected may be different, depending on the location in which you
Click the Deselect All button.
Check the check box next to the Tutorial 2-3
to import the project.
wizard will import the project, and add it to the Repository
Double-click the Tutorial 2-3 project to
open its root model in the model editor.
Alternatively, expand the imported
project, Tutorial 2-3, and the Tutorial 2-3 package
found in it, and double-click the . root model in it.
this will open the model in a new model editor window.
that the project you previously worked on, Tutorial, is still
open for editing in a separate model editor appearing as the
left-most tab, in the screenshot above), and in the application server.
Switch back to the Tutorial model editor, by clicking on the Tutorial tab.
Click on the Stop the application button in the studio's main toolbar to unload your application from the embedded Tersus Server.
Close the browser window running the application.
Close the Tutorial model editor by pressing the Close button on the editor's tab:
model editor should now look as follows:
is also recommended that you close the (old) Tutorial project
you created at the beginning of this stage:
In the repository explorer, right-click the
Close Project from
repository explorer should look similar to the following:
You may now
proceed to Stage 3, in which
we will implement a process which saves the submitted requisition to
Click here to open the live project in a
For best results, use the Firefox browser..