Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Implementing application logic in a mobile web application

From: HTML5 Power Workshop

Video: Implementing application logic in a mobile web application

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.

Implementing application logic in a mobile web application

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.

In this query string parameter, so it'll display information for course number one. That's the ID and the name and the duration and whether or not the course gives you certification. I can delete the course if I wanted to. I'm not going to do that. I can go back to the main page, and then I can click this link to create a new course. So, for example, I can create the new course called COBOL, which is going to be one day course, no certification, Save. And there you go. So, the item's been saved. So, there's obviously some code that's running behind this user interface and that's what we're going to look at in this lesson. So first of all, income motivated, this is the actual main page that links in two javascript files that I've rewritten, one called data.js. This is the one that takes care of storing dat in local storage and then what we going to concentrate on this lesson is UI behavior.js. This is where all the event handling lives specially react the use interface events.

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.

Show transcript

This video is part of

Image for HTML5 Power Workshop
HTML5 Power Workshop

22 video lessons · 4030 viewers

Andy Olsen
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.


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 "Already a member? Log in

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

Your file was successfully uploaded.

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.