When I started reading the book, I immediately realized that this book is not for total beginners. You have to have some prior knowledge of jQuery and PHP. Which is definitely great news.

You will need a web server to follow the tutorials from the book and I would recommend Wamp server for quick and easy start on Windows, and some kind of a text editor like Sublime Text or Notepad++.

Shane Gliser is a kind of author with first hand experience with jQuery Mobile, Shane’s primary passions are user experience and the mobile web. Shane began working with jQuery Mobile while it was still in the Alpha 2 phase and deployed American Century Investments’ mobile site while the framework was still in Beta 2.

As I said before, this book assumes that reader has HTML/CSS/jQuery and some PHP experience to better understand the examples and principles.

I really like how author address common issues that new users to jQuery mobile sometimes have. Things like adding custom icons to jQuery Mobile, Google Maps and form validation. Client-side templating is really a nice touch and well explained to the reader.

Book is a really great introduction in jQuery Mobile and starts with  prototyping, responsive design and HTML5 features like video, audio, geolocation and web storage which is all you need to build a modern mobile app.

Book also explain some PhoneGap basics which allows you to use several APIs and contain your mobile app in native container for several platforms.

All in all, a great jQuery Mobile book.

You can buy it from Packt Publishing or Amazon.

We started with using http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css stylesheet to be able to use needed functionality but then when jQuery mobile loaded and “infiltrate” its classes to our markup we were in overriding hell. We had to override every class that was bugging us and this was a lot of work as you can imagine.

Fortunately we discovered a neat trick (upon looking into jQuery Mobile Theme roller). We noticed that package that Theme roller delivers uses http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css (notice the difference between this URI and earlier one, structure) stylesheet and on top of that colors and styles defined in editor.

Well, this structure stylesheet proved to be just what we were looking for. Only basic and bare bone stuff that enables you to fully customize your design without the need of overriding everything. It was everything we needed.

Well, almost everything. It doesn’t provide loading icon (visible when you go from pages to pages) or any CSS styles for it. The solution is to grab ajax-loader.gif from Theme roller package (or use your own) and to add class for ui-icon-loading.

[code lang=”css”]
.ui-icon-loading {
background: url(images/ajax-loader.gif);
background-size: 46px 46px;
}
[/code]

Additional benefit of using structure style sheet is smaller jQuery Mobile CSS file and smaller our own theme/design CSS file because we could remove all that overriding styles. In mobile development where every byte counts this trick with no downsides is worth having in your sleeve

Being it on site documentation or resources and tutorials that could be found around the internet (even here you can find jQuery Mobile Tutorial: Basics and jQuery Mobile Advanced Tutorial), this framework is very well documented.

Coming out of their mouth:

Equally as important, we set out to make this framework easy for developers to get up and running fast, with a minimal learning curve.

So let’s see what is new.

ThemeRoller

ThemeRoller is a web-based tool that makes it super simple to create custom themes without writing a single line of CSS. Drag and drop colors to create your masterpiece, then share it via URL or download a ZIP file with your custom theme stylesheet, ready for production (or additional tweaking).

Yeah, it is that awesome. Enough said, go and check it out on ThemeRoller page.

The main man behind the ThemeRoller is Tyler Benzinger, a guy who was borrowed from Adobe.

When you create your awesome jQuery Mobile Theme, just download the zip archive with compressed theme file (for production) as well as the uncompressed ones (for tweaking). Inside an archive there is also an index.html file as sample of how your theme is working on jQuery Mobile elements. Awesome.

One more thing: the complete source code for the new jQuery Mobile ThemeRoller tool is open source under the standard jQuery project licenses for you to improve, remix and build into your apps. The core tool is designed to work completely client-side to make it easy to drop into your code — only the download and sharing features require a bit of PHP. Go forth and fork it on GitHub.

Performance

The team spent hours and hours optimizing the framework and gain 30-50% better performance than RC2 release. They are already working on improving touch event responsiveness, page transition and scrolling smoothness and other important factors in upcoming releases.

Resources

As I said earlier, jQuery Mobile has a huge community that has been incredibly active writing plugins and extensions, building frameworks and tools that enhance the library, and writing tons of articles and tutorials. There are now 8 books on jQuery Mobile and many more in the works.

All resources can now be found in brand new Resources page.

Other news

There are other great stuff on their pages like new documentation site, quick start guide, the oft-requested data-attribute reference, a set of global configuration test pages that let your easily preview key settings, a PhoneGap tips page, detailed documentation on the experimental touchOverflow feature, info on how to access new features of the fixed toolbars, and much more.

Since jQuery 1.7 was just recently released and has some significant changes (and improvements), only 1.6.4 is officially supported at this time. 1.7 support is planned in version 1.1.

