1
00:00:00,000 --> 00:00:03,000
[Forms]

2
00:00:03,000 --> 00:00:05,000
[?music?]

3
00:00:05,000 --> 00:00:09,000
[Jim Hoskins] So now we've created sort of our scaffold for our first page.

4
00:00:09,000 --> 00:00:13,000
We have different buttons for creating new and links that will eventually

5
00:00:13,000 --> 00:00:17,000
dive into different lists of Notes in our application.

6
00:00:17,000 --> 00:00:22,000
Let's actually take a look at it in the Simulator to make sure that it still looks good.

7
00:00:22,000 --> 00:00:25,000
It looks pretty much the same; we have our new buttons,

8
00:00:25,000 --> 00:00:27,000
we have our inset lists.

9
00:00:27,000 --> 00:00:30,000
Now, of course, we're not actually going to get anywhere with them,

10
00:00:30,000 --> 00:00:32,000
but we can see it works in both orientations

11
00:00:32,000 --> 00:00:35,000
and it's pretty flexible.

12
00:00:35,000 --> 00:00:39,000
Now, the next thing in our application is we want to start being able to have Notes

13
00:00:39,000 --> 00:00:41,000
actually in our application.

14
00:00:41,000 --> 00:00:43,000
But before we can really do that, we need to create a form

15
00:00:43,000 --> 00:00:47,000
to input those Notes, and then we can actually start with the business 

16
00:00:47,000 --> 00:00:51,000
of creating the logic to save them and then display them later.

17
00:00:51,000 --> 00:00:56,000
So I think our first course of action should be working on making this New Note button work

18
00:00:56,000 --> 00:00:58,000
and bring up a form. 

19
00:00:58,000 --> 00:01:02,000
So let's take a look at the jQuery Mobile documentation to see what it gives us

20
00:01:02,000 --> 00:01:04,000
in terms of forms.

21
00:01:04,000 --> 00:01:08,000
So I'm just going to go back to the homepage here,

22
00:01:08,000 --> 00:01:11,000
and we can see there's a section on Form elements.

23
00:01:11,000 --> 00:01:17,000
So what we can do is let's just first take a look at the Form element gallery.

24
00:01:17,000 --> 00:01:22,000
This gives us an idea of what forms look like in our application.

25
00:01:22,000 --> 00:01:26,000
It'll make text inputs look nice; text areas nice and rounded here.

26
00:01:26,000 --> 00:01:32,000
Search inputs will have the correct icon and be rounded to look like a search input.

27
00:01:32,000 --> 00:01:35,000
It has this new item, which is a flipswitch, which we'll use later

28
00:01:35,000 --> 00:01:38,000
which is just basically an on/off toggle.

29
00:01:38,000 --> 00:01:42,000
It also gives us a nice slider attribute which will allow us to have different values

30
00:01:42,000 --> 00:01:45,000
within a range.

31
00:01:45,000 --> 00:01:48,000
For check boxes, it makes these really cool list items here

32
00:01:48,000 --> 00:01:53,000
that are styled like check boxes that we can select multiple of.

33
00:01:53,000 --> 00:01:55,000
You can have different button groups like this, 

34
00:01:55,000 --> 00:01:58,000
where we can add them on and off.

35
00:01:58,000 --> 00:02:02,000
Radio buttons look like this.

36
00:02:02,000 --> 00:02:06,000
We can also have them toggle like this, just like if there's only one that's available.

37
00:02:06,000 --> 00:02:10,000
It even makes cool select tags--for instance, this select tag

38
00:02:10,000 --> 00:02:14,000
pops up this cool little style dialog that we can choose.

39
00:02:14,000 --> 00:02:19,000
Or if we have a really long one, it will pop up a dialog like this

40
00:02:19,000 --> 00:02:21,000
which will be much longer.

41
00:02:21,000 --> 00:02:24,000
Now, this will look a little better in a mobile browser 

42
00:02:24,000 --> 00:02:26,000
or we could just go with the default like this,

43
00:02:26,000 --> 00:02:28,000
which will pop up a picker

44
00:02:28,000 --> 00:02:30,000
like a normal select item would.

45
00:02:30,000 --> 00:02:33,000
So let's actually take a look at this in a Simulator to see what it looks like

46
00:02:33,000 --> 00:02:35,000
on an actual device.

47
00:02:35,000 --> 00:02:38,000
I'm actually going to just create a new tab here.

48
00:02:38,000 --> 00:02:41,000
I'm going to paste the URL into the Simulator just using Command-V

49
00:02:41,000 --> 00:02:48,000
and then I can use the Paste dialog here to paste it from the device's clipboard. 

50
00:02:48,000 --> 00:02:51,000
So here we get the same page, and we can see how they actually look in a browser.

51
00:02:51,000 --> 00:02:55,000
They actually look a little bit nicer; the flipswitch doesn't have as much of the little jaggies

52
00:02:55,000 --> 00:03:01,000
on the end and we can actually use sort of a swiping motion to flip it on and off.

53
00:03:01,000 --> 00:03:02,000
The sliders work.

54
00:03:02,000 --> 00:03:04,000
It looks really good. 

55
00:03:04,000 --> 00:03:09,000
And we can see the different select forms that we have here,

56
00:03:09,000 --> 00:03:13,000
and here's what a longer one looks like,

57
00:03:13,000 --> 00:03:16,000
and the default one looks like this.

58
00:03:16,000 --> 00:03:21,000
So you can see that jQuery Mobile really has a good set of form elements

59
00:03:21,000 --> 00:03:23,000
that we can use. 

60
00:03:23,000 --> 00:03:27,000
Most of them are really just styling a normal input field

