1
00:00:00,000 --> 00:00:04,000
[Jim Hoskins] In the previous two Master Classes, we used Backbone.js

2
00:00:04,000 --> 00:00:07,000
and jQuery Mobile to create a note-taking application

3
00:00:07,000 --> 00:00:09,000
 that we can use on our mobile devices.

4
00:00:09,000 --> 00:00:12,000
You know what would be a really neat feature to add to this?

5
00:00:12,000 --> 00:00:14,000
The ability to take notes [snaps fingers]

6
00:00:14,000 --> 00:00:16,000
on location!

7
00:00:16,000 --> 00:00:28,000
[?music?]

8
00:00:28,000 --> 00:00:34,000
So the next step in our application is we're going to want to add Geolocation capabilities

9
00:00:34,000 --> 00:00:35,000
to our notes.

10
00:00:35,000 --> 00:00:38,000
Basically, what we want to be able to do is anytime we create a note

11
00:00:38,000 --> 00:00:42,000
is to be able to tag it with the current latitude and longitude

12
00:00:42,000 --> 00:00:45,000
of our device or of our computer. 

13
00:00:45,000 --> 00:00:48,000
So right now, we're going to be working off of what we completed 

14
00:00:48,000 --> 00:00:50,000
in the last two Master Classes.

15
00:00:50,000 --> 00:00:57,000
So basically, we have this application, we can create new notes,

16
00:00:57,000 --> 00:01:01,000
and basically, all we can do is input a title and a body

17
00:01:01,000 --> 00:01:06,000
and save it, and we'll be able to look at our notes through our interface right here,

18
00:01:06,000 --> 00:01:10,000
so we can see the title and body of the note.

19
00:01:10,000 --> 00:01:13,000
So what we want to be able to do is attach the metadata 

20
00:01:13,000 --> 00:01:17,000
with a latitude and longitude and be able to display not only the coordinates 

21
00:01:17,000 --> 00:01:21,000
on this page but even a map with a pinpoint on it so you can see

22
00:01:21,000 --> 00:01:26,000
exactly where that note was taken.

23
00:01:26,000 --> 00:01:30,000
So the first major thing we want to change is the form for creating a new note.

24
00:01:30,000 --> 00:01:32,000
Basically, what I want to be able to do

25
00:01:32,000 --> 00:01:35,000
is decide whether or not we're going to tag a note

26
00:01:35,000 --> 00:01:37,000
with a specific location.

27
00:01:37,000 --> 00:01:42,000
In some cases, I may not want my note to be associated with a location, so in this form, 

28
00:01:42,000 --> 00:01:45,000
I'd like to be able to say yes or no.

29
00:01:45,000 --> 00:01:49,000
So what I'd like to be able to do is use the jQuery UI switch.

30
00:01:49,000 --> 00:01:51,000
jQuery Mobile Framework http://jquerymobile.com/demos/1.0a4.1/a

31
00:01:51,000 --> 00:01:55,000
Now, we can take a look at these different components by going down to Form elements

32
00:01:55,000 --> 00:01:57,000
in the documentation for jQuery Mobile.

33
00:01:57,000 --> 00:02:01,000
And if we take a look at the Flip toggle switch, we can see this gives us

34
00:02:01,000 --> 00:02:05,000
a nice iPhone-esque style switch where we can switch it on and off

35
00:02:05,000 --> 00:02:11,000
for saying that we do or do not want to use Geolocation.

36
00:02:11,000 --> 00:02:14,000
Now, the syntax for this is very similar to our other form fields.

37
00:02:14,000 --> 00:02:17,000
We're going to create a field container and a label

38
00:02:17,000 --> 00:02:21,000
and the actual element that will describe our switch here

39
00:02:21,000 --> 00:02:24,000
is going to be a select element with two options.

40
00:02:24,000 --> 00:02:30,000
Let's go ahead and see if we can add this to our New Note form.

41
00:02:30,000 --> 00:02:33,000
Now, I'm going to go over to our code 

42
00:02:33,000 --> 00:02:36,000
and since we're starting off with the actual form HTML,

43
00:02:36,000 --> 00:02:42,000
I'm going to open up index.html and let's find the section of code 

