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
Preview
Start a free Courses trial
to watch this video
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