Start learning with our library of video tutorials taught by experts. Get started

HTML5 Power Workshop
Illustration by
Watching:

Implementing mobile web user interfaces


From:

HTML5 Power Workshop

with Andy Olsen

Video: Implementing mobile web user interfaces

In this lesson, we're going to see how to create a user interface for a mobile web application using jQuery mobile. Here's the webpage. It's called index.html. I've opened it up in Firefox. There were three files involved in the project. We have them all in the project files folder, indexed with HTML if I use the interface. Then there's a script file that implements JavaScript behind the UI, and there's another JavaScript file called Datajs, which takes care of data storage.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
HTML5 Power Workshop
3h 9m Intermediate May 31, 2012

Viewers: in countries Watching now:

In this course, part of his series of titles on HTML5 and CSS3, author and expert Andy Olsen looks at advanced topics like geolocation, mobile development, web sockets, Web SQL, and web workers. You'll also learn how to communicate between pages downloaded from different servers and how to use the new Ajax features in XMLHttpRequest Level 2. After completing this workshop, developers be well equipped to start utilizing the powerful features of HTML5.

Topics include:
  • Using the Communications API
  • Understanding geolocation
  • Getting and watching the current position
  • Using web workers and WebSockets
  • Implementing mobile web user interfaces
  • Managing data in a mobile web application
  • Working offline
  • Using Web SQL
  • Using drag-and-drop
Subjects:
Developer Web Web Design Web Development video2brain
Software:
HTML
Author:
Andy Olsen

Implementing mobile web user interfaces

In this lesson, we're going to see how to create a user interface for a mobile web application using jQuery mobile. Here's the webpage. It's called index.html. I've opened it up in Firefox. There were three files involved in the project. We have them all in the project files folder, indexed with HTML if I use the interface. Then there's a script file that implements JavaScript behind the UI, and there's another JavaScript file called Datajs, which takes care of data storage.

It stores all the course information in local storage. But index.html is the file we're going to look at in this lesson. So let me take you back in there. This web page actually comprises three separate pages in the web application. Here's the main panel, if you like. It'll display a list of the all the courses. If I select one of those courses, and click on it. Then this is a separate page, effectively. So the webpage, index.html, actually contains internally the main page, plus the detail page we're looking at here. And if I go back onto the main page and then click on this link here, Create New Course, then this is also a part of index.html.

There is a popup dialog where I can add details for a new course. So let's say I wanted to have a course on Visual Basic, and let's make it a 5-day course, and it does lead to certification. Save. There we go. So, that's how the webpage behaves. Let's have a look at the code behind it. I have it open already in Komodo edit. So, first things first, let me take you to the head section because there are a few interesting things in there to pull out in terms of jQuery mobile. First thing, I define a meta tag and I set the Viewport Property to indicate that the webpage should display itself according to the width of the actual device it's using.

What I'll then do is I've pull in a standard style sheet provided by jQuery mobile to make the webpage look nice on a mobile platform. What I've done here, as you can see, is I've actually referred to the actual CSS file on the jQuery website. Now, what you might prefer to do is to download that CSS file onto your web server. And then just pull it in relative to your domain. But you're quite welcome to point to the jQuery website like that, if you want to. The next thing I do is I pull in two scripts. These are two standard jQuery scripts. The first one is the standard jQuery script that would work on desktop applications as well.

And then the second one, is the JavaScript library, specifically provided by jQuery for mobile development. Okay. So again, I've pulled those in from the public website for jQuery. If you want to, you could store those locally on your web server instead. Okay, next then, I pull in the two script files that I've written. So the datajs and the UI behavior JS. So those are projects actually in my file folder. Okay, now let's have a look at the body. A few interesting things to pick up here in terms of jQuery mobile. First of all in my body, you'll notice I find a tag called data theme. This is a standard HTML five mechanism where you can have any attribute prefixed by data hyphen and allows library authors like jQuery effectively to define an API. So they've introduced a new property effectively called data theme. And you can set it to a, b, c, d, e, all the way through to z. There are 26 standard themes provided by jQuery represent different color schemes for list boxes and text boxes and headers and so on. Data theme b is the black on gray effect that we saw here. Okay, so bare that in mind because later on when we look at the create new course we will see a different theme we can use that.

Now, inside the body if you want to in HTML5 and jQuery mobile, you can have multi-page hosting. What means is a single HTML document can contain multiple webpages for your mobile app. You do that by defining a div for each page. Give it an ID so you can refer to it programmatically if you want to. And then give it a DataRow of either page or dialog, depending on whether you want it to look like a dull page or pop up dialog.

So in my example, I have two pages, and one dialog. We have the main page, I'm going to just collapse it here, and I'll collapse that one, and I'll collapse that. So that you can actually see the overall structure of my HTML document. We have a div here on line 26, well it starts on line 26 data role page. This is the main page in my web application. So that's what we see initially, okay, that's the first page. And then the second div starts on line 51.

That's the div representing the detail page, so when I click on one of these courses, like HTML 5. What is displaying here is the Item panel. You can actually see the URL here on the web page index 3HTML. It's no show in the div, whose ID is Item panel and also knows which particular course is displaying. Course number one, that's the HTML5 course. Okay, so that's achieved by a div whose ID is Item panel and it also is a full page.

And then finally, you have a third div down here that represents a pop up dialog so the DataRow here is set to dialog. That's what happens when you've clicked the New Course button on the main page. So let me go back into the example and go back to the main page. When I go here, Create New Course, there we go, it's displaying this dialog, New Course panel. And it's displaying it as a dialog box. You'll notice I've set the data theme to be E here.

