Saturday, August 30, 2008

Table Cell Editor v1.0


Table Cell Editor v1.0


Demo:


Download: Version 1

About the table cell editor:
Its fairly straightforward, but a nifty little tool. It allows in-line editing for cells the way I think editing should be. Right now it takes a text field, but could easily be updated to take a textarea, a dropdown menu... anything.

I have put in stubs for an ajax call, but commented it out, since I'm not interested in hooking that in. It is at work, but for the demo I just edited it out.

Doesn't look like much, does it? Well, thats a good thing. This fits into my philosophy of getting the job done with as little effort as possible while maintaining usability and intuitiveness.

However, under the surface is a whole range of concerns that the user will never be privy to. This is one of the aspects of user interface design that makes new coders go nuts. The sheer amount of use cases even for such a small interface can be overwhelming.

So, if you want to know how it all works, then read below. I have not just provided the interface, but I have anticipated a wide variety of use cases regarding submittal of the request to the server, and cleansing of data.

By the way... everything I add on my blog will always be browser compatible (IE, FireFox, Safari, Opera). I don't think anyone really needs to say that anymore. If you are coding for one browser and your not confined by the constraints of the enterprise world (the only valid excuse for this), then your doing everyone a disservice. That being said, if you can't get it to work in Opera, then don't kill yourself, just put in your Opera hack and move on.

I won't go into a tremendous amount of detail, but I do (for my sanity) assume the following things.
  • More than a moderate understanding of javascript and event handling
  • More than a basic level of JSON.
  • More than a basic understanding of javascript toolkits like mooTools. Although I am using mooTools methods, it is not hard to understand the equivalent concepts in prototype, JQuery, YUI and the like. (If you want to convert this into your own toolkit, feel free).
Regarding edits, I recommend you:
  • Leave the JSON syntax and method partitioning alone, as much as you are able to. I keep my methods short (if I can), focusing on one thing only. The idea here is to modularize your work, so that the code is easy to maintain and understand.
  • "app" is your basic program. It is the only global variable you need to create.
Overview of interface:
  • Blue text indicates editable.
  • Double-click opens edit.
  • Enter submits edit.
  • Escape rejects edit.
  • Ajax call allows edit to process and can accept or fail the request.
Overview of code:
  • For our purposes, I am coding using JSON, with mootools framework, and have segmented my methods inside of an "app" variable, which is the only global variable I need. That is why you will see references to "app".
  • I decided that showing the code here is tedious and useless, when all you have to do is download the js and look at it yourself. I will, however, highlight small bits of code out of context. This is to explain anything I feel is just not quite obvious.
initialize()
  • setUpRowEvents. allows mousenter, mouseleave, click, doubleclick and mousedown events. Don't use mooTools addEvent for hundreds of rows or memory will grow too fast.
  • standardResponseDiv: used to return the ajax request, if necessary.
  • currentConCell if a cell is being converted
  • selectedRows an array of rows for later manipulation
  • freeze: a command to stop any auto-updating code you may have, to give the edit request time to process.
forceClick()
  • You'll need this if you have click doing other things as well, as I do in my original code. You want to stop the user from moving forward unless they accept or decline their edits.
  • Do not use "blur" on the field to either accept or reject the edit. This can be called way to easily.
updateTable()
  • This is the ajax call that takes your edits and actually updates the record.
_cleanse() and _escape()
  • A couple of convenience methods to help make sure data is not cross-site script, and to ensure that the server and database can read the edits, especially regarding special characters.
generateRequest():
  • A stub used to generate your string to send over the ajax request.
evaluateButtons() and resetButtons():
  • The idea here is that you may have buttons somewhere that light up or disable depending on what row you click. I have put these stub methods in place for you to put your own logic. I inserted these method calls at exactly the right place so you don't have to worry about where they go in the event scheme.
setUpRowEvents()
  • There is a lot going on in here, but there doesn't need to be. I have code for changing the color as you mouse around, and for clicking.
  • The code for soft color change (mouseenter, mouseleave) must not be triggered when a row is selected (a hard color change).
  • The hard color change indicates row focus. This is the selected row, which can not only take edits, but when you call evaluateButtons(), it can trigger other parts of the UI to light up as well. (does not take multiple selections at the time).
  • mousedown ensures that the events don't get called out of order and they stay in-line.
  • click adds or subtracts to an array of rows. I put this in here so you could, as I said before, light up or disable other buttons or widgets based on the row in focus. I have an array here so you can add up the rows and potentially use this for multiple selections.
colors:
  • In general, I use a soft color for soft focus, or when the user is just mousing around, and a hard or "punch" color as I call it for direct focus and edit.
  • I use mouseenter and mouseleave as opposed to mouseover and mouseout because these methods fire only once instead of continuously.
*If there are any errors, regardless of the kind of browser you use, then please bring it to my attention. Nobody is perfect.

No comments: