HTML5 Mobile UI: UI Components: Part 1

[jQuery UI Components] 0:00 [?music?] 0:03 [Jim Hoskins] So now we've created our Hello World! page using jQuery Mobile 0:06 and we can see that all of our JavaScript files have been included 0:09 and we should be ready to roll on developing our application. 0:12 Now, every once in a while, we do want to switch over to our Simulator 0:16 to actually check that everything works in the Simulator, 0:19 so just opening it up and open up Safari. 0:23 I just type in localhost 0:26 just like I would in a normal browser. 0:29 We get a title bar with Local Notes 0:32 and some content for Hello World! 0:34 So the next thing we want to do is start planning out our interface. 0:36 Now, what's really great about jQuery Mobile is that it's very easy to start 0:40 creating widgets like buttons, title bars, list views, and other things 0:43 that you might want in your Mobile application. 0:47 So we could actually get most of that up and running without writing any code ourselves 0:50 and it's a great way to prototype parts of our application. 0:54 jQuery Mobile is also a great way to create quick and dirty prototypes 0:57 for projects that you may not even use jQuery Mobile to ultimately build. 1:01 So we have sort of a homepage right now, 1:05 but it just says, "Hello World!" 1:08 Let's start adding some other widgets into our page. 1:09 So here we have our code, and we have this div which represents our homepage 1:13 and here we have the id of home, which will allow us to navigate to this page 1:17 anywhere in the application. 1:21 So all of the pages in our application are just going to be divs 1:23 within this one HTML page. 1:27 Now, we're going to get a lot of different pages set up here 1:29 so it's good to sort of comment them so you can quickly locate the pages you want to work on. 1:32 So what I'm going to do is just add a comment in above my page 1:37 to mark it as the homepage, and as we start creating other pages, 1:41 we'll add more comments so we can quickly get down to the page we're looking for 1:44 during development. 1:49 So obviously we don't want our homepage to simply just be a Hello World! 1:52 with nothing else. 1:55 We probably want a list of places we can go, like most recent, 1:57 or alphabetical notes 2:01 and things like creating a new button. 2:03 So let's take a look at how we would add a new button in our application. 2:07 Now, one place we could put the new button is in the title bar, right up here in the top right. 2:11 That's a good place to put buttons for actions that somebody is most likely to do next. 2:15 Now, by default, we're going to save this left-hand button for the Back button 2:21 and jQuery Mobile will automatically add a Back button in 2:26 unless we tell it not to. 2:29 And this is good for navigating around, so if we were to dive into another page from here, 2:31 jQuery Mobile would automatically create a Back button in the title bar, 2:35 allowing us to quickly go back. 2:39 But let's right now start working on our new button. 2:41 I'm going to flip back to our code 2:44 and inside of the header is where we want to create our buttons. 2:47 Now, if we create two different buttons inside of this header div, 2:51 it'll put the first one on the left-hand side and the second one on the right-hand side. 2:54 If we want to simply have one on the right-hand side that we specify, 2:59 we're going to have to add another class to it in order to specify it. 3:02 Now, the order in which you put our buttons matters by the way it's going to place them 3:07 by default, but we can overrride it, and so the order doesn't really matter. 3:11 But for my sake, I'm going to put buttons that are on the right-hand side 3:15 after the header, and any buttons that we put on the left side of the header bar 3:18 I'm going to place before the h1 title. 3:24 So to create a button, we simply need to create a link 3:26 with some special data attributes to specify that it's a button. 3:29 So let's start with a simple link and see where that gets us. 3:34 I'm going to create an <a and I'm going to give an href 3:37 and this href is going to be the id of a div 3:41 we want it to navigate to. 3:44 Now, I don't have a page for our New Note form 3:46 but I think I'm going to give it an id of New. 3:49 So I'll give an href of #new, and this means this is going to navigate to the div 3:52 with the id of new. 4:00 Let's just add the label for it, so we'll just say New 4:02 and close our </a tag, and let's see what that gets us 4:06 in our browser. 4:09 I'm going to use Chrome just because it's going to be a lot faster for us to switch around 4:12 and debug, and we'll switch back to the Simulator every once in a while to double-check. 4:16 So when I refresh, we by default get a button here 4:21 and we get it on our left-hand side. 4:24 That's exactly what I said before--that if we only create a single button, 4:26 it's going to place it on the left-hand side of our title bar. 4:31 Now, you'll notice it also gave it a style of a button. 4:34 Typically, we need to add a data-role attribute 4:38 to our <a tag to make it style like a button. 4:41 Otherwise, it will style like a normal link. 4:44 Now, in the header bar, it's not really necessary 4:47 because it automatically assumes that styling, 4:50 but to be consistent, let's also add a data-role of "button" to this <a tag 4:52 and this will tell jQuery Mobile that we want it to behave and be styled like a button, 4:59 and we could see that that nothing changes. 5:05 Now, we're still stuck on the left-hand side of our title bar, 5:08 so in order to change that, we're going to use a CSS class 5:11 which will change its orientation on the page. 5:14 We use a CSS class because where it's placed in the title bar 5:17 is really a stylistic or presentational detail 5:21 and not a semantic detail, so there's not a data attribute for it. 5:24 So in here, we're going to do a normal class= attribute, 5:28 and we'll give it the class of "ui-btn- for button, and right" 5:31 So if we save this out we can refresh, and we can see our new button is now on the right. 5:38 If we check out our Simulator and refresh it, 5:43 you can see that it's starting to look good. 5:47 We have a new button on the right. 5:49 Now, as you click it, you can see that we don't actually navigate anywhere 5:51 and it popped up a little error before saying that there was an error loading the page. 5:55 We'll fix that a little bit later when we actually add our page into our web application. 6:00