jQuery Mobile Web Applications
Illustration by John Hersey

Creating our page templates


From:

jQuery Mobile Web Applications

with Ray Villalobos

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Video: Creating our page templates

Now that we have some data going into our application, it's time to start creating the templates that we're going to use to display that data to our users. Now so far I have just a homepage on our application, and right after the homepage, I have sort of a fake page called info that's not really doing anything. So what we're going to do is just delete all this, plus this other Hello World that's down here. And just get rid of it. And we'll start writing the templates we need to display our data, but we're going to need two things.
Expand all | Collapse all
  1. 2m 59s
    1. Welcome
      58s
    2. What you should know
      1m 12s
    3. Using the exercise files
      49s
  2. 44m 29s
    1. Downloading and installing jQuery Mobile
      12m 3s
    2. Creating a page
      6m 1s
    3. Using buttons
      8m 11s
    4. Adding control groups
      5m 22s
    5. Creating a header toolbar
      7m 3s
    6. Adding icons to a footer toolbar
      5m 49s
  3. 43m 46s
    1. Creating JSON feeds from WordPress
      7m 11s
    2. Importing feeds into our application
      6m 45s
    3. Creating our page templates
      5m 18s
    4. Populating filterable list items dynamically
      10m 31s
    5. Adding thumbnails to our list items
      5m 19s
    6. Fixing potential link problems
      2m 54s
    7. Adding a more information page
      5m 48s
  4. 20m 52s
    1. Creating dynamic toolbars
      7m 49s
    2. Adding a headline to our toolbars
      3m 18s
    3. Injecting a footer
      4m 45s
    4. Highlighting the active toolbar link
      5m 0s
  5. 35m 34s
    1. Preparing pages for our feed
      4m 34s
    2. Understanding the YouTube API
      4m 58s
    3. Parsing the YouTube feed
      9m 36s
    4. Adding thumbnails and links
      6m 27s
    5. Playing our video
      5m 53s
    6. Styling our YouTube elements
      4m 6s
  6. 27m 47s
    1. Working with a feed from Flickr
      8m 38s
    2. Parsing data from the Flickr API
      9m 39s
    3. Displaying photos on a separate page
      3m 28s
    4. Styling a responsive grid
      6m 2s
  7. 27m 51s
    1. Setting up a Twitter account
      4m 32s
    2. Understanding the Twitter feed
      3m 24s
    3. Parsing data from the Twitter API
      4m 35s
    4. Styling our Twitter feeds
      3m 31s
    5. Processing Tweets through regular expressions
      6m 35s
    6. Finishing our app
      5m 14s
  8. 2m 2s
    1. Next steps
      2m 2s

please wait ...
Watch the Online Video Course jQuery Mobile Web Applications
3h 25m Intermediate Feb 04, 2014

Viewers: in countries Watching now:

Learn how to build dynamic jQuery Mobile web applications that read data from services like Flickr, YouTube, WordPress, and Twitter, in this course with Ray Villalobos. Ray shows you how to display photos, videos, and even Tweets on your sites using jQuery Mobile and these popular APIs. He also shows how to export information from a WordPress blog using a JSON-based plugin and create a new jQuery Mobile project using that data. Along the way, he covers the new features in jQuery Mobile 1.4 such as changes to templates, filterable lists, icons, and buttons.

Topics include:
  • Creating a new page with jQuery Mobile
  • Importing feeds
  • Adding thumbnails to list items
  • Creating dynamic toolbars
  • Parsing a YouTube feed
  • Displaying photos with the Flickr API
  • Parsing and styling Twitter feeds
Subject:
Web
Software:
jQuery Mobile
Author:
Ray Villalobos

Creating our page templates

Now that we have some data going into our application, it's time to start creating the templates that we're going to use to display that data to our users. Now so far I have just a homepage on our application, and right after the homepage, I have sort of a fake page called info that's not really doing anything. So what we're going to do is just delete all this, plus this other Hello World that's down here. And just get rid of it. And we'll start writing the templates we need to display our data, but we're going to need two things.

We're going to need a page that's going to display the block posts and then another page that will display the information in each post. Let's go ahead and start by creating the block page. I'm going to go ahead and create some comments here. It's a really good idea to create comments when you're working with jQuery Mobile. And then, I'm going to create a section. I like to create all my pages with a section tag, and I'll give this an ID of blog, and then a data-role of page. And I'm going to give this a title. I'll put a data-title attribute.

Now a data title attribute is something I'm completely making up. It doesn't exist. That's one of the nice things about the data attribute. Jquery mobile uses it in order to create elements. Like, for example, our page here is created by using this data roll page attribute. I'm going to create a separate one called data title that I will use later on. So I'll call this the block page. And then inside that I want to create a div and that div will have a data roll of content.

And I''m going to give it an id because, what I'll do eventually, is I'll flow some information into this div. And this will be postlist. Alright, so we have sort of the shell of our page right now. Let's go ahead and add some comments so we don't get these confused later. This is our page, I'll say it's a blog page. And we'll make that into a comment. And this is our contents, so I'll type in content. Make that into a comment. And this is essentially the shelf for our page. Now, I am going to go ahead and copy the footer and the header from the previous page.

And as a matter of fact, I'm going to cut it because we don't really need this footer with all these icons down here on the home page. We've already got them up here. So I'll just grab them. And cut them from here, and then place them right here in our block page. Let me go ahead and indent that a little bit better. And let me go ahead and copy the header. I don't think I need the header on the homepage either, because it's really just good enough to have this logo here. And, I'll take this section, right before the content, I'll piece this header.

Lets go ahead and save that. One more thing I'll do is link this blog tag to our new blog page and then I'll come down here and I'm going to just put some sample content for right now. So let me do again h-one welcome and P save this and refresh our page. We should see the header and footer disappear and then if we click on the blog page we should see this page that looks like this. So that takes care of our blog page and eventually this is going to be a list of our articles from our blog and what I want to do is once I click on an individual article, I want to read the contents of that article.

So I'm going to need to create a placeholder for that other page. I'll create another section right here. This section is going to have, again, a data role of page, and then it's going to have an ID of blog post. And then inside that it will have a div with a data role of content and in there I'll insert a placeholder another div with an id of my post. So what's going to happen eventually is this page right here is going to be populated when somebody clicks on one of the list items that we're going to place on this page.

Let's go ahead and add some comments to the pages the more comments you put on a jQuery mobile page the better so I'll grab this Comment up here. And make sure that I added to our second page over here. So, now that we have a good template we're ready to start populating it through our java script. We'll do that in the next movie.

There are currently no FAQs about jQuery Mobile Web Applications.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed jQuery Mobile Web Applications.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.