Editing Node Input Values with Explorer View

[rotero]

I am creating a graphical "glue-code" application where users can pull programs from a palette window onto the main workspace.  The application's job is to control the flow of data from one application to the next; feeding output(s) from one node as inputs to the next node(s).  The user would specify data flow through arrows between nodes in the graph.

I have the palette, drag-drop functionality, and the workspace is coming together (thanks to several great tutorials).  I am working now on the structure of the nodes required and their interaction with the Explorer API.



This image shows what I am trying to work towards:

1) A node added to the workspace will be added to the explorer with the inputs/outputs of the node exposed
2) The ability to add an image to the explorer line item to show the user that the value is an input or an output.
3) The ability to edit inputs in the explorer (the green values) where double-clicking on the number would make it editable.
4) When a node is selected in the workspace, I'd like the node represented in the explorer to be selected and expanded to show the inputs/outputs.
5) Node in the image can be run and will use the inputs to update its output values.

I'm looking for feedback if possible on how to implement these ideas through the Netbeans Platform.

Best regards,
Richard

[Hermien Pellissier]

Hi Richard,

Some info about nodes with icons can be found at

http://netbeans.dzone.com/news/nodes-dynamic-value-icons 

Best wishes,

Hermien PELLISSIER

On Mon, Feb 6, 2012 at 7:11 PM, rotero <[hidden email]> wrote:

I am creating a graphical "glue-code" application where users can pull
programs from a palette window onto the main workspace.  The application's
job is to control the flow of data from one application to the next; feeding
output(s) from one node as inputs to the next node(s).  The user would
specify data flow through arrows between nodes in the graph.

I have the palette, drag-drop functionality, and the workspace is coming
together (thanks to several great tutorials).  I am working now on the
structure of the nodes required and their interaction with the Explorer API.

http://netbeans-org.1045718.n5.nabble.com/file/n5460646/explorerEx.jpeg

This image shows what I am trying to work towards:

1) A node added to the workspace will be added to the explorer with the
inputs/outputs of the node exposed
2) The ability to add an image to the explorer line item to show the user
that the value is an input or an output.
3) The ability to edit inputs in the explorer (the green values) where
double-clicking on the number would make it editable.
4) When a node is selected in the workspace, I'd like the node represented
in the explorer to be selected and expanded to show the inputs/outputs.
5) Node in the image can be run and will use the inputs to update its output
values.

I'm looking for feedback if possible on how to implement these ideas through
the Netbeans Platform.

Best regards,
Richard


--
View this message in context: http://netbeans-org.1045718.n5.nabble.com/Editing-Node-Input-Values-with-Explorer-View-tp5460646p5460646.html
Sent from the Netbeans RCP/Platform Users (Open API) mailing list archive at Nabble.com.

[Hermien Pellissier]

The following tutorials should also be useful:

http://platform.netbeans.org/tutorials/nbm-selection-1.html 

http://platform.netbeans.org/tutorials/nbm-selection-2.html 

http://platform.netbeans.org/tutorials/nbm-nodesapi2.html 

On Mon, Feb 6, 2012 at 10:55 PM, Hermien Pellissier <[hidden email]> wrote:

Hi Richard,

Some info about nodes with icons can be found at

http://netbeans.dzone.com/news/nodes-dynamic-value-icons 

Best wishes,

Hermien PELLISSIER

On Mon, Feb 6, 2012 at 7:11 PM, rotero <[hidden email]> wrote:

I am creating a graphical "glue-code" application where users can pull
programs from a palette window onto the main workspace.  The application's
job is to control the flow of data from one application to the next; feeding
output(s) from one node as inputs to the next node(s).  The user would
specify data flow through arrows between nodes in the graph.

I have the palette, drag-drop functionality, and the workspace is coming
together (thanks to several great tutorials).  I am working now on the
structure of the nodes required and their interaction with the Explorer API.

http://netbeans-org.1045718.n5.nabble.com/file/n5460646/explorerEx.jpeg

This image shows what I am trying to work towards:

1) A node added to the workspace will be added to the explorer with the
inputs/outputs of the node exposed
2) The ability to add an image to the explorer line item to show the user
that the value is an input or an output.
3) The ability to edit inputs in the explorer (the green values) where
double-clicking on the number would make it editable.
4) When a node is selected in the workspace, I'd like the node represented
in the explorer to be selected and expanded to show the inputs/outputs.
5) Node in the image can be run and will use the inputs to update its output
values.

I'm looking for feedback if possible on how to implement these ideas through
the Netbeans Platform.

Best regards,
Richard


--
View this message in context: http://netbeans-org.1045718.n5.nabble.com/Editing-Node-Input-Values-with-Explorer-View-tp5460646p5460646.html
Sent from the Netbeans RCP/Platform Users (Open API) mailing list archive at Nabble.com.

[rotero]

