Phone_81_Development_for_Absolute_Beginners

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

Windows Phone 8.1 Development for Absolute Beginners – Page 160

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

Windows Phone 8.1 Development for Absolute Beginners – Page 161

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 …

Windows Phone 8.1 Development for Absolute Beginners – Page 162

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

Windows Phone 8.1 Development for Absolute Beginners – Page 163

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.

Windows Phone 8.1 Development for Absolute Beginners – Page 164

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 …

Windows Phone 8.1 Development for Absolute Beginners – Page 165

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

Windows Phone 8.1 Development for Absolute Beginners – Page 166

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:

Windows Phone 8.1 Development for Absolute Beginners – Page 167

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.

Windows Phone 8.1 Development for Absolute Beginners – Page 168

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:

Windows Phone 8.1 Development for Absolute Beginners – Page 169