This is the final step before releasing 1.6 final tomorrow (Saturday night). Since we only have two days, we really need you help us test if there are no major blockers left we might have overseen. Please create a ticket for any issue you find on the jQuery UI bug tracker:

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.

I’m glad to announce that finally, we decided to kick out a release candidate of jQuery UI 1.6. It’s called rc2, because we pushed out a rc1 too early on Monday, and to everyone who downloaded that one or another early version of 1.6, a upgrade to 1.6rc2 is highly recommended. This is also the final version before the real deal, which can be expected to follow in the next days.

1.6rc2 is mainly a bugfix and stability release, and we made sure again you can read what has changed in our changelog for 1.6, which shows the current state.

Download multiple versions, public dev group

In addition to all the bugfixes, we also have a couple of new hot things to check out:

You can now decide wether you want to download the stable or unstable version in the download builder. This is a big one, because for the first time, users have the possibility to decide what to download using the convienient interface.

The jquery-ui-dev list has been opened to the public. This is also a big change, because it means you can now actively participate in the development of jQuery UI, by simply participating in the discussions, and we highly encourage you to do so!

New servers

Finally, we’re currently doing a transition to a new, dedicated server for jQuery UI, and all the other jQuery subdomains also receive new servers. This will give the UI homepage and the documentation major performance boosts in the next days.

About 4 days ago, many have noticed that we had uploaded another minor bugfix release to our Google Code account. While there’s, again, no new API introduced, more than 30 issues have been cleared and the codebase is growing more stable every day.

The full changelog is available here if you want to find out if a specific issue has been addressed. As with 1.5.1, updating to this version is highly recommended and likely not to break anything in your written code.

You can grab the latest release as always via the downloader or as developer package at http://ui.jquery.com/download or if you prefer, get it as latest tag from Subversion.

As a last comment, this is probably the last minor release before 1.6, which we will announce before the end of July, so watch out for a couple of awesome new components and enhancements soon!

Soon after the release of jQuery UI 1.5, we were getting many useful feedback and issues entered in our bugtracker. Today, we’re happy to release another version of jQuery UI which takes care of many minor regressions and a lot of unsolved issues.

1.5.1 doesn’t add any new features or API changes, but fixes more than 50 found issues. A full changelog is available, if you want to know the specifics. Updating to this version is highly recommended and likely not to break anything in your written code.

Additionally, issues within ThemeRoller and the demos on our homepage also have been reported and fixed. We are now continuing to finish all unit tests and functional demos, so expect to see another release of both UI and its website soon again.

You can grab the latest release as always via the downloader or as developer package at http://ui.jquery.com/download or if you prefer, get it as latest tag from Subversion.

We recently discovered an issue with the download builder which caused it to serve cached 1.5rc1 files instead of the final package. We sincerely apologize for the inconvienience caused by this and strongly suggest to download jQuery UI 1.5 again if you downloaded it as a configured package.

Additionally, an issue has been found in ThemeRoller that causes the downloaded images to be default images in most cases. The issue was fixed now, and we also suggest you to try out downloading your theme again.

jQuery UI 1.5: Rethinking Our Approach to UI

When we first started with the UI project, we set out to build a generic, basic, and simple way of adding and extending core interaction to DOM elements. However, we soon found that our approach wasn’t working for UI. Using the “simple” approach, we were only able to serve simple interaction modules, but not full featured UI widgets. The second problem was that some plugins came from external sources making the UI suite seem disjointed and inconsistent.

All of this occurred right after we released 1.0 and we immediately realized it was time to reconsider our path. We had to find a approach that kept the simplicity of jQuery while making it possible to add full featured widgets to UI. We also already knew that something very simple to use is very challenging to develop. The first task was to build a generic API that allowed for maximum flexibility while being amazingly simple. The next task was making it similarly simple to develop plugins for that API.

One API to Rule Them All

What we came up with, was an API that removed 95% of our exposed methods, and kept only one single overloaded method per plugin. For example:

$(“div”).draggable() creates a draggable

