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

Stage 3 - Saving the details of the apartments and the picturesDate: Sep 20, 2014Local StorageIn this stage of the tutorial we will build the processes of saving the data entered by the user (description of the apartment, its price and pictures).All the information is saved on the iPhone device, using HTML5's local storage of the browser (see http://www.w3schools.com/html/html5_webstorage.asp). This can work for small amounts of data (for more data, some sort of a client-side database will be needed, as explained in http://www.tersus.com/#Id=3219; an older version of this tutorial is using a client-side database supported by webkit based browsers).Building the Data Saving Processes

Zoom into the Header element of New Apartment (<Mobile View>/Header/New/<On Click>/New Apartment/Header).

Further zoom into Button and rename it to Save. Zoom to <On Click>.

Add to <On Click> 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 -> New Apartment‏).

Also add to Save New Apartment a data structure to hold the apartment details (select Data Structure from the Data Types section of the palette). Name it Apartment Details.

Add to Apartment Details the following elements:

Description (a textual field - select Data Types/Text from the palette)
Price (a numeric field - select Data Types/Number from the palette)
Picture (another textual field, which will hold the encoding of a picture)

Make Picture repetitive (we want to allow saving multiple pictures for each apartment)

Add a flow arrow from the Text Field/<Value> element of the Description field of the dialog to the Description field of the data structure.

Similarly, add flow arrows to populate the Price field of the data structure (from the Price field of the dialog), and the Picture field (from the Picture field of the dialog).

Add an action Save Apartment Details with a single trigger. Create a flow from Apartment Details to the trigger of Save Apartment Details:

Now we need to model the saving of the data in the device's local storage (along with previously save apartment details):

Right click on the Apartment Details data structure and select Copy.
Zoom back all the way up to the Rentals Page, and add a data structure Apartment List. This data structure will hold the details of all apartements visited so far.
Add to Apartment List the Apartment Details data structure (right click on Apartment List and select Paste (Reuse)). Make Apartment Details repetitive (by right clicking it and checking Repetitive):
Zoom back to <Mobile View>/Rentals/Header/New/<On Click>/New Apartment/Header/Save/<On Click>/Save New Apartment/Save Apartment Details.
Add to Save Apartment Details an ancestor reference to the Rentals page. Create a flow from the trigger to Rentals/Apartment List/Apartment Details.
Add a constant "Apartments" (Text from the Constants section of the palette), Create JSON (from the Miscellaneous section of the palette), and Store (from the Display Actions section of the palette). Add flows like this:
Create JSON creates a textual representation of the whole data structure Apartment List, andStore saves it in the browser's local storage (with the key "Apartments"). This is a valid solution for a small amount of data, but of course not for large lists of apartments that should be saved for the long run.

The last thing we'll do at this stage is close the New Apartment dialog (when the user presses Save, after adding the apartment details to the list and saving the list, we want to close the dialog and return to the Rentals page):

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 <On Click>. 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, including the pictures, will be saved when the user presses 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

Rentals.Stage3.tersus.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 ...