new Flex In Place Editing Controls…with Source!

May 23rd, 2006

I’m working in the Boston-Area Adobe office this week (The Flex team is split between San Francisco, Boston, and India), which means I had a nice long plane flight to work on some other component ideas that have been kicking around my laptop/head (which more and more feel like they’re the same thing). I’ve posted a demo and source code of the In Place Editing (IPE) controls here. Take a look, then come back here and leave a comment, tell me what you think of the idea.

(p.s. When I re-posted the flickr roulette demo with source in the title, I saw the number of visitors to the blog skyrocket…so I’m going to append ‘with source!’ to everything I post from now on).

Posted by Ely Greenfield Filed in Flex

29 Responses to “new Flex In Place Editing Controls…with Source!”

  1. Pete Capra Says:
    May 23rd, 2006 at 6:16 pm

    Fantastic! I can see this being used in tons of apps that we are working on…

  2. Dirk Says:
    May 24th, 2006 at 1:05 am

    Very slick stuff, Ely - as usual. I enjoyed your MAX session last year where you sneak-peaked an early version of the “flip controls”. Thanks for sharing!

  3. Ben Stucki Says:
    May 24th, 2006 at 5:11 am

    In place editing is one thing, but adding that flip effect is ingenious! Keep up the good work.

  4. wally Says:
    May 24th, 2006 at 1:23 pm

    this is nice, but how about something useful like edit masks for text boxes?

  5. Tariq Ahmed Says:
    May 24th, 2006 at 5:26 pm

    Uhhh… HOLY CRAP! I’m completely blown away by this. This is amazing!

  6. Dreamer Says:
    May 25th, 2006 at 9:53 pm

    Perfact! so amazing!

  7. Michael Schmalle Says:
    June 1st, 2006 at 6:38 am

    Hey, this beats the TRS-80 basic, with the little mazes made out of letters.

    What I don’t understand is, how you are one of the architects of this framework and still have the time to do this.

    I think we are going to have to test Ely for performance enhancing drugs, the playing feild is just not fair!

    Peace, Mike

  8. Nick C Says:
    June 5th, 2006 at 4:23 am

    Very cool.

    One way to improve usability might be to have a tool tip when hovering over editable text, and then fading in a save or cancel button when the edit state is active. Users are slowly getting used to the fact they can do this, so it’s just a case of giving them a gentle hint!

    Look at Yahoo’s Tool Tip Design Pattern for inspiration.

  9. Rob Lively Says:
    June 17th, 2006 at 9:36 am

    These are very nice extensions to these basic controls!

    I found these while looking for a way to better manage the editing of data especially with fairly stable data that does not change often but allowing an easy way to to edit is important. I would be curious how you might tackle something like a tree control. Having the tree editable essentially removes the ability to select a position on the tree strucutre without opening up the potential for accidental changes.

    Also, thought it was a bug at first…why is it that in setting the date that the year and day reflect the data entered but the month is a zero based array so that setting the date requires the month value to be logically inconsistent with the other values?

  10. Ely Greenfield Says:
    June 19th, 2006 at 8:03 am

    Hi Rob. If I’m reading your question right, the answer is….because that’s the way ECMAScript does it. The ECMAScript (ES) standard, which is the basis for both javascript and actionscript, has a built in Date object which makes dates 1 based, but months 0 based. Weird, I agree. I couldn’t tell you why they do it that way, except to say that ES evolved from a pretty ad-hoc language into a more formalized standard, so there are lots of examples of APIs and behavior that’s deisgned that way ‘just because.’ This might be one of them.

  11. Chris Charlton Says:
    June 19th, 2006 at 10:11 am

    These are by far some of the hottest Flex usability enhancement(s) I’ve seen so far! Really good work, thanx for code, and sharing knowledge. :)

  12. fg Says:
    June 19th, 2006 at 10:51 am

    gfhgf

  13. Mark McCorkle Says:
    August 30th, 2006 at 12:51 pm

    Does anyone know a good resource to go to when I’ve got newb questions like “how do I take the value of the IPETextArea and submit it via a HTTPService”?

  14. Ely Greenfield Says:
    August 30th, 2006 at 12:59 pm

    Hi Mark. There’s lots of examples in the flex documentation…the reference books, the quickstarts, etc. for how to pull data from a TextArea and send it off to an HTTPSerivce. Doing it with the IPE controls should be more or less the same thing.

    Ely.

  15. Mark McCorkle Says:
    August 30th, 2006 at 1:32 pm

    Hmm, I was thinking that too, but in the case where I try and use the text value of my IPETextArea in the following example, I get the following warning:
    Data binding will not be able to detect assignments to “text”.

    text in IPETextArea

    text in standard Text Area

    updateEntry
    {IPETextArea.text}
    {standardTextArea.text}

    So, what basically happens on this is that the edited text inside the standardTextArea is submitted to the HTTPService but only the old text from IPETextAreaText is submited — because flex can’t detect that a change has happened.

    I know this is something simple, but I just don’t know enough about Flex/Flash’s innards to understand why it works for the standard textarea but doesn’t for the ipetextarea. Any help would be greatly appreciated.

  16. Mark McCorkle Says:
    August 30th, 2006 at 1:41 pm

    Oh, wow, that really doesn’t look like I was hoping. I guess putting &ltcode> around code doesn’t work in the comments :-D Please delete my previous post and view the source here if you want to see what I’m trying to do:
    http://www.devteam.org/users/mccorkle/sandbox/edit_in_place/srcview/

    Again, any help is appreciated.

  17. Smitha Says:
    September 22nd, 2006 at 10:06 pm

    It is a pleasure to keep an eye on your site. I finally got to include your IPE controls in my project. When I do the following:
    ti = new IPETextInput();
    ti.editable = true;


    I get a null object reference error in "public function set editable(value:Boolean):void" at line:
    var focus:IFocusManagerComponent = focusManager.getFocus();

    Is this one of the defects in FocusManager you refer to? If so, how/when can I get an update to the Flex framework?

    Thank you and look forward to more interesting ideas to improve user experience

  18. Smitha Says:
    October 1st, 2006 at 10:36 pm

    I am trying to present a printed paper like appearance of form data in readonly mode and switch to edit mode with your IPE controls. There are couple of issues:

    1. Manage "required" state of formitem container i.e. show the red star only when in edit mode
    2. The red box drawn by Validators(?) seem to disappear after a flip
    3. Tension between tighly laid out controls within a formitem in read mode and edit mode. e.g. "Mr. John Smith" is preferable to "Mr. John Smith" in read mode

    I think I can address #1 and #2, any ideas on how to do #3 efficiently?

    Thanks
    Smitha

  19. Evan Says:
    October 2nd, 2006 at 12:53 pm

    I realize that this thread has been around for 6 months, but there still seems to be some activity on it. I added a ComboBox, so I thought that I’d share it.

    package qs.ipeControls
    {
    import mx.collections.ArrayCollection;
    import mx.controls.ComboBox;
    import mx.controls.Label;

    import qs.ipeControls.classes.IPEBase;

    public class IPEComboBox extends IPEBase
    {
    public function IPEComboBox():void
    {
    super();
    this.nonEditableControl = new Label();
    this.editableControl = new ComboBox();
    }

    override protected function commitEditedValue():void
{
    Label(this.nonEditableControl).text = ComboBox(this.editableControl).selectedLabel;
}

private function get comboBox():ComboBox { return ComboBox(this.editableControl); }
private function get label():Label { return Label(this.nonEditableControl); }

public function get text():String { return this.comboBox.selectedLabel; }
public function set text(text:String):void
{
    this.label.text = text;
    for(var i:int=0; i<(ArrayCollection(comboBox.dataProvider).length)-1; i++)
    {
        var tmpObj:Object = ArrayCollection(comboBox.dataProvider).getItemAt(i);
        if(tmpObj.label == text)
            this.comboBox.selectedIndex = i;
    }
}
public function get selectedItem():Object { return this.comboBox.selectedItem; }
public function set selectedItem(item:Object):void { this.comboBox.selectedItem = item; }
public function get selectedIndex():int { return this.comboBox.selectedIndex; }
public function set selectedIndex(index:int):void
{
    this.comboBox.selectedIndex = index;
    var tmpObj:Object = ArrayCollection(comboBox.dataProvider).getItemAt(index);
    this.label.text = tmpObj.label;
}
public function get dataProvider():Object { return this.comboBox.dataProvider; }
public function set dataProvider(provider:Object):void { this.comboBox.dataProvider = provider; }

    }

    }

  20. James Says:
    February 22nd, 2007 at 4:13 pm

    Hi Ely,
    Constantly watching your site and always amazed by the components you create. I was hoping to use the IPE controls for a data entry screen I’m designing, but was wondering how can you take multiple values from different input controls (such as a numeric stepper, combo box and text input) and display them as a single label.

    For example, if you wanted to specify a date of birth using the input controls identified above, and display the final results as:
    1 August 1960

  21. Tracy Spratt Says:
    March 19th, 2007 at 5:51 pm

    Hi, Ely!
    Why do you reverse the “mx” and “local” namespaces?

    I’ll get over it, but that creates some cognitive dissonance.
    Tracy

  22. Tracy Spratt Says:
    March 19th, 2007 at 5:54 pm

    Another question for you guys in general: How do you structure Ely’s code in a Flex Builder Project? I am having fits with references not resolvng.

  23. Vanessa Nguyen Says:
    April 18th, 2007 at 12:12 pm

    Very cool components. However, I found a problem. If I have mx:Model object in my project, any change made by users in IPETextInput box will not be automatically updated into mx:Model object’s properties. This is because IPETextInput is simply a wrapper of mx:Label and mx:TextInput. I wonder if there is any way to resolve this? Otherwise, we have to listen the “change” event and update the mx:Model object by hand.

  24. Vanessa Nguyen Says:
    April 18th, 2007 at 12:37 pm

    Hmm… Actually the easiest way is to make “get textInput():TextInput” function to be public.

  25. Alex Says:
    April 25th, 2007 at 6:06 am

    Thank You

  26. Ricard Says:
    April 25th, 2007 at 7:29 am

    Basically i have a customized combobox but i can’t assign an EventHandler “on_change” to the “onEdit” control.

    What i want to do is :

    1) If an item in the combobox is selected then hide the comboBox a
    2) display the Selected Item on the Label. (it’s done)

    So.. i would be really gratefull if someone could give me a hand on this.

    Kind Regards
    Ricard

  27. Ariel Jakobovits Says:
    June 17th, 2007 at 12:13 pm

    At first glance it seems that though you define the Bindable events for the getters, you don’t dispatch those events in the setters. I thought that was necessary. Can you advise me on this, thank you.

    -Ariel

  28. David Hamm Says:
    July 13th, 2007 at 1:12 pm

    Great stuff. It would be great if your reference to “MIT Open Source License” above was actually a link to the license. It would also be great if a copy of the license was included in the download. Makes it much easier to approve for us corporate types. Thanks!

  29. Barry Says:
    August 30th, 2007 at 1:47 am

    Hi, Really like these components. They have the real wow factor. Has anyone had any joy showing html in the text area yet?
    I’d appreciate a point in the right direction - thanks.

    Also, not sure why but I had to change int to object in the following in the datefield comp.
    [Bindable("firstDayOfWeekChanged")]
    public function get firstDayOfWeek():Object { return df.firstDayOfWeek; }
    public function set firstDayOfWeek(value:Object):void { df.firstDayOfWeek = value; }

Leave a Reply