$(“div”).draggable(“destroy”) destroys it

$(“div”).draggable(“method”) calls another method on the plugin.

The new API also makes all callbacks behave similarly, exposes the default options for each plugin and intelligently cleans up plugins using remove(). We also made it possible to update plugin options on the fly, and added smaller updates that make UI feel like one suite.

In order to make this happen, we removed the jquery.dimensions.js (which can now be found in jQuery core), the ui.mouse.js and the *.ext.js dependancies, introduced a ui.core.js (which includes many useful helpers) and created the jQuery UI widget factory which makes creating a new plugin for UI amazingly simple while making it very difficult to break the API.

Stability, Debugging, Testing and jquery.simulate

It was extremely important that jQuery UI v1.5 was not only feature-rich but also stable. We took several steps to greatly improve our debugging and testing including the setup of our own dedicated bugtracker with jQuery UI specific version and milestone targeting. We also invested a lot of time into new unit tests that make use of the jQuery test suite Qunit. Finally, we created jquery.simulate.js, a plugin specifically designed to fire true browser events. This means, you can actually tell the plugin to pick up your draggable, move it to a certain position and release it again, just if you’d be talking to a real testing person.

The Need for Effects: Enter Enchant

One of the great things in being able to take a step back is that it offers a totally different perspective on what a full-featured UI solution should offer. While jQuery UI v1.0 was currently offering a nice suite of UI controls, users were in need of solid effects like those offered in libraries such as script.aculo.us and jQuery UI’s former inspiration, Interface. Unfortunately, Interface was no longer being updated which left a bit of a hole in terms of effects; hence a new project called “Enchant” was born. Originally planned to be released as a complementary library to jQuery and jQuery UI, we realized that it made perfect sense to merge Enchant with jQuery UI allowing users easy access to advanced effects and UI controls from one solution.

We’re proud to announce that Enchant is now a part of jQuery UI and jQuery users now have a unified solution for their effects and UI needs. The jQuery UI effects can be used standalone or together with UI and have a separate core which extends the jQuery core to introduce advanced easing, class transitions (morphing) and color animations. All effects are tightly integrated into the main API and can be used as standalone ( $(..).effect() ) or directly from within jQuery methods you already know ( hide()/show() ).

Overall, we already have more than 15 ready-to-use effects for you to use in your projects, not only those provided by script.aculo.us (blind,bounce,drop,fold,slide …), but also fresh, new effects (transfer, explode. clip, scale) that make jQuery UI a great library enhancing your applications!

Roll Your Own Themes: ThemeRoller!

One of the first things that a user typically wants to do when using new UI controls is “skin” them to match their site’s color schemes. Obviously, when you have UI controls from varying sources, the ability to provide a consistent “theme” across all controls becomes much more difficult since most component authors have their own method of skinning their controls. We took a serious look at this and made it a priority to have a consistent default theme that users could use as a template for customizing jQuery UI’s set of widgets.
We reached out to Boston-based Filament Group for some help in this and they were all for it. Being very invested in jQuery, they saw this as a great opportunity to further help the project. Well, what went from an discussion outlining a single default theme quickly blossomed into jQuery UI’s killer app; ThemeRoller.

ThemeRoller offers a unique approach to theming UI components specifically built for jQuery UI. With ThemeRoller, you can create your very own theme for your project within minutes. It’s completely intuitive, comes wich rich controls to change the color and design of each state, and then previews your theme with the actual UI components as you work!

You now have literally millions of combinations to chose from. Any theme you create can be reached by copying the URL at any point in your progress; and after you’ve played with it enough, you can click the download button and a ZIP package is generated with the css file, the images and a demo page.

In addition, ThemeRoller also includes a theme gallery to browse for downloads and inspiration. Creating a theme for your application doesn’t get any easier than this; it’s simply that amazing.
We really want to extend our deepest gratitude to the amazingly talented folks at the Filament Group for creating this amazing application.

