jQuery UI 1.6rc4: It’s getting really close

Attention: We found a regression in the rc3 release that breaks datepicker in Internet Explorer. The issue has now been resolved with the rc4 release – please do not download the rc3 release anymore. We apologize for the inconvenience.

I’m absolutely thrilled to announce the latest release candidate for the long awaited jQuery UI version 1.6. It has been a busy couple of months, and not only our team but also our processes, specifications, and codebase has been updated. This means that rc4 isn’t simply a bugfix release on top of rc2, but really a whole different level of code. Using a our new interaction design processes, we build up the foundation of many widgets from the ground up, and refactored widgets multiple times until we finally reached the look and feel we were confident with. So, let me show you quickly what has changed especially in this release!

Datepicker and slider refresh

In order to make room for the new theming, we needed to unclutter the datepicker a bit. A couple of options have been removed, changeMonth and changeYear have been changed to be disabled by default and showButtonPanel was introduced as new method. More on that soon, detailed information can also be found in the related ticket.

The slider also went through a refactor. The ‘axis’ option was changed to ‘orientation’, the ‘handle’ and ‘handles’ options were removed, ‘steps’ and ‘stepping’ were removed in favor of ‘step’, ‘startValue’ and ‘moveTo’ have been removed in favor of ‘value’ (option and method), and much more. For more detail, see the slider specification page.

We will provide detailed compatibility information and upgrade solutions with the final release, so stay tuned.

Drag & Drop logic overhaul

The positioning and intersection logic of drag and drop and sortables has been completely redone, along with more than 200 automated tests to test all different environments, i.e. scroll offsets and position values. As positive effect, at least 30 conditions where the positioning was failing (i.e. scroll not included, helper stick at top) had been fixed.

New widget designs

jQuery UI 1.6rc4 features an entirely new look and feel, designed by our new Interaction Design team and powered by the new jQuery UI CSS Framework. Each widget’s markup and CSS has been re-approached to provide our cleanest and most flexible solution yet.

CSS Framework

jQuery UI 1.6rc4 is built upon a brand new powerful CSS framework. The new jQuery UI CSS framework is built to support not only jQuery UI’s own plugins, but also custom plugin development. It is a special kind of CSS framework that is aimed specifically at user interface development as opposed to overall page layout. The framework provides classes for commonly used UI utilities, states, containers and icons and is manipulated by jQuery UI ThemeRoller. Read more about the
framework API here: http://jqueryui.pbwiki.com/jQuery-UI-CSS-Framework

Refreshed demos

The website is currently going through some major updates, and in the first block of changes we’re happy to announce that the demos section has been completely redone from scratch. We removed the demo carousel (which was nice but not really usable), and introduced a page that both includes real world and functional demos for all widgets and interactions. The demos are directly pulled from the actual demos/ directory in our code repository, and then ajaxified. They are bookmarkable, and if you download the development bundle, you’ll see they even come as standalone!
This is only the first step of where we want to go for the final 1.6 release. If you’re interested in how it might look in the end, have a peek at our design wiki!

Themeroller v2!

ThemeRoller has been completely redesigned to compliment the new CSS framework and widget designs. ThemeRoller now resides in a vertical sidebar and has loads of new features added, such as:

Toggle-able panels with previews

ThemeRoller’s levers are now grouped into collapsible panes for ease of use. Each pane shows a preview of that state’s current styles so you can still view its settings while collapsed.

The jQuery UI CSS Framework comes with loads of icons for custom widget development. Icons are now packed into sprites and classes for each icon can be found in the docs.

New themes

We’ve added a bunch of cool new themes to the new gallery which can beviewed and customized in the gallery tab of ThemeRoller.

History/back button support

Every action you take in TR is now undoable/redoable through your browser’s history.

Legacy theme support

Themes designed using the older version of ThemeRoller will load just fine in ThemeRoller v2, but keep in mind that there are a number of new settings that your old theme will not have yet. This version of ThemeRoller allows you to still download any ThemeRoller theme for jQuery UI 1.5.

Coming soon…

PNG 8 Support in ThemeRoller

New ThemeRoller developer tool: Pull ThemeRoller into any page on the web and design themes for custom components built using the jQuery UI CSS Framework.

New ThemeSwitcher bookmarklet: A quick script that will allow you to bring a miniaturized Theme Gallery into your web pages to allow visitors to quickly change themes for custom components built using the jQuery UI CSS Framework.

Download and test!

