Implementing mobile web user interfaces

show more Implementing mobile web user interfaces provides you with in-depth training on Developer. Taught by Andy Olsen as part of the HTML5 Power Workshop show less
please wait ...

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.

Implementing mobile web user interfaces
Video duration: 15m 20s 3h 9m Intermediate


Implementing mobile web user interfaces provides you with in-depth training on Developer. Taught by Andy Olsen as part of the HTML5 Power Workshop

Developer Web video2brain
please wait ...