Oh and by the way, you can also reach ThemeRoller by direct URL at: ThemeRoller.com. If you want to know more about this great app and how it’s done, visit the excellent blog writeup by Filament Group!

Plugin Stabilization and Enhancements

The biggest improvements and changes were done on individual plugin code. Almost every plugin has been completely rewritten from scratch to optimize stability and performance and every plugin now comes with a bug changelog. We also focused heavily on enhancing options and increasing flexibility (e.g. connecting sortables to draggables) to allow our plugins to be used in almost every environment.

The best way to get a full feel for every enhancement to jQuery UI’s components is to review the changelog. It’s fairly extensive and gives an indication of the incredible effort put in by the UI team. In the near future, we’ll be creating postings and articles which outline the newest features of UI’s components. In the meantime, we suggest you read our blog post about jQuery UI 1.5b, which explains many of the mouse interaction changes (sortables, draggables, slider), and dig through the documentation and the changelog yourself.

Downloading

There’s more to come!

This has truly been an amazing effort and we’re very proud to be able to offer a comprehensive UI solution to the jQuery community.

We’re already planning the next release and have a huge roadmap that contains plugins like grid, tooltips, menus, colorpickers, autocompletes and much more. Many of them are already done and commited code-wise. We’ve also planned plugins using new technologies like Webkit’s css transforms (see the recent coverflow plugin), so stay tuned.

None of this would’ve been possible if not for the amazing efforts and dedication the jQuery UI team. They’ve dedicated so much of their personal and professional time to create this amazing library and they deserve so much credit for their hard work. We also want to thank the jQuery core team, with whom we worked closely together to integrate many needed features into the jQuery core itself.

Last but certainly not least, we want to give a VERY special thanks the Liferay staff, who invested countless hours into the development of the new UI website, and with whom we worked closely together to stabilize jQuery UI for all kinds of enterprise situations.

This is the most stable UI version ever, and it fixed all known bugs that are not in the categories “minor” or “trivial”, which means that we ourselves think it’s good to go. However, the reason why we’re still holding off with the final release is the fact that we want you to try out every aspect of our release candidate.

Therefore, the jQuery UI team encourages you to try out the demos on the website in any of the supported browsers, play around with every option you can find and test in different browsers using the new unit tests, which we’re finalizing right now. If you grab the whole development package from the website, it will come with unit tests for slider, draggables and resizables. We are working on other automated tests, which can be downloaded in the next few days from our SVN.

If you find anything strange going on, or if something isn’t working / looking like it should, that’s great :-) ! Please then submit your issue to us via the new jQuery UI bugtracker at http://ui.jquery.com/bugs/newticket. This will greatly help us to make the final release as solid as possible.

Now we really don’t want you to wait any longer than needed: I’m very excited to announce that jQuery UI 1.5 will be released and announced in exactly 6 days, on June 8th, along with updated documentation and a epic changelog to convince your bosses and collegues.

jQuery UI 1.5b4

Attention: We originally intended to release 1.5b3 a couple of hours ago, but we had two serious issues that forced use to deprecate it and go for b4. Sorry for the inconvenience.

The third and last beta has finally arrived to jQuery UI 1.5. Hundreds of hours went into fixing more than 50 bugs for this release – it’s all about stability. jQuery UI 1.5b4 is the last release before pushing out a release candidate – and with only 5 major bugs left, you can expect to see the next release in the next couple of days!

Although it’s mainly a stability release, we also introduced many new API helpers, removed the dimensions dependancy and made all plugins a bit smaller by introducing a generic widget factory into the core. Even better, performance of UI components firing events (i.e. “mousemove” in Draggables) was dramatically improved with recent changes in the jQuery core.

With the release candidate following right after this one, we will also push out a live test suite for everyone to use on any platform, helping us to track down issues, and fixing them for the final release. Yes, this means you an expect a stable, solid and performance-optimised 1.5 release this month!

jQuery Enchant becomes part of jQuery UI

