Skip to end of metadata
Go to start of metadata

Lab - Working with Local Data

Mission: In this lab assignment, you will back our fugitive list with actual data from a local SQL database (SQLite). You will display the data-driven fugitive list, and update with every database change.

Specification: Start with the TiBountyHunter project you created for the last assignment. You will now add event handlers to update a local database. To successfully complete this lab, you must develop an application that meets the following description:

  • Populate a table view with results from a SQL database
  • Keep the fugitive lists up to date with every database change
  • Implement the “Add” screen for the fugitive list, allowing the bounty hunter to add a new fugitive to the database
  • Allow the user to delete fugitives
  • Implement the “Capture” button, which will update a fugitive’s status in the database to “captured” and display him or her in the proper tab
1. Open the TiBountyHunter project you created for the last assignment, or download the starting point code and import it as a new project in Studio:
2. Create a new folder named 'lib' and in it a database module file. In that file, add the statements needed to create a database named 'TiBountyHunter' containing a table named 'fugitives'. That table should have these fields:
  • name — TEXT
  • captured — INTEGER
Make sure to open, then close the database connection when your code finishes.
3. Write the following functions, each of which should be added to the exports list (so they can be called by the other modules):
  • list(BOOLEAN) — Returns a set of table rows representing either captured or at-large fugitives. Each row should have title, id, hasChild=true, color='#fff', name (duplicate of title), and captured=boolean properties
  • add(STRING) — Adds the named fugitive to the database. Fire an App-level event noting that the database has been updated.
  • del(PRIMARY_KEY) — Deletes the fugitive with the given ID. Fire the 'database updated' App-level event.
  • bust(PRIMARY_KEY) — Marks the fugitive with the given ID as captured. Fire the 'database updated' App-level event.
4. Update the ui/common/BountyTable.js file. Replace the statically-defined table with a call to your db.list() function. You will need to require in the module. Add an App-level event listener that will call populateData() when the 'database updated' event is received.
5. Update the /ui/common/DetailWindow.js file. Add a click event listener to the Capture button. It should call your db.bust() function then close the detail window. Add a click event listener for the Delete button that calls your db.del() function and closes the window. Don't forget to require() in the database library file within the event listeners.
6. Update the /ui/common/AddWindow.js file. Add a text field with hintText that directs the user to enter a new fugitive's name. Add a Save button that when clicked calls your db.add() function. Close the Add window after saving the new fugitive. Don't forget to require() in the database library within the event listener.
7. Build your app for the iOS simulator or Android emulator. Correct any problems that exist.


In this lab, you improved upon TiBountyHunter by backing it with a SQLite database. Fugitives are now stored in a database for easy retrieval and updating. You enabled add, capture, and delete functionality with just a few lines of code.


  • No labels