Two new features to announce and explain to day, both of them are related.

Edit Here…

Many times you want to display content in a list view and then click to edit it.  Now you can do this quite easily with the inline text editor.  To enable this feature on any label view just set isEditable: YES (or add :editable => true to the view helper).  

To enable this feature on a collection view, just set contentValueIsEditable: YES (or add :content_value_editable => true to the collection view view helper.)  For the collection view to work you must be using either SC.ListItemView or SC.LabelView for your example view type.  If you are using one of the built in classes such as SC.ListView or SC.SourceListView then this is already done for you.

To see an example of inline editing in action, just visit the sample controls demo and try clicking twice on list item in the sidebar for either the Collections or Collections2 tabs.  You can also select an item in one of these views and hit return to activate the editor.

Edit There…

Of course there is a lot more to this feature than just enabling inline editing in a few places.  You can also reuse the inline editor in your own views as well.  To activate inline editing, you just need to do two things:

1. Implement the SC.InlineEditorDelegate protocol.  You can apply this mixin if you want but mostly you should override the four methods described here.
2. When you want to begin editing, call the SC.InlineTextFieldView.beginEditing() method with any options you want to set.  You should at least provide a frame, which will tell the text field view where to size and position itself, and an exampleElement.  The exampleElement is DOM element that the text field view will use to clone its text styles.  This makes the inline editor automatically appear to similar to the element that it is supposed to be editing.

For an example of how to use the inline editor, checkout the source for SC.LabelView and SC.SourceListView.  It is really easy and generally takes only a few minutes to get going.

Edit Everywhere!

Paired with the new inline editor control is another new mixin that is going to be used throughout the framework for version 1.0 called SC.Editable.  This protocol defines a few standard methods that will can be used by other parts of your application to begin and end text editing of a control.  The collection view for example, looks for this protocol when it tries to begin editing the content value of an item view.  This is how you can trigger inline editing of a control in the collection view in a standard way.

This protocol is implemented by SC.LabelView, SC.SourceListItemView, SC.InlineTextFieldView, SC.TextFieldView, and SC.TextareaFieldView and you can implement it for your own views as well.  If you do implement it, then all of the built in cues that SproutCore recognizes to begin text editing will automatically work for your views as well.

As usual, for more info on these items, checkout the sample code using svn co http://sproutcore.googlecode.com/svn/trunk/samples, consult the reference documentation and ask on the Google Group if you have any questions.  Cheers!

Tags: New Features //