Setting the icon for each node relative to the CSS file

Question

How can I set the icon for each node relative to the CSS file?

Answer

Let us say that each node in your XML file has the property "nodeIcon" that defines which icon to use:

<diagram>
<node id="node1">
...
<property name="nodeIcon">images/my-icon.jpg</property>
</node>
...
</diagram>

By default, icon paths will be searched relative to the executing program. If you have your icons relative to the CSS file (or another absolute location), you might want to try to use the CSS url() construct to set the icon paths relative to the CSS file, like this:

node {
...
icon : url(@nodeIcon)
...
}

However, this will not work as the construct "url()" is resolved at parsing time, before the property "nodeIcon" is set. Instead you need to subclass IlvGeneralNode so that the subclass takes the path to the .css file into account when setting the icon property:

import ilog.views.sdm.graphic.IlvGeneralNode;
public class MyNode extends IlvGeneralNode {
   private String base = null;
   private String icon = null;
   public void setIcon(String icon) {
      this.icon = icon;
      if (base != null && icon != null) {
        super.setIcon(base + icon);
      }
   }
   public void setBase(String base) {
      this.base = base;
      if (base != null && icon != null) {
        super.setIcon(base + icon);
      }
   }
}

Now you can use the property "nodeIcon" in your CSS file:

node {
 class: "MyNode";
 base: url(".");  //This gives the folder of the .css file
 icon: @nodeIcon;
}

Make sure that the classpath includes your class MyNode, and that the relative paths used in the property "nodeIcon" of the nodes in your XML file is based on the CSS file's folder. See attached file sample.zip.

Note: In order to run this sample with JViews 8.7 and later, you must call the ilog.views.util.IlvProductUtil.DeploymentLicenseRequired method with the appropriate argument. See the General information > Deployment licenses > Declaring the use of IBM ILOG JViews services section in the documentation for more information.