Tersus: Recipe Book on Tablet [version 2.1.31]

Recipe Book on Tablet [version 2.1.31]Date: Aug 12, 2014Recipe BookIn this tutorial we'll show how to create, within a few minutes, the first screen of a tablet application that maintains cooking recipes.Creating the application

Launch the Tersus Studio, version 2.1.31 or higher (on Windows - Tersus Visual Programming Platform; on Mac - Tersus).

If this is the first time you are using the studio, you will see a Welcome screen, which you should close before you continue.

Create a new Tersus application "Recipe Book":

Select File -> New Tersus Project
Project name: Recipe Book
Template: New Mobile Application
Click Finish (a new Tersus project is created, and you see the top level diagram of the application, which contains three screens: <Mobile View>, <Tablet View> and <Desktop View>).
We are currently interested only in the tablet view, so delete <Mobile View> and <Desktop View>.

On the right side of the Studio you can see the Palette, which contains the building blocks we will shortly use to build our application. On the left side you see the Repository, which contains all the application components.

Double click <Tablet View> to zoom into it.

The model already contains a single default page called Page 1. Rename it to Recipes: Right click Page 1, select Rename, type Recipes (instead of Page 1), and press Finish.

Add two more pages Search and Favorites:

Right click <Tablet View>, select Add Element, and select Page. Rename it to Search.
Similarly add a third page Favorites.

Our application doesn't contain much yet, but we can already run it. Save the application and press the launch button in the upper toolbar (

). The application will start within your browser:

Left Menu Bar

The Recipe Page should display a list of food categories, and for each of them, list the recipes in this category.

We'll replace the default menu (with Option 1 and Option 2) by our list of categories:

Zoom into the Recipe page, then into Content, and then into Left Menu.
Delete Menu Title.
Zoom into Init and rename Option 1 to Soups.
Rename Option 2 to Salads.
Add a 3rd constant "Fish": select Text from the Constants section of the palette and then click inside Init; name the constant Fish).
Add a 4th constant "Meat" and a 5th constant "Desserts".
Create flows (arrows) from each of the three new constants to the Caption trigger of the repetitive action Create Menu Item:

Click Flow in the palette, then click the constant "Fish", and then click the Caption trigger.
Repeat the above for the other two constants:

If you now save your changes and return to the browser, the application will automatically reload, and the left menu will display the 5 food categories:

Note: In real life, the list of categories will be stored in a database, and we'll read them from there. In this tutorial we use constant names to save the effort of maintaining database tables.

Recipe List

When the user clicks a category, we would like to display all the recipes in this category.

Zoom into the Recipe page, and then into Content/Content Pane. It already contains a List, which we can use to display our list of recipes:

Zoom into List and rename List Item 1 to Recipe.
If you zoom into Recipe, you'll see it contain an image element Thumbnail and a column Details. We'll use them to display icons of recipes and their main details.

Zoom back to the Recipe page and then to Left Menu/Menu Item/<On Click>. <On Click> is what takes place when the user presses one of the menu categories on the left side of the screen.

Again, in real life the recipes would be read from a database, but for now we'll display a short fixed list of recipes (for the Soups category only):

Right click <On Click> and select Add Ancestor Reference -> Menu Item. Adding a reference to Menu Item is helpful, because now we can access its content.
Still inside <On Click>, add Branch from the Flow Control of the palette. Branching is used for conditional flow - taking one of several actions depending on some input value (in our case, selecting which recipes to display according to the clicked category).
Create a flow from Menu Item/<Caption> to the <Selector> trigger of Branch.
Rename the exits of Branch from Value 1 and Value 2 to Soups and Salads.
You can add additional exits Fish, Meat and Desserts, although in this tutorial we'll use only the Soups exit.
Add an action List Soups (select Action from the Basic section of the palette).
Right click List Soups, select Add Element, and select Control.
Create a flow from the Soups exit of Branch to the trigger of List Soups.

List Soups should create multiple soup Recipe items to be displayed on screen:

Zoom into List Soups.
Add an ancestor reference to Content.
Create a remove flow () from the trigger of List Soups to Content/Content Pane/List/Recipe (this deletes previously listed recipes, otherwise clicking the Soups menu button more than once will show the same recipes multiple times).
Create two constants "Gazpacho" and "Onion Soup".
Add an action Create Recipe Item. Make it a repetitive element (right click and check Repetitive).
Add to Create Recipe Item a trigger Title and an exit.
Create flows from each of the two constants to the Title trigger of Create Recipe Item. This means Create Recipe Item will be invoked twice, once for each constant, and each time create a recipe item.
Create a flow from the exit of Create Recipe Item to Content/Content Pane/List/Recipe.

Model Create Recipe Item:

Select the exit, right click and select Show in Repository Explorer. This locates you in the model repository on the model of Recipe, which is the type of the data flowing through the exit.
Drag the Recipe model from the Repository Explorer into Create Recipe Item and create a flow from it to the exit.
Create a flow from the Title trigger to Recipe/Details/Title/<Value>.

Save the changes and return to the browser. If you now click the Soups category, a list of two recipes is displayed:

Displaying Icons

To enrich the display, we'll add an icon to each recipe.

Icon images can come from many sources, but we'll simply use image files stored in the project's folder:

Download these two image files: Gazpacho.jpg Onion Soup.jpg .
Save the files in the web/images folder of your project (you'll have to switch from the Repository Explorer tab to the Navigator tab:

Note that the image file names exactly match the constants we've defined in List Soups. We'll now utilize it:

Zoom back to Create Recipe Item and model the creation of the icon's image path as a concatenation of the recipe's title and the suffix ".png":

Press Search () at the top of the palette, type "create", and select the Create from Template template.
Press OK and the click inside Create Recipe Item.
Create a constant with the value "images/${Title}.jpg", and create a flow from it to the <Template> trigger of Create from Template.
Copy the Title trigger from Create Recipe Item to Create from Template: right click on the trigger, select Copy, right click on Create from Template, and select Paste (Reuse).
Create a flow between the two triggers.
Create a flow from the <Text> exit of Create from Template to Recipe/Thumbnail/<SRC>:

Save the changes and return to the browser. If you now click the Soups category, each recipe in the list has an icon, but their size are very big and not uniform:

There are multiple ways to control the image size, and we'll use the quickest:

Zoom back to the Recipe page and then to Content/Content Pane/List/Recipe/Thumbnail.
Right click on Thumbnail and select Add Property.
Type "html.height" as the property name and click OK.
In the row of html.height in the Properties tab, in the Shared column, enter the value 80px.
Similarly, add a property html.width, also with the shared value 80px.

Before seeing the final result, we can add some description text to each recipe:

Return to Create Recipe Item and create a constant with some text.
Create a flow from the constant to Recipe/Details/Description/<Value> (in real life, the description will change, of course, from recipe to recipe; a constant description makes little sense).

The display looks better now (this is an iPad screenshot):

Completing the applicationWhat we've done so far (download) is just the beginning, of course. To get a useful application, we will have to complete many pieces:

Keep the recipe details (including the images) in a database.

Create screens to manage the database (add a recipe, edit recipe details, etc.).

Implement the Search and Favorites pages.

...