Visually coded applications

By: Anadi Mishra

Tersus Studio is built on the Eclipse platform and aims

towards rapid development by modeling an application followed by defining the

semantics of the model. Tersus Modeling Language and Server are the two major

components of this platform. The modeling language defines a set of basic

components generalizing a whole genre of components usable in web applications. 

The language keeps you away from the niggles of syntactical errors as all you

have to do is choose components which would best define the model of your

application and then define a flow between the components to deliver a well knit

application model. It also includes a Visual Debugger to make things even

easier.

Modeling semantics of Tersus

Any application made

using the modeling language invariably contains the basic components viz.
Systems, Displays, Processes, Data Structures, and Data Items. System represents

a high level module and is the root of the model hierarchy. It may contain

sub-systems. It is this component that harbors multiple displays and processes.

The system can either be the full application or a major part of it.The

'Display' models the user interface of an application. Components such as View,

Button, Table, Tree, and Pane are all display components in the studio. Again

the language semantics allow multiple displays within a display sufficing needs

typically required by complex and interactive applications.

Processes have been modeled as 'Actions' by the language.

Each action is a set of activities carried out sequentially without interrupt

however the processes are synchronous in the current release. Processes can be

contained within a display and may contain lower level processes or data

elements.

Data Structure and Data Item contain information used by the

application. Data items are atomic building blocks and a data structure is

composed of lower level data structures or data items. Data structures and data

items appear in Tersus Studio as gray rectangles. 

Processes in a Tersus Application depend on flows for overall

execution. Flows govern the sequence of processes in Tersus. 'Slots' are

responsible for this sequential flow through processes in an application. Slots

can occur both as a 'Trigger' for initiating 'Action' in an application or as

'Exit' for a process. Flow appears as an arrow between two processes it is

connecting and is drawn from 'Source' process to the 'Target' process to connect

the two in a sequential link.

Elements and runtime objects 

Models in Tersus are

different from the runtime objects that are created during application
execution. Models are metadata entities — they define an application's

functionality, but do not represent the actual details of any specific execution

of the application. Reading the models and performing actions according to the

data and conditions that prevail at runtime by the server is an indication of

this difference. In other words, a model hierarchy contains Display Models,

Process Models and Data Models and not Displays, Processes and Data Items. The

same model may be instantiated many times by the runtime engine.

The same principal applies to Models and Elements. While

model name is global i.e. it represents a reusable component and is similar to a

class definition. Elements however, represent the local name of a model element

within the model's context.

Sample application

We will model a simple 'Book

Store' application using the studio. All the controls are displayed in the
'Palette Window' in the studio. The 'Repository Explorer Window' displays the

model hierarchy and the 'Application Server' tab displays status of applications

in the Studio. 

Designing the user interface

Our bookstore will contain two 'Views' — Admin and User. The

former is responsible for management tasks. Here's how we proceed:

• Open a new
  
  project from File>New>Tersus Project and name it 'BookStore'. 

• Double click
  
  on the project from the 'Repository' and you will find a 'System' component with
  
  a 'View' and a button inside the view open up. 

• Rename the view to 'Admin' and
  
  the button to 'Add Book'.

We will now model a hierarchy wherein a popup will open up on

clicking the 'Add Book' button asking for the name of book while auto-generating

its ID. The values will subsequently be saved to a database and the popup

closed when the 'Add' button on the popup is clicked. Expand the 'Add Book'

button by double clicking. Draw a 'Popup' from the 'Display' section into the

button, name it 'Add New Book' and then expand the popup Draw 'Label' from the

'Display' section of the palette into the button, followed by a 'Text Area'.

Name the label 'Enter Book Name' and the text area 'bookName'. Draw a button

named 'Add' in the 'Add New Book' popup and expand it.

Adding books to the application

Now that the user interface is complete we will model the

logic for adding books to the 'BookStore'. 

• Select 'Database Record' from the
  
  'Database' section of palette and draw it in 'Add' button. We name it as 'Book'.

•  For representing fields of the record choose a 'Text' and 'Number' type from the
  
  'Data Types' section and draw them in the 'Book' record name them 'bookName' and
  
  'bookID' respectively. 

• Draw 'Sequence Number' from the 'Database' section into
  
  the button and name it 'makeBookId' — this represents a counter for sequential
  
  generation of numbers. Connect this to the 'Number' field in the 'Book' record
  
  by drawing a 'Flow' from 'makeBookId' to 'bookID' thus a book id will be auto
  
  generated and added to the record for every new book added.

• 
  
  
  
  
  
  
  
  
  
  

  src='/IMG/021/11021/add-new-book-model-apr2k6.jpg' width=300 border=0>

  The complete Add New Book Model in the editor that allows drilling down to a specific component for details

• Right click on Add button go to Add Ancestor Reference>Add
  
  New Book in the menu.

The Add New Book model will appear inside the 'Add'

button. Create a flow from 'bookName' in the hence added ancestor to the

'bookName' field. This flow represents flow of data from the text area to the

'bookName' field in the database record of a particular book instance. 

Draw the

'Insert Record' component from 'Palette/Database' into the 'Add' button. Name it

'Insert Book' and connect flows from 'Book' to 'Record ' slot in 'Insert Book'.

Draw 'Close Window' from 'Palette/Display Action' into the button and connect a

flow from 'Inserted' slot of 'Insert Book' to it. Switch to 'Application Server'

tab on the 'Explorer' and select 'Book Store', click on the green play button

with '1' inscribed to start the Book Store Application only. Double Clicking the

Book Store from that view will launch the app on your browser. 

Add a few records

to see whether the model works, you will notice that the changes do not appear

until you refresh the page. To model this refreshing in Tersus we will add

another action. Zoom to 'Add Book/Add New Book/Add' button and draw an 'Action'

naming it 'Refresh Book Table'. Now simply drag the 'Generate Book List' action

into this action. Add a trigger to this action and connect a flow from 'Insert

Book' to this action to complete the modeling of this process. 

Save the project

and re-launch to see the previously added values appearing the table and auto

refreshing of the table when you add a record. This completes the modeling of

adding a new book in our application.You can similarly model Processes for

“Remove Book' and 'Issue Book' tasks and request and return book tasks in an

additional 'View' for user.

Tracing bugs in Tersus

Tersus also provides a

visual debugging mechanism for your applications. The debugger displays errors
at design time itself where in improper flows get highlighted in red color.

Alternately errors are also displayed in a 'Validation View' when you are saving

a project. Tersus eases debugging by allowing you to visually trace the

execution of your application on the diagrams that have been made to create the

application.

 There is an innovative 'Trace Mode' provided for debugging, which

can be activated from the browser when the application is executing this records

the actions in a trace file which can subsequently be used for debugging. 

A

notable improvement in this platform in comparison to other IDE's available is

the ability to move both backwards and forwards in execution for debugging the

application. The Studio has provided a loosely coupled framework of components for

modeling almost any real world application. It doesn't require even a single

line of code from the developer. Moreover, you can reuse the Models and

Processes within an application to ease development efforts even further.

Source: PCQuest