Thank you, those tutorials were helpful and did get me closer to my goal and a better understanding of the platform.



The code I currently have produces the above, where I pull a node from an available palette window.

I'm still trying to do the things below:

#################################

1) A node added to the workspace will be added to the explorer with the inputs/outputs of the node exposed

Should I place every node placed into the Workspace into that object's lookup?  Then have the explorer look though the global lookup and, when the Workspace is selected, it'll be able to see the available nodes and add them as children to the graph node?

I want to be able to show each input/output variable in the wrapper node on the explorer window.  To me, that seems to imply that I need to have the variables be nodes contained within each wrapper node.

#################################

2) The ability to add an image to the explorer line item to show the user that the value is an input or an output.

This was answered nicely in the tutorials you sent thank you.

#################################

3) The ability to edit inputs in the explorer (the green values) where double-clicking on the number would make it editable.

I had thought extending PropertySupport.ReadWrite for the node would make the value editable but something seems to be wrong with the way I'm doing it.  The current values are not shown in the explorer window and the boxes can't be edited.  I've included the code used for clarity.

######## ExplorerTopComponent #####################

rotero wrote

public final class ExplorerTopComponent extends TopComponent implements ExplorerManager.Provider {

    private Wrapper rootWrapper;
   
    private final ExplorerManager mgr = new ExplorerManager();

    public ExplorerTopComponent() {
        initComponents();
        setName(Bundle.CTL_ExplorerTopComponent());
        setToolTipText(Bundle.HINT_ExplorerTopComponent());

        setLayout(new BorderLayout());
       
        rootWrapper = new Wrapper("Graph", "test/explorer/graph_16.png");
       
        // Add a new outline view to have a tree table for the explorer window
        OutlineView pane = new OutlineView();
        ((OutlineView) pane).setPropertyColumns("Value", "Current Value", "Units", "Units Used");
        add (pane, BorderLayout.CENTER);
       
        WrapperNode rootNode = null;
        try {
            rootNode = new WrapperNode(rootWrapper);
        } catch (IntrospectionException ex) {
            Exceptions.printStackTrace(ex);
        }

        mgr.setRootContext(rootNode);
        associateLookup(ExplorerUtils.createLookup(mgr, getActionMap()));
    }
    <snip></snip>
}

######## WrapperNode #####################

rotero wrote

public class WrapperNode extends BeanNode {

    private Wrapper wrapper;

    public WrapperNode(Wrapper key) throws IntrospectionException {
        super(key, Children.LEAF, Lookups.fixed(new Object[]{key}));
        this.wrapper = key;
        this.setDisplayName(key.getTitle());
        setIconBaseWithExtension(key.getImage());
    }

    @Override
    protected Sheet createSheet() {
        Sheet sheet = Sheet.createDefault();
        Sheet.Set set = Sheet.createPropertiesSet();
        set.put(new ValueProperty(getLookup().lookup(Wrapper.class)));
        set.put(new UnitsProperty(getLookup().lookup(Wrapper.class)));
        sheet.put(set);
        return sheet;
    }

    private class ValueProperty extends PropertySupport.ReadWrite {

        private final Wrapper wrap;

        private ValueProperty(Wrapper wrap) {
            super("Value", float.class, "Value", "Example Use of Value");
            this.wrap = wrap;
        }

        @Override
        public Float getValue() throws IllegalAccessException, InvocationTargetException {
            return wrap.getValue();
        }

        @Override
        public void setValue(Object t) throws IllegalAccessException, IllegalArgumentException, InvocationTargetException {
            wrap.setValue((Float)t);
        }
    }

    private class UnitsProperty extends PropertySupport.ReadWrite {

        private final Wrapper wrap;

        private UnitsProperty(Wrapper wrap) {
            super("Units", String.class, "Units", "Example Use of Units");
            this.wrap = wrap;
        }

        @Override
        public String getValue() throws IllegalAccessException, InvocationTargetException {
            return wrap.getUnits();
        }

        @Override
        public void setValue(Object t) throws IllegalAccessException, IllegalArgumentException, InvocationTargetException {
            wrap.setUnits((String)t);
        }
    }
}

Thank you again for your earlier responses.

Richard

[rotero]

It is running on a week since the following post.

Does anyone have an idea regarding how/why:

1) I could expose nodes added to a Editor TopComponent, through a palette window, by making them also appear in the explorer TopComponent OutlineView.

3) I wouldn't be getting access to values I try to make available through PropertySupport.ReadWrite?  (Code below)

Please let me know if you would need to see more code.  I was trying to keep it short and to the point.

Thanks,
Richard

More info below:

rotero wrote

Thank you, those tutorials were helpful and did get me closer to my goal and a better understanding of the platform.



The code I currently have produces the above, where I pull a node from an available palette window.

I'm still trying to do the things below:

#################################

1) A node added to the workspace will be added to the explorer with the inputs/outputs of the node exposed

