Monthly Archives: June 2008

Uncategorized

jQuery UI 1.5.1

Posted on by

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.

See you soon,

Paul Bakaus & the jQuery UI Team

jQuery

jQuery Camp 2008 Announced

Posted on by

The jQuery Team is pleased to announce the second annual jQuery Camp! jQuery Camp 2008 will be held on Sunday, Sept. 28, the day before The Ajax Experience, in Boston, MA (location TBA).

Last year, over 100 jQuery developers gathered for a full day of jQuery sessions, which included talks from such big names as jQuery creator John Resig and other core team members, as well as talks from expert users exploring new and exciting jQuery projects. It brought together the largest group of jQuery Core Team members ever assembled, and gave users the opportunity to pick their brains and pitch new ideas.

The event was a *clear* success, and this year’s camp promises to be even better.

jQuery Camp 2008 will offer two tracks, providing both introductory and advanced sessions, covering a variety of topics. Ajax development, mashups, security and the recently released jQuery UI component and effects library are just some of the topics already lined up.

jQuery Camp 2008 will charge a nominal fee of $50 per person, which will include lunch. Attendees need NOT be registered for The Ajax Experience to attend. Registration will open in July; keep an eye on jQuery.com for more details!

For those attending The Ajax Experience, show organizers have recently announced a half-day time slot for additional jQuery sessions, on September 29th at the conference center. The agenda is still up in the air, but we’re thinking of offering a “Dream Team Code Review” session, where users can have code reviewed by members of the jQuery team. We’re interested in your feedback; would you attend this session?

jQuery Camp 2008 is a truly fantastic opportunity to learn from the jQuery team and socialize with top jQuery developers; we’re looking forward to meeting everyone!

See you all in September.

jQuery UI

jQuery UI v1.5 Released, Focus on Consistent API and Effects

Posted on by
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

ws_Path_of_Light_1024x768.jpg

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 (archive) 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!

As promised in one of the last blog posts, it comes with a complete documentation and a combined demo page to let you see them in action.
themeRoller_ui_full.png

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.org. If you want to know more about this great app and how it’s done, visit the excellent blog writeup by Filament Group! (archived)

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

jQuery UI v1.5:

Final Release: http://ui.jquery.com/download

You can also checkout the full release of jQuery UI v1.5 from the Subversion repository.

There’s more to come!

coverflow.png

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.

Thank you for all of your support,

 Paul Bakaus & the jQuery UI Team

Uncategorized

jQuery 1.2.6: Events 100% faster

Posted on by

jQuery 1.2.6 is primarily a bug fix release for jQuery 1.2. You can view the full list of what was fixed on the bug tracker.

This is the next release immediately following jQuery 1.2.3. Releases 1.2.4 and 1.2.5 were skipped (1.2.4 was built incorrectly, rendering it effectively identical to 1.2.3, and 1.2.5 was missing a patch).

The entire jQuery team did a fantastic job in pulling this release together – I want to take this opportunity to thank them all for their continued hard work.

I’d also like to take this opportunity to welcome Ariel Flesler to the core jQuery development team. He provided valuable help in pulling this release together – contributing bug fixes, performance improvements, features, and test cases. You can see the result of his hard work all throughout this release. Welcome Ariel and thank him for all his contributions!

Downloading

jQuery 1.2.6:

If you wish to checkout the full release from the Subversion repository, you can do so by following the instructions and checking out the source from the following location:

svn co http://jqueryjs.googlecode.com/svn/tags/1.2.6

Performance Improvements

Once again the jQuery team has worked hard to bring huge performance improvements in this release. As with previous releases we’ve expanded to look at many areas of the jQuery framework, looking for common pain points, and providing relief.

All data and test cases for the below performance improvements can be found in the the following jQuery 1.2.3 v. 1.2.6 Google Spreadsheet (results for Internet Explorer 6 were excluded in favor of Internet Explorer 7 due to their virtually-identical results).

Event Handling is 103% Faster

