skip to main content
Programmers documentation > Styling > Customizing network elements > Customizing network element types
 
Customizing network element types
Describes how the representation of a network element is customized graphically to indicate the network element type.
*Representing a network element type
*Describes how the network element type affects the rendering of the object.
*Customizing existing network element types
*Describes in detail the CSS properties that you can use to customize all network element types and various subsets of network element types.
*Creating network element types from images and customizing them
*Describes how to define new network element types with new representations without extending an existing base renderer class.
*Using the imagecolortuner application to configure the renderer factory
*Describes how to find the best values for the parameters of the factory used to create a base renderer for a network element from an image.
*Customizing network element types from SVG graphics
*Describes how to define new network element types with new representations without extending an existing base renderer class, by using SVG graphics.
*Extending the class IltNEBaseRenderer
*Explains with an example how to create a new type of network element by extending the base class for the renderer.
*Localizing network element types
*Describes how to localize then name of the network element type in labels and tooltips in the resource bundle.
Representing a network element type
In Rogue Wave® JViews TGO, the type of the network element defines how the object base will be represented. Each network element type is associated with a specific base renderer that is in charge of drawing the object according to its type and state information.
In JViews TGO, you can customize the behavior of the base renderer by using CSS. In addition, you can extend the base representation of graphic objects in two different ways, either by using a predefined base renderer factory class ( IltNEImageBaseRendererFactory or IltNESVGBaseRendererFactory), or by implementing your own subclass of IltNEBaseRenderer for each new type of network element that you want to create.
Customizing existing network element types
For details about the network element types and their graphic representation, refer to Network elements
Properties for customizing all network element types
The following properties are common to all network element types:
CSS properties common to all network element types
Property Name
Type
Default Value
Description
collapsed
boolean
false
Defines whether the object is displayed in its normal size or its reduced size.
When the network element is shown in its reduced size, fewer decorations are displayed. In particular, there is no space for an alarm count on the base and an alarm balloon would hide secondary state icons.
sizeRatio
IlvTransformer
null
A magnification of the node.
tiny
boolean
false in network and equipment components
true in tree and table components
Sets the network element base to its tiny representation. The tiny representation is used mainly in the Tree and Table components.
logical
boolean
false
Sets the network element base to its logical representation. In the logical representation, all network element types are displayed in the same way using a rectangular shape.
Mapped properties
The following properties are mapped, that is, their value is computed automatically by JViews TGO according to the states and alarms currently set in the object (column Set). You can however override the mapped values or customize their graphic representation even when the object does not carry states and alarms.
Mapped CSS properties 
Property Name
Type
Set
Default Value
Description
detailLevel
enum
Yes
MaximumDetails
Defines the level of detail to be used to draw the base.
borderColor
Color
Yes
10% gray
Denotes the primary color of the base border.
borderColor2
Color
Yes
60% gray
Denotes the secondary color of the base border.
borderWidth
float
Yes
1 pixel
Denotes the width of the base border.
reliefBorders
boolean
Yes
true
Denotes whether the base border is drawn in relief or not.
borderLineStyle
float[]
Yes
null (Solid)
Denotes the line style used to draw the base border.
borderPattern
Pattern
Yes
null
Denotes the pattern used to draw the base border.
foreground
Color
Yes
28% gray in the IltObject class style
Denotes the foreground color of the base.
background
Color
Yes
Transparent ( null )
Denotes the background color of the base.
fillStyle
ilog.util.IlFillStyle
Network node except BTSEquipment
IlFillStyle.SOLID_COLOR for user-defined business objects
IlFillStyle.PATTERN for predefined business objects
Denotes the style used to fill the base of an object.
Possible values are:
IlFillStyle.NO_FILL
IlFillStyle.SOLID_COLOR
IlFillStyle.LINEAR_GRADIENT
IlFillStyle.RADIAL_GRADIENT
IlFillStyle.TEXTURE
IlFillStyle.PATTERN
fillAngle
float
Network node except BTSEquipment
0
Denotes the angle (in degrees) of the gradient used to fill the base of an object. This property is only used if fillStyle is set to IlFillStyle.RADIAL_GRADIENT or IlFillStyle.LINEAR_GRADIENT
fillEnd
float
Network node except BTSEquipment
1f
Denotes the position where the gradient of an object ends, that is, where the color is the one defined by property background. This property is only used if fillStyle is set to IlFillStyle.RADIA_GRADIENT or IlFillStyle.LINEAR_GRADIENT
fillStart
float
Network node except BTSEquipment
0f
Denotes the position where the gradient of an object starts, that is, where the color is the one defined by property foreground. This property is only used if fillStyle is set to IlFillStyle.RADIA_GRADIENT or IlFillStyle.LINEAR_GRADIENT.
fillTexture
Image
Network node except BTSEquipment
null
Denotes the texture used to fill the base of an object. This property is only used if fillStyle is set to IlFillStyle.TEXTURE.
fillPattern
Pattern
Yes
null (Solid)
Denotes the pattern used to fill the base of an object. This property is only used if fillStyle is set to IlFillStyle.PATTERN.
Properties for types with dotted borders
The following types ( IltNetworkElement.Type.xxx ) have dotted borders: BTS, TransportShape, StationShape, MuxShape, NetworkShape.
These types have a dotted border displayed around the main shape by default. The dotted border is configured through the properties listed in the following table.
CSS properties for dotted borders 
Property Name
Type
Set
Default Value
Description
dottedBorderForeground
Color
No
53% gray in the IltObject class style
Denotes the foreground color used to display the extra border around the base.
dottedBorderBackground
Color
No
Transparent (null)
Denotes the background color used to display the extra border around the base.
dottedBorderLineStyle
float[]
No
"1,1"
Denotes the line style used to display the extra border around the base.
Properties for mediation devices
The type IltNetworkElement.Type.MD determines the graphic representation of a mediation device in the form of a stylized shelf with five slots. It can be customized through the properties listed in the following table.
CSS properties for mediation devices 
Property Name
Type
Set
Default Value
Description
mdRedButtonColor
Color
No
100% red
0% green
20% blue
When the network element is carrying traffic, two cards are drawn with colored buttons. This property denotes the color of the first buttons (which are red by default).
mdGreenButtonColor
Color
No
0% red
60% green
60% blue
When the network element is carrying traffic, two cards are drawn with colored buttons. This property denotes the color of the last buttons (which are green by default).
mdShadowColor
Color
No
53% gray
Denotes the color of the shadowed lines that are used to draw the slots that do not contain any card.
Properties for servers
The type IltNetworkElement.Type.Server determines the graphic representation of a server in the form of a stylized equipment unit with a colored button and a vent grid. It can be customized through the properties listed in the following table.
CSS properties for servers
Property Name
Type
Set
Default Value
Description
serverButtonColor
Color
No
100% blue
Defines the color of the server button.
serverGridColor
Color
No
10% gray
Defines the color of the server grid.
Properties for network management workstations
The type IltNetworkElement.Type.NMW determines the graphical representation of a network management workstation in the form of a stylized workstation. It can be customized through the properties listed in the following table.
CSS properties for network management workstations
Property Name
Type
Set
Default Value
Description
nmwScreenColor
Color
Yes
67% gray
When the network element is carrying traffic, the screen of the workstation is colored with a different shade of gray, which is determined by the value of this property. If the network element holds new alarms, this property is set by JViews TGO.
nmwButtonColor
Color
No
0% red
60% green
60% blue
Denotes the color of the button that is drawn on the central unit of the workstation.
Property for Base Station Controllers
The type IltNetworkElement.Type.BSC determines the graphical representation of a wireless Base Station Controller (BSC). It can be customized through the property in the following table.
CSS property for BSC equipment
Property Name
Type
Set
Default Value
Description
bscActiveBorderWidth
int
No
1 pixel
Denotes the border width that is used when the element is carrying traffic. This type uses a different border width than the value specified by activeBorderWidth, as activeBorderWidth is designed for “large” representations, such as the generic square chicklet or geometric shapes, whereas the BSC representation uses thinner lines.
Property for Mobile Switching Center
The type IltNetworkElement.Type.MSC determines the graphic representation of a Mobile Switching Center (MSC). It can be customized through the following property.
CSS property for MSC equipment
Property Name
Type
Set
Default Value
Description
mscActiveBorderWidth
int
No
1 pixel
Denotes the border width that is used when the element is carrying traffic. This type uses a different border width than the value specified by activeBorderWidth, as activeBorderWidth is designed for “large” representations, such as the generic square chicklet or geometric shapes, whereas the MSC representation uses thinner lines.
Property for Base Transceiver Stations
The type IltNetworkElement.Type.BTS determines the graphical representation of a Base Transceiver Station (BTS). It can be customized through the property listed in the following table.
CSS property for a BTS object
Property Name
Type
Set
Default Value
Description
btsActiveBorderWidth
int
No
1 pixel
Denotes the border width that is used when the element is carrying traffic. This type uses a different border width than the value specified by activeBorderWidth, as activeBorderWidth is designed for “large” representations, such as the generic square chicklet or geometric shapes, whereas the BTS representation uses thinner lines.
Properties for Base Transceiver Station equipment
The type IltNetworkElement.Type.BTSEquipment determines the graphical representation of the BTS equipment that is part of a BTS object. It can be customized through the following properties.
CSS properties for a BTS equipment
Property Name
Type
Default Value
Description
antialiasing
boolean
true
Defines whether the object is displayed with sharp and neat lines.
btsEquipmentRadius
int
10
Defines the radius of the BTS equipment.
Creating network element types from images and customizing them
JViews TGO provides a base renderer factory class, IltNEImageBaseRendererFactory, that simply requires an image from which it will automatically compute all the representations that a network element can have according to the state it is in (out of service, in service carrying traffic, in service carrying no traffic, or not installed) or the alarms it raises. See States.
How to create a new type of network element from an image (using the API)
To create a new type of network element using an image:
*Create a new type of network element with the following code:
 
