h1

NestedSortable Rails Plugin

November 19, 2007

If you are a Ruby on Rails developer (if not you should become one) I have good news for you: a Rails plugin that makes it really easy to implement a NestedSortable Widget data source is almost ready for primetime. That will make implementing the NestedSortable Widget as easy as 1-2-3. It is already working, as a matter of fact, its only missing some automated tests, helpers I want to create (for including the NestedSortable widget in your views) and documentation. It works for Rails 1.2.3, I haven’t tested it with Rails edge yet.

I will give a brief overview of how it works. All you need is a model with a column that should hold a foreign key to the parent and a column to hold an index number for the position of the element inside its hierarchy. The defaults (convention over configuration!) are “parent_id” and “position”. Suppose our model (the one we want to nest and sort) is named “Item”. You will only need one line of code to implement a data source for it in your controller:

class ItemsController < ApplicationController
	nested_sortable_data_source_for :item
end

By default the data source will be created under an action named “order”, inside your controller. Don’t worry, all the defaults can be overridden (wait for the docs or take a peak at the code).

In your view, it will be pretty easy to add the NestedSortable Widget, as always:

<script>
	jQuery( function($) {
		$('#items_sort').NestedSortableWidget({
 			loadUrl: "/items/order/1.json"
 		});
	});
</script>
<div id="items_sort"></div>

Don’t forget that you will need to include the scripts (jQuery, Interface, etc) and the CSS file for the widget, by putting something like this in the HEAD of your HTML file, in your layout file probably:

<%= stylesheet_link_tag 'ns/nestedsortablewidget' %>
<%= javascript_include_tag "jquery-1.1.4.js" %>
<%= javascript_include_tag "interface-1.2.js" %>
<%= javascript_include_tag "inestedsortable-1.0.1.pack.js" %>
<%= javascript_include_tag "jquery.nestedsortablewidget-1.0.pack.js" %>

Ok, you say. That is neat, but how do I customize what data will be displayed in the columns by my NestedSortable Widget? The default is to display all the columns/attributes your model has (excluding the ID and foreign keys). You can use the :columns option of the nested_sortable_data_source_for to make your data source display pretty much anything you want, in any order you want. Just an example:

nested_sortable_data_source_for(
	:item,
	:columns=>[
		[:title, 'Title of the Item'],
		[:description, 'Description of the Item'],
		[ lambda {|i| i.created_at.to_date.to_formatted_s(:long)}, 'Creation Date'],
		[ lambda {|i| i.attachments.count}, 'Attachments']
	]
)

If you are smart enough you already got it: it will display a table with 4 columns, the title of the item, description, creation date and the number of attachments it has. Note the use of lambdas (functions that are passed as variables). It gives you the power to display whatever you want in the columns of your NestedSortable Widget.

Ok again, you say. The way things are until now will only allow me to have one set of items per database table. In your application, you will usually have a lot of users, and will not want to create one table per user. You want everything in the same table, and your “item” model probably have a “user_id” foreign key. That has been thought of as well. You have the :conditions option, which will give you the flexibility you need. An example:

nested_sortable_data_source_for(
	:item,
	:conditions=> lambda {|controller| {:user_id => controller.params[:id]} }
)

Note the funky lambdas again. Instead of a lambda, you may pass in a symbol, like :conditions_generator with the name of a method in your controller (make it protected, please) that will generate the conditions for you. The conditions are exactly like the ones you may use in your finders in Rails: they may be strings with SQL, they may be arrays like ["a = ?", "b"], and anything else that is allowed in Rails conditions.

In your view, in the part you set up the widget, you would probably use something like:

loadUrl: "/items/order/<%=current_user.id%>.json"

This is insecure: users could easily change the order of the items that belong to other users, with little effort. To implement security, you need to make our condition generator a little bit smarter. It is up to you, though…

Briefly, that is what this plugin for Rails does: it makes it ridiculously easy to implement a NestedSortable Widget in your Rails apps (I bet you could do it in 5 minutes!). Don’t show it to your boss, he will probably fire you and begin doing it himself. Note that the data source you create fully supports pagination: you may use any option the NestedSortable Widget provides and it should work like a charm.

To try the plugin, install it using Rails install command, in your Rails application path:

