Start learning with our library of video tutorials taught by experts. Get started
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.
In this lesson, we going to look at how to use J Query Mobile to implement functionality behind a mobile web application. So, we have a document called, index.html, it defines a couple of pages in a dialog box for the user interface. So this is the main page if you like, displays a list of courses. Each of the items here is actually a hyper link so when I press it it takes me to another div, and that div displays like this. The div is actually the path of index to the html and in index to html. The div is called Item panel and the Item panel displays information for which ever cause is specified.
Now, in terms of the actual web page, the way jQuery works is that each page is represented as a div with a data roll. So this div starting on line 26, is the main page and then this div, starting on line 51 is the div that gives you information in detail for updating the course. And then this div down here represents the pop-up dialog where you can enter details for a new course. So I'll come back to some of these details later on in this lesson once we start looking at the code.
So let's look at the code now. Uibehavior.js. There are some interesting features in here, shows you how jQuery mobile works internally. First of all, I have a global variable, remembers which item I've currently selected, which course is currently displayed. And then on line five, this is jQuery code, which handles the page before change event. This even occurs in jQuery mobile, just before you move from one page to the next.
And I'll come back and describe why we've got this function later on in the lesson. But first of all, let's take you to the bottom of the page. And here, I've got some startup code. Dollar document.ready is the standard jQuery way of saying once the documents been loaded, do some startup code. So the first thing to do, is to call a function called Load Courses from Data. That will take the items or the course objects for my data, and display them as list items on the main page. We also set up handlers.
When the user enters details for a new course, it'll call this function. If the user clicks on a hyperlink to delete a course, then it calls this function. And then finally, if the user closes the dialog without saving it, then it calls this function. So we'll have a look at all of those during this lesson, starting off with this one here. Load Courses from Data. So let me show you what that function looks like. (INAUDIBLE) go on line 23 through to line 43. So, this function will populate the main page with all the course items as a list. So, the main page contains an unnoted list and each course is a list item. So, we get the unnoted list first of all from indexINAUDIBLE and we end it. And then what I do, is I create the string that represents each item in the list.
So each item is going to be a list item and its going to be a hyperlink. Okay? So the hyperlink will take me when I click on these icons it will effectively click the hyperlink and it will take me to the Item panel. Now, if you remember, the Item panel is this one here. It displays details for one item, for one course item. So if I click on this link here, this is the Item panel that we now see. It contains the course name, course ID, duration, and certification flag. So let's see how this function actually works.
That's the template for each list item. So we iterate through all the courses. The courses' variable is defined as a global array of course objects. So we iterate for all the course objects, and for each course, we take the template, which is this string here, and we use some regular expressions. I will place the ID, which is this thing here with the actual ID for the course. So, for example, 1, and then here it replaces the course name item with the actual name of the course with HTML5. So for the first list item it would have taken this template and it would replace the ID with a number such as 1.
And it would replace the course name with the actual name such as HTML5. And it does that for all the course items. To build up this string, list items, and then we assign it to the list. So this is effectively the jquery way of saying, I have a control, this list control here. And what I set is in the HTML to be the string that we've just built up. So effectively, we have a series of list items now being displayed inside here. List item, list item, list item, all of these are list items. And each list item contains a hyperlink.
Like this. And the hyperlink will take me to the details page, Item panel, and it'll pass in a query string parameter, indicating the ID of the course. The label on the hyperlink will be something like HNR 5. And of course that's what we see here displayed in the list item. If I click on that hyperlink it causes a page navigation and as I was discussing at the start of the lesson just before every page navigation. This event occurs this is a j Query way of finding an event event handling. So the page before change event would be triggered just before the page navigation.
And it gives me an opportunity to intercept the event at the pre populate the form with the information we want just before becomes visible to the user. So lets see how that works. So jQuery mobile has dollar.mobile object. It has lost a properties, this is the pathe that we are navigating to. We could pause that URL, to figure out the page that we're going to. And here, I take that page, the page has a hash property, and that indicates the string that appears after the hash symbol.
So effectively, it's taken this URL. And it's found the URL part after the hash symbol, item panel. So, if that contains the word Item panel, it means that we're about to go to the details page, so we need to load data into the page before the page becomes visible. And that's what this type of function does here, show course. So let me show you what that function looks like. So here's the Show Course function. The URL will itemize, where we're going to, for example, Item panel, and it will tell you what the course is.
So the URL will be something like this. What I've done here is I've extracted from the URL the course ID just using a bit of regular expressions. So the course ID for example would be something like one or two. It tells me which course to display. So I store that as a global variable. And then there's a helper function in data.js, which will give me back the course object for that ID. What I then do is I display all the information for that course in the user interface.
So let me show you what that looks like in index.html. In the Item panel, starting on line 51, we have a series of items which would be populated by this function. So the detail page has a header, which has a H1 called Header field. And then inside the content it has paragraphs called ID field, Duration field, and Certification field. So all of these had a field, ID field, Duration field and Certification field all of these are going to be populated in my function here.
So get the Header field and set its inner html to be the html for the course until the same for the ID field. In the ID field it will display something like course ID one. And then in the duration field for that paragraph it'll say duration, five days, for example. And then Certification field will display as certification true or false. Okay. So that pre-populates the form with the information for the particular course that the user has currently selected.
Next up here, I have another bit of regular expression syntax. And what that does is to get everything up to the question mark, in the URL. So for example, if the URL is something like this, it'll get everything up to there. And so you'll get the name of the page that we're currently displaying. And this will actually give me back a pointer to that div. So it'll give me back a pointer to the div called Item panel. So effectively, that's going to give me this div here.
And index.html is going to give me the Item panel as a dumb object. I can then do is call a helper function in jQuery mobile called page, what that does it take to div, that we've just selected, in this case the div. And the page function converts the code into a TML which is appropriate for mobile display. So the play styles and themes metrics for example. Okay. The last few lines of code just implemented the page change. So I take the dollar mobile object, and I actually call the changepage function. This is how you can programmatically cause a change to the page that we specified as motions.
So there are one or two details of the API, that I've just skirted over quite quickly there. But you get the idea that you can intercept pages changes and populate parts of a form based on that ID. For example, hash Item panel. And you can mix data into the equation as well, by pre-populating the field with parts of an object as we have done here. Okay, that is showing the course. Let's have a look at the last two functions of interest here to create a new course.
When does that get invoked? When does the create new course function get invoked? Well, if you remember, at the bottom of the example, I have some code here on line 110. When the user navigates to # new course form, the Submit button here will cause my function to be invoked. So back in index HTML. On the main page, we'll just collapse things down a little bit again so you can see what's happening. There we go.
The main page has a hyperlink. And the hyperlink will allow me to display a form to enter details for a new course. So in the user interface, this is the hyperlink we're talking about. So when the user clicks that hyperlink, it causes this page automatically to be displayed. New Course panel. And that's the final dif at the bottom of the back page here. Okay so starting to lay 79.
This is the div that represents a new course. It contains a form, where we can enter details for the new course. And at the bottom of the form, there's a Submit button. To submit those details for proposing. So the new form has text boxes called New Name field, it has a range called New Duration field, it has a select called New Certification field so these are the details that the user just entered.
So New Course name, New Duration and New Certification. Those are the fields that we commented he here. I want to click the Save button. This will close a submit and its this submit that we're handling. And this function here Create New course. So, let's take a look at that function, Create new course. It retrieves the information from the New Name field and the New Duration field and the New Certification field. Those are the items we saw on the grey.
And then it calls a helper function, Add course, that's located in data.js to store a new course object in the array and to put it into local storage. And then this function here, we've seen it already in this lesson, loads the new data into the gooey. So that we actually see the new course in the list. Finally, we have some code which is called when the user clicks a hyperlink to remove a course, so there's a Delete button. And when that button's clicked, it calls this function and this function simply removes the selected course. And one that's currently selected in the grey and then read displays the list of new courses again.
So if I save that one, and then I select it, and then I click the Delete button, this will delete the selected course. So, that concludes the lesson. We've seen quite a lot in this lesson, actually. We've seen how you can navigate from one page to another, and how you can intercept page changes, like this. You can then implement functionality to prepopulate forms with objects from local storage or from a data array.
And we've seen how you can implement ad functionality and remove functionality using the jQuery mobile library.
There are currently no FAQs about HTML5 Power Workshop.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.