Development Update – Week of May 23, 2011

Posted on by

Blackberry 5: Now officially supported!

We’ve been working hard to support the Blackberry 5 platform and we’re happy to announce that jQuery Mobile now works great on our test Blackberry 5 devices. This platform has B grade support which means that all the enhanced styles and widgets work well within the CSS capabilities of the device, but Ajax navigation and page transitions aren’t supported so links and form submits result in a full page refresh.

Ajax navigation was problematic on BB5 because it lacks hashchange support for the history stack whcih essentially broke the back button behavior so disabling this feature resolves that issue and also speeds up the user experience. These devices tend to be fairly under-powered so very complex pages can take a bit longer to render but overlaly it works very well. There are of a few style improvements we need to tidy up, but sites built with jQuery Mobile should now work well on this platform. View the latest build to see it in action.

Opera mini: Ajax-free and faster

We’ve had support for Opera Mobile and Mini for a few releases now, but Opera Mini had a few issues with handling the Ajax navigation system which resulted in pages that were either scrolled to the wrong position, clipped off just plain blank in some cases. After a bit of research, we determined that the majority of issues were to due to timing issues with Mini’s proxy-based browser and our Ajax-based page creation and animation system.

After a lot of debate, we decided to exclude Opera Mini from the Ajax navigation system and mark it as Grade B, just like Blackberry 5. We landed this change landed this week and not only did this fix all the major rendering issues we were experiencing, it also significantly improved the overall speed and responsiveness of the user experience. As a bonus, Opera Mini seems to apply a slide page animation natively so you actually get smoother animated page transitions with Ajax transitions turned off!

jQuery Mobile works great in both Opera Mini 5 and the brand new version 6 that was just released. We tested Opera Mini 6 for both the iPhone, iPad and Android and the rendering quality is much better than 5 so it’s a significant upgrade. Opera’s full-blown browser, Opera Mobile is unaffected by this change to Mini and will continue to see a Grade A experience with Ajax navigation and animated transitions. View the latest build to see it in action.

This week, we landed a big refactor the core Ajax navigation code to allow for better extensibility for developers that are manipulating pages dynamically. Until recently, the navigation code was largely implemented as a set of nested functions within the $.mobile.changePage() function which made the code very hard to follow and extend.

In this refactor, we decoupled the navigation core into 3 separate functions. Partitioning the code this way makes it easier for us to identify key points for adding extensibility hooks and makes the code easier to follow:

  • loadPage()
    • Responsible for loading a page into the DOM of a specific page container and enhancing it.
  • changePage()
    • Responsible for updating the internal bookkeeping for tracking what is the current page. This includes:
      • Managing the URL stack.
      • Managing the location hash.
      • Kicking off a transition.
  • transitionPages()
    • Responsible for managing the transition between the current active page and the new page to be shown.

changePage() now takes 2 arguments: the first is required,  the second is optional. The first argument accepts a URL or a jQuery collection containing a page element as its first argument. The 2nd argument is an options object that allows the caller to modify changePage behavior. The options that can be specified are as follows:

  • transition
    • String
    • The transition to use when showing the page.
    • Defaults to transition specified by $.mobile.defaultPageTransition.
  • reverse
    • Boolean
    • Decides what direction the transition will run when showing the page.
    • Defaults to false.
  • changeHash
    • Boolean
    • Decides if the hash in the location bar should be updated.
    • Defaults to true.
  • role
    • String
    • The data-role value to be used when displaying the page.
    • Defaults to “page”.
  • pageContainer
    • jQuery collection
    • Specifies the element that should contain the page after it is loaded.
    • Defaults to $.mobile.pageContainer.
  • type
    • String
    • Specifies the method (“get” or “post”) to use when making a page request.
    • Default is “get”.
    • NOTE: This should probably be renamed to “method”. The current name comes from the old signature.
  • data
    • Object or String
    • The data to send with an Ajax page request.
    • Default is undefined.
  • reloadPage
    • Boolean
    • Forces a reload of a page, even if it is already in the DOM of the page container.
    • Default is false.
  • showLoadMsg
    • Boolean
    • Display the loading message when a page request is fired.
    • Default is true.

Upgrade note: Since the signature forchangePage() has changed during this refactoryou may need to update your custom code before upgrading. To ease the transition to the new signature in the short-term, we’ve added code to changePage() that maps any old signature calls to changePage() into a new call. This should fix issue 1712 ($.mobile.changePage broken in latest). This code will be removed before shipping 1.0.

We have a list of additional items we’re planning to improve in the Ajax navigation system for 1.0 including more flexible URL handling, improved page transitions, page-level cache settings, global methods for managing the DOM size, and much more.

Experimental datepicker: Moved out of the official docs & repo

A while back, we took the jQuery UI datepicker and tweaked it to use the jQuery Mobile theme CSS classes as an experimental stopgap for people who really needed a datepicker. The issue with this component is it’s really heavy and the UI team is currently re-factoring the datepicker from the ground-up so we wanted to shift this out of the official GitHub repo because it won’t be supported going forward. We will pull the new UI datepicker in once it’s finished, but that will be later this year.

In the meantime, if you still want to use the experimental datepicker, it’s now available on Filament Group’s GitHub repo but note that it’s not being actively maintained. If anyone is interested in maintaining this plugin in the short-term, please let us know. You can also check out alternate jQuery datepickers like DateBox, a slick jQuery Mobile optimized date picker.

Notable commits this week

Height issue for transitioning page (issue 1507) - Fixed the issue where buttons and other elements were sometimes showing up at 100% height during page transitions. Thanks Eddie Monge.

Allow checkboxes and radio buttons to be selected with the keyboard – The name says it all, thanks Shana Golden.

Fixed header/footer positioning in IE 7/8 – Desktop IE wasn’t reporting a scrollTop value for fixed headers/footers—’window’ is now provided as a fallback in the event that $(document).scrollTop() reports zero. Thanks Mat Marquis (wilto).

Select menus now work in Firefox Mobile (issue 1626) – Changed the hiding mechanism for invisible native selects so that they work in Firefox Mobile.

Removed the ajaxLinksEnabled and ajaxFormsEnabled settings – These were deprecated in a4 and scheduled for removal. Automated link and form ajax handling can still be globally disabled via the ajaxEnabled option.

Get the latest builds on the jQuery CDN

To take advantage of the daily improvements happening in jQuery Mobile, be sure to check out out the new daily and latest builds that are now available on the jQuery CDN for hotlinking. This allows you to upgrade to the latest code without waiting for the next official release.

Here are the three files to include in the head of your page to always be viewing the latest in Git:

<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

 

Please keep in mind that this the unstable, development version so we don’t recommend linking to the latest in a production site or app but it’s great for development and testing.

 

10 thoughts on “Development Update – Week of May 23, 2011

  1. Thanks a lot for BB5 support, I am developing business application and I can’t simply ignore 50% OS 5.0 users! I have the same business app in android and iPhone, but now I used phoneGap, so that re usability has been increased with nice look and functionality. Thanks a lot. Have a healthy progress.

  2. Isaac Sunkes on said:

    Tested this latest release on an actual BB5 device and it does not render at all?

    • Yeah I just tried a SIMPLE app using phonegap and jquerymobile. I must say ….I see NO change on my Curve 8520! really disappointed!

      Maybe I took the wrong release?

  3. Tom Jenkins on said:

    Just downloaded the latest release as of today .. and it’s picking up the wrong dimensions from both my Galaxy S2 (Android) and the emulator. Instead of the 320px portrait width its getting 480px?? Something gone screwy? As it works fine with my original 1a4.1 download I was and am having to use.