{"id":690,"date":"2013-02-01T18:47:54","date_gmt":"2013-02-01T13:17:54","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=690"},"modified":"2013-02-01T18:47:54","modified_gmt":"2013-02-01T13:17:54","slug":"in-place-editing-in-eclipse-treeviewer","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/in-place-editing-in-eclipse-treeviewer\/","title":{"rendered":"In-place Editing in Eclipse TreeViewer"},"content":{"rendered":"

In an Eclipse RCP application I was working on recently, I had to implement a TreeViewer with in-place editing feature. It was not easy to find all the information required to implement this, so I thought I would explain it here.<\/p>\n

First let’s take a simple example, where\u00a0hierarchical data is displayed in \u00a0a tree.
\n\"tree_viewer1\"<\/a><\/p>\n

When any item in the tree is double clicked, I want to edit the value in-place.<\/p>\n

Here is the code to create this tree, without editing support. I will first create a data model using a Map. To simplify the example, I am assuming only one level of\u00a0hierarchy.<\/p>\n

<\/p>\n

\/\/Class to represent each node of the tree<\/span>\nclass<\/span> TreeItemData\n{<\/span>\n    String<\/span> value;<\/span>\n    public<\/span> TreeItemData (<\/span>String<\/span> value)<\/span>\n    {<\/span>\n        this<\/span>.<\/span>value =<\/span> value;<\/span>\n    }<\/span>\n\n    public<\/span> String<\/span> toString(<\/span>)<\/span>\n    {<\/span>\n        return<\/span> value;<\/span>\n    }<\/span>\n}<\/span>\n\nMap<TreeItemData,TreeItemData[]> treeModelData = new HashMap<>();<\/span>\n\ntreeModelData.put(new TreeItemData(\"parent1\"), new TreeItemData[]{<\/span>\n    new<\/span> TreeItemData(<\/span>\"child1\"<\/span>)<\/span>,<\/span>\n    new<\/span> TreeItemData(<\/span>\"child2\"<\/span>)<\/span>\n    }<\/span>);<\/span><\/pre>\n
Then create an instanceof TreeViewer and its content provider.<\/p>\n
TreeViewer treeViewer = new TreeViewer(shell);<\/span>\n\ntreeViewer.setContentProvider(new ITreeContentProvider() {<\/span>\n\n    @<\/span>Override\n    public<\/span> void<\/span> inputChanged(<\/span>Viewer viewer,<\/span> Object<\/span> oldInput,<\/span> Object<\/span> newInput)<\/span> {<\/span>\n    }<\/span>\n\n    @<\/span>Override\n    public<\/span> void<\/span> dispose(<\/span>)<\/span> {<\/span>\n    }<\/span>\n\n    @<\/span>Override\n    public<\/span> boolean<\/span> hasChildren(<\/span>Object<\/span> element)<\/span> {<\/span>\n        if<\/span> (<\/span>treeModelData.<\/span>containsKey(<\/span>element)<\/span>)<\/span>\n            return<\/span> true<\/span>;<\/span>\n        return<\/span> false<\/span>;<\/span>\n    }<\/span>\n\n    @<\/span>Override\n    public<\/span> Object<\/span> getParent(<\/span>Object<\/span> element)<\/span> {<\/span>\n        return<\/span> null<\/span>;<\/span>\n    }<\/span>\n\n    @<\/span>Override\n    public<\/span> Object<\/span>[<\/span>]<\/span> getElements(<\/span>Object<\/span> inputElement)<\/span> {<\/span>\n        if<\/span> (<\/span>inputElement.<\/span>equals(<\/span>\"initial_input\"<\/span>)<\/span>)<\/span>\n            return<\/span> treeModelData.<\/span>keySet(<\/span>)<\/span>.<\/span>toArray(<\/span>)<\/span>;<\/span>\n        return<\/span> null<\/span>;<\/span>\n    }<\/span>\n\n    @<\/span>Override\n    public<\/span> Object<\/span>[<\/span>]<\/span> getChildren(<\/span>Object<\/span> parentElement)<\/span> {<\/span>\n        parentElement.<\/span>toString(<\/span>)<\/span>;<\/span>\n        Object<\/span> value =<\/span> treeModelData.<\/span>get(<\/span>parentElement)<\/span>;<\/span>\n        if<\/span> (<\/span>value !<\/span>=<\/span> null<\/span>)<\/span>\n            return<\/span> (<\/span>TreeItemData[<\/span>]<\/span>)<\/span>value;<\/span>\n        return<\/span> null<\/span>;<\/span>\n    }<\/span>\n}<\/span>);<\/span>\n\n\/\/set initial input<\/span>\ntreeViewer.setInput(\"initial_input\");<\/span><\/pre>\n
The above code will create a TreeViewer<\/a> with tree nodes, but with no editing support.<\/p>\n
To trigger editing in Tree cells on double click, we need to create TreeViewerEditor.<\/p>\n
TreeViewerEditor.create(treeViewer, new ColumnViewerEditorActivationStrategy(treeViewer){<\/span>\n    protected<\/span> boolean<\/span> isEditorActivationEvent(<\/span>ColumnViewerEditorActivationEvent event)<\/span> {<\/span>\n        return<\/span> event.<\/span>eventType =<\/span>=<\/span> ColumnViewerEditorActivationEvent.<\/span>MOUSE_DOUBLE_CLICK_SELECTION;<\/span>\n    }<\/span><\/pre>\n
There are two ways to add editing support for cells in the tree. 1)Using setCellEditors<\/a> method of TreeViewer, and 2)Using ViewerColumn.setEditingSupport<\/a> API. Eclipse documentation says that the second API is available since Eclipse 3.3 and it is more flexible.<\/p>\n
First I will show how to use setCellEditors<\/a> API<\/p>\n
private<\/span> void enableEditing1(TreeViewer treeViewer)\n{<\/span>\n    \/\/You have to create identifier for tree columns<\/span>\n    treeViewer.<\/span>setColumnProperties(<\/span>new<\/span> String<\/span>[<\/span>]<\/span>{<\/span>\"col1\"<\/span>}<\/span>)<\/span>;<\/span>\n    treeViewer.<\/span>setLabelProvider(<\/span>new<\/span> TreeLabelProvider(<\/span>)<\/span>)<\/span>;<\/span>\n    \/\/Create text editor<\/span>\n    treeViewer.<\/span>setCellEditors(<\/span>new<\/span> CellEditor[<\/span>]<\/span>{<\/span>new<\/span> TextCellEditor(<\/span>treeViewer.<\/span>getTree(<\/span>)<\/span>)<\/span>}<\/span>)<\/span>;<\/span>\n    treeViewer.<\/span>setCellModifier(<\/span>new<\/span> ICellModifier(<\/span>)<\/span> {<\/span>\n\n        @<\/span>Override\n        public<\/span> void<\/span> modify(<\/span>Object<\/span> element,<\/span> String<\/span> property,<\/span> Object<\/span> value)<\/span> {<\/span>\n            if<\/span> (<\/span>element instanceof<\/span> TreeItem)<\/span>\n            {<\/span>\n                \/\/update element and tree model<\/span>\n                TreeItem treeItem =<\/span> (<\/span>TreeItem)<\/span>element;<\/span>\n                TreeItemData data =<\/span> (<\/span>TreeItemData)<\/span>treeItem.<\/span>getData(<\/span>)<\/span>;<\/span>\n                data.<\/span>value =<\/span> value.<\/span>toString(<\/span>)<\/span>;<\/span>\n                treeItem.<\/span>setText(<\/span>value.<\/span>toString(<\/span>)<\/span>)<\/span>;<\/span>\n            }<\/span>\n        }<\/span>\n\n        @<\/span>Override\n        public<\/span> Object<\/span> getValue(<\/span>Object<\/span> element,<\/span> String<\/span> property)<\/span> {<\/span>\n            return<\/span> element.<\/span>toString(<\/span>)<\/span>;<\/span>\n        }<\/span>\n\n        @<\/span>Override\n        public<\/span> boolean<\/span> canModify(<\/span>Object<\/span> element,<\/span> String<\/span> property)<\/span> {<\/span>\n            return<\/span> true<\/span>;<\/span>\n        }<\/span>\n    }<\/span>)<\/span>;<\/span>\n}<\/span><\/pre>\n
class<\/span> TreeLabelProvider extends<\/span> ColumnLabelProvider\n{<\/span>\n    public<\/span> String<\/span> getText(<\/span>Object<\/span> element)<\/span> {<\/span>\n        return<\/span> element.<\/span>toString(<\/span>)<\/span>;<\/span>\n    }<\/span>\n}<\/span><\/pre>\n
Alternatively, here is the code to add editing support using\u00a0ViewerColumn.setEditingSupport<\/a> API.<\/p>\n
private<\/span> void enableEditing2 (TreeViewer treeViewer)\n{<\/span>\n    final<\/span> TreeViewerColumn column =<\/span> new<\/span> TreeViewerColumn(<\/span>treeViewer,<\/span> SWT.<\/span>NONE)<\/span>;<\/span>\n    column.<\/span>getColumn(<\/span>)<\/span>.<\/span>setWidth(<\/span>150<\/span>)<\/span>;<\/span>\n    column.<\/span>setLabelProvider(<\/span>new<\/span> TreeLabelProvider(<\/span>)<\/span>)<\/span>;<\/span>\n    final<\/span> TreeViewer finalTreeViewer =<\/span> treeViewer;<\/span>\n    final<\/span> TextCellEditor cellEditor =<\/span> new<\/span> TextCellEditor(<\/span>treeViewer.<\/span>getTree(<\/span>)<\/span>)<\/span>;<\/span>\n\n    column.<\/span>setEditingSupport(<\/span>new<\/span> EditingSupport(<\/span>treeViewer)<\/span> {<\/span>\n\n        @<\/span>Override\n        protected<\/span> void<\/span> setValue(<\/span>Object<\/span> element,<\/span> Object<\/span> value)<\/span> {<\/span>\n            if<\/span> (<\/span>element instanceof<\/span> TreeItemData)<\/span>\n            {<\/span>\n                TreeItemData data =<\/span> (<\/span>TreeItemData)<\/span>element;<\/span>\n                data.<\/span>value =<\/span> value.<\/span>toString(<\/span>)<\/span>;<\/span>\n            }<\/span>\n            finalTreeViewer.<\/span>update(<\/span>element,<\/span> null<\/span>)<\/span>;<\/span>\n        }<\/span>\n\n        @<\/span>Override\n        protected<\/span> Object<\/span> getValue(<\/span>Object<\/span> element)<\/span> {<\/span>\n            return<\/span> element.<\/span>toString(<\/span>)<\/span>;<\/span>\n        }<\/span>\n\n        @<\/span>Override\n        protected<\/span> TextCellEditor getCellEditor(<\/span>Object<\/span> element)<\/span> {<\/span>\n            return<\/span> cellEditor;<\/span>\n        }<\/span>\n\n        @<\/span>Override\n        protected<\/span> boolean<\/span> canEdit(<\/span>Object<\/span> element)<\/span> {<\/span>\n            return<\/span> true<\/span>;<\/span>\n        }<\/span>\n    }<\/span>)<\/span>;<\/span>\n\n    \/\/To set width of the column to tree width<\/span>\n    treeViewer.<\/span>getControl(<\/span>)<\/span>.<\/span>addControlListener(<\/span>new<\/span> ControlListener(<\/span>)<\/span> {<\/span>\n\n        @<\/span>Override\n        public<\/span> void<\/span> controlResized(<\/span>ControlEvent e)<\/span> {<\/span>\n            column.<\/span>getColumn(<\/span>)<\/span>.<\/span>setWidth(<\/span>(<\/span>(<\/span>Tree)<\/span>e.<\/span>getSource(<\/span>)<\/span>)<\/span>.<\/span>getBounds(<\/span>)<\/span>.<\/span>width)<\/span>;<\/span>\n        }<\/span>\n\n        @<\/span>Override\n        public<\/span> void<\/span> controlMoved(<\/span>ControlEvent e)<\/span> {<\/span>\n        }<\/span>\n    }<\/span>)<\/span>;<\/span>\n}<\/span><\/pre>\n
Note that you have to specify the width of the table cell column, else it would be set to zero. If you want to set column width equal to the width of the tree then you can do that in the ControlListener<\/a>, as shown in the above code.<\/p>\n
Both above methods will let you edit values in TreeViewer by double clicking on tree items.<\/p>\n
\"tree_viewer2\"<\/a><\/p>\n
The default text box created by TextCellEditor is without borders. You can customize this text box by extending TexCellEditor. The following class adds border to the text box and sets it height to 10 pixels more than the font height.<\/p>\n
class<\/span> MyTextCellEditor extends<\/span> TextCellEditor\n{<\/span>\n    int<\/span> minHeight =<\/span> 0<\/span>;<\/span>\n\n    public<\/span> MyTextCellEditor(<\/span>Tree tree)<\/span> {<\/span>\n        super<\/span>(<\/span>tree,<\/span> SWT.<\/span>BORDER)<\/span>;<\/span>\n        Text txt =<\/span> (<\/span>Text)<\/span>getControl(<\/span>)<\/span>;<\/span>\n\n        Font<\/span> fnt =<\/span> txt.<\/span>getFont(<\/span>)<\/span>;<\/span>\n        FontData[<\/span>]<\/span> fontData =<\/span> fnt.<\/span>getFontData(<\/span>)<\/span>;<\/span>\n        if<\/span> (<\/span>fontData !<\/span>=<\/span> null<\/span> &<\/span>&<\/span> fontData.<\/span>length ><\/span> 0<\/span>)<\/span>\n            minHeight =<\/span> fontData[<\/span>0<\/span>]<\/span>.<\/span>getHeight(<\/span>)<\/span> +<\/span> 10<\/span>;<\/span>\n    }<\/span>\n\n    public<\/span> LayoutData getLayoutData(<\/span>)<\/span> {<\/span>\n        LayoutData data =<\/span> super<\/span>.<\/span>getLayoutData(<\/span>)<\/span>;<\/span>\n        if<\/span> (<\/span>minHeight ><\/span> 0<\/span>)<\/span>\n            data.<\/span>minimumHeight =<\/span> minHeight;<\/span>\n        return<\/span> data;<\/span>\n    }<\/span>\n}<\/span><\/pre>\n
Now set instance of this class as cell editor in the function\u00a0enableEditing1 –<\/p>\n
treeViewer.setCellEditors(new CellEditor[]{<\/span>new<\/span> MyTextCellEditor(<\/span>treeViewer.<\/span>getTree(<\/span>)<\/span>)<\/span>}<\/span>);<\/span><\/pre>\n
And in the function enableEditing2 \u00a0–<\/p>\n
final<\/span> TextCellEditor cellEditor = new MyTextCellEditor(treeViewer.getTree());<\/span><\/pre>\n
\"tree_viewer3\"<\/a>With the above changes, the cell editor is created with border, as shown in the image on the left.<\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
You can find the complete source code of this example here<\/a>.<\/p>\n
-Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"
In an Eclipse RCP application I was working on recently, I had to implement a TreeViewer with in-place editing feature. It was not easy to find all the information required to implement this, so I thought I would explain it here. First let’s take a simple example, where\u00a0hierarchical data is displayed in \u00a0a tree. When … <\/p>\n
Continue reading “In-place Editing in Eclipse TreeViewer”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"In-place Cell Editing in Eclipse TreeViewer http:\/\/wp.me\/p2g9O8-b8","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[38,1],"tags":[64,25,65,56],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-b8","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/690"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=690"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/690\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=690"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}