Now go ahead and download from our download page, then help us test and report anything odd that looks like a bug in our bugtracker. Also note: jQuery UI 1.6 final will ship with and require jQuery 1.3, so please let us know if you find any issues when combining this release with jQuery 1.3b1.

Great work, and I’m really glad to see the latest release. Not to be the party pooper… but, I wonder how frequent though are you planning to keep changing the API so dramatically? I’ve become slightly disenchanted as of recent because each subsequent release, while fixing bugs, changes so dramatically that updating it on sites that use it are a chore. It would be nice if you would consider usage breaks for those adopters of UI as you move ahead. I think you’ll find better support from the community in adopting UI if you’re more sensitive to this.

I have to agree with Stan though – changing the API so dramatically, while maybe necessary, is very hard to keep up with. 1.5 changed it quite a bit, and 1.6 is changing it again. Many of the changes are just cosmetic things, like renaming properties, but these things all cause great pain when trying to upgrade a site/application using UI.

While I use UI at my job, it is mostly from before 1.5, simply because upgrading to 1.5 was so problematic. I’m glad we never upgraded now, because going to 1.6 would have meant we’d have to redo all the work we did. Why should UI care what I use? My primary job is to work on our internal code – but this often means I need to make improvements or fixes to libraries like UI to get my job done. I always contribute these changes back, but unfortunately UI is not interested because my changes are to code that is obsolete.

I’m sure I’m not the only person in this boat. There are probably many potential contributors that simply can’t contribute because they can’t keep going through the hassle of upgrading. It’s unfortunate that I have to call it a ‘hassle’, but unfortunately its the truth.

I also completely understand you can’t build a skyscraper on the foundation of a house – sometimes you have to tear it all down and rebuild a better foundation. It’s hard to find that balance, but hopefully now as we go into the future, we will see a more consistent, and backwards-compatible, API.

I found sortable to actually work much worse than 1.6rc2 particularly with nested lists. Basically nested (like a tree structure) sortables no longer work at all after the intersection logic overhaul. I’d submit a bug but trac has a duplicate entry error.

I’m surprised you didn’t include a (sortable) grid to display data. At the moment, I’m using the JQuery grid plugin (http://trirand.com/jqgrid/jqgrid.html). Are you planning to include it in the Jquery UI core in the future?

@Michael Ward – your point is well taken. There was quite a lot of change between these two RCs. We did consider dropping down to beta status, but put the time needed into ensuring this release was truly RC-ready instead.

Two things I’ve noticed so far from upgrading from RC2:
– Draggable’s default “scroll” is enabled now. Why?
– Draggable’s default “opacity” is now set to “1”. Any opacity setting on an element which contains PNGs with Alpha transparency look horrible in IE7. We use them all over the place on our site, and setting the transparency:0 isn’t really feasible at this point, requiring me to change the ui.draggable.js file – something I really want to avoid.

@Neil
– re: draggable’s default “scroll”. We try and make all defaults the most common options, so you only have to specify in less common cases
– re: draggable’s opacity default being 1. The default before was undefined, and we’re ensuring all options have defined defaults. Perhaps null would be a better default?

Congrats guys, I’ve been watching you since the beginning, it seems you’ve found “your way”, everything looks really nice and polished now, what you have looks and feels better than extjs, can’t wait for the next releases, I just miss an autocomplete and a datagrid.

The new refactored ‘slider’ in 1.6rc4, doesn’t recognize the ‘slide’ and ‘change’ options if jquery 1.3 is used. Those declarations get ignored. It does work however if jquery 1.2.6 is used instead. what in jquery 1.3 breaks it?

@Court – I think it has to do with the changes 1.3 made to trigger handlers. I just reverted back to 1.2.6 and RC2 yesterday because of this problem.

I agree with the others about process – I was using RC2 on a new, large-scale project and would not expect significant changes to the interface. This project will launch with RC2, and it will end up being a pretty sizable task to upgrade later when the official release comes out. Glad to hear that you guys are addressing this now, and I hope that future releases won’t be quite so scattered.

@Eric
Thanks for your feedback on the defaults back on 1/5. I agree with your answer to “scroll:true” being the default, and am glad to see “null” being used for opacity in 1.6rc5. So far it is working great with jQuery 1.6.

Another thing I’ve noticed is that the droppable’s “scope” property breaks if draggables of that scope do not exist

My fix at the moment is to default to an empty array in several spots within ui.droppable.js: