[jQuery UI Components]

[?music?]

[Jim Hoskins] So now we've created our Hello World! page using jQuery Mobile

and we can see that all of our JavaScript files have been included

and we should be ready to roll on developing our application.

Now, every once in a while, we do want to switch over to our Simulator

to actually check that everything works in the Simulator,

so just opening it up and open up Safari.

I just type in localhost

just like I would in a normal browser.

We get a title bar with Local Notes

and some content for Hello World!

So the next thing we want to do is start planning out our interface.

Now, what's really great about jQuery Mobile is that it's very easy to start

creating widgets like buttons, title bars, list views, and other things

that you might want in your Mobile application.

So we could actually get most of that up and running without writing any code ourselves

and it's a great way to prototype parts of our application.

jQuery Mobile is also a great way to create quick and dirty prototypes

for projects that you may not even use jQuery Mobile to ultimately build.

So we have sort of a homepage right now,

but it just says, "Hello World!"

Let's start adding some other widgets into our page.

So here we have our code, and we have this div which represents our homepage

and here we have the id of home, which will allow us to navigate to this page

anywhere in the application.

So all of the pages in our application are just going to be divs

within this one HTML page.

Now, we're going to get a lot of different pages set up here

so it's good to sort of comment them so you can quickly locate the pages you want to work on.

So what I'm going to do is just add a comment in above my page

to mark it as the homepage, and as we start creating other pages,

we'll add more comments so we can quickly get down to the page we're looking for

during development.

So obviously we don't want our homepage to simply just be a Hello World!

with nothing else.

We probably want a list of places we can go, like most recent,

or alphabetical notes

and things like creating a new button.

So let's take a look at how we would add a new button in our application.

Now, one place we could put the new button is in the title bar, right up here in the top right.

That's a good place to put buttons for actions that somebody is most likely to do next.

Now, by default, we're going to save this left-hand button for the Back button

and jQuery Mobile will automatically add a Back button in

unless we tell it not to.

And this is good for navigating around, so if we were to dive into another page from here,

jQuery Mobile would automatically create a Back button in the title bar,

allowing us to quickly go back.

But let's right now start working on our new button.

I'm going to flip back to our code

and inside of the header is where we want to create our buttons.

Now, if we create two different buttons inside of this header div,

it'll put the first one on the left-hand side and the second one on the right-hand side.

If we want to simply have one on the right-hand side that we specify,

we're going to have to add another class to it in order to specify it.

Now, the order in which you put our buttons matters by the way it's going to place them

by default, but we can overrride it, and so the order doesn't really matter.

But for my sake, I'm going to put buttons that are on the right-hand side

after the header, and any buttons that we put on the left side of the header bar

I'm going to place before the h1 title.

So to create a button, we simply need to create a link

with some special data attributes to specify that it's a button.

So let's start with a simple link and see where that gets us.

I'm going to create an <a and I'm going to give an href

and this href is going to be the id of a div

we want it to navigate to.

Now, I don't have a page for our New Note form

but I think I'm going to give it an id of New.

So I'll give an href of #new, and this means this is going to navigate to the div

with the id of new.

Let's just add the label for it, so we'll just say New

and close our </a tag, and let's see what that gets us

in our browser.

I'm going to use Chrome just because it's going to be a lot faster for us to switch around

and debug, and we'll switch back to the Simulator every once in a while to double-check.

So when I refresh, we by default get a button here

and we get it on our left-hand side.

That's exactly what I said before--that if we only create a single button,

it's going to place it on the left-hand side of our title bar.

Now, you'll notice it also gave it a style of a button.

Typically, we need to add a data-role attribute

to our <a tag to make it style like a button.

Otherwise, it will style like a normal link.

Now, in the header bar, it's not really necessary

because it automatically assumes that styling,

but to be consistent, let's also add a data-role of "button" to this <a tag

and this will tell jQuery Mobile that we want it to behave and be styled like a button,

and we could see that that nothing changes.

Now, we're still stuck on the left-hand side of our title bar,

so in order to change that, we're going to use a CSS class

which will change its orientation on the page.

We use a CSS class because where it's placed in the title bar

is really a stylistic or presentational detail

and not a semantic detail, so there's not a data attribute for it.

So in here, we're going to do a normal class= attribute,

and we'll give it the class of "ui-btn- for button, and right"

So if we save this out we can refresh, and we can see our new button is now on the right.

If we check out our Simulator and refresh it,

you can see that it's starting to look good.

We have a new button on the right.

Now, as you click it, you can see that we don't actually navigate anywhere

and it popped up a little error before saying that there was an error loading the page.

We'll fix that a little bit later when we actually add our page into our web application.