HTML5/JS Tutorial Part III
Add the TopCelebrity Scene
Note: No client code is required for an event handler as it creates only API functionality and cannot be accessed by the client directly. However, the data that is created in the TopCeleb resource can be accessed by the client.
Since the TopCeleb resource uses the Celebrtiy object type, there is no need to define another class in the client code, To use it in the application, we need to add a new Scene, and then populate it with data that is created for us by the event handler in TopCeleb.
First, we add a new view to our HTML, and add nav buttons to the other views so we can get to it. Then, we add the supporting JavaScript to populate it.
Open index.html. First, we need to modify our styles a little bit. Here is the new version of the <style> tag in the document head:
<style>
label { color: white}
h1 { color: white; text-align: center; }
.ui-page { background: black; }
.ui-field-contain { text-align: center; }
.nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
.nav-glyphish-example .ui-btn .ui-icon { width: 30px !important; height: 30px !important; margin-left: -15px !important; box-shadow: none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
#wypwyt .ui-icon, #acpwyt .ui-icon, #tcpwyt .ui-icon{ background: url(Images/button_play_gray.png) 50% 50% no-repeat; background-size: 32px 32px; }
#wypact .ui-icon, #acpact .ui-icon, #tcpact .ui-icon { background: url(Images/button_add_gray.png) 50% 50% no-repeat; background-size: 32px 32px; }
#wyptct .ui-icon, #acptct .ui-icon, #tcptct .ui-icon { background: url(Images/button_top_celebrity.png) 50% 50% no-repeat; background-size: 32px 32px; }
.imgAjaxLoader{position: fixed;top: 50%;left: 50%;margin-top: -24px;margin-left: -24px;z-index: 100;display: none;}
.celebImage{max-width:200px;max-height:300px;}
#fileUploaderDropDiv{margin:0;padding:0;}
</style>Now, we will add a nav button to each of our existing pages, so we can get to the new view we are about to make. In the footer of the WouldYa page, the navbar div should now read:
<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>
<li><a href="#TopCelebrity" id = "wyptct" onclick="HoodyoodooViewModel.getTopCelebrity()" data-icon="custom">Top Celebrity</a></li>
</ul>
</div> <!-- /navbar -->And in the footer of the AddCelebrity page, the navbar div should now be:
<div data-role="navbar" class="nav-glyphish-example">
<ul>
<li><a href="#WouldYa" id="acpwyt" data-icon="custom">WouldYa</a></li>
<li><a href="#" id="acpact" data-icon="custom">Add Celebrity</a></li>
<li><a href="#TopCelebrity" onclick="HoodyoodooViewModel.getTopCelebrity()" id="acptct" data-icon="custom">Top Celebrity</a></li>
</ul>
</div> <!-- /navbar -->Finally, we add the new view page. Add the following:
<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>
</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 -->We now need to modify our view model. First, we add the following instance variables to HoodyoodooViewModel:
var m_topCelebImage = null;
var m_topCelebrityLabel = null;
var m_selectedCountLabel = null;
var m_rejectedCountLabel = null;Next, add the following to the view model's init method:
m_topCelebrityLabel = document.getElementById("topCelebrityLabel");
m_selectedCountLabel = document.getElementById("selectedCountLabel");
m_rejectedCountLabel = document.getElementById("rejectedCountLabel");
m_topCelebImage = document.getElementById("topCelebImage");Finally, add a new method to retrieve the top celebrity:
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");
}, function(statusCode, responseText){
self.showLoading(false);
console.error("Error "+ statusCode + ": " + JSON.parse(responseText).statusMessage);
}
);
}That’s it!
Now, as soon as ratings are being captured in WouldYa’s, then the topCeleb will be populated by the event handler and can be viewed in this scene.
Final result: We successfully created a TopCelebrity on the backend from an event handler. We have also added a scene to display the results.
