Implementing mobile web user interfaces
- Setting the scene
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.
- 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
Implementing mobile web user interfaces
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.
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.
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.