44
00:02:42,000 --> 00:02:46,000
where we defined our form,

45
00:02:46,000 --> 00:02:49,000
and that is right here.

46
00:02:49,000 --> 00:02:53,000
So here we can see our normal jQuery Mobile page

47
00:02:53,000 --> 00:02:59,000
and its header and its content and the form is defined right in here.

48
00:02:59,000 --> 00:03:02,000
We have our field container for our title

49
00:03:02,000 --> 00:03:07,000
and for our body, so beneath it, we want to go ahead and add the field

50
00:03:07,000 --> 00:03:14,000
for our Geolocation.

51
00:03:14,000 --> 00:03:18,000
So I'm going to start off with a div 

52
00:03:18,000 --> 00:03:24,000
and I'm going to give it a data-role="fieldcontain"

53
00:03:24,000 --> 00:03:28,000
and let's close off our /div.

54
00:03:28,000 --> 00:03:33,000
Then we want to give it our <label>

55
00:03:33,000 --> 00:03:38,000
and we're going to call this field "locate"

56
00:03:38,000 --> 00:03:47,000
and we'll give the label value Tag With Location</label>.

57
00:03:47,000 --> 00:03:52,000
And now for the actual select value, we'll do a <select> tag here,

58
00:03:52,000 --> 00:03:59,000
give an id="locate" so it matches up with our label.

59
00:03:59,000 --> 00:04:04,000
We're going to give it a name="locate" so we can grab its data in the code.

60
00:04:04,000 --> 00:04:08,000
And then, the important part is to give it the data-role of slider,

61
00:04:08,000 --> 00:04:13,000
and this will tell jQuery Mobile that we want this select field to be rendered as a slider.

62
00:04:13,000 --> 00:04:19,000
We'll give it data-role="slider">.

63
00:04:19,000 --> 00:04:23,000
</select>

64
00:04:23,000 --> 00:04:28,000
So now we just have to give it the yes and no values for our actual slider,

65
00:04:28,000 --> 00:04:30,000
so we'll give it two option tags:

66
00:04:30,000 --> 00:04:35,000
one with the value of "no" which I want to be the default,

67
00:04:35,000 --> 00:04:40,000
value="no">No</option>

68
00:04:40,000 --> 00:04:52,000
and one with the value="yes">Yes</option>.

69
00:04:52,000 --> 00:04:55,000
And that will complete our slider.

70
00:04:55,000 --> 00:04:58,000
So let's go ahead and go back to our code and see if it works.

71
00:04:58,000 --> 00:05:02,000
I'm going to start debugging in Chrome because it's going to be a little bit faster 

72
00:05:02,000 --> 00:05:06,000
and easier for us to iterate, but every once in a while, we'll go back to the iPhone simulator

73
00:05:06,000 --> 00:05:10,000
and test it out to see if it looks good in a mobile device. 

74
00:05:10,000 --> 00:05:14,000
So I'm switching over to Chrome, and I'll switch back to localhost here and refresh,

75
00:05:14,000 --> 00:05:18,000
and I'm going to pull up our JavaScript console just to make sure

76
00:05:18,000 --> 00:05:20,000
that no errors are occurring.

77
00:05:20,000 --> 00:05:26,000
And when I pull up the New Note, 

78
00:05:26,000 --> 00:05:31,000
we have our Title field, our Body field, and our Tag With Location,

79
00:05:31,000 --> 00:05:34,000
which we can flip on and off. 

80
00:05:34,000 --> 00:05:39,000
So let's take a look at it in our actual device simulator here,

81
00:05:39,000 --> 00:05:43,000
and if I pull up the New Note, we get Title, Body, and Tag With Location,

82
00:05:43,000 --> 00:05:49,000
which we can flip on and off and it defaults to Off, or No.

83
00:05:49,000 --> 00:05:58,000
So if we actually save this, 

84
00:05:58,000 --> 00:06:02,000
even if we turn on Yes, it's not going to actually save any data.

85
00:06:02,000 --> 00:06:06,000
What we need to do now is go in to our code and detect whether or not 

86
00:06:06,000 --> 00:06:08,000
the slider was set to Yes.

87
00:06:08,000 --> 00:06:14,000
In that case, we'll go ahead and add our Geolocation data to our note.