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

Stage 3 - Saving the details of the apartments and the picturesDate: Dec 22, 2009Client-Side Database and SafariIn this stage of the tutorial we will build the processes of saving the data entered by the user (description of the apartment, its prices and pictures).All the information is saved in a client-side database - a system for the saving and retrieval of data that exists on any iPhone device (as well as any Safari browser).Therefore, from this stage on, it is recommended that you test our application using Safari. Windows users can download Safari from Apple's site.These are the required settings:

If Safari is not the default browser on your system, you can configure Tersus preferences to use it:

Open the Preferences dialog from the main menu (on Mac, Tersus Studio -> Preferences; on Windows, Window -> Preferences).
Select General/Web Browser and define Safari (e.g. on windows add C:\Program Files\Safari\Safari.exe).

If you don't have a Safari (typically on Linux), you can emulate the usage of a client-side database by using the embedded database of the application server (which is provided as part of the Tersus Studio):

From the main menu, select Window -> Show View -> Properties.
Focus on the system's diagram (the outermost rectangle named Rentals). To zoom out from internal elements, double click several times as close as possible to the edge of the diagram (or use several times the Zoom Out button).
Make sure the top level system diagram (Rentals) is selected, and change its clientSideDatabase property from local to server.

Building the Data Saving Processes

Zoom into the Header element of Apartment Dialog (<iPhone View>/Header/New/Apartment Dialog/Header).

Further zoom into the OK button and rename it to Save.

Add to Save an action named Save New Apartment (select Action from the Basic section of the palette).

Add to Save New Apartment a reference to the dialog (right click Save New Apartment and select Add Ancestor Reference -> Apartment Dialog‏).

Also add to Save New Apartment a data structure of a database record (select Database Record from the Data Types section of the palette). Name it Apartment Record.

Add to Apartment Record the following elements:

Apartment Id (a numeric field - select Data Types/Number from the palette)
Description (a textual field - select Data Types/Text from the palette)
Price (a numeric field - select Data Types/Number from the palette)

Add a flow arrow from the <Value> element of the Description input field of the dialog to the Description field of the record:
Rentals - Save New Apartment (first flow)

Rentals - Save New Apartment (first flow)

Similarly, add a flow arrow to populate the Price field in the record (from the Price input field of the dialog).

Add a Sequence Number built-in process (select it from the Database section of the palette). Name it Apartment Id and create a flow arrow from its exit to the Apartment Id field of the record.

Finally, to save the record in the database, add an Insert built-in process (also from the Database section of the palette) and name it Insert Apartment Record. Create a flow from Apartment Record to the trigger of Insert Apartment Record:
Rentals - Save New Apratment

To save the pictures (if there are any), add to Save New Apartment an action named Save Picture. Make it a repetitive action (right click Save Picture and select Repetitive). Add to it two triggers and name them Apartment Id and Picture (to set or change a trigger's name, select it and press F2).

The actual saving of each picture will take place inside Save Picture:

Zoom into Save Picture.
Add a Database Record and name it Picture Record.
Add to the record numeric fields Picture Id and Apartment Id and a textual field Data URL.
Add a Sequence Number built-in process named Picture Id and connect its exit to the corresponding field in the record.
Similarly, connect the Apartment Id trigger of Save Picture to the corresponding field in the record.
Add Picture as a Data Element (local variable) within Save Picture (right click Picture, select Copy, and then right click Save Picture and select Paste (Reuse)).
Connect the Picture trigger of Save Picture to the picture data element you have just created, and then connect the <Path> field of the data element to the Data URL field of Picture Record.
Add an Insert built-in process, name it Insert Picture Record and connect Picture Record to its trigger.

Zoom one level up to Save New Apartment. Add to it a "Done Exit" (right click Save New Apartment and select ‏Add Element -> <Done>).

Zoom one more level up to the Save button. Add to it the Close Window built-in process (from the Display Actions section of the palette). This process closes the dialog.

Add to Close Window a "Control Trigger" (right click Close Window and select ‏Add Element -> ‏Control). Connect the <Done> exit of Save New Apartment to the ‏Control exit of Close Window. This will ensure that the dialog will only close after the saving is finished.

If you now save the changes and launch the application, the apartment details and the pictures will be saved to the database when we press the Save button (although we cannot still see them in the application). Be careful to enter only numbers in the Price field (as we haven't implemneted yet any data validation process).

To download the project at the end of this stage, click here.Stage 4 - Displaying the list of apartmentsSee Also:

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

For best results, use the Firefox browser..

Loading ...