iOS Tutorial Part II

Adding the UI

Next, we add the necessary UI components to the WouldYaViewController. We will add the following elements:

1. Add a UIButton to hold the second Celebrity’s image.
2. Add a UILabel for the second Celebrity’s name.
3. Add a UIButton to play the game.
4. Add a UIButton that is used to select the gender preference for the user.

And the Scene should look like this:

Lastly, make sure and connect up your UIComponents in the MainStoryboard.storyboard  for the WouldYaViewController elements. Note - some of these were set in Tutorial Part I, but we will include them here again for convenience

leftCelebrityLabel
Referencing Outlet to WouldYaViewController/leftCelebrityLabel

leftCelebrityButton
Referencing Outlet to WouldYaViewController/leftCelebrityButton Sent Events/ Touch Down to WouldYaViewController/celebrityWasPicked

rightCelebrityLabel
Referencing Outlet to WouldYaViewController/rightCelebrityLabel

rightCelebrityButton
Referencing Outlet to WouldYaViewController/rightCelebrityButton Sent Events/ Touch Down to WouldYaViewController/celebrityWasPicked

genderButton
Referencing Outlet to WouldYaViewController/genderButton Sent Events/ Touch Down to WouldYaViewController/toggleGender

playAgainButton
Referencing Outlet to WouldYaViewController/playAgainButton
Sent Events/ Touch Down to WouldYaViewController/playAgain

Now, when you run the application, it will first load and populate the WouldYaViewController Scene.

Final result - successfully retrieved a random Celebrity, a second random and unique Celebrity and populated the UI:

Note: when this Scene loaded, we are not authenticated which shows that you are able to retrieve objects anonymously.

When you click on a Celebrity button with image (either the topCelebrityButton or bottomCelebrityButton), then a WouldYa is created and persisted to your app's API. If successful, the bottomResponseLabel and bottomResponseLabel labels appear as well as the playAgainButton which will loadCelebrities again when clicked.

Final result - you can run the application without making any changes to your API and the NoServer Framework will adapt to you new code. You have now successfully created a WouldYa, and populated the UI for replaying the game:

Summary

In this part of the tutorial, we have explored how to create simple and more complex queries that will greatly enhance the performance and reliability of our application by reducing the amount of data handling the client is required to do by using simple language queries to filter result sets down to the information that the client needs.

Next, we will begin using events to extend the application further in Tutorial Part III.

NEXT: Part III, Event Handlers