Lab - UI Fundamentals
Mission: In this lab assignment, you will create the basic user interface for TiBountyHunter, including table views and windows, and populate it with dummy data. You will add a window for viewing fugitive details, a window for adding new fugitives, and basic event handling.
Specification: Start with the TiBountyHunter project you created for the last assignment. You will now create the main components of the application with new custom component constructors. Additionally, you will learn the basics of event handling by opening a new window when a table view row or button is clicked.
To successfully complete this lab, you must develop an application that meets the following description:
- Creates a table view in each window that shows a list of fugitives and a list of captured suspects. Use dummy data in the tables for now
- Provides a blank window that will (eventually) be used to add a new fugitive. This window will be opened by either clicking a button in the nav bar (customary on iOS) or by pressing a button in the menu (customary on Android)
- When a table view row is clicked, open a detail window for a fugitive which will contain text and buttons
|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: http://assets.appcelerator.com.s3.amazonaws.com/app_u/code/TiBH220.zip|
|2. In the ui/common folder, add a new module named BountyTable. In it, define a constructor for a the bounty table view; it should accept a Boolean value to determine whether the table will hold captured or at-large fugitives. Set the background color to 'transparent' (so the window background shows through). Add a function to populate your table's data and add a few rows. Each row should specify a title (bounty's name), a white text color, hasChild=true, and a custom property named captured which will hold the Boolean value passed to the constructor.|
|3. In the ui/common folder, add a new module named DetailWindow. In it, define a constructor for the details window. The background colors and so forth should match those you set for the application's main window. This constructor should accept an object represent the fugitive (and his/her details). Set the title to the bounty's name. Add a label that displays a busted or still at large string. If the bounty isn't captured, display a capture button (you don't have to add an event listener). Add a delete button, again without an event listener.|
|4. In the ui/common folder, add a new module named AddWindow. In it, define a constructor for the add-a-fugitive window. The background colors and so forth should match those you set for the application's main window. Set the title to something like New Fugitive. The rest of this window can be empty.|
|5. In the ui/handheld/ApplicationWindow.js file, add the code necessary to display the bounties table. Remember, this window will be instantiated twice: once for at-large and once for captured bounties. On the table instance, add an event listener. When a row is tapped, instantiate and then open the detail window. You'll need to pass the row's data to the DetailWindow to represent the fugitive.|
|(Hint: you added a self.containingTab property so that you can open with window within the parent tab.)|
|6. To the createWindow() call, add the code necessary to display the menu on Android. That menu should display a single button titled 'Add' that when clicked opens the AddWindow within the current tab.|
|(Hint: See the Resources below for a link to the guide on creating an Android menu.)|
|7. Create a button titled 'Add' and display it as the rightNavButton. When that button is clicked, open the AddWindow within the containing tab. Make sure to wrap this whole block of code in an 'is-iphone' conditional statement so that it won't run on Android or Mobile Web.|
|8. Build your app for the iOS simulator or Android emulator. Correct any problems that exist. Build the app for Mobile Web (either in the browser or Android emulator).|
|What functionality is missing from Mobile Web and how would you account for it? Be prepared to discuss these with your instructor and the class.|
In this lab, you built upon the foundation you laid in the previous lab. You added a table, windows, buttons, and other UI elements as a way to practice UI composition and layout.
- Creating a table view: http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.TableView-object
- Android UI guide (contains section on menus) http://docs.appcelerator.com/titanium/2.0/index.html#!/guide/Android_UI_Components_and_Conventions
- Windows in Titanium: http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.Window-object
- Finished code: See the next lab or GitHub