Changing NodeRenderer

  • Amir H. Jadidinejad

    The property window of each node contains "Name, ID, Type". These properties contains in the tooltip too.
    How can I change these properties?
    For example I want to remove "Name, ID, Type" and show special properties in the tooltips and property window.

  • Chris Callendar

    Chris Callendar - 2010-05-27

    Hi there,

    The node tooltips that show up are controlled in the DefaultNodeRenderer class, inside the addToolTipValues() function.

    If you use your own custom renderer then you can override that function and add whatever properties you want:

    override protected function addToolTipValues(tooltip:FlexGraphToolTip):void {
        tooltip.addValue("Name: ", node.text);
        // ...
  • Amir H. Jadidinejad

    OK. No problem with tooltips, thanks.
    But what about property window. Still "ID, Name and Type" is shown in the property window. How can I control the content of it?
    Kind regards

  • Chris Callendar

    Chris Callendar - 2010-05-27

    Oh right, sorry.  This isn't quite as straightforward.

    The node properties window is created and shown in the FlexGraph.showPropertiesWindow(node) function.  So you'll have to create an extension of either FlexGraph or ExtendedFlexGraph and override that function.  In the future I plan to make the FlexGraph.nodePropertiesWindow variable be public, then you will be able to set your own custom property window without having to extend the class.

    Then you can create your own NodePropertyWindow class that adds whatever properties you want.  The NodePropertyWindow actually just contains a NodePropertyPane component, so that is the one that you really want to edit. 
    Here is an example of the custom window:

    import ca.uvic.cs.chisel.flexviz.ui.NodePropertyPane;
        import ca.uvic.cs.chisel.flexviz.ui.NodePropertyWindow;
        public class CustomNodePropertyWindow extends NodePropertyWindow
            private var pane:CustomNodePropertyPane;
            public function CustomNodePropertyWindow() {
            override public function get nodePropertyPane():NodePropertyPane {
                if (!pane) {
                    pane = new CustomNodePropertyPane();
                    pane.percentWidth = 100;
                return pane;

    Unfortunately the NodePropertyPane wasn't designed to be extended, so you'll have to make a copy of the NodePropertyPane and edit it as you need.  In the future I'll change the NodePropertyPane.loadNodeProperties() to be protected so that you can simple extend that class and override that function like this:

    import ca.uvic.cs.chisel.flexviz.ui.NodePropertyPane;
        public class CustomNodePropertyPane extends NodePropertyPane
            public function CustomNodePropertyPane() {
            override protected function loadNodeProperties():void {
                if (numChildren > 0) {
                if (node) {
                    // add custom properties here
                    //addProperty("Text", node.text);

    Hope that gets you started.

  • Amir H. Jadidinejad

    It solved. Thank you so much.


Log in to post a comment.

Get latest updates about Open Source Projects, Conferences and News.

Sign up for the SourceForge newsletter:

JavaScript is required for this form.

No, thanks