Outcomes for this lesson:

  • Get Acquainted with jQuery Mobile website
  • Learn some basic vocabulary
  • Create a basic Page
  • Create a second page that links to the first

Resources

  • Demo Page
  • Resource

Traditionally, mobile apps were built to run on a particular phone OS like iOS for iPhones or Android for other devices. But developers are realizing that that takes way too much time and leaves open too much room for things to mess up. jQuery Mobile is one way that apps are being made easier.

The basic thing you have to realize is that apps are turning into webpages that run on your phone. That’s the gist of it anyway. Using HTML, CSS, and Javascript we can make apps that look and run great no matter what phone they’re on.

jquerymobile.com

This will be our base of operations. The website unfortunately has a rather peculiar layout. You should definitely explore the site, but the part that we’ll be most concerned with is “Demos”.

Demos

Click on the demo page for the latest stable build. At time of writing this lesson, that was version 1.4.2

 

The Demo page contains a reference for all the ‘widgets’ available to you. Think of this section as a manual of sorts.

Take a few minutes and read through “Introduction“. It will tell you the basics of what you need to know. I’ll outline it right here, but you still have to read “Introduction”.

The Basis of jQuery Mobile

You have experience coding websites in straight HTML and CSS. For your midterm in Intro to Web Design, you create a full website using nothing but code. Recall how your site had multiple pages like, Home, About Me, and Contact. Each of those pages was contained in its own .html file like, ‘index.html’, ‘about.html’, and ‘contact.html’. We’re going to do something slightly different with jQuery Mobile. We’re going to put all the pages into a single HTML document. jQuery Mobile will then take care of all the crafty stuff and allow it to display as if it’s a collection of multiple pages instead of one big one.

But wait you say, we’re making mobile apps, not webpages! It’s time for a revelation. The days of developing for Apple or Android or whatever are drawing to a close. Mobile apps are moving toward a standard of simply being websites that look good on a phone, so that’s exactly what we’re going to make.

The Structure of an App

Please refer to the jQuery Mobile article on Pages, as their documentation is quite good.

As stated before, jQuery Mobile allows us to put everything we want into one HTML file. Here is what allows it to work:

jQuery Mobile 1

All that stuff there in the head is the heart of the program. Let’s go through line by line.

  • Line 1: Defines the document type as an HTML 5 document
  • Line 2: Starts the HTML code
  • Line 3: Begins the <head>
  • Line 4: Defines the site title
  • Line 5: <meta> tags are used to define information about the page. “viewport” is a somewhat new thing. It is used to tell devices to set the width of the content on the page to be as wide as the window it’s in. In the case of mobile browsers, this will make sure that the content doesn’t go wider than the screen and make the user scroll sideways. In the mobile world, sideways is bad.
  • Line 6: This links the stylesheet. They provide us with a really big one. Seriously, it’s 94,000 characters in size and has 0 extra spaces. This stylesheet contains just about every look and feel that we could want.
  • Line 7 and 8: These are link to external “script files”. Scripts are just like the script to a movie. They line out exactly what is to happen. Basically any time you see something “happen” on a webpage, like a pop up, a sound, or when something changes, it’s because a script was called up and run. Javascript is one of the most popular scripting languages for the web. It’s relatively simple to learn and it runs on the browser. jQuery is all about creating huge javascript “libraries”, putting them in external files like the ones linked on lines 7 and 8, and then calling them with the attribute “data-role” or something similar.
  • Line 9: Closes the <head>
  • Line 11: Starts the <body>
  • Line 12: This is just placeholder text. It’s saying that all the content of your app will go here.
  • Line 13: Closes <body>
  • Line 14: Ends the HTML document

TL;DR: You need to included the above <head> section in order for any of this stuff to work.

On the jQuery Mobile site, you will see [version] instead of numbers a placeholder. jQuery Mobile, jQuery, and the CSS that style everything are constantly changing so instead of writing them into this walkthrough page every time they change, they just put [version] and expect you to check what the current versions are. To do that http://jquerymobile.com/download/ and look for the code snippet. It will contain the correct versions.

