Tersus: Defining application UI by importing an HTML template

Defining application UI by importing an HTML templateDate: Oct 18, 2007We shall demonstrate this ability by first importing an HTML form we have found on the web into a Tersus application, and then demonstrating how to model a tersus process using data entered into that form.The form we shall import is based on one of the Form Layout templates from The Man in Blue site.About the demo filesIn order to simplify this demo, we have prepared an archive file (html-templates.zip) which contains HTML and CSS files downloaded from The Man in Blue site (using the browser's File -> Save As... command), and arranged in a folder hierarchy which allows for easy import into a Tersus application, as follows:models/
   HTML Files/
      Columnar.html (based on columnar.htm ¹)
      Horizontal.html (based on horizontal.htm ¹)
      Margin.html (based on margin.htm ¹)
      Un-styled.html (based on index.htm ¹)
      Vertical.html (based on vertical.htm ¹)
web/
   css/
      forms.css (a copy of forms.css)
      info.css (a copy of info.css)
      main.css (a copy of main.css)
   stylesheet.css ²¹ The following changes have been performed on the original files:
In order to focus our demonstration and discussion, we have removed everything preceding the actual form elements - that is, all the markup from <DIV id="experimenting"> down to the </P> tag preceding <FORM id=...>.
We have changed the button type in <input class="submit" value="Submit my details" type="submit"> (the last form element) from type="submit" to type="button". This was done in order to override the HTML form behavior whereby clicking a submit button causes a reload of the page.
² stylesheet.css was not downloaded from The Man in Blue site, but rather created by Tersus. It's sole purpose is to import the three CSS files in the css sub-folder, so that the styles defined in these files and referenced by the templates, will be accessible to the Tersus platform when it displays one of the templates.Creating a demo Tersus application and adding the HTML template files to itThe Import HTML Template feature we wish to demonstrate requires that the HTML template file appears in the project's model repository. The Repository Explorer displays the contents of the project's model sub-folder, so the templates must be added to sub-folders of the model folder. This can be done manually through the file system or using the import mechanism provided by eclipse - which is the method we are going to use next.

Download html-templates.zip to your computer.

Launch Tersus Studio.

Create a new Tersus application - call it Import HTML Demo.

Import html-templates.zip into the new application:

Select File -> Import... to open the file import wizard
Select Zip file, and click Next >
In the From zip file: field, enter the full path of html-templates.zip - you can use the Browse... button to locate it
In the Into folder: field, point to the root of Import HTML Demo (the application you have just created) - you can use the Browse... button to locate it
Click Finish to complete the import of the HTML template files into the application.

To verify that the import has been successful, switch to the Repository Explorer view, and check that the Import HTML Demo application now contains the HTML Files package - it should look similar to the following screenshot:

Import an HTML templateWe can now demonstrate Import HTML Template, which reads an HTML file and creates corresponding Tersus models. It will create a set of display models to support within Tersus the display and control of the HTML elements contained in the imported template.

In the Repository Explorer, right-click one of the templates - for instance Columnar.html - and from the context menu, select Import HTML Template, as in the following screenshot:
Select Import HTML Template from the context menu

Select Import HTML Template from the context menu

A notification message will appear, and when you acknowledge it, a new package named Columnar, containing an HTML display element also named Columnar, will be added to the repository, as in the following screenshot:

Display the template in a Tersus applicationNow that we have an HTML display model, we can display the template inside a Tersus view, as follows:

Drag a new Display/View element from the palette into the Import HTML Demo root system in the Model Editor.

Drag the Columnar model from the repository into the View element in the editor. Your model should look similar to the following screenshot:

Save your work. You can now view your application by launching it from the Application Server view. It should look similar to the following screenshot:

Edit the template to identify interaction points Up to this point we have demonstrated the ability to display an externally designed html form in Tersus.
Of-course, in order to be really useful, our Tersus application should be able to interact with the form - that is read/write data appearing in the form, and react to events such as a button being pressed.In order to allow interaction between the Tersus and the html form, we add the Tersus-specific markup property element_name to the original template to identify form elements we wish to interact with.As an example, we shall identify the First name and Last name input fields, as well as the Submit my details button, by adding the Tersus-specific attribute element_name to the relevant tags in the form - as follows:

In the repository explorer, right click the Columnar.html template and select Open With -> Text Editor. This will open the template in a text editor in the studio.

Locate the tag <input id="firstName1" name="firstName1" value="First name" type="text"> and add an element_name property to it as follows: <input id="firstName1" name="firstName1" value="First name" type="text" element_name="First">.

Locate the tag <input id="lastName1" name="lastName1" value="Last name" type="text"> and add an element_name property to it as follows: <input id="lastName1" name="lastName1" value="Last name" type="text" element_name="Last">.

Locate the tag <input class="submit" value="Submit my details" type="button"> and add an element_name property to it as follows: <input class="submit" value="Submit my details" type="button" element_name="Submit">.

Save your changes to Columnar.html.

Synchronize changes to the template with TersusNext we shall synchronize the changes with the Tersus application so that the application identifies the form elements we wish to interact with. Synchronization means updating the Tersus models to reflect the changes to the imported HTML file:

Locate the Columnar HTML display element in the repository, right-click on it to open the context menu, and select Synchronize with HTML Template, as in the following screenshot:

The result of this synchronization will be the creation of 3 additional display elements, corresponding to the 3 elements we have identified and named in the template, with the element names provided . These newly created models are shown in the following screenshots:

Save your work. If you view your application in the browser, you should notice that although parts of the form are now associated with Tersus display elements, there is no change in the form's visual appearance.

Create a process model which interacts with the imported formTo finish off our demonstration, we shall model a process that checks, when the Submit my details Button is pressed, whether the First Name and Last Name have been entered, and alerts the user if at least one of them is missing:

In the model editor, zoom into the Submit button.

Add an Ancestor Reference of the Columnar html element (through the right-click context menu).

Drag a Collections/Exists template from the palette into the button. Name it First Exists. Delete the <Yes> exit which we will not use.

Create a flow linking Columnar/First/<Value> to First Exists/Item.

Drag another Collections/Exists template from the palette into the button. Name it Last Exists. Delete the <Yes> exit which we will not use.

Create a flow linking Columnar/Last/<Value> to Last Exists/Item.

Drag a Constants/Text template from the palette into the button. Name it Please enter your First and Last Name.

Create a flow linking First Exists/<No> to the constant you've just added.

Create another flow linking Last Exists/<No> to the same constant.

Drag a Display Actions/Alert template from the palette into the button.

Create a flow linking the constant to Alert/<Message>.

Your model should look similar to the following screenshot:

Let's test our model:

Save your work and view your application in the browser.

Leave First Name or Last Name empty and press Submit my details.

You should receive the alert.

Additional information

Synchronization is not a one-off process, you can repeat the synchronization process, as you identify in your html file additional elements you may want to interact with.

Currently, the import/synchronization process supports the identification (through the addition of the element_name attribute) of the following html tags:

<Input ... Type="Text" ...> - mapped to a Tersus Text Input Field.
<Span>...</Span> - mapped to Tersus Text Display.
<Input ... Type="Button" ...> - mapped to a Tersus Button.

A Create Corresponding Data Structure action appears in the html element's context menu in the repository explorer (below the Synchronize with HTML Template action), once the html element contains at least one identified sub-element.
This action creates a data structure, an Extract... process, and a Populate... process which can be used to retrieve the data from the form, or store data in the form, in a single action. They assist the modeling of interaction with the form - especially when the form contains a lot of identified elements - but are not a requirement in order to access the data in the form. You may choose not to use this option and instead model your own interactions.