All you need to get going is putting this 3 lines inside your HTML file:

[code lang=”html”]

[/code]

Platforms

jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of their progressive enhancement approach.

Get the full list of supported platforms

I am excited with this release, as this is a full-blown HTML 5 Mobile framework.

What do you think? Share your comments below…

It has been around for some time and is accepted by many developers for its simplicity and device support.

The biggest challenge in developing such a system is browser support. There are many mobile browsers available and it isn’t easy to cope with that. But jQuery Mobile keeps everything up to date.

Browser support

I will just mention the newest additions to the browser/OS list and that is Nokia Meego. jQuery Mobile supports even iOS 5 Beta OS.

To view the extensive list of browsers go to jQuery Mobile browser support page.

Collapsibles

A few final tweaks are made to the collapsible and accordion widget that really improves the visual design. First off, they removed the extra button style around the +/1 icons which made this look too much like a separate interactive element (it’s not, the whole bar is clickable) and cleaned up the visual appearance.

iOS5 Transitions

The new iOS5 page transitions and true fixed headers have been improved significantly since Beta 3 but this feature is off by default for now. jQuery Mobile is now using a 3D transform CSS rule reduce page rendering artifacts which could cause memory use issues on very complex pages so you may need to override this selectively.

Download builder

This is one of the mos impressive features in jQuery Mobile RC1.

Download builder will let you build a custom version of jQuery Mobile to only include the parts you need. For example, you could just use the core files to add Ajax-based navigation with pushState and leverage some of the touch events and other utilities with a very lightweight build (roughly 10k). Or, you could add in specific UI widgets like form elements, listviews, etc. to create an optimized build. We’re aiming to have a download builder tool launch as part of 1.0 final in some form.

ThemeRoller tool

This tool will help developers make new themes a breeze. The beta of the ThemeRoller tool is only announced now and it will be available in a few weeks.

Team announced that this tool will make it drop-dead-simple to build a stunning theme in minutes.

Search input: Icon themeable and retina-ready

The small search icon in the search input was the last standalone icon that hadn’t yet been integrated into the standard icon sprite.This icon is fully themable and includes the HD retina icon version too. To do this, jQuery Mobile team had to place the icon inside the standard icon disc so the appearance is a bit different, but it now matches the rest of the UI system. Note that this is add though a CSS technique that isn’t supported by IE 6-7 so in those browsers, the icon won’t appear.

Deprecated features

Deprecated re-named page events – the deprecated beforechangepage (now pagebeforechange), changepage (now pagechange), and changepagefailed (now pagechangefailed) events references have been dropped in preparation for the 1.0 release. See the events API documentation and commit log for more info.

Removed support for the alpha signature of $.mobile.changePage() in preparation for 1.0. Folks now how to use the signature that requires the toPage (url or element) as the first arg, and options object as the 2nd. See the events API documentation and commit log for more info.

Removed deprecated navigation related properties: $.mobile.updateHash$.mobile.urlstack. See commit log for details.

Removed the deprecated $.fixedToolbars property in preparation for 1.0. See commit log for details.

Removed $.mobile.pageLoading() call which was replaced by $.mobile.showPageLoadingMsg()and $.mobile.hidePageLoadingMsg()

List of changes in changelog is impressive like adding jQuery 1.6.4 support, Hardware acceleration of elements within the page in touch-enabled scenarios to prevent hidden elements (not just blinking, but flat-out disappearing) in iOS5, enable forms to submit to the same page and many more.

Team announced a few days ago that the Nokia Meego implementation was the easiest ever.

What are you waiting for? To test this awesome new release (I know I will), just include this in your files:

[code lang=”javascript”]

[/code]

Do you use jQuery Mobile in your line of work? Please share your thoughts in comment section and use the links below to spread the wrod abut this great release.

First in a series of book reviews is excellent book from Packt Publishing called jQuery Mobile First Look written by Giulio Bai.

I read the e-book version of the publication.

Who is this book for?

This book is targeted at jQuery users who want to enter the exciting world of mobile web development, as it is said in the preface. This is entirely true. To follow the book, all you need is a basic knowledge of jQuery Framework and a web browser.

Review

At the very beginning of the book, there is a nice introductory chapter about jQuery Mobile and comparison with similar frameworks. It shows the reader how to download and use jQuery Mobile.

Of course, all source code for the book is available for the download from the publisher’s site, which is very nice, as you don’t have to rewrite all the code found in the book.

There is a small problem with first few chapters as they are written for jQuery Mobile Alpha 2 which was the latest release at the publishing date (June 2011). jQuery Mobile is at Beta 2 phase now and some things have changed. Nevertheless, reader can easily download Alpha 2 release from the CDN or make few simple tweaks to the code. This really is not a problem. Writing a book on a pre-release version of software is always hard.

