Ages ago, When Flex 2.0 was just getting started, I wrote a feature tracking application to help manage the possible features we were considering for the release. As the app grew over time, I found myself getting annoyed at having to add the same UI and logic to both the ‘view’ screen and the ‘edit’ screen for a feature every time we added a field to the database.
Months later, when the MAX conference was coming up, I took that pain and suffering and transformed it into a sample ‘flipper’ component I used in a talk showing off some of the new features and performance of Flex 2.
Last week, I was reminded of the flipper component while playing with some ajax-application-of-the-day. I can’t remember what the application was, but in it they had combined the read and edit views of some data into a single view, that dropped into ‘edit’ mode when you clicked on a field. Just like the flipper component did.
So, on a long flight from San Francisco to Boston, I cleaned up the flipper, updated it to Flex 2 Beta 3, and gave it a couple of new friends to play with. Try them out for yourself in a little sample application here:
In Place Editing (IPE) Controls Sandbox
It’s definintely an ongoing work in progress. As you can see in the sandbox, I’ve been experimenting with different ways to activate the IPE controls. If you have comments, feedback, or preferences as to how they should work, please leave a comment and let me know.
A couple of issues you’ll probably run in to:
these controls have exposed a few bugs in the focus manager. They’ve been logged, and hopefully fixed by the time you read this ;)
the interaction of controls that use popups (like the date field) isn’t quite right. Triggering an edit of the IPEDateField should immediately pop up the chooser, rather than requiring a second click.
One could make an argument that the IPE controls, while pretty, have a negative effect on usability. Users have learned the different affordances of editable vs. read-only data, such as embedded beveled (sp?) borders, and taking those away makes things harder for them. I recognize this, but this scenario is no different from any application that presents a ‘browsing’ screen and a button or link to take you to the ‘edit’ screen. The blue/green edit icons that appear next to the controls are placeholders…arguably a real graphic designer could create a real icon that would both look pretty and make it clear that clicking on it edits the data (got some artistic talent? feel like making some icons? send ‘em my way).
The IPE controls essentially act as facades for the properties, styles, events, and methods of the underlying editable control they represent. In theory you should be able to attach validators to them just like the base control, but I haven’t spent any time on it yet.
as with most of the stuff I’ve posted, the flipping effect in the IPE Controls was partially inspired by some of the work our rock star Experience Design team did a while back. Hats off to them.
The source, as always, is available under the MIT open source license, so you can do whatever zany thing you crazy kids want with it.
* View the source
* Download the source