IltNetworkElement.Type myNewType =
          new IltNetworkElement.Type(YOUR_NEW_TYPE_NAME);
*Create the image corresponding to the base style Carrying Traffic without any alarm and instantiate an IltNEImageBaseRendererFactory using this image:
 
IltNEImageBaseRendererFactory factory = new
IltNEImageBaseRendererFactory(image, YOUR_IMAGE_PARAMETERS);
*Map the factory with the new type using SetValue:
 
IltSettings.SetValue("NetworkElement.Type.YOUR_NEW_TYPE_NAME.Renderer",facto
ry);
How to create a new type of network element from an image (using CSS)
You can create new network element types using global CSS settings as shown in the following example.
 
setting."ilog.tgo.model.IltNetworkElement"{
  types[0]: @+neType0;
}
Subobject#neType0 {
  class: 'ilog.tgo.model.IltNetworkElement.Type';
  name: "YOUR_NEW_TYPE_NAME";
}
See Using global settings for more information.
How to customize a network element renderer (using CSS)
You can customize the renderer for the network element type using global CSS settings. To do so, you need to specify the full path to the object to be customized, as well as the value of its name attribute in order to match the right type of object in the system. The CSS property to customize is renderer as shown in the following example.
 
setting."ilog.tgo.model.IltNetworkElement.Type"[name=YOUR_NEW_TYPE_NAME] {
   renderer: @+neRendererFactory0;
}
Subobject#neRendererFactory0 {
   class: 'MyNERendererFactory';
}
In this example, the name of the renderer factory class that is included in the search path is MyNERendererFactory.
Starting from an original image of type java.awt.Image corresponding to the Carrying Traffic base style without any alarm, JViews TGO automatically processes the range of representations corresponding to other states and alarms.
Suppose that you want to define a new network element with the following representation for the base style Carrying Traffic with no alarms.
Sample new network element
To define this new network element representation, all you have to do is instantiate an IltNEImageBaseRendererFactory and provide the bitmap image as an argument to its constructor. JViews TGO automatically computes the various representations that this network element can have according to its associated state and alarms.
The IltNEImageBaseRendererFactory has three constructors:
*The first constructor has four arguments and enables you to customize the way the different representations are computed.
The first parameter is of type java.awt.Image. It is the original image used to compute all other representations.
The first and the second int are thresholds indicating which part of the original image should be considered as details and drawn in the dark color. The third int is the gray level that should be mapped to the normal alarm color.
*The second constructor has the same parameters as the first one and an additional boolean parameter that indicates whether an additional dotted border should be drawn around the base.
*The third constructor has only one argument, which is the java.awt.Image that should be used to compute the different representations of the new type. It calls the constructor with four arguments, with the image and 200 as the threshold for bright colors, 50 as the threshold for dark colors, and 128 as the gray level to be mapped to the normal alarm color.
The following figure presents the four base styles (rows) with their various representations corresponding to alarms of different severity and loss of connectivity (columns).
Sample Instantiations of New Network Elements
How to create a new type of network element using one image per base style
Another way to represent a type with an image is to specify a source image and an alarm color level parameter for every required base style, directly in CSS. No other base style property or renderer parameter is needed, as a complete image is provided for every required base style.
To create a new type of network element using an image per base style:
*Create a new type of network element
Using the API:
 