After many weeks of discussions, I’m particulary happy to announce that the unreleased jQuery effects suite “Enchant”, earlier introduced as sister library to jQuery UI, is now a part of jQuery UI. With the 1.5b4 release, you’ll see a bunch of new files in the project’s folder!

The jQuery UI effects can be used standalone or together with UI and have a separate core, which extend the jQuery core to introduce easing, class transitions (morphing) and color animations. All further effects are tighly integrated into the main API and can be used as standalone ( $(..).effect() ) or directly from within jQuery methods you already know ( hide()/show() ).

There’s no documentation for the rich effect API at this point, but we’ll make sure it’s released before the final release of jQuery UI 1.5. In the meantime, feel free to start digging through the code – and watch more more blog posts discussing the new effects!

Overall, we have more than 15 ready-to-use effects for you to use in your projects, not only including everything you know from script.aculo.us (blind,bounce,drop,fold,slide …), but also fresh new effects (transfer, explode. clip, scale) for you to enjoy!

jQuery UI has a new home

I’m absolutely thrilled to announce that jQuery UI has finally found a new home at http://ui.jquery.com, along with brand new content, a new combined logo and a complete new design. After many weeks of iterations, we finally found the time to concentrate a bit on the website.

The new site features a complete new download builder already including effects, a real-world demo carousel, and a functional demo suite that makes it easy to see and try out UI examples and their syntax. Also planned for the next weeks is a theme section with directions on downloading UI themes and how to make them, and a tutorials section that will feature easy tutorials to easily learn controlling UI widgets.

A big thanks and kudos goes to Liferay’s Art Director Brian Miller, who did a great job and invested countless hours to achieve this beautiful design!

The jQuery Worldwide Sprint (see previous post) is over, and it was a wonderful momentum and great experience for many of us.

We made great use of the sprint wiki page during the sprint, and it now serves as a reference of what we accomplished, including meeting summaries and irc logs.

We moved a lot closer to jQuery UI 1.5, and we had 20+ people actively participating, working in one of four different groups:

Development Group

The dev group was solely focusing on the codebase of jQuery UI. They fixed more than 20 issues in our bugtracker, and implemented missing features such as the greedy option in Droppables. Additionally, we improved the core of UI in a very positive way: we got rid of two dependancies (jquery.dimensions.js and ui.mouse.js) and added one (ui.base.js). The impact was so great that even the core was changed: jQuery itself now includes useful methods from the Dimensions plugin (more on this in the upcoming blog post).

Test Group

The test group focused on writing and running a full suite of unit tests for each UI Plugin. This is critical, to ensure that all the features of each plugin are thoroughly tested in all supported browsers. The unit test coverage after the sprint is about 60%. Our goal is to have it in the high 90s before 1.5 final.

Demos Group

The demos group created a brilliant functional demo template and functional demos for many of our plugins. Also, many volunteers worked on stunning real-world examples that show how a specific plugin can be used in a real world scenario. All demos will flow into the new demo category on our upcoming website.

Documentation Group

The docs group had the pleasure of pouring over the documentation for each UI plugin, comparing to the source code, to unit tests, and demo pages. They wrote and updated to ensure correctness and clarity, for even an absolute newcomer to jQuery UI.

Thank you

So after all, we haven’t completely reached all of our goals, and we still have to work hard on fixing all issues still open. But we made huge progress that certainly wouldn’t have been possible without the combined power of all who helped. Not only this, but the Sprint was also a great way to introduce and motivate new people to join the UI project.

A big thanks to everyone who helped during the sprint and before the sprint – especially Richard Worth, who had the initial idea and made this event possible (he did all the hard stuff ;-) ), Eduardo Lundgren, who managed the demo group and worked insanely long hours during the sprint, and all the others who made huge contributions on both days.

But it’s not over until it’s over: We stll have to date 46 issues opened in our bugtracker until we are ready to roll out the final version of UI 1.5. Therefore, we are already thinking about a follow-up sprint. More on that soon here!

