Tersus: Stage 5 - Viewing and updating the details of an apartment

Stage 5 - Viewing and updating the details of an apartmentDate: Jan 11, 2010Reusing the Apartment DialogIn this stage we will show how to display the details and pictures of an apartment selected from the list:

In <iPhone View>/Body/Apartment List/Content Item, zoom into the <On Click> process. This process is activated each time the user selects an item from the list.

We will reuse the Apartment Dialog we created in stage 1, but this time we will initialize it with the details and pictures of the selected apartment (already saved in the database):

Add Apartment Dialog to <On Click> (search for Apartment Dialog and drag it from the search result pane, or use Copy and Paste (Reuse)).
Also add to <On Click> an initialization process (an action named Init).

Initializing the DialogTo read the details of the selected apartment from the database, we need to know the apartment's Id.Unfortunately Content Item does not contain it, so we should first add an appropriate element to Content Item and make a corresponding change to the process that creates Content Item:

Zoom into <iPhone View>/Body/Apartment List/Content Item and add to it a numeric field (select Data Types/Number from the palette). Name it Apartment Id.

In <iPhone View>/Body/Apartment List/Init, zoom into the Create Item process.

In Create Item, add a flow arrow from Apartment Record/Apartment Id to Content Item/Apartment Id.

Similarly, add an Apartment Id element to the Apartment Details within Apartment Dialog:

Zoom again to <iPhone View>/Body/Apartment List/Content Item/<On Click> and zoom into Apartment Dialog.

Further zoom into Body/Apartment Details and add to it a numeric field Apartment Id.

Now we can model the initialization process of Apartment Dialog:

In <iPhone View>/Body/Apartment List/Content Item/<On Click>, zoom into Init.
Add a reference to the containing Content Item (right click Init and select Add Ancestor Reference -> Content Item). This is the input of the initialization process.
Add a reference to the Apartment Dialog:
- Zoom up to <On Click> and copy Apartment Dialog (right click Apartment Dialog and select Copy).
- Right click Init and select Paste (Reuse).
- Inside Init, Right click Apartment Dialog and change its type to Parent (thus referring to the Apartment Dialog inside <On Click>, which is a parent model of Init). This is the output of the initialization process.
Read from the database the details of the apartment:
- Add Find from the Database section of the palette. Name the process Get Apartment.
- Add to Get Apartment a trigger Apartment Id (make sure its name is exactly the same as field's name in Apartment Record). Connect to it the Apartment Id field of Content Item.
- Add Apartment Record as a Data Element (as you did in stage 4). Connect to it the <Records> exit of Get Apartment.
- Connect the fields of Apartment Record to the corresponding fields in Apartment Dialog:
  - Apartment Id --> Body/Apartment Details/Apartment Id
  - Description --> Body/Apartment Details/Description/Text Input Field/<Value>
  - Price --> Body/Apartment Details/Price/Number Input Field/<Value>
Read from the database the pictures of the apartment:
- Add Find from the Database section of the palette. Name the process Get Apartment Pictures.
- Add to Get Apartment Pictures a trigger Apartment Id. Connect to it the Apartment Id field of Content Item.
- Add an action Get Picture Image and make it repetitive. Add to it a trigger and an exit.
- Connect the <Records> exit of Get Apartment Pictures to the trigger of Get Picture Image.
- Connect the exit of Get Picture Image to Apartment Dialog/Body/Picture.
- And finally, model Get Picture Image:
  - Add Picture Record as a Data Element. Connect to it the actions trigger.
  - Reuse Create Image Display (from stage 1) and send to it the Picture Id and Data URL fields of Picture Record.

Your Init model should look like this:

If you now save the changes and launch the application, the apartment details and pictures will be displayed whenever you select an apartment from the list. Be careful, though, not to press the Save button - it will not work correctly.

Saving UpdatesThe Save button within Apartment Dialog/Header was initially implemented (in stage 3) to save in the database the details and pictures of a new apartment. Now we have an apartment already existing in the database, so some changes should be introduced to the save process.

In Apartment Dialog, zoom into Header/Save and rename Save New Apartment to Save Apartment.

Add two actions Save New Apartment Record and Save Updated Apartment Record. Add to each of them two triggers (one called Record) and an exit (Id).

Copy the processes Apartment Id and Insert Apartment Record to Save New Apartment Record and delete them from Save Apartment along with the flows connected to them (we will later fix Save New Apartment Record).

Add a flow from Apartment Dialog/Body/Apartment Details/Apartment Id to Apartment Record/Apartment Id.

Add flows from Apartment Record to both the Record trigger of Save New Apartment Record and the Record trigger of Save Updated Apartment Record.

To decide which of the two processes is actually activated:

Add a process testing whether an id exists (select Collections/Exists from the palette). For clarity, rename the process to Id Exists and rename its trigger to Id.
Connect Apartment Record/Apartment Id to the Id trigger of Id Exists.
Connect the <Yes> exit of Id Exists to the control trigger of Save Updated Apartment Record.
Connect the <No> exit of Id Exists to the control trigger of Save New Apartment Record.

Delete the flow from Apartment Record/Apartment Id to the Apartment Id trigger of Save Picture. Instead add flows to this trigger from both the Id exit of Save New Apartment Record and the Id exit of Save Updated Apartment Record.

Your Save Apartment model should look like this:

Modeling Save New Apartment Record:

The model already contains Apartment Id and Insert Apartment Record, but they are not connected to anything.
Add Apartment Record twice as Data Elements (the second time rename the record to Saved Apartment Record).
Create the following flows:
- Record (trigger) --> Apartment Record.
- Apartment Id/<Next> (exit) -> Apartment Record/Apartment Id.
- Apartment Record --> Insert Apartment Record/<Record> (trigger).
- Insert Apartment Record/<Inserted> (exit) --> Saved Apartment Record.
- Saved Apartment Record/Apartment Id --> Id (exit).

Modeling Save Updated Apartment Record:

Add Update from the Database section of the palette. Name the process Update Apartment Record.
Add Apartment Record as a Data Element. Rename it to Saved Apartment Record.
Create the following flows:
- Record (trigger) --> Update Apartment Record/<Record> (trigger).
- Update Apartment Record/<Updated> (exit) --> Saved Apartment Record.
- Saved Apartment Record/Apartment Id --> Id (exit).

Saving New PicturesA similar change is required in the process that saves apartment pictures, because now we might have a mixture of pictures already saved to the database and new pictures.

In Apartment Dialog, zoom into Header/Save/Save Apartment/Save Picture.

Reuse Id Exists (from Save Apartment).

Connect Picture 2/Picture Id to the Id trigger of Id Exists.

Add a trigger to the Picture Id process.

Connect the <No> exit of Id Exists to the trigger of Picture Id.

Leave the <Yes> exit of Id Exists unconnected (if the picture already has an id, it means it is already in the database).

If you now save the changes and launch the application, you will be able to save updates to apartment details as well as additional pictures.

Enjoy your new apartment! Send us pictures...Download from AppStore (You must have iTunes installed to use this link)See Also:

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

For best results, use the Firefox browser..

Loading ...