Should I place every node placed into the Workspace into that object's lookup?  Then have the explorer look though the global lookup and, when the Workspace is selected, it'll be able to see the available nodes and add them as children to the graph node?

I want to be able to show each input/output variable in the wrapper node on the explorer window.  To me, that seems to imply that I need to have the variables be nodes contained within each wrapper node.

#################################

2) The ability to add an image to the explorer line item to show the user that the value is an input or an output.

This was answered nicely in the tutorials you sent thank you.

#################################

3) The ability to edit inputs in the explorer (the green values) where double-clicking on the number would make it editable.

I had thought extending PropertySupport.ReadWrite for the node would make the value editable but something seems to be wrong with the way I'm doing it.  The current values are not shown in the explorer window and the boxes can't be edited.  I've included the code used for clarity.

######## ExplorerTopComponent #####################

rotero wrote

public final class ExplorerTopComponent extends TopComponent implements ExplorerManager.Provider {

    private Wrapper rootWrapper;
   
    private final ExplorerManager mgr = new ExplorerManager();

    public ExplorerTopComponent() {
        initComponents();
        setName(Bundle.CTL_ExplorerTopComponent());
        setToolTipText(Bundle.HINT_ExplorerTopComponent());

        setLayout(new BorderLayout());
       
        rootWrapper = new Wrapper("Graph", "test/explorer/graph_16.png");
       
        // Add a new outline view to have a tree table for the explorer window
        OutlineView pane = new OutlineView();
        ((OutlineView) pane).setPropertyColumns("Value", "Current Value", "Units", "Units Used");
        add (pane, BorderLayout.CENTER);
       
        WrapperNode rootNode = null;
        try {
            rootNode = new WrapperNode(rootWrapper);
        } catch (IntrospectionException ex) {
            Exceptions.printStackTrace(ex);
        }

        mgr.setRootContext(rootNode);
        associateLookup(ExplorerUtils.createLookup(mgr, getActionMap()));
    }
    <snip></snip>
}

######## WrapperNode #####################

rotero wrote

public class WrapperNode extends BeanNode {

    private Wrapper wrapper;

    public WrapperNode(Wrapper key) throws IntrospectionException {
        super(key, Children.LEAF, Lookups.fixed(new Object[]{key}));
        this.wrapper = key;
        this.setDisplayName(key.getTitle());
        setIconBaseWithExtension(key.getImage());
    }

    @Override
    protected Sheet createSheet() {
        Sheet sheet = Sheet.createDefault();
        Sheet.Set set = Sheet.createPropertiesSet();
        set.put(new ValueProperty(getLookup().lookup(Wrapper.class)));
        set.put(new UnitsProperty(getLookup().lookup(Wrapper.class)));
        sheet.put(set);
        return sheet;
    }

    private class ValueProperty extends PropertySupport.ReadWrite {

        private final Wrapper wrap;

        private ValueProperty(Wrapper wrap) {
            super("Value", float.class, "Value", "Example Use of Value");
            this.wrap = wrap;
        }

        @Override
        public Float getValue() throws IllegalAccessException, InvocationTargetException {
            return wrap.getValue();
        }

        @Override
        public void setValue(Object t) throws IllegalAccessException, IllegalArgumentException, InvocationTargetException {
            wrap.setValue((Float)t);
        }
    }

    private class UnitsProperty extends PropertySupport.ReadWrite {

        private final Wrapper wrap;

        private UnitsProperty(Wrapper wrap) {
            super("Units", String.class, "Units", "Example Use of Units");
            this.wrap = wrap;
        }

        @Override
        public String getValue() throws IllegalAccessException, InvocationTargetException {
            return wrap.getUnits();
        }

        @Override
        public void setValue(Object t) throws IllegalAccessException, IllegalArgumentException, InvocationTargetException {
            wrap.setUnits((String)t);
        }
    }
}

Thank you again for your earlier responses.

Richard

[rotero]

Well, I solve my own issue.  In case anyone else is interested:

1) The child factory for the root node is going to look for all bean nodes in the workspace (through a lookup) and add them as children.  These children will have a different child factory that will show their variables as nodes in the explorer window.

3) When I wanted to expose bean values for read/write using a beannode:
    - I did not have to overwrite createsheet
    - I did not have to create a class extending PropertySupport.ReadWrite
    - All I needed to do was:

// Add a new outline view to have a tree table for the explorer window
OutlineView pane = new OutlineView();
((OutlineView) pane).setPropertyColumns("value", "Current Value", "units", "Units Used");
add (pane, BorderLayout.CENTER);

Where 'value' and 'units' were the names of the two properties I wanted exposed for viewing/editing in the explorer window.

The explorer window does need to implement ExplorerManager.Provider, needs to contain an ExplorerManager, and override getExplorerManager but that is shown in the tutorials referenced in this thread.

Hope that helps,
Richard