The Content

Let’s look at how things look when we actually start using jQuery Mobile. Go ahead and copy/paste the code from above into your text editor and save it to a file called index.html (of course). In body, enter the following code into the body of the page:

Screen Shot 2014-05-16 at 12.35.06 PM
Not too impressive of course. This is a ‘page’ as we’ll be understanding it from now on. It is entirely self contained. We can add some bells and whistles to make it nicer. Let’s add a header to it. If we’re going to do that we’ll have to add some structure though. Structure means <div>’s. Make your code look like this now:

Screen Shot 2014-05-16 at 12.41.27 PM

There are two very important things that have changed:

  1. There is a header. We expected that.
  2. The content (i.e. the heading and the paragraph) is formatted differently. Look at the difference:

Before Adding data-role=”content”

After Adding data-role=”content”

You’re starting to see how data-role is used. Just by adding that attribute, you were able to do some big things to these page components. Let’s get crazy with it and actually make a a second page. You already know the layout of it. Anything inside a <div data-role=”page”> will be a page. Use your existing page as a template. Just copy/paste it underneath the original page and change the page id and content to reflect that it’s a new page.

Also, don’t forget to link them together! How else will users navigate around? To make links, just enter the href as #id of the first page. Remember back to the last lesson how we talked about linking within a page? Well that’s what you’re doing here.

Screen Shot 2014-05-16 at 12.46.21 PM

It might not look impressive, but consider that you have a multipage website running out of a single document, and all you had to do was add some jQuery attributes. In the coming lessons we’ll start adding more things to our pages and making things more complex.

Headers and Footers

This section is an addon as someone pointed out that I don’t explicitly cover headers anywhere else so when you get to the Navbars lesson, it might get confusing.

Headers and footers are simply a differently colored rectangle at the top or bottom of the page.

Consider the following code for a page in my app:

index_html

Proposal_App_and_Edit_Page_‹_Everett_Labs_—_WordPress

You may notice some things that have happened.

Header

When you put a heading (<h1>-<h6>) in the header div, it will automatically center. No matter what size heading you use, it will always normalize to the size you see above. Headers can have buttons in them and can be made to stick at the top when scrolling down, but we’ll get into that later.

Footer

See that we just put a link into the footer and it turned into a button without us telling it to do that. Footers work essentially the same as headers but at the top of the page. We don’t get much into footers in these lessons.

The Basics to Remember

  1. Everything is put onto a single HTML document
  2. You define what things are using the data-role attribute 

Project – Proposal App

We need to get you creating. Working through the examples in the lessons and on jquerymobile.com are important, but you need to dive in and get your hands dirty. To that end, you’re going to create a simple app for yourself.

Test App

This won’t be anything fancy. In fact, it will be quite crude. It will be more work than necessary, but you have to do that in order to get the language down.

Parameters

Use your GIIP general proposal outline as text for this assignment. You’re going to create a “Project Proposal App”.

  • Make a ‘page’ for each section of the proposal, i.e. Executive Summary, Methodology, Goals, etc.
  • At the bottom of each ‘page’ include a link to the previous page and the next page. You can use <div data-role=”footer”> if you like.
  • Make sure that all the links work
  • Don’t include the internal links from Project 1. They won’t work.

Doing This Project

This should be easy as long as you remember what you learned in Lesson 2. You can find the basic app template on this page of jQuery Mobile.

You can get rid of the footers if you want. It’s purely an aesthetic choice. When you want to create a new page, just create another <div data-role=”page” id=”page-x”>…</div> and put in your content.

Put It Online

You have access to a web server, so make use of it. You can upload the html file you create to your server. Just put it into a folder called “my-app” or something. This way you can try it out on your phone!

As always, you can see how I did it by going to the Lesson 2 repo on the YEI GitHub.