That's one of the 26 themes provided by jQuery mobile. And it's the orange effect that you see here. So you should experiment with this. This exactly great documentation for jQuery mobile online and I will show you what all these different themes look like. But even experiment try setting different values for the data theme, and see which you prefer. So, let me just go back onto the main page. And I'll go back into Cloud Edit and let's have a look at the details for the main page. So this is first div. So it starts on line 26, and goes through to line 45.

This is the main page. And as you can see on the main page, it has a header, and then a list, and then a footer. So let's see how that's achieved. Well, what you do is you use DataRow again to indicate partitions on your page. So this first div sets up the header. And the header contains some text, mobile course planner, plus a hyperlink. When I click on that hyperlink, it will bring up the dialog box, New Course panel.

So this is the hyperlink we're talking about here. The hyperlink displays a data icon, data icon as you can imagine is another jQuery mobile add on. So the date icons for the plus symbol, there's the date icon for Delete ,and data icon for Back, standard data icons to make complication look standardized. So the hyperlink has that symbol plus this text, Create New Course. There we go. Thats what hyperlink is all of that is my hyperlink.

Taken in conjunction with this text here, that constitutes the header for that page. Now, the main content for the page is represented by a div, and this time, we set the data world to be content. So this is all of this here. This is an entire content for the webpage. The content contains a list of items, programmatically, I have some code that sits behind this on start-up. It grabs all the course objects from local storage and creates LI elements and adds them to that list.

One of the things that you can do with jQuery mobile is you can control how the elements appear. So, even though having an audit list that'll contain list items, it doesn't really look like a list with list items. And that's by virtue of this here DataRow equals List view. This is another jQuery mobile DataRow, which indicates the displayed items in a nice list like we've seen here. So this is my unordered list and it looks lovely actually, very professional. So there are a whole range of different DataRow attributes that we've seen already actually, DataRow page for the whole page, DataRow header, DataRow content and DataRow list view.

This is a key point in jQuery mobile. Very simple, lot of code sitting behind it, but it makes it easier for you as a developer to just get on with it. finally we have another div at the bottom that displays the footer. So we have DataRow footer, it just displays a simple copyright message like that, My Company. Right, well, that's good. Let's have a look at the second div. The second div is called Item panel. This is the one that displays details for one of my courses, depending on which one I've selected. So it starts on line 51, goes through to line 71. Let me just remind you but it looks like in the user interface. So we will select the HTML Course.

So this here is the Item panel div, as you can see from the name here, Item panel. Let's have a look at the markup. So the header has hyperlink, which will take me back to the main page. That's the hyperlink we see there. Hyperlinks, there's a special attribute called DataRow. It indicates a special kind of relationship. You go to the previous page. You don't need to know what the previous page was called. You just say data val back, and it will take you back to the page that you came from.

Also, data icon equals back. So that's the standard data icon from jQuery mobile and this plays this back symbol here. So that's quite nice. Then we have some standard text. Now have some fixed code here, name of the course. When the webpages actually launched, there's some JavaScript which will replace name of the course with the actual name of the course that you selected back on the main page. So there, HTML5, that was filled in programmatically by some JavaScript. On the right hand side of the header, I have another icon that represents delete. So this again is another hyperlink.

This time, the data icon is set to Delete, so that's a standard symbol, in jQuery mobile. Now, the main content for that page, displays the ID, the duration and whether or not the course leads to certification. So obviously, there has to be some JavaScript code that fills that in programmatically. So when we actually look at it at run time, it'll display the actual details for the actual course that we're talking about. Okay, and at the end here, we have a folder as you might expect.

Let's go back to the UI, and I'll go back under the main page. And this time, I'll click Create New Course, and I'm going to talk about how this dialog is created. So there's actually quite interesting stuff in here, let me show you this. So to create a dialog, you set the DataRow equals dialog and as I mentioned earlier, you can set the data theme, you can give it a color scheme. So in terms of the main content, what I have here is a form, and inside the form I have a div, which is like a piece of glue.

When you set the data roll to field contain, it's effectively like a panel that will display a label and a text box. So we group those together so they'll be displayed together. Input type text, place on that name of the course, that's what the text box is going to look like. I've also got a label. But I've set the label's class, to be UI hidden accessible. So logically, this label is present in the dom tree but it won't be displayed by the browser.

Okay, so there's no label here. But that's useful for accessibility. Screen readers, for example, might be able to pluck out that label and read it, to help people with visual impairment. So the next thing we have is another div that allows me to enter the duration for a course between one day to five days. So this time, I've used the HTML5 element. Input type equals range. And that's what it looks like in the browser, the mobile device. Then we have the third item.

This will allow me to enter information for Boolean flag to say whether or not this course leads to certification. Interesting point here. This effectively, is like a drop down list. With two items. Yes or No. But it started displaying itself as a select, with two items. What I've done here, is I've set the DataRow to be slighter. This again, is another DataRow standard, provided by jQuery and it allows you to control how the element will appear. It'll appear as a slider, which allows you to select items No or Yes. And you can set Data menu to true to give you a smaller version. Lots of controls to support that attribute to give you a minimized version of the control in condensed user interface areas, okay? So, that's great.

And then, finally, we have two buttons. A Submit button which will allow me to save the data. And then another button which will take me back to the previous page. So this button also has a DataRow back to take me back to the previous page, plus an icon to look nice and consistent to the user. So we've seen quite a lot here. We've seen how to create an index page with several different items representing the main page, the page where we enter new details, and a pop-up dialog.

And we've seen how you can use DataRow to great effect to control how jQuery manages these different elements.

There are currently no FAQs about HTML5 Power Workshop.

 
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.
Upgrade now


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 Upgrade now

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 HTML5 Power Workshop.

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?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

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 preferencesfrom 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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

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.