Well done!

You have completed HTML5 Mobile Web Applications!

Preview

HTML5 Mobile UI: UI Components: Part 2

10:23 with Jim Hoskins

In this video, we take a look at more advanced options that are available when defining components in jQuery Mobile.

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[Jim Hoskins] So we've created our button and it's new, 0:00

but it would be nice if we had a little icon there with maybe a + 0:03

to indicate that we're going to be creating something. 0:06

That's something that jQuery can handle for us, so let's actually take a look at the documentation 0:09

to see where we would find all of this information. 0:13

So I have the jQuery Mobile documentation open 0:16

jquerymobile.com/demos/1.0a3 0:19

and most of the actual examples are going to be down here, in the Components section. 0:21

Now, everything you want to know about buttons is going to be within 0:25

this part of the documentation. 0:28

So here's just a basic overview of how we create a button. 0:30

We can see that they're showing you how to create the data-role of a button 0:33

and create a normal button, 0:38

and we can see that we can use a lot of different types in order to do that. 0:40

There's a lot of different ways to create a button with inputs or <a tags 0:43

or the button tag, 0:47

and we see that there's options for creating button icons, 0:50

so let's take a look in here. 0:53

Now, the documentation says in order to do an icon, we need to give it the data-icon attribute 0:55

and we want to give it one of the values, 1:01

so let's take a look at the example values that we have down here. 1:03

So we have an arrow left, we have an arrow right, up, and down, 1:06

we have an X button for something like delete, 1:11

we have a +, which looks good for us, 1:13

we have a minus, a checkmark, gear, refresh, a forward, back, 1:16

a grid button, a start button, alert button, info button, home button, and search button. 1:25

So all of those, I think for a new button, our + is going to be the best one 1:32

that we can use, so if we go up here, we see that all we need to do 1:36

is give it the attribute data-icon of "plus". 1:40

So going back to our code, inside of our <a tag here, 1:43

we're just going to add data-icon="plus". 1:46

And if we save it out and go back to our code, 1:52

we can see we now have a + added to our button. 1:56

Creating buttons isn't something we can only do in the title bar. 2:01

We can actually create styled buttons within the content of our page. 2:04

So let's try that out and replace our Hello World! with another new button 2:07

that's going to do the exact same thing. 2:11

So I'm going to remove this Hello World! here 2:13

and let's do the same thing--we'll create an <a with an href="#new" 2:16

give it a label of New Note 2:21

and close our </a tag. 2:26

So I'm going to save this out and show you exactly what a link looks like 2:27

in any other context. 2:31

So if we refresh, we can see that it's just a styled link with an underline 2:33

and a blue coloring to it. 2:38

It's not by default a button like it is when we add a link into the title bar. 2:41

We do actually need to add a data-role attribute to our <a tag, 2:45

so let's do the data-role="button" 2:50

and when we refresh it, 2:53

we can see we get this nice white button that says New Note. 2:56

Now, it looks very wide; especially on this, and that's just because 3:00

buttons by default take up a large amount of space. 3:03

It will look a little better on a mobile device, so if we refresh it, 3:07

we could see we have the New Note here, 3:10

and we can see it fills the space no matter how we have our device oriented. 3:12

Now, we also want to add the data-icon="plus" 3:17

to give it its + icon. 3:24

And if we go back, we can see we now have the icon there. 3:26

Now, I'm not really a big fan of this white button on a gray background. 3:29

and that's something that jQuery Mobile makes really easy to change, 3:33

and jQuery Mobile allows us to do this using themes. 3:36

Now, you may think of themes as something you apply to an entire application 3:40

so maybe something that skins the entire application. 3:44

And while it does have different themes in that respect, 3:47

it also has the idea of themes within a theme. 3:50

Basically, different color schemes within the same theme 3:53

and those schemes can be used for different purposes 3:56

to communicate different information. 3:59

To find out more about that, we can open up the jQuery documentation again 4:01

and we can look at the theme framework. 4:09

Now, it gives us a nice overview of what it's used for, 4:11

but we can see that there are five different themes within each theme. 4:14

By default, we've seen the A theme, which is a dark bar, 4:19

but there's a B, C, D, and E theme. 4:22

So what we want to do is sort of switch between these five different themes 4:24

within our application to communicate different ideas. 4:28

So here, we can see how different widgets are themed differently 4:35

based on their theme within the actual application. 4:38

Now, this is all done using the data-theme attribute 4:41

just like any other data attribute. 4:45

We can change the theme at almost any level of our application, 4:48

