Mission: You will display an image on a details view for a fugitive within the TiBountyHunter app. You will also enable the user to select a photo from the camera or gallery.
Specification: In this lab, you will modify the app created in the preceding lab. You will add an image placeholder and enable the user to pick a photo from the camera or gallery. You won't be saving the photo in this lesson (that will come in the next lesson).
To successfully complete this lab, you must develop an application that meets the following description:
- Contains an image view on the details screen, which displays a placeholder image or the image obtained from the camera or gallery.
- Has a button that when tapped opens the camera (if one is supported) or native gallery picker.
- When an image is selected, it will be displayed in the image view but will not be saved. Thus, reopening a fugitive's details screen will subsequently show the default image again.
- Download the starting code for this lab from 08_multimedia and unzip the files. Import the project into Titanium Studio. Update the tiapp.xml, if necessary (e.g. to set an appropriate SDK version or build target for your environment).
This starting app extends the version you worked with in the preceding lab. It adds a details window with buttons to capture or delete the fugitive. You'll want to explore this code, perhaps after class, to see how that functionality has been enabled.
- In the FugitiveDetail.xml view, add the tags where indicated for the image view and photo button.
- In the associated FugitiveDetail.tss file, add style declarations for your image view and photo button. The image should be shown 10 units from the top with a height of 80 and width of 80. Use 'Add Photo' as the button text. It should be 10 from the top, 200 wide, and Ti.UI.SIZE tall.
- In the FugitiveDetail.js controller, add the photo button event listener as described by the comments in that file. The camera should be opened if it's supported; otherwise open the photo gallery picker. For Android, make sure to not open the camera in the emulator by including
if (Ti.Media.isCameraSupported && Ti.Platform.model != 'google_sdk' && Ti.Platform.manufacturer != 'Genymotion')
as part of your conditional statement. In the success callback, update your image view's image property with the media returned from the camera/gallery. Accept only photos (not videos) and don't save to the gallery or enable editing.
- Save all the files. Build your app for the iOS simulator or Android emulator. Correct any problems that exist.
Your finished app should match the screen shot above. An image should be displayed after selected. Opening the details view again won't show that image; it's not being saved and associated with the model.
In this lab, you extended the supplied example app to enable photo capture and display.
API docs: Ti.Media http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.Media
Guides: Camera & Photo Gallery http://docs.appcelerator.com/titanium/latest/#!/guide/Camera_and_Photo_Gallery_APIs
Starting code for this lab: 08_multimedia
Finished code for lab : 07_networking