The WouldYa View

Now, set up the Scene to play the game. Start by retrieving a random Celebrity that was saved to the API and displaying it in a new view, which we call a WouldYa view. What’s a WouldYa, you ask? You'll find out in part II of the Tutorial! But for now...

Add the UI

First, we need to add some HTML for the WouldYa view. Add the following div to the top level of the <body> tag in your index.html:

<div data-role="page" id="WouldYa">
    <div data-role="content">
        <h1>Who'd you do?</h1>
        <center>
            <a style="height: 320px" data-role="button">
                <img id="leftCelebrityButton" class="celebImage" onclick="HoodyoodooViewModel.celebrityWasPicked(this)" src="Images/mystery2.png" alt="Celeb Image"/>
            </a>
            <span id="leftCelebrityLabel" style="color: white;">Celeb Name</span>
        </center>
    </div> <!-- /content -->
    <div data-role="footer" data-position="fixed" class="nav-glyphish-example">
        <div data-role="navbar" class="nav-glyphish-example">
            <ul>
                <li><a href="#" id="wypwyt" data-icon="custom">WouldYa</a></li>
                <li><a href="#AddCelebrity" id = "wypact" data-icon="custom">Add Celebrity</a></li>
            </ul>
        </div> <!-- /navbar -->
    </div> <!-- /footer -->
    <div data-role="popup" data-position-to="window" id="wouldYaLoginPopup" data-theme="a" class="ui-content">
        <h1>Please Register/Log In</h1>
        <div data-role="fieldcontain">
            <label for="wouldYaUsernameField">Username</label>
            <input type="text" id="wouldYaUsernameField"/>
        </div>
        <div data-role="fieldcontain">
            <label for="wouldYaPasswordField">Password</label>
            <input type="password" id="wouldYaPasswordField"/>
        </div>
        <a id="wouldYaLoginButton" data-role="button" onclick="HoodyoodooViewModel.login('persistWouldYa')">Log In</a>
    </div> <!-- /Login Popup for WouldYa -->
</div> <!-- /WouldYa -->

JavaScript

Next, we'll modify the init method of our HoodyoodooViewModel yet again. Add the following highlighted lines:

init: function() {
    ff.setDebug(G_DEBUG);
    m_leftCelebrityButton = document.getElementById("leftCelebrityButton");
    m_leftCelebrityLabel = document.getElementById("leftCelebrityLabel");
    m_doneButton = document.getElementById("doneButton");
    m_firstNameField = document.getElementById("firstNameField");
    m_lastNameField = document.getElementById("lastNameField");
    m_addCelebImage = document.getElementById("addCelebImage");
    m_loadingImageElement = document.getElementById("imgAjaxLoader");
    m_celebrity = new Celebrity();
    loader = new FileUploader();
    loader.init();
    this.loadCelebrities();
}

The naming of the members anticipates the addition of another celebrity, which we do in Section II.

Next, we create the methods we need. We want to use a single CRUD method that will retrieve all the objects needed from the API at once.

The getArrayFromUri NoServer method returns all objects found at a specified URI Collection. We will create the loadCelebrities method to test this out. Add the following member to your HoodyoodooViewModel:

loadCelebrities: function() {
    self.showLoading(true);
    ff.getArrayFromUri("/ff/resources/Celebrity",
    function(celebArray) {
        var leftCelebrity = celebArray[Math.floor(Math.random() * celebArray.length)];
        self.showLoading(false);
        if(leftCelebrity) {
            m_leftCelebrity = new Celebrity(leftCelebrity);
            m_leftCelebrityButton.setAttribute('src', m_leftCelebrity.imageSrc);
            m_leftCelebrityLabel.innerHTML = leftCelebrity.firstName + " " + leftCelebrity.lastName;
        }
    }, function(statusCode, responseText){
        self.showLoading(false);
        console.error("Error "+ statusCode + ": " + JSON.parse(responseText).statusMessage);
    }
    );
}

This code does the following:

Retrieves all of the Celebrity objects from the API anonymously and receives the results in celebArray.
Selects a random Celebrity object from celebArray and sets it to m_leftCelebrity.
Sets the text ofm_leftCelebrityLabel to the concatenation of the celebrity's first and last names.
Sets the background image for m_leftCelebrityButton to the image data from m_leftCelebrity.

Side note: Getting all objects at once is a very expensive operation for your API, from both client- and network-resource perspectives. We will explore how to use queries in the Tutorial Part II, to address this important development issue.

We also need to define a celebrityWasPicked method, which is called when a celebrity button is clicked:

celebrityWasPicked: function(sender) {
    self.loadCelebrities();
}

For now, the method simple reloads the celebrities.

When you run the app, it loads and populates the WouldYaViewController Scene. Then, if everything is working right, it successfully retrieves a Celebrity object, randomly, and populates the UI.

Side note: You may notice, when this Scene loads, the end-user is not yet authenticated. Until the end-user attempts to affect data on the API, they may retrieve objects anonymously.

Summary

In this tutorial, we have stored our very own Celebrity class we created as well as authentication without having to translate in and out of NSDictionary objects or use some other third party object models. We have used both synchronous as well as asynchronous methods within the tests to make sure they operate correctly.

Another key concept that we have demonstrated is the power of creating a complex object. In this case, an object with a blob (an image) that is seamlessly persisted and retrieved from the API. There is virtually no limit to the objects that you can exchange with your API. In fact, one could easily persist HoodyoodooViewModel if one wanted to.

We have also built a view that Creates a Celebrity and a second one that Retrieves it. The Celebrity view shows a nice pattern for authentication and the WouldYa view shows that you can retrieve objects from NoServer APIs anonymously, which is very convenient for the developer and can greatly improve the end user experience with your application.

NEXT: Tutorial Part II, Using Queries