Adding the UI

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

Add another button to hold the second Celebrity’s image.
Add text for the second Celebrity’s name.
Add a button that is used to select the gender preference for the user.

Here is the new version of the WouldYa div:

<div data-role="page" id="WouldYa">
    <div data-role="content">
        <h1>Who'd you do?</h1>
        <div class="ui-grid-a">
            <div class="ui-block-a" style="text-align: 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>
            </div>
            <div class="ui-block-b" style="text-align: center">
                <a style="height: 320px" data-role="button">
                    <img id="rightCelebrityButton" class="celebImage" onclick="HoodyoodooViewModel.celebrityWasPicked(this)" src="Images/mystery3.png" alt="Celeb Image"/>
                </a>
                <span id="rightCelebrityLabel" style="color: white;">Celeb Name</span>
            </div>
        </div>
        <h1>
            Pick One!
            <br>
            <img id="playAgainButton" style="display:hidden;" onclick="HoodyoodooViewModel.loadCelebrities()" src="Images/button_go.png" alt="GO"/>
        </h1>
        <img style="display: inline;" id="genderButton" onclick="HoodyoodooViewModel.toggleGender()" src="Images/button_gender_new.png" />
    </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 -->

Now, when you run the application, it will first load and populate the WouldYa view.

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 back-end. If successful, the bottomResponseLabel and bottomResponseLabel labels appear as well as the playAgainButton which will loadCelebrities again when clicked.

You can run the application without making any changes to your backend 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: Part III, Event Handlers