Update the Client Code

In order to use this new extension method, you need to do add a matching StatsObject to your project.

function StatsObject(data) {
if(data) {
    this.clazz = "StatsObject";
    this.totalUsers = new Number(data.totalUsers);
    this.totalCelebrities = new Number(data.totalCelebrities);
    this.totalRatings = new Number(data.totalRatings);
    this.yourRatings = new Number(data.yourRatings);
} else {
    this.clazz = "StatsObject";
    this.totalUsers = null;
    this.totalCelebrities = null;
    this.totalRatings = null;
    this.yourRatings = null;
}
return this;
}

You can then call the extension using the standard CRUD url pattern.

statsObject = ff.getObjFromUri("/ff/ext/Stats");

We also need to update the init method. Add the following:

m_ratingCountLabel = document.getElementById("ratingCountLabel");
m_userCountLabel = document.getElementById("userCountLabel");
m_celebrityCountLabel = document.getElementById("celebrityCountLabel");
m_yourRatingCountLabel = document.getElementById("yourRatingCountLabel");

Next, we need to add a new method to retrieve the data. We'll add this as a function within the getTopCelebrity method of HoodyoodooViewModel. Here's the new version of the method:

getTopCelebrity: function() {
    self.showLoading(true);
    ff.getObjFromUri("/TopCelebrity",
            function(topCeleb) {
                self.showLoading(false);
                if(topCeleb) {
                    var tc = new Celebrity(topCeleb);
                    m_topCelebImage.setAttribute('src', tc.imageSrc);
                    m_topCelebrityLabel.innerHTML = tc.firstName + " " + tc.lastName;
                    if(tc.selectedCount) m_selectedCountLabel.innerHTML = tc.selectedCount;
                    if(tc.rejectedCount) m_rejectedCountLabel.innerHTML = tc.rejectedCount;
                } else if(G_DEBUG) console.log("getTopCelebrity() found no top celebrity");
                getStats();
            }, function(statusCode, responseText){
                self.showLoading(false);
                console.error("Error "+ statusCode + ": " + JSON.parse(responseText).statusMessage);
                getStats();
            }
    );
    function getStats() {
        if(!ff.loggedIn()) {
            $("#topCelebLoginPopup").popup('open');
        } else {
            self.showLoading(true);
            ff.getObjFromExtension("/ff/ext/Stats",
                    function(statsObject) {
                        self.showLoading(false);
                        m_ratingCountLabel.innerHTML = statsObject.totalRatings;
                        m_userCountLabel.innerHTML = statsObject.totalUsers;
                        m_celebrityCountLabel.innerHTML = statsObject.totalCelebrities;
                        m_yourRatingCountLabel.innerHTML = statsObject.yourRatings;
                    }, function(statusCode, responseText){
                        self.showLoading(false);
                        console.error("Error "+ statusCode + ": " + JSON.parse(responseText).statusMessage);
                    }
            );
        }
    }
}

Add the UI

Now that we have our StatsObject, let’s add in the UI components to display the results. To do this, we just have to add a few lines to our TopCelebrity page. Here's the code for the page:

<div data-role="page" id="TopCelebrity">
    <div data-role="content">
        <h1>Top Celebrity<br><br>
            <img id="topCelebImage" class="celebImage" src="Images/mystery3.png" alt="Celeb Image"/>
            <br>
            <br>
            <div id="topCelebrityInfo" style="color: white; display: hidden;">
                <span id="topCelebrityLabel" style="color: white;">Top Celeb Name</span>
            </div>
        </h1>
        <h3 style="color: white; text-align: center; display: hidden;">Was selected   <span id="selectedCountLabel">0</span></h3>
        <h3 style="color: white; text-align: center; display: hidden;">Was rejected   <span id="rejectedCountLabel">0</span></h3>
        <h3 style="color: white; text-align: center; display: hidden;">Total Ratings   <span id="ratingCountLabel">0</span></h3>
        <h3 style="color: white; text-align: center; display: hidden;">Total Users   <span id="userCountLabel">0</span></h3>
        <h3 style="color: white; text-align: center; display: hidden;">Total Celebrities   <span id="celebrityCountLabel">0</span></h3>
        <h3 style="color: white; text-align: center; display: hidden;">Your Ratings   <span id="yourRatingCountLabel">0</span></h3>
    </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="#WouldYa" id="tcpwyt" data-icon="custom">WouldYa</a></li>
                <li><a href="#AddCelebrity" id="tcpact" data-icon="custom">Add Celebrity</a></li>
                <li><a href="#" onclick="HoodyoodooViewModel.getTopCelebrity()"  id="tcptct" data-icon="custom">Top Celebrity</a></li>
            </ul>
        </div> <!-- /navbar -->
    </div> <!-- /footer -->
    <div data-role="popup" data-position-to="window" id="topCelebLoginPopup" data-theme="a" class="ui-content">
        <h1>Please Register/Log In</h1>
        <div data-role="fieldcontain">
            <label for="topCelebUsernameField">Username</label>
            <input type="text" id="topCelebUsernameField"/>
        </div>
        <div data-role="fieldcontain">
            <label for="topCelebPasswordField">Password</label>
            <input type="password" id="topCelebPasswordField"/>
        </div>
        <a id="topCelebrityLoginButton" data-role="button" onclick="HoodyoodooViewModel.login('getTopCelebrity')">Log In</a>
    </div> <!-- /Login Popup for TopCelebrity -->
</div> <!-- /TopCelebrity -->

That’s it!

Now, as soon as ratings are being captured in WouldYa’s, then we can call the server extension that will aggregate the statistics on the fly and return a StatsObject that can be used to populate the scene.

Final result: We successfully created a StatsObject on the backend from an server extension that updates the corresponding UI components.

Have fun!