script/plugin install https://nestedsortables.googlecode.com/svn/trunk/rails/nested_sortable

h1

New minor version of NestedSortable

October 17, 2007

The plain Nested Sortable plugin just had its first official version shift, with a minor improvement: you can now prevent a few elements from receiving children, by applying a class to them, and make sure they will always be nodes in the tree. You can configure this using the “noNestingClass” option. Thanks for Peter for giving the idea and figuring out a simple way to do it (it took 3 lines of code).

Get it here: http://nestedsortables.googlecode.com/

jQuery 1.2 was released and it is incompatible with Interface. Some things work, some don’t, and it turns out there is a bug with jQuery 1.2 and the Sortable, in IE only (thanks n3dst4 for reporting). So I am updating my tests to use jQuery 1.1.4, and recommend you guys avoiding  jQuery 1.2 until Interface gets updated (probably never) or the new jQuery user interface plugin, jQuery UI,  is usable enough  to replace it entirely (it is still a little far from it). I wonder whether releasing jQuery 1.2, without making sure it was compatible with Interface,  or waiting until jQuery UI was fully baked, was a good move. It might hurt jQuery popularity, since its current version doesn’t have a decent set of UI plugins (Interface being incompatible and jQuery UI pre-alpha), the first thing people look for when using a JS library.

So, in the not so distant future, I might need to update NestedSortable plugins to use jQuery UI, instead of Interface. It will be a good excuse for a 2.0 version…

h1

The final bits of GSoC

September 16, 2007

I am now considering finalized my work on the GSoC project (from now on call it voluntary work… ;) ). After a lot of bug fixing and some documentation, I am releasing the 1.0 version of both NestedSortables jQuery plugins. Please, visit the plugins’ homepage to check out and comment on the documentation. I have compiled the scripts into compressed format and they are now about 75% smaller, and will download pretty fast.

After a lot of helpful comments from folks at the WP-Hackers list, I improved a few details in the WordPress page ordering. I also managed to fix all the remaining problems I mentioned in my last post (more about them later on), so I believe it is now ready to be rolled out in the development version. To try it out, you can check my sandbox (user: test / pass: test), download the development version of WordPress with it (up-to-date as of 19-Sep 2007 16-Sep-2007 WP from trunk), or apply it to your own working copy of WordPress from SVN trunk using this patch (you will probably also need this image, which I think can’t be included in the patch). I will submit the patch to the WordPress TRAC. I hope it gets reviewed and accepted.

Read the rest of this entry »

h1

First showcase of page sorting in WordPress

September 3, 2007

I have finished the integration of the nested sortable widget into WordPress. I have set up a Sandbox WordPress installation, which can be accessed here (use test/test for login, go to “Manage->Pages”, and click “Edit Page Order” in the end of the page list). I have also put up a diff file (untested), which can be applied to your WordPress SVN checkout if you want to try it out on your own instalation (Automattic folks, don’t apply this yet to the WordPress SVN, there are a few details left to be solved, such as compressing the JS code and others, as I explain bellow).

Read the rest of this entry »

h1

The widget is feature complete now

August 25, 2007

UPDATE: The plugin has now reached its 1.0 version, and is available in a compressed version and with documentation. Please check the project homepage at: http://nestedsortables.googlecode.com/

The widget is feature complete now and working well with the major browsers I have tested it (that is, FF2, IE7, IE6 and Safari 3). It took a little bit of hacking to remove the bugs in IE, but in Safari it worked like a charm the first time I tried it (and Safari is also the browser where it looks and feels faster – they probably have the best JavaScript interpreter out there). I changed a few things in the underlying Nested Sortable plugin, so it should be a lot faster now, in all browsers. The test demo can be seen here as usual and is now up-to-date with my latest SVN updates.

Serialization will, by default, send the data using POST and encoding the data using the “query string standard” , which most server side languages should automatically convert to their equivalent data structures for arrays and hashes. You can also configure the widget to return the data in JSON format (for that you need to include the JSON jQuery pluing) and process it in your server using one of the countless JSON libraries available. Following the REST principles under the HTTP protocol, if the HTTP response has a success code the widget will think data was saved correctly. You can even use the same server path (ie. the same script) to retrieve and save the data, since it will use GET to retrieve and POST to save.

