Outcomes

  • Learn what Listviews are
  • Make buttons
  • Make a simple listview
  • Change list icons

Resources


Now that we’ve got down the basics of creating a page, we’re going to slow things down a bit. We’ll try and introduce only one or two new concepts per lesson so that you can learn at an easier pace.

Today, we’re going to go over ways of displaying links. You may have noticed that the apps you created for Project 2 were kinda janky. You put links to the next and previous pages with links at the bottom of each and there was no central place to skip to specific sections. We need to think of a better user interface (UI).

What is a Listview?

We saw one way of displaying links back in lesson 1. It looked like this:

That was a listview. Listviews allow us to make lists of links. There are other ways, but listviews will display them in a certain way and afford you more options. Let’s consider a few different ways of displaying links.

Follow Along Activity

Please download the lesson 3 zip. It contains a zip file that will have a  file inside called lesson-3-app-template.html. Sorry it had to be like that, it’s kinda weird linking html files for download. The app contains 5 pages in all. A home page, and 4 other pages. Each page links back to the home page.

Objective: On the Homepage, Create Links to the Other Four Pages

Let’s do it very simply and just create a bunch of bare-bone links to the other pages. As you recall, you do this like,

<a href="#page-1">Page One</a>

Do that for all four pages, and look at what it looks like in the browser.

Screen Shot 2014-05-16 at 3.00.58 PM

Looks pretty bad. We want things to look more “app-y”. Luckily, jQuery Mobile does that for us. Let’s make those boring links into buttons. As with everything in this framework, we do it with a data-role attribute. Add data-role=”button”
 to each of your links’ opening tags so that they look like this:

<a href="#page-2" data-role="button">Page Two</a>

The result looks like this:

Screen Shot 2014-05-16 at 3.11.43 PM

That looks much more like an app. Those do look better, but it still looks kinda weird. Maybe it’s just my aesthetic preference, but a bunch of buttons stacked on top of each other just looks weird. Let’s do it different. Make each of those links into list items in an unordered list, remove the data-role=”button” and take a look.

Screen Shot 2014-05-16 at 3.17.18 PM

Looks awful of course. But here we use some jQuery magic. Let’s see if you’ve been paying attention. We want to transform this unordered list into something called a “listview”. How do you think we would do that? Hint: it’s the same way we have done crazy stuff to everything else.

That’s correct! You add data-role=”listview” to the <ul> tag. It ends up looking like this:

Screen Shot 2014-05-16 at 3.11.43 PM

Now that’s snazzy. We have a listview that looks hella “app-y”. We can further customize it by, what else, adding new data attributes. Try adding the following.

data-inset=”true”

Screen Shot 2014-05-16 at 3.19.04 PM

data-icon=”false” to remove the arrows

Screen Shot 2014-05-16 at 3.19.55 PM

Or you can add “data-icon=”gear/info/delete/etc” to individual list items. Check here for full list of icon names.

<li data-icon="bars"><a href="#page-1">Page 1</a></li>
<li data-icon="plus"><a href="#page-2">Page 2</a></li>
<li data-icon="delete"><a href="#page-3">Page 3</a></li>
<li data-icon="gear"><a href="#page-4">Page 4</a></li>

produces

Screen Shot 2014-05-16 at 3.21.29 PM

You obviously shouldn’t stick these icons just anywhere. They have meanings and should be used appropriately.

We won’t go over any more here. You’ll have to look over the listview documentation linked here.

Project Three

Go back to your proposal app from Project Two and make a copy of it. This is so you’ll have a backup copy of your app at previous stages of development.

You’ll be using your new knowledge of navigation methods to improve your proposal app.

Parameters

On the homepage of your app, create a listview containing links to each section of your proposal (i.e. each page of your app).

Get rid of the stupid forward/backward links at the bottom of each page and simply replace them with a button linking back to the home page. Give the button a “home” icon using data-icon=”home”.

Check the YEI GitHub to see a completed example.