Hawaii Electeds

Mobile Application Project (Part 2)


In this assignment is a continuation of Part 1.

PART 2. ELECTED OFFICIAL PROFILE SCREEN

Now we will create a page so when you tap on the name of an elected official on the main screen, a page displaying contact information and a photo will appear. Click for a video on how to do this assignment.


The elected official's profile page will the Kohoike web service that returns an elected official profile from the office and district. We will use storage variables to store the congressional, senate and house districts returned from the GetElecteds service on the first screen.

A. STORAGE VARIABLES
Used for storing the house, senate and congressional districts from an address, to be passed to the get profile API.

  1. On the left, click Project, then Model and Storage.
  2. Click Storage on the left.
  3. Add new storage variables named branch, house, senate and congress.
  4. Leave them all Local storage and Type String.
  5. Close the Model and Storage tab.
B. Modify get_electeds Mappings - to store the house, senate and congressional districts in the storage variables when GetElecteds API service is called on main screen.

  1. On the startScreen page, click the DATA tab. Click open the get_electeds data source.
  2. Click on Success: Mapping. Click to Expand all on the left side.
  3. Click the Storage checkbox and then click to Expand all fields on the right side.
  4. Drag the congress local storage field on the left to the congress Storage field on the right.
  5. Drag the senate local storage field on the left to the senate Storage field on the right.
  6. Drag the house local storage field on the left to the house Storage field on the right.
  7. Click Save and return.
  8. Click to close the startScreen page tab.
C. Create New Service: GetProfileService - to utilize a publicly available API for retrieving a profile for an elected official.

  1. Click CREATE NEW on the left top and select Service.
  2. Enter GetProfileService for the name. Click the Create Service button.
  3. Under Settings, enter http://kohoike.org/api/elected/ for the URL
  4. Under Request, Add a new parameter named branch. Leave the value blank.
  5. Also under Request, Add a new parameter named house. Leave the value blank.
  6. Also under Request, Add a new parameter named senate. Leave the value blank.
  7. Also under Request, Add a new parameter named congress. Leave the value blank.
  8. Under Test, Enter congress for branch and 1 for congress. Leave the others blank. Click Test.
  9. NOTICE the fields that are returned and their contents. We will be using: Area, Email, Image, Phone, Title, LongDistrict, FullName, EmailLink, PhoneLink, and FullRoom
  10. Click Import as Response.
  11. Close the GetProfileService tab.
D. Create New Page: profileScreen - to display the profile information about the elected official.

  1. Click CREATE NEW on the left and select Page. Enter profileScreen for the name. Click Create Page.
  2. On the profileScreen PROPERTIES window, uncheck the Show Footer check box.
  3. Click the Caption at the top. Name the caption hdrProfileCaption. Change the Text to Full Name. Check the Back Button.
  4. Drag a new Label from the PALETTE and name it lblFullName. Change the Text to Full Name, Font Size to 26, Bold, no Italics, Align Center.
  5. Drag another new Label from the PALETTE and place it under lblFullName. Name it lblTitle. Change the Text to Title, Font Size to 20, Align Center.
  6. Drag another Label under lblTitle and name it lblDistrict. Change the Text to District, Font Size to 18, no Italics, Align Center.
  7. Drag another Label under lblDistrict and name it lblArea. Change the Text to Area, Align Center.
  8. Drag another Link under lblArea and name it lnkPhone. Change the Text to 808-555-1212, no Italics, Align Center.
  9. Drag another Link under lnkPhone and name it lnkEmail. Change the Text to info@hawaii.gov, no Italics, Align Center.
  10. Drag another Label under lnkEmail and name it lblBuilding. Change the Text to Building, no Italics, Align Center.
  11. Drag an Image under lblBuilding and name it imgPicture. Change the first Dimension field to 100% and the second field to auto.
E. Create New Datasource: get_profile - to transfer the fields retrieved from the GetProfile API Service and copy them onto the corresponding pages on the profile screen.

  1. Click the DATA tab. For Add datasource, Select Type Service. Select GetProfileService. Click Add.
  2. Name the datasource get_profile.
  3. Open the new datasource and click on Before send: Mapping.
  4. Click the Storage checkbox and then click to Expand all fields on the left side.
  5. Click Expand all on the right side.
  6. Drag the branch local storage field on the left to the branch query field on the right.
  7. Drag the congress local storage field on the left to the congress query field on the right.
  8. Drag the senate local storage field on the left to the senate query field on the right.
  9. Drag the house local storage field on the left to the house query field on the right.
  10. Click Save and return at the top

  11. With the datasource open, click on Success: Mapping.
  12. Click Expand all on both sides.
  13. Drag the Area field on the left to the lblArea Text field on the right.
  14. Drag the Email field on the left to the lnkEmailLink Text field on the right.
  15. Drag the Image field on the left to the imgPicture Asset field on the right.
  16. Drag the Title field on the left to the lblTitle Text field on the right.
  17. Drag the Phone field on the left to the lnkPhoneLink Text field on the right.
  18. Drag the LongDistrict field on the left to the lblDistrict Text field on the right.
  19. Drag the FullName field on the left to the hdrProfileCaption Text field on the right.
  20. Drag the FullName field on the left to the lblFullName Text field on the right.
  21. Drag the EmailLink field on the left to the lnkEmailLink URL field on the right.
  22. Drag the PhoneLink field on the left to the lnkPhoneLink URL field on the right.
  23. Drag the FullRoom field on the left to the lblBuilding Text field on the right.
  24. Click Save and return at the top
F. Create Load Event Handler on Profile Screen - to invoke the get_profile datasource when the page loads. Upon successful completion, the datasource populates the page fields.

  1. Return to the profileScreen tab. Click the DESIGN tab on the left.
  2. Open the EVENTS tab at the bottom.
  3. For COMPONENT select profileScreen.
  4. For EVENT select Load.
  5. For ACTION select Invoke service.
  6. Choose Datasource get_profile.
  7. Click Save.
G. Create Event Handlers for List Items on Start Screen - to set the requested office storage variable and navigate to the profile screen for the elected office occupying the requested office.

Go back to the Start Screen to set the event handlers for the Elected Official List items. When the user clicks on a List item, it must set the branch storage variable to the chosen office. Then navigate to the Profile Screen to display the selected elected offical.

Open the EVENTS tab at the bottom. Select the Components and specify the following events.
ComponentEventOrdrActionDetails
itmCongressman Click1 Set storage variable Variable name: branch
Value: congress
Click2 Navigate to page Page: profileScreen
Transition effect: slide
itmHouseRep Click1 Set storage variable Variable name: branch
Value: house
Click2 Navigate to page Page: profileScreen
Transition effect: slide
itmMayor Click1 Set storage variable Variable name: branch
Value: mayor
Click2 Navigate to page Page: profileScreen
Transition effect: slide
itmSenator Click1 Set storage variable Variable name: branch
Value: senate
Click2 Navigate to page Page: profileScreen
Transition effect: slide
H. SAVE and TEST your application.
I. Make sure you set your application so I can see it by clicking down the TEST menu at the top. Post a link to your application on your website. Click for a video reminding you how to link your application to your website.

mobileapp-p2.php