What I really liked in this book is how it explains the use of common tools which help developer to see what is happening behind the scenes. There is a nice explanation of using FireBug to debug your code. Book also mentions FireQuery, A FireBug extension for jQuery.

jQuery Mobile First Look is handling all the basic elements of jQuery Mobile like Pages, Buttons, Lists, Forms, Toolbars. It also explains how to change a look and feel of this elements as well as how to use different themes.

Conclusion

This book offers the very basics of a powerful jQuery Mobile framework. But, it is intended to jQuery developers to get to know the relevant first things. More advanced topics are just briefly explained.

I hope that this book will be updated in the second edition in the first 2 chapters so it reflects the changes in jQuery Mobile core.

If you are new to jQuery Mobile, this book is a must have. After reading it, you will be able to start making mobile web applications.

This book is available from:
Packt Publishing
Amazon

At the end of this tutorial you will know how to add new RSS feed name and url into the database, how to delete the record from the database, how to fetch and parse a RSS feed and show its results inside jQuery Mobile list view.

If you are not familiar with jQuery Mobile, I suggest you read my jQuery Mobile basic tutorial and then come back.

So, let’s start. Many things in our RSS reader application will take place inside our index.php file. The front page of the application will have links for creating new RSS feed and Read existing feeds.

First of all we need a database table to store our feeds in. Create one using this SQL code:

[code lang=”sql”]
CREATE TABLE IF NOT EXISTS `demo` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
`url` varchar(256) COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM
[/code]

Now, I will create a db.php which will have a database connection and some basic functions for database handling. Create folder named inc and put your db.php file in it with this code pasted:

[code lang=”php”]
/*** mysql hostname ***/
$hostname = ‘localhost’;

/*** mysql username ***/
$username = ‘root’;

/*** mysql password ***/
$password = ”;

$dbname = ‘demo’;

try
{
mysql_connect($hostname, $username, $password);
mysql_select_db($dbname);
}
catch (Exception $e)
{
// normally we would log this error
echo $e->getMessage();
}

function db_select_list($query)
{
$q = mysql_query($query);
if (!$q) return null;
$ret = array();
while ($row = mysql_fetch_array($q, MYSQL_ASSOC)) {
array_push($ret, $row);
}
mysql_free_result($q);
return $ret;
}

function db_select_single($query)
{
$q = mysql_query($query);
if (!$q) return null;
$res = mysql_fetch_array($q, MYSQL_ASSOC);
mysql_free_result($q);
return $res;
}
[/code]

This is a pretty basic code for connecting and fetching records from our database.

To keep things organized, I will put my header section inside external PHP file. Inside inc folder create file named header.php, then paste this in the header file:

[code lang=”php”]

This is basic HTML 5 header with included jQuery and jQuery Mobile.

Now create a file in your root directory and name it index.php and paste this in it:

[code lang=”php”]

[/code]

Save everything and try it in your browser. Pretty cool.

As you can see our links to other pages look like anchor links. I am going to have multiple pages inside my index.php file and that is the way to link to them.

Now paste this whole code inside index.php overwriting the previous code:

[code lang=”php”]

[/code]

Above code is pretty simple. There are 3 pages, the indexPage, addFeedPage and readFeedPage. As we firstly have to add some feeds to read, let me show you how to do it.

As you can see, the AddNewFeedPage is basically a form for collecting New feed data (Feed name and Feed URL). Open your index.php in browser and click on Create New Feed link. You should see the form.

Now, add this JavaScript code directly before the closing body tag in your index.php file:

[code lang=”javascript”]

[/code]

Above code is catching Submit button click event and making an AJAX call to addFeed.php file which will handle the database writing. Create an addFeed.php file and paste this in:

[code lang=”php”]
getMessage();
}
[/code]

We are including our database file, sanitizing user input (you should never trust user entered data and always sanitize it!) and finally writing our entry in database. Now, go and add your RSS feed and save it. Make sure the feed URL is correct.

Now go back to your home page and click on Read RSS feeds link. You should see a feed name you just entered. Let me show you how to fetch and parse this feed.

Create a file named feed.php in your root directory and paste this in:

[code lang=”php”]
feedData.php in your root folder and paste this in:

[code lang=”php”]

[code lang=”php”]

I hope that this tutorial showed how easy it is to build mobile web applications using jQuery Mobile, PHP and MySQL.

Do you like jQuery Mobile? Are you using it or plan to use it? Do not hesitate to discuss in our comment section below. And if you have any questions, I will gladly answer them.

Stay tuned.