Phone_81_Development_for_Absolute_Beginners

… and be able to navigate to Microsoft’s home page:

Recap

Those are the basics of using the WebViewControl and the Web View Project template. Note that you’re not limited to just HTML and CSS, you can also add JavaScript and jQuery and I’ll demonstrate how to do that in the next lesson with a more full-fledged example featuring an interactive mini-game.

Windows Phone 8.1 Development for Absolute Beginners – Page 150

Windows Phone 8.1 Development for Absolute Beginners – Page 151

Lesson 14: Exercise: Whack-a-Bob App

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:

http://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.

Windows Phone 8.1 Development for Absolute Beginners – Page 152

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:

Windows Phone 8.1 Development for Absolute Beginners – Page 153

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:

Windows Phone 8.1 Development for Absolute Beginners – Page 154

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

Windows Phone 8.1 Development for Absolute Beginners – Page 155

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

Windows Phone 8.1 Development for Absolute Beginners – Page 156

Next, I’ll (1) drag the bobtabor.jpg image from Windows Explorer into (2) the new images subfolder 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.

Windows Phone 8.1 Development for Absolute Beginners – Page 157

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 subfolder in Visual Studio’s Solution Explorer:

Windows Phone 8.1 Development for Absolute Beginners – Page 158

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 …

Windows Phone 8.1 Development for Absolute Beginners – Page 159