IltNetworkElement.Type myNewType = new
IltNetworkElement.Type(YOUR_NEW_TYPE_NAME);
or, using global CSS settings:
 
setting."ilog.tgo.model.IltNetworkElement" {
   types[0]: @+neType0;
}
 
Subobject#neType0 {
   class: 'ilog.tgo.model.IltNetworkElement.Type';
   name: YOUR_NEW_TYPE_NAME;
}
*Map an IltNEDirectImageBaseRendererFactory to the new type
Using the API SetValue:
 
IltSettings.SetValue("NetworkElement.Type.YOUR_NEW_TYPE_NAME.Renderer", new
IltNEDirectImageBaseRendererFactory());
or, using global CSS settings:
 
setting."ilog.tgo.model.IltNetworkElement.Type"[name=YOUR_NEW_TYPE_NAME] {
   renderer: @+neRendererFactory;
}
 
Subobject#neRendererFactory {
   class: 'ilog.tgo.graphic.renderer.IltNEDirectImageBaseRendererFactory';
}
*Define an image and an alarm color or gray-level parameter in CSS for each required base style
 
object."ilog.tgo.model.IltNetworkElement"["type"=YOUR_NEW_TYPE_NAME]["object
State.Bellcore.State"=EnabledActive] {
  sourceImage: '@|image("newType_enabledActive.png")';
  alarmColorLevel: 128;
}
object."ilog.tgo.model.IltNetworkElement"["type"=YOUR_NEW_TYPE_NAME]["object
State.Bellcore.State"=DisabledActive] {
  sourceImage: '@|image("newType_disabledActive.png")';
  alarmColorLevel: 140;
}
How to define a network element type from an image
If the base style is Carrying Traffic no alarms, the representation is the original image.
Sample original image
In all other cases, the representation is automatically computed by JViews TGO, as follows:
*Carrying Traffic with alarms: A color scale corresponding to the alarm color is applied to the original image. This color scale uses three colors: a bright alarm color, a normal alarm color, and a dark alarm color.
For example, for a major alarm JViews TGO uses the colors bright red, red, and dark red. The color scale is applied to the original image by first converting it to a normalized gray-scale image (that is, gray levels in the range 0 - 255). Then, the normalized gray-scale image is colored by mapping each gray level to a color level. The brighter gray is mapped to the bright alarm color, the darker gray is mapped to the dark alarm color, and the gray level corresponding to the third integer in the factory constructor is mapped to the normal alarm color (if this integer is not explicitly given, the default value used is 128). Any other gray level different from the brighter one, the darker one, or the one given in the factory constructor is mapped to the appropriate color in a continuous manner.
Sample with Color
*No Traffic (with or without alarms): The original image, which is supposed to be a relief image (according to the JViews TGO look-and-feel), is transformed to a flat image. The flat image is composed of only two colors: in the absence of alarms, one gray and one darker gray, otherwise one alarm color and one dark alarm color. Using only two colors ensures a flat visual aspect. To follow the JViews TGO look-and-feel, the whole object should be represented in the normal color with its border in the dark color, plus possibly some details of the inside of the object also in the dark color. For example, the figure shows that the border is in the dark color as well as the outline of the small screen and the receiver of the telephone. To indicate which details of the original image you want in the dark color and which you do not, you must use the first two integers of the factory constructor. The first integer indicates a threshold above which the bright colors of the original image should be considered as details and drawn in the dark color; if this integer is not explicitly given, the default value used will be 200. For example, Sample Dark and Light Colors shows examples where the threshold assumed is 200 (in the range 0 - 255). In this way, the left border of the receiver and the lower right border of the screen are drawn in the dark color. The second integer is a threshold indicating which of the dark colors of the original image should be considered as details and also drawn in the dark color; if this integer is not explicitly provided, the default value will be 50. For example, in Sample Dark and Light Colors we indicate that this threshold is 11 (in the range 0 - 255). This causes the lower right border of the receiver and the upper left border of the screen to be drawn in the dark color.
Sample Dark and Light Colors
*Out of Service and Not Installed (with or without alarms): According to the Rogue Wave® JViews TGO look-and-feel, the object should be represented with only two colors, a dashed border and a pattern inside, but no other details. JViews TGO uses the transparency, if any, to determine the border of the image. When there is no transparency, the rectangle of the image is considered to be the border. Then, the interior is filled with the appropriate pattern and the border is drawn as a dashed line. JViews TGO does not need any extra parameters (threshold or gray level as mentioned above) to compute these representations correctly.
Sample Representations
Note that JViews TGO provides the imagecolortuner application to help you find the best values for the thresholds and the gray level. For details, see Using the imagecolortuner application to configure the renderer factory.
For the IltNEImageBaseRendererFactory class to process the supported image types (GIF, PNG and JPG) correctly, the only constraint on the image itself is that the number of colors, C, be as follows:
2 <= C <= 256
The IltNEImageBaseRendererFactory class preserves transparency, so transparency is not considered a color. Consequently, IltNEImageBaseRendererFactory does not color the transparent pixels of the image. For example, an image that contains the color black as the foreground color, and transparency as the background, will not have the regular coloring scheme applied as it fails to meet the constraint on the number of colors.
Using the imagecolortuner application to configure the renderer factory
The imagecolortuner application can be found in <installdir>/samples/framework/imagecolortuner where <installdir> is the directory where you have installed JViews TGO. This utility enables you to find the best values for the parameters of IltNEImageBaseRendererFactory quickly and easily.
To set the parameters:
1. Click File>Load Image to load your image.
2. Customize the Carrying Traffic with alarm representations. You have to choose the gray level that will be mapped to the normal alarm color. For details see Creating network element types from images and customizing them. To do so, you can either display the tab called Row 1 and use the slider or click in the zoomed view on a pixel that has the color you want to be mapped to the normal alarm color.
3. Customize the No Traffic representation. You have to indicate which details of your original image should have the dark color. For details see Creating network element types from images and customizing them. To do so, display the tab called Row 2 and adjust the two sliders. The first slider adjusts the threshold for bright colors: colors of the original image brighter than this threshold will be displayed in the appropriate dark color depending on the state and alarms. The second slider adjusts the threshold for dark colors: colors of the original image darker than this threshold will also be displayed in the appropriate dark color depending on the state and alarms.
4. Click File>View Source to display the sample source code. The source code needed to create your new type as it is currently represented on screen is displayed. The factory constructor contains the appropriate values.
You can create your new type by noting or copying the parameter values or the entire code and pasting it into your JViews TGO application.
Customizing network element types from SVG graphics
How to create a new type of network element from an SVG file (using the API)
JViews TGO provides a base renderer factory class, IltNESVGBaseRendererFactory, that simply requires an SVG input file. When using SVG input files, all the possible representations of a network element (according to the state) are mapped to the same SVG graphic.
To create a new type of network element using SVG:
*Create a new type of network element with the following code:
 
