We 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.
In 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 1) Horizontal.html (based on horizontal.htm 1) Margin.html (based on margin.htm 1) Un-styled.html (based on index.htm 1) Vertical.html (based on vertical.htm 1)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 2
The 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.
We 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.
Now that we have an HTML display model, we can display the template inside a Tersus view, as follows:
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:
Next 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:
To 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:
Your model should look similar to the following screenshot:
Let's test our model:
For best results, use the Firefox browser..