Seen Any Good UI Lately?
public
group: Drupal Dojo
joshk - Fri, 2007-05-18 02:14
In the quest to bring book.module to the next level as outline.module in Drupal 6.0, we're confronting some UI questions. Currently the form for adding a post to a book hierarchy becomes unworkable for sites with lots of book nodes (e.g. drupal.org). We need something more innovative than a simple dropdown for this new release. But what?
I'm a big believer in taking advantage of the state of the art, and I know there's a lot of interesting stuff out there online already.
Does anyone have a favorite way of organizing nested lists, placing new items within structured trees? If so, send us some links in the comments! We need inspiration.
Dojo Tags: book module · drupal 6
Send a link, win a prize!
If there are good suggestions, I can try and address them in an impromptu lesson this Sunday....
http://www.chapterthreellc.com | http://www.outlandishjosh.com
BookGUI module
There is a module I wrote which lets the user move book pages around with ease. With some modifications, one could also rename book pages here as well. There is a plan in the works to convert this script to jQuery eventually, but I don't have the time. For a simple demonstration see:
http://unitorganizer.com/drupal5/admin/book/gui
Something like the Yui tree sorting would be ideal, but would involve making the YUI JavaScript library compatible with Drupal (I think the Ext.js jQuery extension does this) and forcing users to download a separate copy of it to drop in their installation.
Module available here
http://drupal.org/project/bookgui
Cheers,
Bill
FunnyMonkey
Tools for Teachers
Go for the gold...
I'd love to build drupal sites with this UI
http://www.mindmeister.com
built on rails with prototype.....
... how would it look in drupal jquery?
$$$$ !? ;)
Great stuff
I checked this out and its awesome. Would be great to have a mind map tool in drupal.
OmniOutliner
My favorite UI for nested lists is the one in OmniOutliner. If you have a reasonably new Mac, you probably have an OEM copy (it's included in the default OS X installation) with a free bundled license.
http://www.omnigroup.com/applications/omnioutliner/
Me too
yummy stuff.
LinktoContent Module
Link to Content module (a tinymce plugin) does an nice job of providing you with an ajaxian way of linking to conent in taxonomy categories and subcategories
Demo?
I tried to get this working but am having javascript errors. Do you know of any sites where I could demo it?
http://www.chapterthreellc.com | http://www.outlandishjosh.com
If you contact me via the I can setup temporary access
thanks
errors?
Hi.
Do you still have problems using it? You could contact me if you'd like to view a demo (I'll set one up).
greetings,
Stefan
(PS: I'm the maintainer of linktocontent ;-))
Link to Content exposes the word "node"
Link to Content exposes the word "node" to users. I don't think users should or need to know what a node is, so I suggest changing the "node" strings to something else like "content" or "post".
starting point
This jQuery demo seems like a starting point: http://interface.eyecon.ro/demos/drag_drop_tree.html
If we wanted to use exactly this sort of thing, the changes would have to be saved each time you moved an item.
This demo looks even better: http://jquery.bassistance.de/treeview/
What I was thinking was similar to this (with the +/- to expand the tree) but you'd click to choose the new parent (which should get highlighted or some such).
You also might want to check out
You also might want to check out WebFM -- I haven't looked at it in a couple months, but it has a nice ui for managing files.
Cheers,
Bill
FunnyMonkey
Tools for Teachers
The code in that example is
The code in that example is pretty primative. It is possible to create the same effects without having to resort to transparent spacer.gif files and the like. One of the things I am most happy with in the QAM module is that the HTML is posh (Plain Old Semantic HTML).
Also, you don't need to save the changes every time you move an item. That is one way to do it, but there was a big discussion about this on the dev list a couple month ago, and the consensus seemed to be that "arrange and then save" was the Drupal Way, vs "save on each action". It does get tricky if the goal is to combine "arrange then save" with the ajax lazy loading of branches, but it is doable.
Yes! Tao Starbow's Drag & Drop Nested Lists w/ Quick Admin Menu
Tao Starbow demoed his Quick Admin Menu at the Berkeley Drupal Users Group, and it is perfect for this.
He rolled his own Sortable jQuery to be able to create Nested Lists with a drag-and-drop interface, and it's looks amazing.
Here's a demo:
http://demo.starbowconsulting.com/admin/build/qam/2
And here's his initial write up about it: Quick Admin Menu - A New Wave Menu UI
nice, but
The demo, at least, only has a single level of items, not a tree. The demo seems to be basically get setting the weight? This would be useful, but not sufficient.
Also, the hard part with something like this for the menu tree is that we don't really want to load or display the full tree, since it might be thousands of items.
No
I think you should take another look at the quick admin menu demo. I started with the interface tree demo, and put a lot of work into extending it.
A drag & drop interface for
A drag & drop interface for something that can potentially grow to enormous proportions doesn't look like the best approach. Some of the demos are definitely neat but they're still annoying especially when it's not a flat list.
I'm not sure of an alternative but another approach could be an unordered list with checkboxes in them to select source pages and radio buttons for the destination.
Select all the pages you want to move with the checkbox then hit the radio button to move it where you want. Doesn't seem intuitive but it could be made clear by styling it. How, I'm not exactly sure atm.
For larger lists, something similar to this jQuery search filter could be added to narrow down the outline hierarchy.
The best tree manipulation
The best tree manipulation UI I have seen lately is the tree example over at ext: http://extjs.com/deploy/ext/examples/tree/reorder.html
Whenever I needed to make a choice about the UI for Quick Admin Menu, I pretty much just copied how ext does it (unfortunately ext is big, and not GPL).
A demo of my version is at: http://demo.starbowconsulting.com/admin/build/qam/2
It currently loads the entire menu at once, but it would be a small extention to do lazy/ajax loading of the branches.
ext is LGPL, and can thus be
ext is LGPL, and can thus be published by whomever wants to under the GPL. So, it remains big, but licensing is a non-issue.
And yes, this is a great tree manipulation UI. Ext has many more really great features - I thought about integrating it with Drupal a week back or so (contrib of course, not core) ;)
How about making it look
How about making it look like a real book?
http://demo.quietlyscheming.com/book/Anatomy.html
Mike
Hello thre Mike.
dup post ... ooops
Hello thre Mike.
The flash in your post looked familiar. there ate several Flash Template and components that achieve this. I could find the one I was looking for -- but here is and other example.
http://www.dynamicfactory.us/xmlswfdemo/pageflip2b/index.html
--
Jimmy Rosano.Keesee
Option to Print to PDF or printer friendly file
It would be really great if there was a feature to print a book to pdf or to a printer friendly file.
As good as this module is, if they are long and involved I find reading things a lot easier if I can print them and sit back in a comfortable chair away from my computer. Current approach may be fine for Drupal Developers but users of our sites would likely like this option too.
If this module created these files in "real time" / cashed them from time to time as needed, then we could retain benefit of live up to date books and also make reading these books easier.
As providing a facility to create, host and deliver the books making them easy to read would seem the next logical step.
Thanks.
Update to BookGUI interface
I've made some major improvements to the bookGUI module that I will publish soon (I need to fix one or two errors and add 1 more feature).
Right now you can:
New:
7. Edit your page (including a new WYSIWYG editor - OpenWYSIWYG editor - which is not yet available as a project.
8. Delete pages.
9. Make a page top-level.
10. Only updates the pages that have been changed, which greatly reduces the load on the server.
Check it out at:
http://unitorganizer.com/drupal5/bookgui
As Starbow says, the JS is 'pretty primitive' but it seems to be working (mostly) fine.
Dave
I'm looking forward to
I'm looking forward to trying the new release.
Mmm, my ideal UI for
Mmm, my ideal UI for submitting book pages would be something like Leopard's Finder browser, the columns one. That is sooo nice to use.