Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.
Build a Mobile Web App Using jQuery Mobile & AJAX: Part 137:52 with Amit Bijlani
Build a simple weather app called GOOD Weather using jQuery Mobile. Find out the strengths of jQuery Mobile and how to use some of its components. Learn about data roles, themes and page layout.
[JQuery Mobile with Amit Bijlani, Workshop]
[Amit Bijlani] Hi, my name is Amit Bijlani and today we'll look at JQuery Mobile.
Not only will we learn about JQuery Mobile, but we will actually build
a full functioning app called Good Weather using JQuery Mobile
and a third party API called Forecast.IO.
So here, let me show you what the app looks like.
It's a very simple and minimalistic app where it shows you an icon,
the temperature, and a little description of what the temperature is.
It says partly cloudy, and if you click on the menu
you can select your favorite locations.
So let's select Miami and there it shows you it's 80 degrees. It's humid, overcast.
So basically that's what the app is about.
You can go back and click on the menu and change the location
or select your current location where it's 65 degrees.
So what is JQuery Mobile?
Well, JQuery Mobile is a touch-optimized, HTML5 UI framework.
It uses the power of JQuery to deliver these amazing user interface components
which would take you hours of work to build it yourself.
Not only are these user interface components mobile friendly,
but they are touch friendly, so you have sliders,
and switches, and buttons. They are just amazing.
So one of the prerequisites for this workshop
is that you should understand JQuery, HTML, and CSS.
So if you don't have an understanding of any of those
I highly recommend you take one of our learning adventures,
learn about that, and then come back to this workshop.
So let's talk about why JQuery Mobile and why this is so important.
When you're building a web-based mobile application JQuery Mobile
provides you the widest cross-platform support. What does that mean?
You can build a web-based app and deploy it across iOS, Android, Blackberry—
several different platforms, and if it is an old platform
well it will degrade your site so that it displays at least the basic HTML.
Secondly, it provides native look and feel.
I mean if you've seen all these cool apps—especially the iOS and Android apps—
they have a nice-looking interface.
JQuery Mobile gives you all those interface components. That''s really what it's about.
The third thing is you don't have to learn a native language.
So if you're a web developer this is perfect for you.
You don't have to learn Objective-C, Java, or C#.
All you can do is just use all the knowledge
that you already have and build a web-based mobile application.
It provides for easy layout and feeling, and this is where JQuery Mobile really shines.
Because it is a UI interface framework it provides you different ways to layout
your application and theme it, and it has a great web-based theming site
that you can just drag and drop and create a new theme on the fly.
You have touch-friendly user interface components, and this is where it's all about.
You have sliders, and switches, and buttons, and popovers, and dialogues.
It's endless. We'll go through some of them in this workshop.
And, finally, it's tried and tested.
There is a whole dedicated team that's responsible for JQuery Mobile.
They have tested all of these components on a wide variety of devices
so you don't have to sit and do all this testing all by yourself.
So what are some of the drawbacks of JQuery Mobile?
Well one of the things is performance. This is not a be-all, end-all solution.
I mean if you do want to get up to speed with a mobile application
you can surely do that, but if you're doing complex things
you still want to go ahead and build a native application,
especially when you want to access a lot of the device functionality,
which JQuerty Mobile doesn't let you do,
especially accessing the camera role or other complex things.
So that's what I mean by restricted acces to device resources.
It is network-dependent. It is a web-based mobile application.
So this application will sit on the web somewhere and everytime
you need to access it you have to have an Internet connection.
And finally, like I mentioned, this is not a silver bullet.
For a lot of the applications out there JQuery Mobile is perfect,
but there are some applications that do require a lot of the device functionality
that JQuery Mobile might not be the right solution for.
So let's talk about some of the core concepts of JQuery Mobile.
One of the things is layout.
You can take a basic HTML tag and add to it different data- attributes.
So what are these data- attibutes?
Well, the first one is called data-role.
Your HTML tag can play different roles within your HTML structure.
So what are some of these roles? Well, you can have it play the role of a page.
Now usually HTML pages are externally linked together with each other.
What if you had different HTML tags within the same page
and you wanted to link to them through some kind of navigation?
Well, you can take atag and have thattag play the role of a page,
and you could link these severaltags to each other
as they were external pages so you have the role of a page,
and that's how a lot of the content is structured in JQuery Mobile.
Within a page you have a header,
so you can have tags that can play the role of a header,
and you have, obviously, the content, and then finally you have footer.
So within you single page you have header,
content, and footer. I think all of those things make sense.
Then you can have roles like listview or list-divider,
which separates the list header from the rest of the list.
And, finally, you have something as a button.
Now there are several more roles, but I just wanted to get you
oriented with how these things come together.
So this is what a typical structure in a JQuery Mobile page looks like.
You have atag that plays the role of a page,
and then you have severaltags that play separate roles
like header, content, and footer.
Now before we dive into this project you'll need a few things.
The first thing is a text editor or IDE.
I personally use Sublime, but you coiuld use anything that you like.
The next thing is you would need to host this application locally.
What do I mean by that? You will need some kind of web server.
I use Anvil for Mac, and that's the site right there if you're using a Mac.
If you are using Windows then you probably already have
IIS or Internet Information Service.
That comes built in with most Windows operating systems.
If not, you can Google for that.
So let's go ahead and set up our application.
I'm just going to create a folder called "goodweather,"
and we're going to just start from scratch.
Let me create some sub folders here.
I'll create one called "images" and another one called "CSS."
Okay, so let me open up Sublime Text here.
I have a project to go off of so you'll see me copying and pasting a lot of code.
All right, so let's start with an index.html.
We will really have only one html file and let me start with a basic html structure,
which is the header, the body, and the html.
Now there are two things that we're going to do.
We're first going to create a JQuery Mobile site—
basically a prototype of what our application looks like.
We already know what the application looks like,
but I'm going to first create a prototype using JQuery Mobile.
Next we will hook into this AJAX service—
or rather this third-party API that's going to give us this weather information,
because that doesn't reside within the application.
We need to go out into the Internet and fetch that data and display that data.
So first we'll focus on displaying this data and how the application looks and feels.
Next we will actually go out and bring in that functionality
of actually displaying real weather.
The first thing we need to do is head over to the JQuery Mobile site,
and, as you can see, it is a typical site.
You have demos, APIs, downloads, and if you scroll down
there's also this amazing in-browser tool that you can use
to actually build the entire JQuery Mobile site in your web browser
if you don't want to mess around with the code. Then you have the theming engine.
If you just click here it will take you to ThemeRoller,
which is a drag and drop interface to create new themes.
Then you have the download builder so that you can customize your download
if you don't want all the components that JQuery Mobile has to offer.
Now before we dive in and create our own app let's head over to demos
and look at all the different widgets that JQuery Mobile has for us.
If I click on any of the demos I'll be able to see the different components.
For example, this is an accordion component with collapsible sections,
and if I click on View Source we built this whole accordion interface
simply by specifying data roles in ourtags.
So here the data role is collapsible-set, and you have individualtags
with the role called collapsible.
We have data-theme and data-content. We will talk about that in a little bit.
So that's just thye accordion, and if you go down the list—
I'm just going to hit back here—you have autocomplete, buttons, checkboxes—
I mean the list goes on and on.They have really, really cool features.
Let's go into icons and let's see how icons are used.
So, for example, here you have a button with an icon,
and if I click on it it's going to do actions to the button.
The other cool thing about JQuery Mobile is that you can inspect any of these elements
and see what the markup looks like.
Here it's a span class that says class ui-btn
and then you have ui-btn text and ui-icon and it specifies the type of icon.
If you go down this list once again you have the View Source,
and you can see how JQuery Mobile defines buttons.
When I showed you the inspect, that's what it translates into,
but here is the mark up—what you will be defining.
So here you have a data-role called "button" and the data-icon
because you have several different icons, so if you want your button to have an icon
all you have to say is data-icon and the name of the icon.
Those are the different widgets that we have available.
We will be working with panels because I want to have a main panel
and I want to have a left side panel so that it can slide out
and display the various different cities.
Let's scroll down the list here and look at what panels look like.
But before I go to panels let's look at pages because we will have a page first.
Here it's talking about the viewport meta tag, and we need to have this
so that it scales the app to the device. That's what the viewport meta tag is about.
It's about scaling and it's about size.
So when you display the app on a tablet or a phone
you want your app to take up the width of your device, whatever that device may be.
That's why you need to specify the viewport meta tag.
Then inside the body, as I had mentioned,
you play different roles with thetag
so here the div tag plays the role of page, header, content, and footer.
In fact, let me just copy this into our own html file into Sublime Text.
So let me copy this basic structure here and I'll save this html.
Now as you can see we are given the boiler plate template
what a basic page structure looks like in JQuery Mobile.
We already saw that we can have the viewport tag.
The other two things that we need to include are a style sheet—
so we need a JQuery Mobile CSS file.
We need JQuery obviously and then we need a JQuery Mobile minified JS file,
both of which can be accessed through their CDN—
or actually all three of them can be accessed through their CDN.
So I'm going to copy the meta tag and all the rest of these lines
because we're specifying the viewport and then we're specifying a link
to the JQuery Mobile CSS, the JQuery minified file,
and the JQuery Mobile minified JS file. All right, let's go back here.
We've already copied in a basic page structure so we're fine there.
Now, we'll go back here and select panel.
It says panels are flexible and can be used as forms of navigation or inspectors.
Here are the different examples of panels.
They have the overlay, and if I click on that
as you can see, it has been overlaid onto my current page.
Close that panel. The reveal actually just reveals a panel on the left.
The push just pushes out my current page. They have just different kinds of transitions.
Once again, you can have a panel on the right,
and they have the similar transitions for left and right.
Here it's giving me the markup of what the panel should look like,
and, once again, the markup has a data-role for the panel,
and you can specify an id and say the panel content goes here.
Now the only thing that you should remember about panels
is that panels go inside a page. A panel can't be outside of a page.
Let's copy this code here for the panel and we will paste it into our Sublime Text.
Since it mentioned that the panel goes inside the page,
I'll make sure that I copy that code inside. That's making it pretty there.
Okay, so we have a page. We have a panel. We have header, content, and footer.
Now we haven't specified anything inside our header file.
So what can we do inside the header?
Well, I do want a toolbar if you remember correctly.
If not, let's look at our application once again.
We have a toolbar at the top with an icon
and it's the icon that pushes out this panel here.
So if we go back to our own html page we can specify this toolbar in our header.
So what does the code for the toolbar look like?
Well, let's head on over back to the JQuery Mobile web site,
and let's look for a toolbar, and as you can see it's right here
and it's called a fixed toolbar.
Let's click here, and it's called fixed because it always stays persistent.
As you can see here, I click here
and there is a toolbar on top and there is a fixed footer at the bottom.
If I click on the content area the fixed toolbar disappears.
As you can see here, there's not much that we need to do.
It specifies date-role header, which we already have.
All we need to do is specify that the data-position is fixed.
So let's copy data-position "fixed" and add that to our own project.
Here's our header. I'll say data-position "fixed."
The next thing I want there is simply a title
so that could just be a header tag. Let's say Goodweather.
Now it's not necessary that we look at our application in a simulator.
We can certainly do so, but it would be easier to work with a browser of our choice
that has all the debugging tools necessary.
I usually work with Google Chrome so that's what we'll do here.
Going back to our browser—as I had mentioned I use Anvil for Mac
to set up our application so we can serve the application,
so I already have Anvil for Mac here.
I'm going to click on it and it brings up Goodweather.
I had actually set it up before but let me delete it so that we can set it up again.
You should see that it says "add a site."
Once we click on add a site, click on development, and click on Goodweather,
and click open, and there it is.
Now if I click on Goodweather it should take me to what my application looks like.
Now the application looks a little ugly because we haven't done much to it yet.
Let's go ahead and fix this black stuff that we have going on here,
and this we can fix using themes.
So out of the box JQuery Mobile provides you
with four different swatches of themes.
Now the new API—the latest version, which is 1.3—
when you click on theming it takes you to ThemeRoller
because they really want to encourage you to create your own theme,
which is basically a drag and drop interface
where you can create your own theme based on your own style guide,
but out of the box you can have four separate themes.
Now it's not directly available on their site.
I actually had to Googgle JQuery theme swatches for me to come up with this site,
which is an older version of their documentation.
As you can see, it specifies 1.2.0, and if I scroll down here
you will see the various styles of themes that they provide.
So it's A, B, C, D, and E.
As you scroll you'll see how it affects the different controls—that particular theme.
I personally prefer C because of the gray background and just how all the buttons
and stuff look like in the C theme. So that's what I'll do.
Going back here into the header I'll say data-theme equals C.
Now hitting save and going back to our browser, hopefully that should change.
So for now it all kind of looks gray but we'll come back to that
as we add more content and we add a footer.
I want to display a little icon to the left, and I can do that using an href tag.
For now we're not going to put anything in the href. I'll just put a # symbol there.
I'll say data-icon equals "bars."
There are several things that were can specify along with the icons.
If we go back to the JQuery documentation and look at icons
there is the bars icon, and if we scroll down we can have icon positioning.
You have left, right top, and bottom.
I want it to be positioned on the left so I will say data-icon position left.
Let me copy that, and if we scroll down even further we can have something
called "notext" because I just want it to be an icon. I don't want it to display any text.
Once again, I can copy this attribute that says data-icon position "notext."
I can say close and then close my A tag.
So it's going to display an icon to the left
and it will not display the text that I just typed in there.
You can add more things like not having a shadow,
because by default the icons have shadows.
I don't want any shadows so I'm just going to copy this attribute, too,
and say data-iconshadow false. So there.
It says close, but it's still displaying the text,
and I specifically said I didn't want text in there.
So let's look at this source. It says "notext."
What I did miss was that the data-role should be a button, and I didn't specify
a role, so let's put in the data-role attribute going back here.
So the data-role says button, but I do have two data-icon positions.
One is left and one says "notext." I can have one or the other.
I don't want the icon display on the left of the text. I just don't want any text.
So let me just delete that and we can go back here, and there—
there is our icon on the left.
The other thing is that this is not a close button. This is a menu button.
So what are we going to have inside the content?
Well, I want to display—let's go back here—I want to display an icon,
display the number and degrees, and it says Fahrenheit.
So since that text is big and bold it will obviously be an tag.
We'll worry about the icon a little later, but let's do 65 degrees,
and degrees can be specified using an html special character,
which is this weird little thing here, and then specify F, and then close an tag.
Next we need to just say what that weather is,
so I'm just going to say whatever, partly cloudy,
tag, and then location
so that can be specified once again with a
Now we are going to be referencing all of these tags using JQuery
so we can specify id's for each one of them.
So that's current temperature.
So that's the summary.
The third one is simply location.
Let's go back to the browser and see what this looks like. All right, it's pretty simple.
You have the temperature, a little description, and current location.
We don't have a footer in our application so we can really get rid of this data-role.
All right, so now we want our panel to slide out
so I'm going to rename this my panel to say left panel.
That's just the id and that's how we are going to reference this.
Here in the href of the menu button I'm going to specify the id of my panel.
For now let's just put in a
- tag here
because eventually it will be a list anyway.
So when we click on the menu it should slide out the panel on the left.
Going back here, let's refresh. So there, the panel slides out.
We have the close button but we haven't assigned any action to it,
so it should go back. So that works.
We have a menu sliding out on the left,
and as you can see we hardly put in any code.
You get all of these things out of the box.
That's the beauty of JQuery Mobile that you write very little code.
You define what your structure and the roles your structure plays
and then JQuery Mobile takes over.
It says, "Oh, you want to slide this panel out? Don't worry, I'll take care of that."
So now let's add more functionality to this panel.
Before we add the list view—that's what this
- tag will end up being—
let's add a theme attribute to our panel.
I'm going to add theme C,
- tag will have theme d. This should be lower case.
- tag will play the date-role of a list view.
Let's go back to the JQuery Mobile site and see what the list view looks like.
So here we are—list views.
Now basically you can have different sorts of list views and this is a linked list view,
which is exactly what we need and you also have a list divider.
Here's a divider. This is what this list looks like. Let's look at a list with a divider.
We'll click on view source and it says autodividers.
We don't need autodividers because we'll add our own dividers.
Basically all you need to do is say data-role equals list view,
which we have done. We just specified that here.
Let's go back here, hit refresh, and open this up, and there's our close button.
So it looks a little nicer. The close button is up on top and it pops out really nicely.
So if we click that again it shuts itself off.
As you can see now, the Goodweather toolbar shows up.
It's because I had specified data-theme as "C" and it should really be "c."
Okay, so let's make this list icon work.
I want a data-icon here and the data-icon should really look like a close button
but in this case it is specified as a delete button,
and I need to specify an href tag here.
The href tag really doesn't go anywhere but I do want the close button to be functional
so what I'll have to do here is I'll have to specify a data-action,
and the data-action is used specifying data-rel, which really is relative or relation
and the relation here is that it is a close action.
When you click on close button it should show an icon,
and it should allow yo to close the panel on the left.
We hit refresh and there's the close button with the nice little close icon,
and when we click that it automatically closes the panel.
Now that we have a close button, we need a divider,
so we—after the close button there should be a separator,
and then we should list out all the cities. So let's go ahead and do that.
I'll say li data-role. It should say list-divider,
select a city. Okay, we save this.
Let's hit refresh and we should get a blue divider
between our close button and the rest of the cities.
Let's go ahead and specify the rest of the cities.
That will simply be li with href tags.
The first one can be the current location.
I have these typed out already so you don't have to see me type.
I'm just going to copy and paste the code.
What I've done here is specify the class called city.
You'll saee that later when we use JQuery to over ride the click functionality,
and I've also specifed the data-rel as closed so that
we close the panel each time a city is selected.
Let's refresh here, open this, and here you have several different cities.
Once I click a city it automatically closes the panel.
So we're almost there with the look and feel of our application with JQuery Mobile.
The only things we're missing are the icons.
As you can see, I haven't really touched on that as yet.
It's not that it's very complicated, it's just we have to
download a few files, and we have to make it work.
For icons I refer to this site.
This person was nice enough to create these Meteocons he calls it,
and basically they are icons specific for weather apps.
His name is Alessio Atzeni—I hope I'm pronouncing his name right—
but anyway the link is there in the show notes. He has two versions.
You have a PSD-EPS version if you just want to use SVG files on your web site—
you're welcome to do that. I found it really easy to use fonts.
Basically, what you can do is specify a font face
and then just use those fonts within your application. So what do I really mean?
Well, let's just do this so that you can understand what I'm talking about.
Of course the first thing we'll have to do is click download.
We download this and then show it in finder. S there are our fonts.
I double click on them and go into the folder.
Of course, as usual, there is the license agreement, and there's a preview
of all the fonts, which look great, and within the font you have the font face.
We need to copy all of these files into our project.
I just copied that. There is our project and in the CSS folder I simply paste them.
So there are all our different font files.
Going back to Sublime all I have to do is simply link that style sheet.
Since it's in the CSS folder I have to say stylesheet.CSS.
Let's open up that style sheet, and here as you can see it says font face.
If you head on over back to his site he shows you different examples
on how you can do it, and there are basically two styles.
One is you can just say data-icon, and that's what the JQuery Mobile style is.
Basically you day data-icon, and then it just looks at which icon you should implement,
and the font is based on each character that is assigned to each font.
So if you say A, it will display the corresponding icon for that character.
I personally preferred this style here where it says icon before so I can have
more control over which elements have that class and can display that icon.
Going back to our own application, here's where I specify the current temperature.
I'm going to specify class-icon and, in addition,
I have to specify the data-icon attribute.
Let's pick an icon that we want to display.
I like it sunny so I'm going to display the second icon. So we've included our files.
We've linked our CSS stylesheet, and in our style sheet we need to specify
the CSS before—that's the one thing that I forgot. So let me copy this.
So basically it says wherever you see the class icon,
before it display an icon related to what's in the data-icon attribute.
So let's see if this worked. Going back to our Godweather app, and there it is.
There is our icon, which looks pretty nice.
Now we can clean this up and make the text a little larger,
and make the other text a little smaller. Let's go ahead and do that right away.
Let's say current temp. I simply want to increase the font size.
I'm going to say 3em and the current summary.
We'll increase the font size to let's say 1.5.
All right, so we have a bigger text and nice big icons. This is looking good.
The one thing thay I'm missing is that it doesn't look centered,
but it doesn't because it isn't.
So let's specify a class here for our content.
Let's say class equals content.
Going back to our style sheet, say content—I'll say text align center. Very basic stuff.
Refreshing, and now everything is centered and looks clean and nice.
So we've made a lot of progress. Our app has really come together.
We have all the components in place. We have the left panel.
We have the main content area that displays the weather. It slides in and out.
We learned a little bit about JQuery Mobile. So we've made a lot of progress.
What we're missing is the main functionality of actually displaying
real weather for on of those cities or the current location.
What we need to do is access a third-party API to grab that information,
bring it through an AJAX service, and display it into the application.
That's exactly what we'll do in our next workshop, so stay tuned.
This is Amit and thank you for watching.
You need to sign up for Treehouse in order to download course files.Sign up