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