Sidney Maestre has spent several years building HTML5 and native mobile apps and sharing his knowledge with other developers.
Seeing a lack of meetups dedicated to non-native mobile development, Sidney formed, BAM!, Bay Area Mobile, a meetup focused on jQuery Mobile, Sencha, jQtouch and other non-native mobile technologies.
With the release of jQuery Mobile, Sidney has spent much of 2011 focused on learning and speaking about the technology. This includes speaking at HTML5 DevConf, Adobe MAX and Silicon Valley Code Camp. He is often called up at eBay as an internal expert on the subject. 2011 also saw the beta release of RaffleSwag, for conducting raffles through a mobile phone. Sidney chose jQuery mobile for it's broad support of different platforms and browsers.
Sidney is the former Platform Evangelist with StackMob. StackMob helps mobile developers be more productive by providing cloud based backend services.
In this initial lesson, I cover the experience level necessary for this course, a bit of history of the jQuery Mobile framework, which software you'll need and how to download the course materials.
You can review the PDF at your own pace and see the links to download software for this course
Introduction to the Learning jQuery Mobile materials and Agenda for Lesson 1.
Exercise 1 covers using the HTML5 doctype, shows how to download a copy of the jQuery mobile library and include those files in your project. Most importantly, how to tell if the library is initializing correctly.
In Exercise 2, we look at how to use jQuery libraries located on a Content Delivery Network along with the pros and cons of his method.
In exercise 1.3, we add the viewport meta data to assist mobile browsers in scaling your app to the devices height and width.
In Exercise 2.1, you'll learn about data-roles and how they are used in jQuery to define pages, headers, footer and content areas. We'll use the data-position attribute to fix our footer to the bottom of your screen.
In Exercise 2.2, you'll learn about navigation bars. We'll review the available icons you get with jQuery mobile and how to add them to the navigation buttons and position them. We'll show how you can assign different data themes to different components.
In Exercise 3.1, we look at how to navigate from one page to another html page in the same site. We'll use the data-role button to create our link to the second page. You'll see the default slide transtion and when you hit the back button you'll see jQuery mobile remembers the transition and does the reverse automatically back to the first page.
In Exercise 3.2, we'll navigate to another div inside the same page. The div with have a data-role of page. jQuery Mobile will automatically show the first div with a data-role page and hide all others. When you navigate, you'll see the divs hide and show automatically.
In this exercise, we look at how to link to pages external to your domain name.
In this exercise, we'll look at navigating to a dialog box, both external and in the same page. Also, how to create your own close button for a dialog page.
In this exercise , we look at how to set the default transition as well as target the transition of a single navigation.
In Exercise, we look at List basics. You'll use the data-role equal to listview to turn a an unordered list into a styled navigation list you can use to navigate to other pages. Also, how to add the data-insetto pad the list.
In Exercise, we'll create a list that navigates to dynamically created pages from nested lists.
In Exercise, we'll look at adding list dividers to group items within our lists.
In Exercise, we'll look how to create and style split lists to add multiple links to a single list item.
In Exercise, we'll look at styling additional text elements within a list.
In Exercise, we'll look at how to add images into your list element.
In Exercise, we'll add a serach filter to our list and how to style the filter box. We wrap things up by adding a custom placeholder text into the filter box.
Review of using the anchor tag along with the data-role equal to button to create button.
In this exercise, we'll see how you input types equal to button, submit, reset and image are styled as buttons in jQuery mobile. This is important for keeping the button behavior semantic for older browsers. Also, how you can revert back to native rendering of the button using data-role equal to none
in this exercise, we look at how to add an icon to your button. We also see how to position our icon on our button and hide our text label so just the icon is our button. As an extra, we had a data theme to change the color of our button.
in this exercise, we look at how to display buttons in line. By default buttons stretch to fill the width of the display. Using the in-line attribute allows buttons to be displayed side-by-side.
in this exercise, we see how you can group buttons together visually to indicate there is a shared functionality between the buttons. You'll see how to display this vertically or horizontally. We also added icons and a data theme to the buttons.
In this exercise, we build a basic form with a text input and label. Next we add the placeholder attribute to our text input and hide our label since is no longer necessary.
In this exercise, we look at how to position the label for your field and put to the left for display on tablet devices.
In this exercise, we look at new text field types and how they can trigger different keyboard layouts on the IOS simulator. We wrapped things up by looking at the new slider input.
In this exercise, will build 3 separate checkboxes. Next we group those checkboxes together. Then we'll turn our checkboxes into radio buttons and then wrap things up by changing the layout from vertical to horizontal.
In this exercise, we look at submitting form data to a server-side script. We submit a name and e-mail address to a PHP form and see what the differences is when using Ajax or a full reload.
In this exercise, we build our first select menu and look at the differences between rendering with the native interface versus the jQuery mobile select UI. We also cover how to add a placeholder option to our select menu.
In this exercise, we look at how the group multiple select menus together visually. We also see how to globally set the select menu to render natively or not. We wrapped things up by looking at how to group items inside of a select menu as well as how to allow multiple selections in the menu.
In this exercise, we see how jQuery mobile will handle very long lists of items for a select. We also look at how to style your select menu using icons, inline display and data themes
In this exercise, we wrap up our lesson on forms by looking at several ways you can style different form elements within the same page.
In this exercise, we look at how you use the grid layout to do 2,3, and 4 column data layout with jQuery Mobile.
In this exercise, we look at how to use collapsable grids to hide and show blocks of content in your app. We also look at how you can style your collapsable content. We also look at how to create an accordion effect with collapsable bocks to hide and show blocks of content in your app as a group.
In this exercise, we look at how to collapsable list views.
ThemeRoller for jQuery mobile was created and makes creating custom theme swatches a snap. We'll look at the Inspector, color swatches, and Adobe kuler. Next, we'll look at the ways you use the inspector to modify the look of our theme. Once you are done you can share or download your theme and if you ever need to modify your theme again, you can import it for further editing.
This file contains exercises 37 - 46 and corresponding solutions.
Our first gotcha is trying to bind to an event prior to the document being ready and how to avoid this. Second, we look at how to bind events to a page that gets loaded via jQuery's AJAX loading. Third, we look at how jQuery mobile will load and unload pages from your main document which results in the pageinit event being fired each time navigate to the page. Fourth, we see that navigating between pages in a single page app, results in the pages not being unloaded and page initialization events are only fired once.
In this exercise, we look at how to bind to mouse events in the order in which mouse over, mousedown, mouse up in the click event are dispatched. Next we look at how to trap the X and Y coordinate of the mouse using the mouse moveevent. We wrapped things up by looking at how mouse events behave inside the IOS simulator.
In this exercise, we look at tap events which are native to mobile devices. For debugging on your mobile device or IOS simulator you may want to look at WEINRE (WEb INspector REmote), an open source project for debugging. I show you how you can output your console.log() messages using WEINRE. Next look at the tap and hold event and the swipe, swipe right and swipe left events.
In this exercise, we look at jQuery Mobile virtual mouse events. These are best suited for those who are building a jQuery mobile app they'll be consumed on both the desktop and mobile devices. If you're just targeting mobile devices, then you should use the events whenever possible.
In this exercise, we look at device orientation and scrolling events. Since these are specific to mobile devices we will run them in the IOS simulator.
In this exercise, we look at the page events being dispatched during the loading process. These events include page before loading, loading and load failed.
In this exercise, we look at the page creation events. These events include page initialization, before create, create. We also see how you can cache pages that you navigate to. This will prevent page creation events from being fired on the pages that are cached.
In this exercise, we look at the page change events. These events include page before change, change and failed change. We also look at the data that's being passed in the event along with the page change event.
In this exercise, we look at the hide and show events as well as before hide and before show events.
In this exercise, we look at the entire lifecycle of jQuery mobile events. This is our wrapup on events to review all the events and what they look like together.
This is a 7 part hands on labs. With each subsection as a separate video. You are encouraged to code along.
What you'll be building is myWine is a wine tasting app.
Features we will build include
This hands-on lab requires that you have the following installed:
Apple Safari browser An HTML text editor (i.e Dreamweaver, TextMate, etc) Files for this lab (ZIP file)
The build-it-jquery-mobile.zip file should be expanded on your desktop. This will create a folder named build-it-jquery-mobile containing other files and folders.
/build-it-jquery-mobile/code/ Contains all code snippets for each lab.
/build-it-jquery-mobile/myWine/ Contains the start and finished files for each lab
You'll use these files to code along with the Lab.
We'll review the project, required software and details about the lab. We'll be building the following.
myWine is a wine tasting app.
In this lab we will
You'll add data-roles to the page, header and content divs and listview to the unordered list.
You'll add the data-theme values to the page, header and content divs
You'll initialize your app with back button support
You'll add the data-role “page” to the Add Wine div.
You'll add a list item and add wine button and preview it in your browser.
In this lab 2 we will
In this section we define our varietal table
This this section we set your global entity variables, and sync our schema to create our database and tables.
In lab 3 we will do the following.
Making your AJAX call
Use the jQuery ajax method ($.ajax) to call our JSON file located in the root of our project. On success return the data and output to our console. On error, throw an alert dialog.
Use the jQuery method parse JSON to turn our string data into a JSON object. Output the JSON object to our console to see how it differs from the string data. We only want to add the data once, so we’ll query our varietal database table and return the count. We’ll output the results to our console.
Inside your success handler, check the count returned from the database is zero, then loop over the varietals. Output the name of each varietal to the console.
You'll create a new varietal entity, add to the database using persistence.js and then call the flush method to commit the change to the database.
In this final section, you'll add loading message and call a custom dialog window for error message. To force an error, change the URL to varietal2.json, which doesn’t exist and will throw an error.
You'll add a placeholder attribute for the Winery Name input field. Add data-native- menu equal to false on select tags and a data-placeholder attribute for the Choose Rating option
You'll add a load varietal function to query the local database and call the function and pass it the target form select.
You'll query the local database and loop over the results adding the varietals to the select menu.
You'll listen for the pageshow event and clear the form and refresh the select menus.
In this lab you'll do the following
You'' pass the form field values to the saveWine function.
Save the form field values to the local database.
After saving the wine, change to the home screen.
Load the wine list when the home page is shown.
In lab 6, you'll do the following
In lab 7, you'll do the following
In this lab, since desktop browsers don’t support ‘swiperight’ event, we’ll substitute ‘mouseenter’
Final section for our lab, you'll add the delete button that when clicked, load that wine and remove it from the database, then hide the wine list item with a slide up animation.
Step by step and easy to follow. I learned a lot.
I found this to be highly useful. Some of it I haven't needed yet, but I'm grateful to have this as a resource to consult later. The explanations and example were very useful. For the record I did use this as springboard for developing a simple mobile app.
overall course materials are good and easy to follow.
This course is easy to understand and well laid out. Great for JQuery beginners.