Posted by moshe weitzman on September 28, 2008 at 5:49pm
jquery UI has become nearly core in the jQuery project. Shall we push for it in core? Who wants to lead that effort? There is a lot of custom drupal js code that we can just use UI for (draggables, autocomplete, progress bar, spinner, ...).

Comments
Blah honestly I would vote
Blah honestly I would vote no on this one.. Every time I have gone to take a look at the progress I have ALWAYS found several bugs.
This is esspecially true in comparison to other JavaScript libraries which I feel really have solid core UI components, I just dont think jQuery UI is there yet,
I know I would not use it. The only components IMO that are relatively polished, are very simple to replicate, and then some such as the dialogs are just
lacking in features and better contributed alternatives are available anyways.
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
A vote for jQuery UI
If only to balance out opinions here, I think this is something we should definitely consider. jQuery UI offers a great drag-and-drop library, sortables, resizables, a built in date picker (!), sliders, javascript-based tabs, and a whole bunch of effects.
I don't have a good gauge of feeling of the success or failure of the project within the jQuery community, but the fact that the project is hosted on jquery.com is certainly a vote of confidence. Moshe, did you make it to jQuery Camp? What's the word?
There are a few aspects of the project such as the themes and the theme roller http://ui.jquery.com/themeroller that I have as of yet been unable to come up with an elegant way of implementing in the jQuery UI module. I'm guessing it would tricky to implement this elegantly in core as well.
There's also a larger issue of how to implement jQuery plugins in Drupal in general and how to upgrade/update core JS file (separate from a full Drupal upgrade). But I will leave that to another thread.
In my opinion, if we're going to bring greater usability to Drupal, we're going to need to offer users more user interface elements for their toolbox. I always point to collapsible fieldsets as an example of how starving developers are for some u.i. conventions and how much they'll use (and overuse) whatever they're given.
jQuery UI may not be perfect, but it's a good foundation that the jQuery community seems to be getting behind. We need a foundation that the Drupal community can get behind.
-= Jeff Robbins | Lullabot | Drupalize.me =-
I completely agree. jQuery
I completely agree. jQuery UI has dedicated, paid developers on it. It is going to follow the meteoric rise of jQuery itself. They are actively working on unit tests, so they match the quality of jQuery core. Remember that D7 will not be released until well into 2009 - thats gives quite more time for jQuery UI to mature. Note that we committed to jQuery core before its 1.0 release.
I really do think this belongs in core. jeff makes good point that once it is in, I think developers will see lots of uses for it. We have agoal in Drupal to standardize how our components look and work. UI is a natural step toward that. We really should all be doing DHMT tabs the same way just like we all do static tabs the same way today.
Cross Platform Development
Additionally, having it in Drupal core would hopefully encourage developers fluent as well in developing for jQuery to jump on board active jQuery UI development, helping to ensure a stable and quality product.
Aaron Winborn
Drupal Multimedia (book, in October!)
AaronWinborn.com (blog)
Advomatic (work)
Aaron Winborn
Drupal Multimedia (my book, available now!)
AaronWinborn.com
Advomatic
Dont get me wrong guys I
Dont get me wrong guys I love jQuery, and I do think UI should be in core, just not right now. While viewing their demos in various browsers almost all of them are broken, many of them still break in various ways, although for some its simply a CSS issue. The date picker would be fantastic though I will agree on that, the only component I would absolutely stay away form for now is the dialogs, I am sure they will add more features though.
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Bad Demos
Yes, their demos are not a great showcase for jQuery UI. But we've been using aspects of it on various projects and it seems to serve the necessary purposes -- solid and utilitarian.
-= Jeff Robbins | Lullabot | Drupalize.me =-
Usability and Coolness
Having jQuery UI as part of core would allow us to bring some really slick effects and usability enhancements into Drupal core and I'm all for that! We'd need to make a list of places were it could really benefit core though. Maybe the addition of physical dragging and dropping of blocks around the screen? Better slide controls for the color module?
I would like to hear more
I would like to hear more from people with experience using jQueryUI 1.5 (or, even better, 1.6). The last time I gave it a serious look was back in the 1.0 days, and I was unimpressed across the board: poor code consistency; underwhelming features; poor cross-browser testing. Really disappointing.
That said, I would love, love, love to having it into core. I think it would enable an explosion of new UI creativity. And with Microsoft and Nokia on the jQuery bandwagon, jQueryUi is only going to be getting more and more attention and energy.
I would have to agree with
I would have to agree with you. 1.0 sucked!
1.5 I've been using for a bit now and I'd have to say its a drastic improvement and wins me over completely.
Having more jQuery stuff in core would help to grow our jQuery developer base which will mean more usability improvements which we all know is incredibility needed!
+1 for standardisation
I guess I'm coming around to this idea. Originally I was against it because I felt it meant a pile more js code in core that not many people would get use out of. But of course it would only be added as needed, just as now you use
jquery_ui_add('ui.datepicker');from jquery ui module. And the files that core does use will only be replacing things like tabledrag.js and collapse.js so shouldn't count as much extra overhead.The point about standardisation of how people do things is a very strong one. Tabs and drag & drop are becoming increasingly the norm on large sites these days and in Drupal we currently have so many different modules implementing this kind of thing in so many different ways (of course I'm thinking of my own module Quick Tabs in particular :-P).
And if we can have a jQuery UI Update module that works the way jQuery Update for D6 works now - i.e. never replacing core files but just changing the path they are pulled from to get the newer ones from the module's own directory - then that takes care of the whole keeping up to date issue.
Katherine
jQuery UI in Core
I kick started it with a patch: Add jQuery UI to Core.
jQuery plugins manager in core?
I would suggest to also include a standarized method to include jQuery plugins manager in core, if possible.
jQ?
jQ offers one solution, which could easily be retrofitted for core.
Aaron Winborn
Drupal Multimedia (book, in October!)
AaronWinborn.com (blog)
Advomatic (work)
Aaron Winborn
Drupal Multimedia (my book, available now!)
AaronWinborn.com
Advomatic
Plugins - jQuery plugin manager?
Huh. There's also http://drupal.org/project/plugins. Shame they didn't talk with me when they started; they could have shared the efforts I'd started with that project from months earlier. No biggie; we can still merge them, and put that in core and deprecate both projects.
Aaron Winborn
Drupal Multimedia (book, in October!)
AaronWinborn.com (blog)
Advomatic (work)
Aaron Winborn
Drupal Multimedia (my book, available now!)
AaronWinborn.com
Advomatic
I swear we talked in the
I swear we talked in the issue queue of JQ :), either way mine was a prototype that I made available to everyone to take a look, have not worked on it for a while
but like you mentioned perhaps ideas from both will work.
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Ah, so we did...
Ah, so we did... http://drupal.org/node/213882
Sorry, been a busy summer. Well, looks like we hashed out some good ideas.
I think that core would not tolerate the automatic retrieval of jQuery plugins, so some of the arguments postulated in that thread still apply.
My recommendation would be that we move jQ (or its like) into core, and refactor jQuery Plugins module to tap into that (if it doesn't already).
Aaron Winborn
Drupal Multimedia (book, in October!)
AaronWinborn.com (blog)
Advomatic (work)
Aaron Winborn
Drupal Multimedia (my book, available now!)
AaronWinborn.com
Advomatic
I understand how people
I understand how people would be weary of a automated system, however I would quote the creator of rubygems when he mentions that gems are no different than downloading and extracting a tar, it is code that is trusted regardless of how its retrieved or installed, I would say this is the largely the case here as well. ** We would of course have to take security issues into consideration **
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Of concern to many
Of concern to many developers, beyond the more important security issues, are that they control their development and production sites with SVN (or other controls), and an automatic download of plugins outside that system would break that system. I would have to vote against that, unless it were easily configurable, and probably turned off by default.
Aaron Winborn
Drupal Multimedia (book, in October!)
AaronWinborn.com (blog)
Advomatic (work)
Aaron Winborn
Drupal Multimedia (my book, available now!)
AaronWinborn.com
Advomatic
Even then, you could still
Even then, you could still store the plugins in a VCS, there is no reason why you couldnt.. they would just simply not be flagged as installable, because they would exist in the directory already. Secondly even if you were to not version them, they would be automatically installed anyways. If you take a look at the old screenshot I have of the module there, any orphaned files or 'plugins' found in the directory that are not required by a module are displayed as such as well.
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
I'll take a look at the
I'll take a look at the Plugin module when writing the patch for http://drupal.org/node/315100. I'm sure once we put this out there, it'll have a lot of attention and different ideas, and the best solution will rise to the top.
Isn't there a contrib module or GSOC project for installing modules automatically? I think that this functionality would fall under the scope of that anyway.
Aaron Winborn
Drupal Multimedia (book, in October!)
AaronWinborn.com (blog)
Advomatic (work)
Aaron Winborn
Drupal Multimedia (my book, available now!)
AaronWinborn.com
Advomatic
There was, I am not sure how
There was, I am not sure how that went but yeah I would agree
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Hmm... mmmaayyybbee...
My impression as the "maintainer" (in the very loosest sense of the word) of jQuery UI module, is similar to Tj Holowaychuk and starbow's impression. I'm not in any way a JS person, so take this with a grain of salt, but the code I dealt with (this was around RC1 of 1.5) seemed inconsistent, difficult to understand, buggy, and under-documented. There also seemed to be pretty big differences in quality within the individual plug-ins themselves; some are high quality and have nice APIs, others not so much. jQuery UI as a whole is also like twice the size of Drupal core itself. :P
So, I don't know. I see the advantages Moshe and Jeff point out. I also like that it enables us to kick our interface stuff up a few notches. But I guess I would need to see some strong backing by the "big" JS people in the core development team who have some experience working with jQuery UI to be convinced to add 5MB of code to Drupal core, and be saddled with support requests about jQuery UI's bugginess in Drupal's IRC channels, as we are with jQuery's. It would also help if we exponentially grew the size of the core JS maintainer team, since we barely have enough people to go around covering the existing JS code, let alone increasing the loc by 20,000%.
However, something that I would definitely support, and could be worked on while we figure out a definitive answer to this question is a mechanism for central management of jQuery plugins in core so we don't have 20 competing solutions in contrib, and we could potentially ship with some of jQuery UI and not others, but make it really easy to add in the parts other authors need. I think that's a smart place for someone who wants to see this in core to put their time now, so we can revisit this question again closer to code freeze.
jQ in core?
Great idea! I'll roll out a patch for http://drupal.org/node/315100 tomorrow.
Aaron Winborn
Drupal Multimedia (book, in October!)
AaronWinborn.com (blog)
Advomatic (work)
Aaron Winborn
Drupal Multimedia (my book, available now!)
AaronWinborn.com
Advomatic
Theme Developer
I should note that we're using jQuery UI elements for the Theme Developer floating palette to allow it to be draggable on the page. Currently our choices are to either create a dependency on JQuery UI module or just include ui.draggable.js (and ui.mouse.js) as part of the Devel distribution -- which is what's currently happening. Of course, if another module is adding it's own draggable library or doing things the "proper" way using the jQuery UI module, things can get either very inefficient or very broken very quickly. :-)
Having JQuery UI could be super helpful for even small bits like this.
-= Jeff Robbins | The Do It With Drupal Seminar =-
-= Jeff Robbins | Lullabot | Drupalize.me =-
Dont get me wrong, having a
Dont get me wrong, having a unified drag library is fantastic for all the functionality it provides such as snapping, axis, etc, but creating a draggable window is SO simple and so tiny I would hardly feel the need to place a dependency based on that.
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Is it easy? I don't know how
Is it easy? I don't know how to do it. I'm completely self taught, but I've done a lot of Javascript development. I think I represent a lot of people who don't see writing a dragging library from scratch to be a quick and easy task.
-= Jeff Robbins | The Do It With Drupal Seminar =-
-= Jeff Robbins | Lullabot | Drupalize.me =-
I am self taught as well,
I am self taught as well, its about 3 lines to create a draggable like the Themer window is, but like I said its great to have the other features found in most of those libraries. Its easy though you just find the point (x,y) that the user clicked, then with that you can determine the axis offset, then bind a handler to mouse and simply position the element as if it was going to be at the same point your mouse is, and then apply those initial offsets and bam its back to where the mouse was pressed initially :D
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Example
Here is my entire CSSEditor project JavaScript, and below is the small snippet of dragging, so if you were not using prototypes like i do it would be even smaller
http://pastebin.com/m37bf81be
/
* Initialize dragging.
*/
CSSEditor.prototype.window.prototype.startDrag = function(e) {
$('body').append('<div id="cssedit-outline"></div>');
this.dragging = true;
}
/
* Continue dragging.
*/
CSSEditor.prototype.window.prototype.drag = function(e) {
if (this.dragging){
$('#cssedit-outline').css('top', e.clientY + 'px');
}
}
/**
* End dragging.
*/
CSSEditor.prototype.window.prototype.endDrag = function(e) {
if (this.dragging){
$('#cssedit-outline').remove();
this.animateTo(e.clientY);
this.dragging = false;
}
}
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
All paths lead to JQuery UI
As a Drupal newcomer, both the books I bought on Drupal had chapters on JQuery, and just the briefest time in the JQuery community pushed me to JQuery UI as the natural way to implement most of my needs. I never intended to learn this stuff, but learning Drupal naturally lead me to do so.
Whether JQuery UI is good or bad, I expect it will only be used more and more in Drupal modules.
Tangential: JQP
Talk of a core jQuery plugin manager has been mentioned in this thread. I've been frustrated by the complicated nature of the existing solutions. So last week I whipped up a simpler solution called jQuery Plugin Handler (JQP). It's an API module for use by other modules and themes. It doesn't require any module "wrappers" or PHP code for adding jQuery plugins to your Drupal installation. Just create a directory called "plugins" inside of sites/all (or similar) and drop in the plugins you need.
http://drupal.org/project/jqp
The issue to add jQuery plugin handling to core in D7 is here:
http://drupal.org/node/315100
-= Jeff Robbins | The Do It With Drupal Seminar =-
-= Jeff Robbins | Lullabot | Drupalize.me =-
Sounds really similar to my
Sounds really similar to my 'plugins' one, we have so many of these haha shit.. like 5 or more now I think
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Tj Holowaychuk
Vision Media - Victoria BC Web Design
Victoria British Columbia Web Design School
Not sure if jQuery UI is
Not sure if jQuery UI is really ready for core inclusion. jQuery was pretty rough when we added it the day before code freeze, but I have a feeling that jQuery UI is not really stable. I occasionally discover bugs in it; a lot more than I discover in jQuery itself. That being said, we should instead add a general facility to Drupal that makes sure that only one version of a library is present, much like the behaviors module (iirc).
Superfish a better example
I can understand the UI project but it seems to fall down in the area of testing browser compatibility. All the Javascript projects should share a list of browsers that have to be supported before inclusion in core and there should be a stated fall back test with Javascript off. There should be demo sites where we can test the functions.
Superfish is a simpler project but it demonstrators a good approach. The author created a site containing documentation and test pages we can all access. The author lists the browsers he tested. He shows examples of Superfish used in a variety of ways. Based on what I found for Superfish, I would vote for Superfish in core in D6. Jquery UI is more likely to produce a flood of questions from people using it in ways that are not documented or demonstrated, and in browsers that were not tested.
Jquery in core used to produce major conflicts with Jquery in projects because of different library releases. Now Jquery is stable for months at a time and fits in with the long update cycle from Drupal through add on modules. Is the Jquery UI code ready to stay stable for the 2 - 3 months between Drupal releases then the 3 - 6 months delay until all modules are updated?
We have to be specific about browser testing. For example, there are lots of themes using Suckerfish javascript based menues and claiming browser compatibility. Most of them mention IE but conveniently leave out IE6. I tried one that mentioned IE6 and it worked in a recently updated IE6 but failed on the default IE6 supplied with XP. The Jquery based Superfish menues, as used in Pixture Reloaded, works in every browser I try including old and updated IE6s. The differences between the Javascript in each theme are tiny and they make a huge difference to the number of support calls.
I would like to see more online test cases demonstrating al the features of UI before moving it to core.
petermoulding.com/web_architect
petermoulding.com/web_architect