A Whack on The Head

Interesting week.  I wasted most of it.

In spite of saying I was going to follow the Test-Driven-Design methodology, I fell badly off the path.   OK, I'm back.  But it's an interesting story.



Instead of just creating a list-of-files, as I set out to do, I got detoured.  I started to build the main display-item grid in Agenda instead.

I realized that the list of files was exactly what an internal 'file manager' would keep in Agenda, with categories and so on (like the old Pick operating system).  So I figured I would generalize and start with the harder grid.

I didn't really want to spend much time writing - I wanted to pull down some open-source tools and apply them - all free and available just for downloading.  So I went hunting.



The first thing I wanted was an 'edit-in-place' capability.  When you edit an Agenda item, you just edit it.   If you use an HTML form, you basically can do the same in a TEXTAREA.  If I had only done that, and left any additional functionality to future refactoring, I would have been on track.

But there are really gorgeous implementations of 'edit-in-place 'out there.  

The one I started with was FLUID, since I had looked at it about a year ago.  Here's a demo of their edit-in-place.  It just looked so right for a web-based version of Agenda.  

It took me a while to get FLUID integrated with Joomla!.  And as I did, I kept noticing the things about FLUID that I didn't like.  First of all, it was HUGE.  I could spend weeks trying to integrate their skinning system.

And some of the things that I loved when I last looked at it were gone (like a user-sortable tabbed view).   Their rendering tool is neat, but the CSS it uses is so basic that I had to start adding to it immediately.  I gave it a day, and then gave up.



But that got me started with JQUERY, the underlying javascript framework that FLUID uses.    It is amazing.  I spent time exploring various plugins that use it, and learning more about its capabilities.   There is a pool of available 'plugins' which display huge creativity.  

The nicest 'edit-in-place' was a library called JEditable.  Beautiful.   Check out this demo (click on the text below 'Autogrow Textarea').   I grabbed it, built it into a simiple table class, and popped up a simple display.  This was BETTER than the editor in Agenda.   Wow.


Another JQUERY tool I wanted for Agenda was a table-sorter.  Agenda didn't sort interactively, you have to configure a view with the sort you wanted.   Chandler sorts, and it's a great feature.  I thought it might be neat to integrate interactive table sort into the views.  Look at this demo of Table-Sort to see the possibilities.

I downloaded it and tested it.  Smooth.



Still other JQUERY tool I wanted for the main grid was an 'autosuggest' field.  In Agenda, when you start typing a category, it suggests existing ones for you, I needed that for the web.   I looked at a few, and fell in love with this one.  It not only suggests, but you can have multiple categories assigned in one field.  I grabbed it too.


And started to tie them together into my little table class.




That's when I discovered that JEditable uses an old, old version of JQUERY, and isn't compatible with the version used in AutoSuggest or TableSort.

Not a huge problem.  I would have to learn to program using JQUERY eventually, upgrading JEditable would be a good starting task.  And maybe I could give contribute to the open-source community by posting the updated version.  But it wasn't going to be a quick trip.




So I put aside AutoSuggest and moved to the next step.   Once someone edits a field, I wanted it to update the database in the background using AJAX.  That's a pretty way to do it, don't need submit buttons.  And both JEditable and AutoSuggest supported AJAX.

But Joomla! doesn't.   It took me a day to figure out why I was getting weird error messages about missing tooltip libraries.  Joomla! also uses JQUERY, and was trying to process the messages generated in the background by AJAX.   And it was trying to intercept the response pages.   But they aren't well-formed by Joomla! standards.

Turns out you need to build your AJAX server pages outside of Joomla!.   But if I do that then I can't use the database class, which is the only piece of code I've written so far.  Sigh.




The one thing I don't like about 'edit-in-place' is that the user is limited to text.  That's very DOS.  I thought it would be modern to embed URL's, images, and some simple markup in my Agenda item texts.

So I put the JQUERY modules aside, and started looking at the other 'edit-in-place' option - WYSIWYG editors like TinyMCE and CKEditor.

I rewrote my little table class to use TinyMCE.  Very sexy, I really like it.  But it is noticeably slow to start up with my tiny test table, not sure I can build a full table with hundreds of instances of it.




These are just a few of the libraries and modules I have downloaded and tested over the week.  Look at this beauty.  Agenda shows multiple sections in a view, imagine hiding them behind an accordion...   Oooohh...  

Or this scrollable table.  A problem I have with Agenda was that views get too wide.  Of course, this kind of scrolling can be done in an IFRAME, but then I likely need to figure how to share data between the IFRAME and the main page.




I've learned a ton about open-source - the richness and variety, the huge pool of resources available just for taking.  But also the difficulty in harnessing these resources.  

So I'm back to basics.  I'm going to start the way I should have done last week - with a simple TEXTAREA field, no sorting, no autosuggest.   I'll refactor in the future to add what I need, when I understand the problems better.

Upside - I've seen lots of neat user interfaces.  Maybe I'll find a use for some of them.

But I've spent a week with nothing to show for it - not a line of code.  This is the way that projects lose their momentum.   It's been a good whack on the head for me.  I hope something went it.