IltNetworkElement.Type myNewType = new
IltNetworkElement.Type(YOUR_NEW_TYPE_NAME);
*Create the SVG file corresponding to the network element representation and instantiate an IltNESVGBaseRendererFactory using this file:
 
URL url = new URL("file","",YOUR_SVG_FILE_NAME);
IltNESVGBaseRendererFactory factory = new IltNESVGBaseRendererFactory(url);
*Map the factory with the new type using SetValue:
 
IltSettings.SetValue("NetworkElement.Type.YOUR_NEW_TYPE_NAME.Renderer",
factory );
How to create a new type of network element from an SVG file (using CSS)
You can create new network element types by using global CSS settings.
 
setting."ilog.tgo.model.IltNetworkElement"{
  types[0]: @+neType0;
}
Subobject#neType0 {
  class: 'ilog.tgo.model.IltNetworkElement.Type';
  name: "YOUR_NEW_TYPE_NAME";
}
For more information, see Using global settings.
How to customize a renderer for a network element type (using CSS)
You can customize the renderer for the network element type using global CSS settings. To do so, you need to specify the full path to the object to be customized, as well as the value of its name attribute in order to match the right type of object in the system. The CSS property to customize here is renderer. In the example below, the name of the renderer factory class that is included in the search path is MyNESVGRendererFactory.
 
setting."ilog.tgo.model.IltNetworkElement.Type"[name=YOUR_NEW_TYPE_NAME] {
   renderer: @+neSVGRendererFactory0;
}
Subobject#neSVGRendererFactory0 {
   class: 'MyNESVGRendererFactory';
}
Extending the class IltNEBaseRenderer
Drawing principles
The base of a network element has four different visual aspects, each corresponding to one of the following fundamental states:
Out Of Service (OOS)
The base has a hatched outline. Inside the base, drawings are not displayed.
In service, carrying No Traffic (NT)
The base and its inside drawings are in full outline.
In service, Carrying Traffic (CT)
The base and its inside drawings are in relief.
Not Installed (NI)
The base is striped and has a hatched outline. Inside the base, drawings are not displayed. This is a special case where the base drawing changes when a secondary state is represented.
These fundamental states are enumerated in the class IltBaseStyle.
The drawings representing the network element base are specified in a single class that inherits from IltNEBaseRenderer. The four visual aspects of the base are drawn using the drawMain method to draw the base and additional methods to access the resources used to draw the base.To create new vector drawings for network elements, you have to extend the IltNEBaseRenderer class and override the methods drawMain and getPreferredSize.
Once the class is created, you must tell JViews TGO how to use it to draw a network element of a particular type. To do so, you must create a new IltNetworkElement.Type., add it to the existing types, and associate it with the drawing class using the mapping function SetValue or global CSS settings.
How to extend a network element
This example illustrates how to define a new type of network element called Server. You add myServer to the existing types ( NE, MD, NMW, BTS, and so on).
The four graphic states that the new network element type can have are illustrated in The Server graphic states.
The Server graphic states
When you extend the class IltNEBaseRenderer, you must create the drawing class and define its basic methods and the drawMain method.
The following code shows how to write a class ServerBaseRenderer that extends IltNEBaseRenderer and redefine its method getPreferredSize. This class will be enhanced later on to draw the Server element base.
 
