[Jim Hoskins] In the previous two Master Classes, we used Backbone.js

and jQuery Mobile to create a note-taking application

that we can use on our mobile devices.

You know what would be a really neat feature to add to this?

The ability to take notes [snaps fingers]

on location!

[?music?]

So the next step in our application is we're going to want to add Geolocation capabilities

to our notes.

Basically, what we want to be able to do is anytime we create a note

is to be able to tag it with the current latitude and longitude

of our device or of our computer.

So right now, we're going to be working off of what we completed

in the last two Master Classes.

So basically, we have this application, we can create new notes,

and basically, all we can do is input a title and a body

and save it, and we'll be able to look at our notes through our interface right here,

so we can see the title and body of the note.

So what we want to be able to do is attach the metadata

with a latitude and longitude and be able to display not only the coordinates

on this page but even a map with a pinpoint on it so you can see

exactly where that note was taken.

So the first major thing we want to change is the form for creating a new note.

Basically, what I want to be able to do

is decide whether or not we're going to tag a note

with a specific location.

In some cases, I may not want my note to be associated with a location, so in this form,

I'd like to be able to say yes or no.

So what I'd like to be able to do is use the jQuery UI switch.

jQuery Mobile Framework http://jquerymobile.com/demos/1.0a4.1/a

Now, we can take a look at these different components by going down to Form elements

in the documentation for jQuery Mobile.

And if we take a look at the Flip toggle switch, we can see this gives us

a nice iPhone-esque style switch where we can switch it on and off

for saying that we do or do not want to use Geolocation.

Now, the syntax for this is very similar to our other form fields.

We're going to create a field container and a label

and the actual element that will describe our switch here

is going to be a select element with two options.

Let's go ahead and see if we can add this to our New Note form.

Now, I'm going to go over to our code

and since we're starting off with the actual form HTML,

I'm going to open up index.html and let's find the section of code

where we defined our form,

and that is right here.

So here we can see our normal jQuery Mobile page

and its header and its content and the form is defined right in here.

We have our field container for our title

and for our body, so beneath it, we want to go ahead and add the field

for our Geolocation.

So I'm going to start off with a div

and I'm going to give it a data-role="fieldcontain"

and let's close off our /div.

Then we want to give it our <label>

and we're going to call this field "locate"

and we'll give the label value Tag With Location</label>.

And now for the actual select value, we'll do a <select> tag here,

give an id="locate" so it matches up with our label.

We're going to give it a name="locate" so we can grab its data in the code.

And then, the important part is to give it the data-role of slider,

and this will tell jQuery Mobile that we want this select field to be rendered as a slider.

We'll give it data-role="slider">.

</select>

So now we just have to give it the yes and no values for our actual slider,

so we'll give it two option tags:

one with the value of "no" which I want to be the default,

value="no">No</option>

and one with the value="yes">Yes</option>.

And that will complete our slider.

So let's go ahead and go back to our code and see if it works.

I'm going to start debugging in Chrome because it's going to be a little bit faster

and easier for us to iterate, but every once in a while, we'll go back to the iPhone simulator

and test it out to see if it looks good in a mobile device.

So I'm switching over to Chrome, and I'll switch back to localhost here and refresh,

and I'm going to pull up our JavaScript console just to make sure

that no errors are occurring.

And when I pull up the New Note,

we have our Title field, our Body field, and our Tag With Location,

which we can flip on and off.

So let's take a look at it in our actual device simulator here,

and if I pull up the New Note, we get Title, Body, and Tag With Location,

which we can flip on and off and it defaults to Off, or No.

So if we actually save this,

even if we turn on Yes, it's not going to actually save any data.

What we need to do now is go in to our code and detect whether or not

the slider was set to Yes.

In that case, we'll go ahead and add our Geolocation data to our note.