I am aware that the “incremental” feature (showcased in the last example) does have a few problems when you change the item from one “page” to the next (even though you see things in a continuum , what you see is actually the different pages, each inside its own UL with a NestedSortable, being rendered in sequence). I am also aware there is a minor cosmetic issue with the spacing of columns in IE6. I am not much of a CSS browser quircks’ wizard and “incremental” shouldn’t be used in WordPress, I presume, so I am going to leave those issues to be solved after the Widget is integrated in WordPress.

If you find any other bugs or have more suggestions, please post a comment.

h1

New Improvements in the Widget

August 21, 2007

Following Mike’s suggestions, I am now using jQuery’s slideIn() and slideOut() as the default effect for page transitions. They are being applied in parallel (the old page slides out while the next slides in). To make this change I had to do some changes to the way different parts of the widget are displayed, I believe things are “jumping up” a lot less when you change from one page to the other. I also added the possibility for the user to use his own custom functions for the transition, which can be applied in parallel or in series.

I have also added the “incremental” option, which will make the new pages that are loaded be incremented to the existing ones in the user display. This is usable by itself. My intention was to allow the user to display the list inside a scrollable div to go along with this option, but after a few tests, I am seeing the dimensions stored in the Sortables would need to be recalculated every time you scroll the div, and I am afraid making this work seamlessly could take some time and possible changes to Interface’s Sortables itself. It would probably be unbearably slow as well.

I changed the demo to showcase these and also a lot of other options that are available. The demo will now load 5 different instances of the widget.

It can be seen here.

h1

Nested Sortable Widget

August 19, 2007

UPDATE:  The plugin has now reached its 1.0 version, and is available in a compressed version and with documentation. Please check the project homepage at: http://nestedsortables.googlecode.com/

I am posting a demo of what I am calling the Nested Sortable Widget here.

In this example I am only showing a small subset of the possible configuration options it has. The component/widget is basically finished, but there is still a tiny bug in IE when you drag items with more than one hierarchy, which I am going to investigate soon. The “save” function also need a few extra hours of work to be finished, but that doesn’t affect the demo. Reports for any other bugs are welcome.

The main features of the component are:

  • Loads data from a JSON data source, with a predefined format (I will explain it once I create the final doc. for the widget, but it is very simple and can be inferred from the demo) . This format is very compact and very easy to generate and manipulate in any server side language, since it only uses standard data structures, like arrays and hashes, unlike XML.
  • Support for pagination, both in the server (it will only load smaller chunks of data each time) and in the client (it will display smaller chunks of data at a time).
  • Funky way to move items from one page to another, following Mike’s suggestion.
  • Can display data with multiple columns, all you have to do is change your data source.
  • Allows you to change the nesting direction to right to left, and it will change the order of the columns automatically.
  • Lots and lots of easy options to to customize the visual appearance of the widget and most of it other aspects. Don’t worry, I will document them all (or you may dig in the code and figure it out now :) ).

Read the rest of this entry »

h1

News

August 8, 2007

I am currently working on the “Nested Sortable Widget” that I mentioned in the last post. I wanted to be able to showcase it in this post already, but I realized I was taking too long to give out some feedback, so I decided to write just to give some news.

The widget is almost complete, but I am running some issues with pagination, which is a lot more complex than I initially thought, primarily because you can’t show exactly the same number of items per page, due to the nesting (the pagination needs to be “soft”). But I think I am on my way and should be complete in the next 2 or 3 days. Summing up it will be able to fetch a list of nested elements represented in JSON, will display it, allow the user to change the order/nesting and will send it back to the server.

In the meanwhile I created a Google Code project for the NestedSortable plugin and hosted it there.

I hope to be able to write again pretty soon, with good news!

h1

Nested Sortable jQuery Plugin

July 22, 2007

UPDATE: The plugin has now reached its 1.0 version, and is available in a compressed version and with documentation. Please check the project homepage at: http://nestedsortables.googlecode.com/

I am showing now the first version of what I call the “Nested Sortable” jQuery plugin. It is based on the same nesting idea shown on the previous prototypes and used on the bbPress forum ordering, but it is totally rewritten and has a very different (and I believe simpler/more efficient) inner working.

A demo of it can be seen here.

