Creating our page templates
Video: Creating our page templatesNow 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.
- Next steps
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.
- 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
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.