static class ServerBaseRenderer extends IltNEBaseRenderer {
  private static Dimension NormalSize = new Dimension(25,40);
  private static Dimension SmallSize = new Dimension(13,21);
  public Dimension getPreferredSize (boolean collapsed) {
      if (collapsed)
        return SmallSize;
      else
        return NormalSize;
  }
}
The two fields NormalSize and SmallSize define the normal dimension of the base and its dimension when it is collapsed. Calling getPreferredSize returns the current size of the base.
The following fields are added to initialize numbers that are used to draw the base. Since there is only one method to draw both collapsed and expanded bases, these numbers ease the readability of the code.
 
// Some factors for drawing:
private static final float _XGrid = 4.0f / 25.0f;
private static final float _YGrid = 4.0f / 40.0f;
private static final float _WGrid = 13.0f / 25.0f;
private static final float _HGrid = 1.0f / 40.0f;
private static final float _VStepGrid = 2.0f / 40.0f;
private static final float _XButton = 19.0f / 25.0f;
private static final float _YButton = 4.0f / 40.0f;
private static final float _WButton = 2.0f / 25.0f;
private static final float _HButton = 2.0f / 40.0f;
private static final float _XDisk = 18.0f / 25.0f;
private static final float _YDisk = 23.0f / 40.0f;
private static final float _WDisk = 3.0f / 25.0f;
private static final float _HDisk = 12.0f / 40.0f;
Standard palettes
The class IltNEBaseRenderer provides three standard drawing palettes that you can access easily with the methods getPalette, getBrightPalette, and getDarkPalette.
*getPalette returns the ordinary palette, commonly used to draw the face part.
*getBrightPalette returns the palette used to draw the bright parts of a 3D border.
*getDarkPalette returns the palette used to draw the ordinary border, and the dark parts of a 3D border.
These palettes automatically take into account the semantic state of the associated IltNetworkElement when changing colors. For example, when a new alarm is set to an object the ordinary palette may become red instead of grey.
How to initialize and use new palettes
It is necessary to define new palettes when the base drawings include elements that are not represented in the standard palettes. These palettes are initialized in the initResources method and used in the drawMain method.
In the following code, the new palettes are declared as fields and initialized in initResources.
 
private static Color GridColor =
      IltrColor.NewColor("server grid color", IltrColor._90PctGrey);
    private static Color ButtonColor =
      IltrColor.NewColor("server button color", Color.blue);
 
    private Ilt2DPalette GridPalette;
    private Ilt2DPalette ButtonPalette;
 
    protected void initResources () {
      super.initResources();
      GridPalette = Ilt2DPalette.NewSimple2DPalette(GridColor);
      ButtonPalette = Ilt2DPalette.NewSimple2DPalette(ButtonColor);
    }
How to define the main drawing method
The programming principle for the drawMain method is similar to the draw method of an IlvGraphic object. The method receives a graphic to draw with, a transformer linked to the associated view, and an IlvRect object that gives the size and position of the base.
The following code shows the beginning of the drawMain function.
 
