Skip to end of metadata
Go to start of metadata

Lab - Working with Media and the File System

Mission: In this lab assignment, you will use the camera to add an image to your fugitive. You will save the image to the file system, and provide a url to the database for easy retrieval. You will also learn how to repopulate your database with remote data.

Specification: Start with the TiBountyHunter project you created for the last assignment. You will now add the camera function and mechanisms to support taking a picture, saving it, and retrieving it for viewing in a detail window. To successfully complete this lab, you must develop an application that meets the following description:

  • Add a button in the detail view to snap a picture with the camera.
  • Save the image to the file system and in the database as a url.
  • Extend the database model with the addPhoto function
  • Extend the UI with the needed buttons and images
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. Edit the lib/db.js file.
  • Update the 'bootstrap' code so that your database will include a TEXT field named 'url' to store the path to the fugitive's photo.
  • update list() to return the value of the 'url' field
  • Add a new addPhoto() function that will accept the fugitive's ID and the photo URL. It should fire the 'database updated' event.
Because you're changing the database and we're not writing any alter-table statements, you will need to uninstall the app from the simulator/emulator. If you're starting a new project rather than editing your earlier work, this won't be a problem for you.
3. Edit the ui/common/DetailWindow.js file.
  • Add an ImageView at the top of the window that will show either the fugitive's photo or '/images/burglar.png' image if a photo isn't available.
  • Below the image, add an 'Add Photo' button that when clicked will show either the camera or photo gallery picker (if the camera isn't supported). Save the resulting image to the applicationDataDirectory with the name 'photo'+bountyID+'.png'. Save the path to that file to the database. Enable editing and save the result back to the gallery.
4. Make sure to update the internationalization strings.xml file.
5. Build your app for the iOS simulator or Android emulator. Add images to the photo gallery. Test the Add Photo functionality. Correct any problems that exist.
Don't forget to uninstall the old version of the app before running the new version.


In this lab, you added images and support for the camera or photo gallery to TiBountyHunter. You saved those images to the local file system, and saved the path to those images in the database to limit the chances of over-consuming memory when you later read that database.


  • No labels