Tersus: iPhone Native Application (Rentals) [version 2.0.4 or earlier]

iPhone Native Application (Rentals) [version 2.0.4 or earlier]Date: Sep 20, 2014Tags:iPhoneRentals Application [Download from AppStore] This tutorial uses an old version of Tersus - here is a newer versionThe application we'll 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 take a decision what apartment to rent.The application uses the camera of the iPhone device, so to fully use it you will need an iPhone device, 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 1.3.38 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 explaind 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 iPhone 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 Firefox and Internet Explorer 8 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

Stage 5 - Viewing and updating the details of an apartment

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: Native iPhone Application
- Click Finish (a new Tersus project is created, and you see the top level diagram of the application, which contains a single screen <iPhone 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 <iPhone View> to zoom into it.

Add a top header by right clicking <iPhone View> and selecting Add Element -> Header.

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, in a screen simulating an iPhone.

As you can see, the top header (Header in the diagram) contains a generic title Title and a generic button Header Button. If we zoom into Header (double click), we'll be able to see their representation in the diagram and change them. Specifically, pressing F2 opens a dialog that let you rename any of the components:

Select Title, press F2 and rename it to Rentals.
Then select Header Button, press F2 and rename it 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.
To get a list of iPhone specific components, click the iPhone section of the palette.
Click Dialog.
Click inside New to add the dialog. Set the dialog's name to Apartment Dialog:
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 Title and buttons OK and Cancel:
The Cancel button is built-in, and it simply closes the dialog. The OK button currently does nothing.
Rename Title to Apartment Details.

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

Add a list to the dialog (right click the Body of Apartment Dialog and select ‏Add Element ‏-> List). Rename the list to Apartment Details.
Add to the list a textual input field (right click List and select Add Element ‏-> Text Field). Rename the text field to Description, and rename the Label element inside it to Description:‎ (Description followed by a colon).
Add a second field for the price (right click List and select Add Element ‏-> Number Field, then rename it to Price). Rename the Label element inside it to Price:.
Your diagram should now look like this:
Save your changes and return to the browser. After the application reloads, when you press the New button, we will see the two fields:

Adding pictures and using the camera:

Add a button to the Body of Apartment Dialog (select Button from the Display section of the palette). Name the button Add Picture.
Add an image to the Body of Apartment Dialog (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.
f
Now we'll build the process of a adding a picture:
- Zoom into the button Add Picture.
- Add a Take Picture process ‏(select Take Picture from the iPhone 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 Body, we can "implant" a picture into Picture by adding to Add Picture a reference to Body: Right click Add Picture and select Add Ancestor Reference -> ‏‏Body‏. 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 Body) 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 (if you are using Internet Explorer, remember you need version 8):

To download the project at the end of stage 1, click here.Stage 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

iPhone Native Application (Rentals - Hebrew Version)

Stage 5 - Viewing and updating the details of an apartment

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

For best results, use the Firefox browser..

Loading ...