The jQuery team is proud to release the first beta release of the new upcoming version of UI, jQuery UI 1.5! It has been a long path to this release – originally intended to be a bugfix release, it was growing into something we just couldn’t call 1.0.1, not even 1.1, no, it’s so damn delicious we had to call it 1.5.

jQuery UI 1.5 is a complete overhaul of the library – many of the components have been completely rewritten from scratch to improve overall stability and performance, and we finally managed to settle on a unified API for all components. So let’s get straight to a list of all the changes:

Unified API

The API has been updated for all UI components. It should now be very easy to use other plugins if you’re familiar with one of them. There is only one exposed method for every plugin – All other methods are called by passing in a String into the exposed method, the initialization of the plugin works by giving on a options hash as first argument. You can now change and get all options at a later point if you want to by using the new data method. Basic example for draggables:

Updated and revised documentation

The documentation in the jQuery Wiki has been completely updated to reflect the recent changes. We also made sure all callbacks and its arguments are documented this time.

Drag & Drop: Snapping, Relative dragging

Draggables and Droppables have been completely refactored. It might now be the most non-destructive drag & drop implementation ever: The css position’s value will not be changed except for ‘static': That means that elements, that were static or relative, will not be forced into absolute positioning, which often destroyed layouts, especially when dealing with floats.

Some options have been renamed to better be recognized: preventionTimeout becomes delay, preventionDistance becomes distance.

Also, a new option plugin has been added: The snap plugin. Remember the docking Winamp windows? Yes, you can do that now with UI draggables – just set “snap” to a selector to select all elements you want to snap to and you’re ready to go. Of course, you can also configure it to your needs using snapTolerance and snapMode.

Slider: Ranges, multiple handles and accessibility

The slider wasn’t refactored, but has been completely rewritten from scratch. While it’s still almost backwards compatible, it’s now very stable and simpler than ever: The moveTo method now only takes two arguments: The value you want to move the handle to and optionally the index of the handle you want to move. Want to retrieve a specific handle value? No problem, just call $(..).slider(“value”, index) .

Even better, the slider now is completely keyboard accessible: You can now tab and focus each slider handle seperately and move its position using the left/right keys. We also improved support for using the mouse: Clicking into a empty area now moves the focused handle to the clicked position, regardless on how many handles you have.

For those of you searching for advanced usage, the slider now supports ranges: Just set the option “range” to true and make sure you have two handles, and the script will create a visible range between these two sliders that can be styled individually. The script even makes sure that you cannot create negative ranges.

Sortables: Connected sortables, serialization and more

Rewritten as well, the sortables now support a wide range of features you already know from draggables: cursor, zIndex, revert, opacity, axis, handles, containment and scrolling. Additional to that, you can now serialize your items to a url hash, and you now have the often requested ability to connect multiple sortables, so you can drag a node from one sortable to another.

and there’s more!

This is just an excerpt of the plugins I personally was involved in – the final release will come with an official changelog – but most of the other plugins have been refactored as well, with tons of new features in datepicker, tabs, accordion, resizables and more.

..and less!

Preparing for our sister library Enchant, we removed the magnifier and the shadow plugin and moved it to Enchant. Worry not, you can find them in our SVN trunk under trunk/fx. Additionally, the table sorter component has been removed because of API and roadmap incompabilities. There will soon be a grid component that includes most of its functionality.

…and countless bugfixes

We could have made it easy for us, just rewrite everything and delete all bug tickets of 1.0 because it’s not possible to track down anymore, but we did not: All issues coming in for the 1.0 release have been adressed and solved.

For everything that has changed in this release, please consult the documentation or look for it in the code. Remember this is a beta release – expect things to be buggy and unstable (but better than 1.0 :P ). Also, you would do us a great favor if you report any issues to our bug tracker.

Now go ahead and grab it here: http://ui.jquery.com or directly from our google code page: jquery.ui-1.5b.zip. For this release, we deactivated the downloader – so please download the zip package and include what you need. You can read about the dependancies in the documentation.

Thanks to all the contributors who made this release possible – I will thank each of you individually in the final release notes, I’m too lazy and too tired to do it twice :)