61
00:03:27,000 --> 00:03:30,000
like an input of type text or a text area

62
00:03:30,000 --> 00:03:35,000
or various other things--things like flipswitches, sliders, and our select items

63
00:03:35,000 --> 00:03:39,000
have a few more options that we can put there, but by default,

64
00:03:39,000 --> 00:03:41,000
 our form should actually look pretty good.

65
00:03:41,000 --> 00:03:43,000
Now, there is one thing: 

66
00:03:43,000 --> 00:03:50,000
we do want to associate our labels with the forms in a certain way.

67
00:03:50,000 --> 00:03:54,000
So you can see here in our portrait orientation, our labels are on top of our items,

68
00:03:54,000 --> 00:03:58,000
but in the landscape orientation, our labels are next to them.

69
00:03:58,000 --> 00:04:02,000
So it actually decides based on how wide our page is if labels should be on top 

70
00:04:02,000 --> 00:04:07,000
or below, and there's some markup that it's expecting in order to make this happen.

71
00:04:07,000 --> 00:04:10,000
So if we go back in our documentation

72
00:04:10,000 --> 00:04:13,000
and we look at our Form elements

73
00:04:13,000 --> 00:04:19,000
and take a look right here, we can see our markup conventions.

74
00:04:19,000 --> 00:04:23,000
Basically, what we want to be using is a field container,

75
00:04:23,000 --> 00:04:27,000
and these will be divs with a data-role of fieldcontain

76
00:04:27,000 --> 00:04:31,000
and these will hold both our labels and our inputs in order to group them together

77
00:04:31,000 --> 00:04:34,000
so they can be styled in that nice way.

78
00:04:34,000 --> 00:04:39,000
So let's start on creating another page in our document.

79
00:04:39,000 --> 00:04:43,000
Here, we have our homepage, which goes from this div down here,

80
00:04:43,000 --> 00:04:46,000
and let's add a new form. 

81
00:04:46,000 --> 00:04:50,000
So I'm going to just create a div with an id="new".

82
00:04:50,000 --> 00:04:56,000
And then, I'm going to add a data-role="page" just like we normally do.

83
00:04:56,000 --> 00:05:00,000
And then, I'm going to add a title of New Note.

84
00:05:00,000 --> 00:05:08,000
Then, I'm going to add a header, so div data-role="header"

85
00:05:08,000 --> 00:05:12,000
and then inside of the header, I'm going to give it an h1

86
00:05:12,000 --> 00:05:14,000
and we'll say New Note.

87
00:05:14,000 --> 00:05:19,000
And then, let's create our content area inside of our new page.

88
00:05:19,000 --> 00:05:26,000
So we'll give it a div data-role="content">

89
00:05:26,000 --> 00:05:28,000
and there we have it.

90
00:05:28,000 --> 00:05:38,000
Now let's add a comment marker here saying that this is our New Note Form.

91
00:05:38,000 --> 00:05:43,000
Cool, so now that we've created a div with the id of New,

92
00:05:43,000 --> 00:05:47,000
our New button should actually work as expected if we go back to our code.

93
00:05:47,000 --> 00:05:50,000
So checking it out, flipping back.

94
00:05:50,000 --> 00:05:54,000
So if we click this New button here, we're actually taken to our New Note form,

95
00:05:54,000 --> 00:05:57,000
which is empty in the content area, but you can see our title works,

96
00:05:57,000 --> 00:06:00,000
and it added a Back button so we can get back.

97
00:06:00,000 --> 00:06:05,000
Notice we didn't have to add that--it was just something that's automatically created.

98
00:06:05,000 --> 00:06:10,000
Now, the way it actually creates this sliding motion isn't exactly what I want.

99
00:06:10,000 --> 00:06:15,000
I kind of want it to pop up and be more like a dialog and less like a page,

100
00:06:15,000 --> 00:06:17,000
but we'll get to that a little bit later.

101
00:06:17,000 --> 00:06:19,000
We can see it also works for this button here.

102
00:06:19,000 --> 00:06:23,000
It's simply linking to the #"new" page right here.

103
00:06:23,000 --> 00:06:26,000
So to create a form, all we need to do is create a  normal form.

104
00:06:26,000 --> 00:06:29,000
Now, its action and method aren't really important 

105
00:06:29,000 --> 00:06:34,000
because we're actually going to be intercepting it with a little bit of jQuery and Backbone,

106
00:06:34,000 --> 00:06:40,000
but let's just add an action="#" because it doesn't really go anywhere

107
00:06:40,000 --> 00:06:43,000
and method="post">.

108
00:06:43,000 --> 00:06:45,000
Now, in a typical jQuery Mobile application,

109
00:06:45,000 --> 00:06:49,000
you would actually want your action and method to go to the server

110
00:06:49,000 --> 00:06:52,000
 in the way you want it, and it actually works out really well.

111
00:06:52,000 --> 00:06:57,000
It'll do an AJAX request, bring back the information, and do a cool page transition.

112
00:06:57,000 --> 00:07:01,000
However, in our application, we're not communicating with the server--ever--

113
00:07:01,000 --> 00:07:04,000
and we want to handle this all ourselves,

114
00:07:04,000 --> 00:07:08,000
so we're going to actually be doing a little bit of magic to intercept our form submissions.

115
00:07:08,000 --> 00:07:12,000
So let's close our form out and let's create our first field.

116
00:07:12,000 --> 00:07:16,000
We want to create that field container to hold our label and our inputs, 

117
00:07:16,000 --> 00:07:24,000
so let's create a div with a data-role="fieldcontain".