Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed HTML5 Mobile Web Applications!
You have completed HTML5 Mobile Web Applications!
Preview
In this video, we begin creating our page. We start by creating a simple 'Hello World" page using 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.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[Setting up the Page]
0:00
[?music?]
0:03
[Jim Hoskins] So far, we've downloaded all of our libraries,
0:06
like Backbone, jQuery, jQuery Mobile, and Underscore,
0:09
and there's just one more library file that we are going to want to use in our application,
0:12
and that is the Backbone localStorage adapter.
0:16
Normally, Backbone is intended to be used as a frontend for a web service,
0:19
so as we manipulate items in our frontend,
0:24
they can be saved and retrieved from some sort of backend application.
0:27
However, since our application is offline,
0:32
we don't use that type of functionality, so we need to use localStorage
0:34
as our synchronization point instead of a web server.
0:38
So to get the Backbone localStorage adapter,
0:43
we're just going to go to this particular github page
0:46
which is the Backbone localStorage adapter.
0:49
https://github.com/jeromegn/Backbone.localstorage
0:52
It's really just a file that we can drop into our application
0:57
and it will now allow us to use localStorage as our backend.
1:00
So we can go back here and we can just download this repository
1:09
and we'll just make a ZIP file.
1:13
Once we've downloaded and opened up our ZIP file,
1:15
we're just going to take the Backbone.localStorage and its minified version
1:18
and we're just going to place it into our project's JavaScript folder,
1:22
just like all of our other libs.
1:26
Now, we may want to organize this a little bit differently later
1:28
in order to sort of segment out minified and our library JavaScript
1:31
versus our application JavaScript, but for right now,
1:36
let's just leave it as this and we can worry about optimizing it
1:39
a little bit later once we actually have something up and running.
1:42
So going back to our text editor, we see that we have some CSS
1:46
and JavaScript files all ready to go,
1:49
and if we try to bring it up in our browser,
1:52
we obviously just get a list of our directories, our CSS, and JavaScript.
1:54
So our main file for our application is going to be our index.html page,
1:59
which will be the page that we load and will eventually be running
2:03
all of our JavaScript.
2:07
So let's--in our web directory--create a new file,
2:08
and we'll call this index.html.
2:11
So our index.html file is going to be an HTML5 file.
2:15
To begin an HTML5 document, we need to start with a !DOCTYPE
2:20
and the DOCTYPE is DOCTYPE html
2:23
and then we need to create our html tag.
2:29
I'm going to add lang="en"
2:36
and then create our head
2:41
and our body
2:46
and then add a meta charset="utf-8"
2:49
and that will act as a basic backbone for our index file.
2:52
So now we want to actually start including all of our resources
2:57
like our style sheets JavaScripts.
3:00
All right, so now we want to include our CSS files
3:04
and create the link tags in order to import them.
3:07
One easy way to do this in TextMate is to simply grab your file
3:11
and drag it onto the document.
3:16
Now, this is going to give us the most verbose link tag that we need,
3:18
and actually, in HTML5, we don't need the type
3:22
and we can give it a title of "jquery mobile."
3:26
I'm actually going to change our text flow so it doesn't break onto multiple lines
3:32
by going to View and unchecking soft wrap.
3:36
Now, this is going to allow us to overflow,
3:41
but most of our lines shouldn't be as long,
3:43
so taking a look at our style sheet here, we're loading in the css/jquery.mobile=1.0.a3.css.
3:45
Now, depending on your version, it may be a different file name.
3:54
And then, we have our media, title, and charset attributes.
3:57
So now that we've added our style sheet, let's add our JavaScript script include tags,
4:02
and we're going to do that much the same way.
4:06
The first thing I want to include is jQuery,
4:09
so I'm just going to drag that onto our document,
4:11
and that includes our script source src="js/jquery-1.5.1.js.
4:13
Now, it gives us a type and a charset; these aren't really necessary in HTML5.
4:20
They should be served correctly by the server.
4:25
It doesn't hurt to have them, but you don't need, necessarily, our type and charset
4:28
in our script tag, but since it printed it out for us, let's just go ahead and leave it in.
4:32
The next dependency we're going to add is underscore.js,
4:38
so I'm just going to drag that onto the document.
4:41
So now we have backbone.js
4:44
and then we're going to add our backbone.localStorage.
4:49
Finally, I'm going to add our js/jquery.mobile-1.0a3.js.
4:55
So let's take a look at our scripts that we included
5:00
and why we included them in a particular order.
5:03
So we're going to be using jQuery Mobile, and its dependency
5:05
is jQuery, so we need to make sure jQuery is loaded before jQuery Mobile.
5:09
We're also using Backbone, and its dependency is Underscore,
5:14
so we need to make sure Underscore is before Backbone.
5:17
Backbone will also utilize jQuery for the views,
5:20
so we want to make sure jQuery is before Backbone
5:23
and we want to load our Backbone localStorage to make sure Backbone
5:26
has been loaded in so we can modify it with the localStorage file.
5:29
Now, one last file we want to do is add our application.js file,
5:34
so we'll just create a new file and we'll call it application.js
5:38
and we're going to add this in right here as our last file.
5:48
We'll be modifying this file and breaking it out into other files a little bit later,
5:53
and we'll be reorganizing all of our scripts as we go along,
5:58
but let's just see if we can get a simple page up.
6:02
Let's see what happens now when we go to our browser.
6:05
Well, we get a blank page,
6:09
so let's see what happens when we add some text into the body.
6:11
Well, we get nothing, and that's because we have jQuery Mobile installed
6:16
and it's not going to show us the defaults.
6:20
So the next good step here is to make sure that all of our resources did load in properly,
6:22
and we can do that using the Chrome Developer's Tool
6:27
by going to View, and JavaScript Developer Tools
6:30
or we can hit Command-Option-J to bring it up.
6:35
Now, it looks like we already have an error, and let's see if actually creating
6:39
a valid jQuery Mobile page is going to fix that.
6:43
Otherwise, we're going to have to dig in and see what went wrong.
6:46
If we look at our resources, you can see that all of them
6:50
loaded in exactly how we want them.
6:54
So let's go ahead and create a page of our jQuery Mobile application.
6:57
Hopefully, you've had a chance to at least gloss over the jQuery Mobile docs,
7:04
but we'll be going over in more detail how to create our pages.
7:08
So the first thing we want to do is create a div,
7:12
and we want to give our div an id which is going to be the name of our page.
7:16
Let's start off with our homepage, so we're going to give it the id="name".
7:20
Now, in jQuery Mobile, we also have to specify
7:24
that this particular div represents a page
7:27
and we do that using HTML5 data attributes.
7:30
Now, we've seen normal attributes in HTML, like id and class,
7:34
but HTML5 adds a new API, which allows us to create our own attributes within our tags.
7:37
The only restriction is our attributes should be prefixed with data-
7:43
and then, they can be whatever we want.
7:47
In jQuery Mobile, it's expecting a data-role attribute,
7:50
so we're going to create a data-role.
7:55
jQuery Mobile has a few different values that it's expecting in the data-role attribute.
7:59
One of them is "page" and we're creating a page,
8:03
so we'll just add "page."
8:07
We'll scroll down a little bit.
8:09
So inside of a page, there are a few different things that we can add.
8:10
For one thing, we can add a header, which is going to be like the toolbar
8:13
or the top of an iOS application,
8:18
and that's where we would put things like titles, back buttons,
8:21
and other navigation buttons that we want to have on our application.
8:24
So all we need to do is add a div.
8:28
We don't need to give it a specific id,
8:31
but we do need to give it a data-role
8:33
and its value is going to be "header."
8:37
Now, inside of this, we can add whatever we want.
8:42
I'm going to add an h1 heading
8:44
and we'll call it Local Notes--the name of our application--
8:47
and that's all I want for the header; at least right now.
8:51
So our page has a header.
8:56
Now we want to give it a content div, so we're going to create another div
8:58
and we're going to give it a data-role="content"
9:02
and when jQuery sees a data-role of "content"
9:07
it's going to make it the body of that particular jQuery Mobile page.
9:09
So this can be just any HTML.
9:14
We'll just say Hello World! for now, and that's all we need.
9:16
Now, we could add another div inside of our page with the data-role of "footer"
9:22
but I have no content for a footer right now,
9:25
so let's just see what we get now.
9:28
So when we go back to our browser, we now see we get a nice, styled page
9:33
with a cool header with Local Notes and Hello World!
9:37
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up