Part 14 - Exercise: Whack-a-Bob App

Download the source code for this lesson at http://absolutebeginner.codeplex.com/

In this lesson we're going to take what we've learned previously and we're going to create an entire app, a very silly little game using the WebView App project template featuring the WebView control.  We'll base our game on this app that I've built for the Javascript Fundamentals for Absolute Beginners series on Channel9.  You can find it here:

https://channel9.msdn.com/Series/Javascript-Fundamentals-Development-for-Absolute-Beginners/jQuery-Events-16

In that lesson I explained jQuery Events and to demonstrate the concepts of that lesson I created the Click-a-Bob game.  It features a little cartoon “bob head” and you keep clicking on the cartoon bob head and it gives you a score.  You can reset the score by hovering over the Start Over button on the right.


Important: Make sure you download the assets that are available for this lesson in the Lesson14.zip file.  Inside of that .zip file there should be an Assets folder containing the icons, the images, the source code, etc. required to follow along and complete this lesson.



Note: This project was inspired by the Clow Clicker app.  The guy who built it just wanted to parody some of those mindless social games and, to his surprise, it became an instant success.  People just kept clicking the cow to get more click points.

http://en.wikipedia.org/wiki/Cow_Clicker

Our plan is to take the Click-a-Bob and turn it into a Phone app called Whack-a-Bob.

To begin, we’ll create a new (1) WebView App project (2) named WhackABob and (3) clicking OK:



The first task is to copy over all of the assets and code from the Assets folder.  To begin I’ll select all of the current files in the project’s Assets folder:



… and select the Delete key on my keyboard.  It will ask me to confirm the deletion and I’ll select the OK button.



Next, I’ll select all of the numerical bob head images for use as app tiles in Windows Explorer and drag and drop these into the Assets folder in Visual Studio’s Solution Explorer:
           


Your Assets folder should now look like this:



Next, I’ll create a sub-folder called scripts and images.  I’ll right-click on the Html folder and select New Folder:



And name the first folder: scripts



I’ll repeat, this time naming the sub-folder: images



Next, I’ll (1) drag the bobtabor.jpg image from Windows Explorer into (2) the new images sub-folder in Visual Studio:



In preparation for copying the HTML from the original web page into the new index.html page in Visual Studio, I’ll right-click the C9JS_16.html file in Windows Explorer and select Open with > Notepad.



Next, I’ll (1) drag and drop the script16.js file from Windows Explorer into (2) the new scripts sub-folder in Visual Studio’s Solution Explorer:



Finally, I’ll (1) drag and drop the style16.css file from Windows Explorer into (2) the css sub-folder in Visual Studio’s Solution Explorer:


When finished, your Solution Explorer should have the same file structure as mine:



Next, we’ll begin to edit the index.html page by copying HTML from the original C9JS_16.html page (which we opened in Notepad).  I'll highlight and copy the references to jQuery to our Script16.js and to our style16.css files …



… and paste into the head section of the index.html document:



(1) I want to make sure I reference the correct locations for these files so to make sure I'm referencing the scripts folder, and (2) I’ll remove the reference to jquery in the CDN.



When you're building an app on the phone you don't want to include any references to outside resources even though jQuery is best served up from a Content Delivery Network when building web page consumed by web browsers over the internet.  So, we’;; copy jQuery down into our local project and reference it from there.

If you go to:

http://jquery.com/download

… you can download the compressed version, the production version of jQuery, the latest version that's available. At the time of publication, it is 2.1.0.



If you attempt to save this file, Internet Explorer gives you a little warning here.  "Hey, this file can't be verified. Be careful about this."  Click Save:



Once saved locally, I’ll drag it into my scripts sub-folder …



…  and for ease of working with it I'm just going to rename this, just jquery.js:



So then in my HTML what I'll do is reference it as scripts/jQuery.js:



Back to my original HTML, I'm going to select all the HTML in the body and copy it from Notepad …



… and paste it beneath the title div in the index.html page in Visual Studio:



Furthermore, I'm going to edit the head and title div (beneath the body tag), I’ll change all text from "clicked" to "whacked", and I’ll modify the image location to the images/bobtabor.jpg.



Before we take our app for a test run, I’ll modify the branding elements.  You’ll recall earlier we copied the sized “cartoon bob head” images into the Assets folder.  To utilize these …



(1) Open the package.appxmanifest
(2) Select the Visual Assets tab
(3) Select the Square 71x71 Logo page on the left
(4) Under the Scale 100 image, click the ellipsis button …

This will allow you to choose an image from your hard drive.  Navigate to the Assets folder for the project and (1) select the 71x71.png file, then (2) select the Open button.



Repeat those basic steps for (1) the 150x150 Logo, (2) the Wide 310x150 Logo, (3) the Square 44x44 Logo, and (4) the Splash Screen.  In each case, make sure to set the “Scale 100” image.



Now we’re ready to test what we have so far.  Select to debug the app in the Emulator:



And while it’s not perfect (yet) we can see that with minimal changes, we’re able to re-create the majority of the app complete with jquery enabled interactive functionality.



However, there are a few annoyances.  For example, I accidentally am selecting text on the Start Over button:



… ideally, I would not be able to do that.  Furthermore, if I attempt to drag the entire web page down, I can pull the page away from the edges.  That’s something I want to disable as well.



Clicking the emulator’s Start button, then navigating to the Apps page, I can see that my logo appears next to the name of the app.  However, the name is not quite right.  I would like to change the text to: Whack-a-Bob



If I hold down on the app’s entry, the context menu appears allowing me to test how the tiles will look when pinned to the start menu:



By default, it looks good however I would prefer if the app’s title appeared in text under the logo (like the other apps on my phone).



If I hold down on the tile, I can modify the various sizes of the app tile to test those as well.



I stop debugging and begin to fix a few of the issues with my app.

To begin, I’ll modify the display name that appears on the app and the start page tiles of the phone by going to the package.appxmanifest and modifying the Application tab’s Display name property:



To add the display name under the pinned tiles on the Phone’s Start page, on the Visual Assets tab, I’ll (1) select the Square 71x71 Logo page, and (2) put a check mark next to both the Show Name check boxes:



Next, I’ll want to modify the index.html’s layout to properly fit everything on the page, modify the text size, etc. Appropriate for a Phone app (as opposed to it’s original purpose as a simple web page).  I’ll modify the #game id, removing the specific width (200px) replacing it with 100%, and floating to the left instead of the right:



The Start Over button requires some major changes.  I change virtually every CSS property like so (in  the #startover id’s css definition):



Next, in the index.html, I want to move the Start Over button (1) from the bottom, to (2) above the game div:



To fix the text selection issue and the drag / movement issue, I’ll modify the phone.css page’s html / body definition adding the -ms-touch-action: none; and -ms-user-select: none; settings like so:



This time when I re-run the app, I get the results I desire:



Before we conclude, Matthias wanted me to point out that if you're going to do a lot of work with jQuery inside of Visual Studio, you might prefer to install using Nuget package “jQuery vsdoc”.  This will give you IntelliSense for jQuery, syntax highlighting, and other helpful additions inside of Visual Studio.  You'd get the same experience with Javascript and with all the jQuery methods and selectors and things of that nature as you get with XAML and C#.

https://www.nuget.org/packages/jQuery/2.1.0