public void drawMain (Graphics g, IlvTransformer t, IlvRect rect) {
 
      // Get the corners of the base rectangle.
      int x1 = (int)rect.x;
      int y1 = (int)rect.y;
      int x2 = x1 + (int)rect.width-1;
      int y2 = y1 + (int)rect.height-1;
 
      // Get the state dependent parameters.
      IltDetailLevel detailLevel = getDetailLevel();
      Ilt2DPalette palette = getPalette();
      Ilt2DPalette brightPalette = getBrightPalette();
      Ilt2DPalette darkPalette = getDarkPalette();
      int borderThickness = getBorderThickness();
In this code, there are the position of the base, its style (OOS, NT, CT or NI—see The Server graphic states), and the standard palettes.
How to draw the base of a new type of network element
You can start drawing with IltGraphicUtil, a collection of graphic functions that simplify the drawing of common shapes.
The following code starts drawing the base.
 
if (x1<=x2 && y1<=y2) {
 
        IltGraphicUtil.FillRect(g,t,x1,y1,x2,y2,palette);
 
        // Paint the border
        if (detailLevel.equals(IltDetailLevel.MaximumDetails)) {
        if (rect.width < 20 && borderThickness > 1)
        IltGraphicUtil.DrawReliefRect (g,t,x1,y1,x2,y2,
                                        brightPalette, darkPalette,
                                        borderThickness);
          else {
        IltGraphicUtil.DrawRect(g,t,x1,y1,x2,y2,
                                 darkPalette,
                                 borderThickness);
       }
The code has to manage the four different styles of the base, so the border thickness is taken into account to get drawings that look nice. The rest of the drawMain method must also manage the different styles and the two different dimensions of the base.
 
        // Paint the grid, button and disk.
        if (detailLevel.equals(IltDetailLevel.MaximumDetails)
            || detailLevel.equals(IltDetailLevel.FewDetails)){
          // Grid, button and disk dimensions.
          final int gridWidth = Math.round(rect.width * _WGrid);
          final int gridHeight = Math.round(rect.height * _HGrid);
          final int buttonWidth = Math.round(rect.width * _WButton);
          final int buttonHeight = Math.round(rect.height * _HButton);
          final int diskWidth = Math.round(rect.width * _WDisk);
          final int diskHeight = Math.round(rect.height * _HDisk);
          // Grid rectangle corners.
          final int gx1 = x1 + Math.round(rect.width * _XGrid);
          int gy1 = y1 + Math.round(rect.height * _YGrid);
          final int gx2 = gx1 + gridWidth-1;
          int gy2 = gy1 + gridHeight-1;
          final int gvstep = Math.round(rect.height * _VStepGrid);
          // Button rectangle corners.
          final int bx1 = x1 + Math.round(rect.width * _XButton);
          final int by1 = y1 + Math.round(rect.height * _YButton);
          final int bx2 = bx1 + buttonWidth-1;
          final int by2 = by1 + buttonHeight-1;
          // Disk rectangle corners.
          final int dx1 = x1 + Math.round(rect.width * _XDisk);
          final int dy1 = y1 + Math.round(rect.height * _YDisk);
          final int dx2 = dx1 + diskWidth-1;
          final int dy2 = dy1 + diskHeight-1;
          // Grid and button colors.
          final Ilt2DPalette gridPalette =
            (detailLevel.equals(IltDetailLevel.FewDetails) ? darkPalette
 : GridPalette);
          final Ilt2DPalette buttonPalette =
            (detailLevel.equals(IltDetailLevel.FewDetails) ? darkPalette
: ButtonPalette);
          // Paint the grid.
          if (gvstep > 1) {
            for (int i = 0; i < 7; i++) {
              IltGraphicUtil._FillRect(g,t, gx1,gy1,gx2,gy2, gridPalette);
              gy1 += gvstep; gy2 += gvstep;
            }
          } else if (gvstep == 1) {
            // Paint a grey rectangle instead of the grid.
            Color rectColor = palette.getForeground();
            Color gridColor = gridPalette.getForeground();
            Color greyColor =
              new Color((rectColor.getRed()+gridColor.getRed())/2,
                        (rectColor.getGreen()+gridColor.getGreen())/2,
                        (rectColor.getBlue()+gridColor.getBlue())/2);
            Ilt2DPalette greyPalette =
              Ilt2DPalette.NewSimple2DPalette(greyColor);
            IltGraphicUtil._FillRect(g,t, gx1,gy1,gx2,gy2+6*gvstep,
                                     greyPalette);
          }
 
          // Paint the button.
          IltGraphicUtil._FillRect(g,t, bx1,by1,bx2,by2, buttonPalette);
 
          // Paint the disk.
          if (detailLevel.equals(IltDetailLevel.FewDetails)) {
            IltGraphicUtil._FillRect(g,t, dx1,dy1,dx2,dy2, darkPalette);
          } else {
            IltGraphicUtil._FillRect(g,t, dx1,dy1,dx2,dy2, palette);
            IltGraphicUtil.DrawReliefRect(g,t, dx1,dy1,dx2,dy2,
                                          brightPalette,darkPalette,
                                          1);
         }
The method drawExtraBorders is the standard method used in this example.
How to implement a method for drawing a rectangular base
If the object that you want to draw is not a rectangle, but a telephone for example, you must override this method to get a selection border that is tightly drawn around the base.
The following code shows the default implementation used for a rectangular base.
 
protected void drawExtraBorders (Graphics g, IlvTransformer t, IlvRect rect) {
    { // Draw the alarm border, if needed according to the state.
      Color c = getAlarmBorderColor();
      if (c != null)
        drawExtraBorder(g,t,rect,c,0,IltrThickness.AlarmBorderThickness);
    }
    { // Draw the selection border, if the object is currently selected.
      Color c = getSelectionBorderForeground();
      if (c != null)
        drawExtraBorder(g,t,rect,c,IltrThickness.AlarmBorderThickness,
                        IltrThickness.SelectionBorderThickness);
    }
  }
How to create and register a network element type (using the API)
If you run the sample program, the main file creates and registers a network element of type server.
 
static IltNetworkElement.Type Server = new IltNetworkElement.Type("Server");
 
  static {
    IltSettings.SetValue("NetworkElement.Type.Server.Renderer",
                         new IltBaseRendererFactory() {
                           public IltBaseRenderer createValue() {
                             return new ServerBaseRenderer();
                           }
                         }
    );
  }
 
IltDefaultDataSource dataSource = new IltDefaultDataSource();
IltNetworkElement ne = new IltNetworkElement
                      ("NE", Server, new IltOSIObjectState());
ne.setAttributeValue(IltObject.PositionAttribute, new IlpPoint(100,100));
dataSource.addObject(ne);
IlpNetwork network = new IlpNetwork();
network.setDataSource(dataSource);
How to create and register a network element type (using CSS)
You can create the new network element type using global CSS settings instead of the API, as follows.
 
setting."ilog.tgo.model.IltNetworkElement"{
  types[0]: @+neType0;
}
Subobject#neType0 {
  class: 'ilog.tgo.model.IltNetworkElement.Type';
  name: "Server";
}
To customize the renderer using global CSS settings, you need first to create a renderer factory class and make sure it is included in the search path.
 
public class MyNERendererFactory implements IltBaseRendererFactory {
   public IltBaseRenderer createValue() {
      return new ServerBaseRenderer();
   }
}
Then you can customize the renderer in CSS as follows:
 
setting."ilog.tgo.model.IltNetworkElement.Type"[name="Server"] {
   renderer: @+neRendererFactory0;
}
Subobject#neRendererFactory0 {
   class: 'MyNERendererFactory';
}
As illustrated in this example, you can create a network element with a specific type or set a type for it afterwards with either one of two methods.
 
ne.setType (Server);
or
 
ne.setAttributeValue (IltNetworkElement.TypeAttribute, Server);
Localizing network element types
In JViews TGO, the network element type defines how the object base will be represented. You may also be interested in displaying the name of the network element type in your application, for example, as a label in a table cell or as a tooltip.
All the predefined network element types have labels and tooltips specified in the JViews TGO resource bundle. See About globalization.
The resources that apply to network element types are identified as:
*ilog.tgo.NetworkElement_Type_<TYPE NAME> : network element type labels
*ilog.tgo.NetworkElement_Type_<TYPE NAME>_ToolTip : network element type tooltips
You can edit the values directly in the JViews TGO resource bundle file.
When you create new network element types, the label and tooltip information will also be retrieved from this resource bundle to be displayed, for example, in a table cell. As you create new network element types, register the corresponding entries into the resource bundle file, as follows.
Suppose that you have created the following new network element type:
 
IltNetworkElement.Type myNewType = new IltNetworkElement.Type("MyType");
You should declare the following properties in the JTGOMessages.properties file:
*ilog.tgo.NetworkElement_Type_MyType=My Type
*ilog.tgo.NetworkElement_Type_MyType_ToolTip=My New Network Element Type

Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.