The highlights of it are:

  • Built on top of Interface ’s Sortable and maintains compatibility with it. This means you can use the same options available on the Sortable, plus a few extra ones specific to the nesting. You can also mix Sortables and NestedSortables on the same page.
  • Just as easy to use (see the code examples on the demo).
  • Can be easily configured for left-to-right or right-to-left nesting.
  • Can be used with any type of HTML element (that allows nesting), not only ULs and LIs.
  • You can define a class for the nesting the draggable is currently hovering on, to make it clearer to the user (see my ugly yellow example – could be made pretty with some css styling).
  • All the previous bugs/misbehaviours with the prototype are gone (hopefully without additional ones being introduced).

It was tested under IE7 and FF2. What is still lacking for it to be complete (and useable) is a serialization function, which I should finish in a few days (serialization is now complete, see my comment bellow). As things evolve I should probably add a few callbacks to allow its behavior to be easily configured.

So, the next step for the WordPress page list project is to create a higher level jQuery plugin that will be built on top of this one and will, given a JSON object input, fetched via AJAX, dynamically create the Nested Sortable, with pagination support, using the idea Mike gave on the last comment (the user hovers over a Droppable, which should fetch and display the additional pages). It will be more like a widget.

h1

More advances

July 10, 2007

First things first: I made some updates in the prototype. It now works as expected, allowing you to make a page a child of another page which doesn’t have children yet.

I also show in it what I think is the best way of handling pagination. The idea is to display an item from the main hierarchy before and another one after the items that belongs to the current page, in the ordering view. If the before/after main hierarchy item has children, all of its children should be displayed as well. In the demo, my before and after main hierarchy items are child less, therefore the “items bellow this” and “items above this” markers show up after one item, but that would vary. I did a lot thinking into this and think this is the only (and simpler) way you can move main items from one page into the other, without having “dark spots” (elements that are “stuck” in a page).

In trying to understand what was making nesting not working in the prototype, I had to dissect the Interface plugin code for the Draggables, Dropables and Sortables. I found the code pretty cluttered and hard to understand, filled up with variables with names such as “oC”, “oD”, “a”. In fact, almost no variables have meaningful, unabridged names. I had to do a lot of debugging, using Firebug. The code is very coupled as well as, for instance, you have calls to the Sortables plugin being made from the Draggable and Dropable (you would expect the Draggables and Dropables, as lower level elements, to be unaware of the Sortables existance). I didn’t like the code, but at least I understand it now.

Meanwhile, I found out the the jQuery team (John Resig, the creator, included) are creating an official, brand new set of UI plugins for jQuery. It is called jQuery UI. I wonder why they decided to skip Interface all together. It was not released yet, but already have working Draggables, Dropables and Sortables. I checked it out from SVN, looked at its code and tested it. The code is a great step foward from what I saw in Interface. Much cleaner, commented, well organized and easy to understand. Impressively, it also looks like they managed to keep it a lot smaller (30kB against 46kB of Interface’s). The coupling problem I mentioned doesn’t exist, as they created a generic callback in the Dragabble (called dropBehaviour), that the Sortable implements. That way, I could, for instance, create a brand new Sortable-like plugin, without having to modify Draggable’s or Dropable’s code. They seem to be tackling the “Sortable with Hierachy” problem as well, and have some partially working demos for it, in their test files.

Regarding the server side implementation, I am leaning towards passing the javascript a JSON representation of the page list, instead of generating the whole UL list in the server side. I think it will make things much more reusable, in both ways (reusing the javacript and the server side script). It will also download a lot faster for the client. I was thinking of using a JSON like this:

{
"columns":["Title(ID)", "Owner", "Updated"],
"items":
[
{
"id":1,
"info":["My Title(1)", "My Owner", "My Date"],
"children":
[
{
"id":2,
"info":["My Title(2)", "My Owner", "My Date"],
},
{
"id":3,
"info":["My Title(3)", "My Owner", "My Date"],
}
]
},
]
}

In this example we have a parent page which has two children.  It doesn’t look so good because I can’t indent the code to display it here. I already implemented it on the prototype, so now, instead of loading the page list from an file with HTML and just displaying it, it loads a file with JSON and processes it to create the HTML on the fly. The JSON file for the prototype can be seen here: list_demo_json.js  The JSON file has 2kB, versus 6kB for the HTML with the exact same data.