Tersus: iPhone Native Application (Rentals) [version 2.1.31]

iPhone Native Application (Rentals) [version 2.1.31]Date: Sep 27, 2014Tags:iPhone,Native vs. WebRentals Application [Download from AppStore (an older version)]The application we will build in this tutorial (called "Rentals") allows people looking for an apartment to rent to collect details and pictures of the apartments they have already visited. Later on the user can compare the various proposals and decide what apartment to rent.The application uses the camera of the iPhone device, so to fully use it you will need an iPhone device. To upload the app to Apple's App Store, you'll need a Mac and to register to Apple's iPhone Developer Program.If you don't have an iPhone device (or even a Mac), you can test the application using the Tersus simulation tools.Preparations

Download and install Tersus (version 2.1.31 or later):

On Mac, you can download the latest stable version from here.
On Windows, you can download the latest stable version from here (or the 64 bit version).
On Linux, download Tersus as explained here, and then update it as follows:
- Launch eclipse from the Tersus Studio root directory (as explained here).
- In the Studio, select Help -> Software Update.
- Click the Available Software tab
- Uncheck Include items that have already been installed (at the bottom of the page)
- Click Add Site... and add the URL of the latest Tersus updates http://updates.tersus.com/latest.
- Click the Installed Software tab and press Update... to start the update process (continue according to the instructions).

If you have a Mac, register as an iPhone Developer to be able to download and install the OS SDK (you will use it later to compile the applications you develop and transfer them to your iPhone device). Also register to Apple's iPhone Developer Program, which is required to transfer applications to your iPhone device. It takes a few days (or even a couple of weeks) and costs $99.

If you are a Windows user, it is recommended to download and install the Safari browser, but Chrome, Firefox and Internet Explorer are also OK.

Development Stages

Stage 1 - Creating the application with a page to enter apartment details

Stage 2 - Transferring the application to the iPhone device (an optional stage)

Stage 3 - Saving the details of the apartments and the pictures

Stage 4 - Displaying the list of apartments

A subsequent tutorial (not available yet) will show how to build a web service to manage the apartment details so that they can be accessed from a desktop or from other mobile devices as well. Stage 1 - Creating the application with a page to enter apartment details

Launch the Tersus Studio (on Windows - Tersus Visual Programming Platform; on Mac - Tersus). If this is the first time you are using the studio, you will see first a Welcome screen.

Create a new Tersus application "Rentals":

Select File -> New Tersus Project
Project name: Rentals
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 mobile view, so delete <Tablet 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.

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

). The application will start within your browser.

Back to the Tersus Studio, double click <Mobile View> to zoom into it.

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

Zoom into <Mobile View>/Rentals/Header. Delete Prev (we don't need it), and rename Button to New.

Save your changes and return to the browser. The application will automatically reload and display the new names (Rentals and New).

If we now press the New button, nothing will happen, because the diagram of the button is still empty (we haven't defined its behavior yet). So let's make it open a dialog:

Zoom into New.
Click the Display section of the palette.
Click Page Dialog.
Click inside New to add the dialog. Set the dialog's name to New Apartment:
Save your changes and return to the browser. After the application reloads, press the New button.
The screen should change to a new screen, displaying a title New Apartment and buttons Button and Close:
You can change the URL from http://localhost:8080/Rentals/ to http://localhost:8080/Rentals/mobile.html in order to display the app in a simulated iPhone screen (choose the horizontal display option):
The Close button is built-in, and it simply closes the dialog. The Button button currently does nothing.

We will now add a list of fields describing the apartment:

Add a form to the dialog (UIForm from the Display section of the palette). Name it Apartment Details.
Add to the form a text field (right click Apartment Details and select Add Element ‏-> Text Labeled Field). Rename it to Description.
Similarly, add a Number Labeled Field and rename it to Price.
Your diagram should now look like this:
Save your changes and return to the browser. The application will reload. Now, when you press the New button, you will see the two fields:

Adding pictures and using the camera:

Add a button to the Conent of New Apartment (select Button from the Display section of the palette). Name the button Add Picture.
Add an image to Conent (select Image from the Display section of the palette). Name the image Picture.
To allow the display of multiple pictures, make the Picture a repetitive element (right click Picture and select Repetitive). You will see a stacking of the Picture rectangle, indicating its multiplicity.
Now we'll build the process of a adding a picture:
- Zoom into the button Add Picture. Zoom into <On Click>.
- Add a Take Picture process ‏(select Take Picture from the Display Actions section of the palette).
- To the right of Take Picture, add an action container (select Action from the Basic section of the palette). Name it Create Image Display.
- Add to the this action a Trigger (input entry ) and an Exit (output exit ).
- Add an Flow (an arrow) from the exit of Take Picture to the trigger you have just created (click Flow in the palette, then click the <Data URL> exit of Take Picture, and then click the trigger of Create Image Display).
- We would like to store the pictures we take in the Picture repetitive element. As both Add Picture and Picture are inside Content, we can "implant" a picture into Picture by adding to Add Picture a reference to Content: Right click Add Picture and select Add Ancestor Reference -> ‏‏Content. Add a flow arrow from the exit of Create Image Display to the Picture element inside the reference you have just created:
- The purpose of Create Image Display is to create the image to display from the data we get from Take Picture. To do so, it needs a picture Data Element (local variable) and it should populate its <Path> element with the picture's URL (in our case, the <Data URL> we get from Take Picture):
  - Right click Picture (inside Content) and select Copy.
  - Zoom into Add Picture, right click Create Image Display and select Paste (Reuse)‎.
  - Add a flow arrow from the trigger of Create Image Display to the <Path> element of Picture.
  - Add a flow from Picture (inside Create Image Display) to the exit of Create Image Display:
If we now try the application using the simulator, we won't be able to operate a real camera, but the simulator will offer us to use a sample picture, just for testing:
If we press OK, the sample picture will be displayed:

To download the project at the end of stage 1, click

Rentals.Stage1.tersusStage 2 - Transferring the application to the iPhone device (an optional stage)See Also:

Stage 2 (optional) - Transferring the application to the iPhone device

Stage 3 - Saving the details of the apartments and the pictures

Stage 4 - Displaying the list of apartments

To use the full functionality of this web site, JavaScript needs to be turned on.

For best results, use the Firefox browser..

Loading ...