Tersus: Stage 4 - Saving visitor details and picture

Stage 4 - Saving visitor details and pictureDate: Apr 1, 2012Using a Client-Side DatabaseTo keep it simple, our application will be a standalone application, which saves data locally on the phone (read here on the alternative of client-server applications).To save data on the phone we'll use a client-side database as a local storage system.To configure the application to use a client-side database, the clientSideDatabase property of the root system should be set to "local". Since our application was created from the Native Mobile Application template, this should already be the default, but we can verify it:

Zoom out to the top level model (Guestbook).

Click Guestbook, and then click the Properties tab (at the lower part of the Studio screen).

The Properties tab lists all properties of Guestbook. clientSideDatabase is the first in the list, and you can see its value is local:

Defining and Saving a Database Record

Zoom back into Mobile View/Visitors/Header/New/<On Click>/New Visitor/Header.

Rename Button to Save and zoom into Save/<On Click>.

Add to <On Click> an action container (select Action from the Basic section of the palette). Name it Create Record.

Zoom into Create Record and model the creation of a database record containing the visitor's details and picture:

Add an ancestor reference to the New Visitor dialog (right click Create Record and select Add Ancestor Reference -> New Visitor).
Also add to Create Record a database record (select Database Record from the Data Types section of the palette). Name it Visitor.
Add to the Visitor record 4 elements:
- Add a text element Name (select Text from the Data Types section of the palette).
- Add a second text element Title.
- Add a third text element Company.
- Add a fourth text element Picture (the encoding of the picture image).
Copy the data from dialog fields to the database record:
- Create a flow from New Visitor/Content/Name/<Value> to Visitor/Name.
- Create a flow from New Visitor/Content/Title/<Value> to Visitor/Title.
- Create a flow from New Visitor/Content/Company/<Value> to Visitor/Company.
- Create a flow from New Visitor/Content/Image/<SRC> to Visitor/Picture.
Add to Create Record an exit through which the action returns the created record:
- Select Exit (output exit ) from the palette.
- Click inside Create Record, close to the middle of its right side.
- Create a flow from Visitor to the exit you have just created.
The model of Create Record now looks like this:

Now all we need to do is to save the record in the database:

Zoom back to <On Click>.
Add Insert (from the Database section of the palette). Insert adds a database record to a database table (the Visitor record has a property tableName that contains the name of the table, and you can modify it if you want to change the default).
Create a flow from the exit of Create Record () to the trigger () of Insert:

The last thing we'll do at this stage is close the New Visitor dialog (when the user presses Save, after inserting the record to the database table, we want to close the dialog and return to the Visitors page):

Add Close Window (from the Display Actions section of the palette).
Right click Close Window and select Add Element -> Control (to add a trigger to Close Window).
Create a flow from the exit of Insert to the trigger of Close Window (this means the dialog is closed only after Insert finishes its work):

Save your changes and return to the browser.
If you've been using Firefox, Internet Explorer or another non-webkit browser in previous stages, you must now switch to a browser based on webkit in order that client-side database access works. Safari, Chrome and the mobile browsers are webkit-based and should work.
Switching is as easy as opening the webkit browser and copying the url from the original browser. You can also change the default browser opened by the Studio via Window > Preferences > General > Web Browser.

The application will automatically reload.

Now, when you press New, enter visitor details, and press Save, the details will be saved in the database.
Note that if Save returns an error message "openDatabase is not defined", then you're probably still using a non-webkit browser (see above).

Note that the model does not handle the case where the same visitor (or another visitor with the same name) is entered again. Since the Name field is the first field in the table, it is by default the primary key, and thus expected to be unique.
As it stands, if you were to repeat the visitor name, you would receive an error message "Error: constraint failed [1]".
While this situation is easily handled, it is beyond the scope of this specific tutorial.

Stage 5 - Displaying the saved data (guestbook) 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 ...