In analyzing intense application code (specifically operations such as drag-and-drop) we looked for ways in which universal changes could be made that would affect all users. A frequently-called piece of code was that of the jQuery event handler, any optimizations to it would dramatically improve the performance of all resulting frequently-called events. By focusing improvements here all frequently-called events that you have should see immediate benefits.

CSS Selectors are 13% faster

A number of optimizations have been made to internal jQuery methods, dramatically improving their performance, while providing measurable benefit to some of the most commonly used code in jQuery (such as the CSS Selector code).

For example the jQuery.map() method is now 866% faster and jQuery.extend() is 19% faster. These two changes have allowed for dramatic improvements in performance all throughout the library.

.offset() is 21% faster

Together with the improvements to jQuery’s event handling code optimizations of .offset() have allowed intense mouse-based operations to become much faster. For example jQuery UI’s drag-and-drop code is now over 300% faster because of these change (allowing you to achieve faster, smoother, drag-and-drop operations).

.css() is 25% faster

A method that’s frequently called (both internally and externally). The optimizations to this method are easily felt in others (like .offset(), for example).

New Features and Major Changes

Dimensions Plugin is Now Part of Core

The remaining methods of the Dimensions plugin, by Brandon Aaron, have been introduced into jQuery core, along with additional bug fixes and performance improvements. This plugin has seen considerable use amongst developers and plugin authors and has become a solid part of the jQuery ecosystem. We’ve been, slowly, introducing the most-used methods from the Dimensions plugin over the past couple releases – but with the release of 1.2.6 all remaining methods are now part of core.

If you’re upgrading your copy of jQuery to version 1.2.6 you can now opt to exclude the Dimensions plugin from your code.

The full documentation for Dimensions can be found on the jQuery documentation site (and is in the process of becoming integrated with the core jQuery documentation).

.attr() overhaul

The .attr() method has been completely overhauled (resolving about 15 outstanding bugs). Additionally, the method has been significantly simplified and optimized.

.toggle() can now accept more functions

Historically jQuery’s .toggle() function has accepted two functions (to be toggled in an even/odd manner). However that has been changed so that any number of functions can be provided and toggled by a mouse click.

$("div").toggle(function(){
  $(this).removeClass("three").addClass("one");
}, function(){
  $(this).removeClass("one").addClass("two");
}, function(){
  $(this).removeClass("two").addClass("three");
});

You can now unbind bound .toggle() and .one() functions

function test(){ $(this).addClass("test"); }
$("div").one("click", test);
$("div").unbind("click", test);

$("div").toggle(test, test);
$("div").unbind("click", test);

.index() supports jQuery collections

jQuery’s .index() function has allowed you to find the location of a DOM element in the jQuery collection – now you can also specify a jQuery collection (the first element of which will be extracted and located in the original set).

var test = $("div.test");
$("div").index( test ) == 3

jQuery.makeArray can convert ANYTHING to an array.

jQuery’s internal .makeArray() method now converts any array-like object into a new array. Additionally it wraps all other objects as an array and returns the resulting set.

jQuery.makeArray( document.getElementsByTagName("div") )
// => [ div, div, div ]

jQuery.makeArray( true )
// => [ true ]

jQuery.makeArray()
// => []

beforeSend can cancel Ajax calls

The beforeSend Ajax callback has allowed developers to execute a piece of code prior to a request occurring – now that code can also verify the integrity of some parameters and cancel the resulting Ajax request (useful for tasks like form validation).

$.ajax({
  beforeSend: function(){
    return $("#input").val() == "";
  },
  url: "test.php"
});

Exposed Speeds

jQuery has a number of named animation speeds (such as ‘slow’, ‘fast’, and ‘default’) you can now provide your own names for animation speeds, or modify the existing ones, by manipulating the jQuery.fx.speeds object.

jQuery.fx.speeds.slow = 1000;
$("#test").slideDown("slow");
Uncategorized

jQuery UI 1.5 release candidate, we’re getting excited

Posted on by

The jQuery 1.5 release candidate is now available at http://ui.jquery.com/download for everyone to test and download!

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.

See you soon!

The jQuery UI Team