so if we want to change the theme of an entire page, 4:51

we could add the data-theme attribute to a page div 4:54

or we could just do it for a header, or even something like a single widget, like a button. 4:57

So I'm going to do that right here, and I'm going to add the attribute data-theme 5:02

and then all I need to do is give it the theme I want to do, 5:08

which would be A, B, C, D, or E. 5:11

Now, some theme sets may have more or fewer themes to them, 5:13

but the default theme has A-E. 5:17

So if we did data-theme="a" and we go back to our code and refresh, 5:19

we can see that the theme for "a" is very dark. 5:25

Now, if I wanted to try theme "b" 5:29

we see that it's a nice blue, it catches your attention, 5:33

it looks pretty good. 5:36

Let's try theme "c." 5:38

Now, here's where we get the white one, so "c" was the default 5:41

in this particular context. 5:44

The default theme will actually change from context to context. 5:46

You can see right here in the title bar by default this button with the A or dark theme. 5:49

Let's look at "d." 5:55

That's even lighter; not really what we're looking for. 5:57

And finally, let's try "e." 6:00

Now, it really catches your attention, but I'm not really a fan of it. 6:02

I think of all these themes, "b" really makes sense for this button, 6:05

so I'm going to leave this as "b" 6:08

and that looks pretty good. 6:10

Just to show you, let's actually change the theme of our entire page. 6:13

So up here, let's do data-theme="b">. 6:18

So if I refresh, and this is how our theme would look 6:22

if our entire page was themed with the "b" theme. 6:26

Now, I don't really like that, so I'm going to go ahead and remove it 6:29

and leave the default theming hierarchy as is. 6:32

So now we've created two buttons that really do the same thing, 6:36

which is actually nothing right now. 6:39

We just get an error. 6:42

But let's add another thing, which would be a list view 6:44

which will allow us to dive into different lists of notes that we've created. 6:47

Now, I'm going to have our two different lists be the alphabetical lists of notes 6:51

based on the title as well as-- eventually when we add our geolocation in-- 6:56

the notes nearest to us. 7:00

So what I'm looking for is a list view, 7:02

and we can see an example of that if we go back here and take a look 7:05

at our List Views page in our documentation. 7:09

So if we take a look at the documentation here, 7:14

we can look at different examples by looking right here. 7:17

So this is one view we could use which is a sort of edge-to-edge view 7:21

if something's taking up the full page. 7:25

This would work in some cases, but I think for our homepage, we want something 7:28

that's sort of inset. 7:32

So if we take a look here, we can find different types of lists 7:34

The one I'm looking for is inset list, which give us this sort of grouped list that's sort of 7:44

inset from the rest of the page and can be used independently 7:50

and it doesn't have to take up the entire page. 7:54

In order to do that, we're just going to have to add another attribute to our list. 7:58

But the basics for creating a list view is to create an unordered list 8:03

and we're going to give it a data-role of list view, 8:09

which says I want this to be a list view widget. 8:12

Again, we can theme this, just like anything else, 8:15

but then the <li items within our list view are going to become those nice little buttons. 8:18

So let's go back to our code, and just below this new button in our content, 8:23

I just want to create a <ul. 8:27

Let's just bring this up on the page a little bit. 8:32

We'll give it a data-role="listview">. 8:38

Now, inside of this, I just want to create list items, so an <li 8:45

and our first one we will make an <a tag and this will make it a link to another page. 8:50

So let's do <a and href, and we'll call our alphabetical list #all> 8:55

and we'll say All Notes, at least for now. 9:02

We can change this a little bit later and make sure to close our <a tag 9:06

and let's see what we get when we load it in our browser. 9:11

Flip back to our code, and so far, it doesn't look all that great 9:15

because we haven't made an inset, so it's going edge-to-edge here, 9:21

and it's sort of eating up this button because this style of link 9:24

is not really compatible with having other things in our content view. 9:28

So if we go back, we can add data-inset= attribute 9:32

and we'll call this "true". 9:39

And if we refresh, we can see this changes the style to inset 9:43

so it can cooperate with other items in our content view. 9:47

Now, let's just add another item into our list view. 9:51

We'll call it "#nearest" 9:54

and we'll say Nearest Notes. 10:01

So if we refresh that, we can see that it now has the rounded corners 10:05

on the top of the first one and the bottom of the second one, 10:10

and then it has the appropriate borders between the two of them. 10:13

Now, of course, if we click them, we're not going to get anywhere, 10:16

but it's going to work once we add the pages into our application. 10:20

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace