Part 14 - Exercise: Whack-a-Bob App

Sign in to queue

Description

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.

clip_image002
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.

clip_image004

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:

clip_image006

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:

clip_image008

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

clip_image010

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:
           
clip_image012

Your Assets folder should now look like this:

clip_image014

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

clip_image016

And name the first folder: scripts

clip_image018

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

clip_image020

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

clip_image022

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.

clip_image024

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:

clip_image026

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:

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

clip_image030

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 …

clip_image032

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

clip_image034

(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.

clip_image036

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.

clip_image038

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:

clip_image040

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

clip_image042

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

clip_image044

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

clip_image046

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

clip_image048

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

clip_image050

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.

clip_image052

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 …

clip_image054

(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.

clip_image056

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.

clip_image058

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

clip_image060

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.

clip_image062

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

clip_image064

… 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.

clip_image066

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

clip_image068

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:

clip_image070

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).

clip_image072

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

clip_image074

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:

clip_image076

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:

clip_image078

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:

clip_image080

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

clip_image082

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

clip_image084

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:

clip_image086

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

clip_image088

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

clip_image090






Embed

Download

Download this episode

The Discussion

  • User profile image
    juan carlos or

    Hi, i have seen the video and i have a question can you comunicate the html code with c# code, for example, you make a form and the user must be put his name, some form of that name is received by c# code?

    Thanks

Add Your 2 Cents