skip to main content
Programmers documentation > Styling > Customizing off-page connectors > Customizing new off-page connector types
 
Customizing new off-page connector types
The principle to create new types of off-page connectors is the same as to create new types of network elements. For details, refer to Customizing network element types.
Customizing the base renderer of a connector type
In Rogue Wave® JViews TGO, the off-page connector type determines how the object base is represented. Each off-page connector type is associated with a specific base renderer that is in charge of drawing the object according to its type and alarm information.
In JViews TGO, you can extend the base representation of off-page connectors by using one of the predefined base renderer factory classes ( IltOPCImageBaseRendererFactory or IltOPCSVGBaseRendererFactory), or by implementing your own subclass of IltOPCBaseRenderer for each new type of off-page connector that you want to create.
How to create a new off-page connector type from an image (using the API)
The following code extract shows how to create a new IltOffPageConnector type and associate it with an image so that it can be displayed in the JViews TGO graphic components.
 
// Create the new OPC type
IltOffPageConnector.Type opcType = new IltOffPageConnector.Type("MyType");
 
// Retrieve the image and create the base renderer factory
Image img =
IltSystem.GetDefaultContext().getImageRepository().getImage("type.png");
IltOPCImageBaseRendererFactory factory = new
IltOPCImageBaseRendererFactory(img);
 
// Associate the new OPC type with the image base renderer factory
IltSettings.SetValue("OffPageConnector.Type.MyType.Renderer", factory);
How to create a new off-page connector type from an image (using CSS)
You can create new off-page connector types by using global CSS settings (for more information, see Using global settings).
 
setting."ilog.tgo.model.IltOffPageConnector"{
   types[0]: @+opcType0;
}
Subobject#opcType0 {
  class: 'ilog.tgo.model.IltOffPageConnector$Type';
  name: "MyType";
}
How to customize an off-page connector renderer (using CSS)
You can customize the renderer 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 MyOPCRendererFactory.
 
setting."ilog.tgo.model.IltOffPageConnector.Type"[name="MyType"] {
   renderer: @+opcRendererFactory1;
}
Subobject#opcRendererFactory1 {
   class: 'MyOPCRendererFactory';
}
How to create a new off-page connector type 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 needed base style.
To create a new type of off-page connector using an image per base style:
1. Create a new type of off-page connector
Using the API:
 
IltOffPageConnector.Type opcType = new IltOffPageConnector.Type("MyType");
or, using global CSS settings:
 
setting."ilog.tgo.model.IltOffPageConnector"{
   types[0]: @+opcType0;
}
 
Subobject#opcType0 {
   class: 'ilog.tgo.model.IltOffPageConnector.Type';
   name: "MyType";
}
2. Map an IltOPCDirectImageBaseRendererFactory to the new type
Using the API SetValue:
 
IltSettings.SetValue("OffPageConnector.Type.MyType.Renderer",
    new IltOPCDirectImageBaseRendererFactory());
or, using global CSS settings:
 
setting."ilog.tgo.model.IltOffPageConnector.Type"[name="MyType"] {
   renderer: @+opcRendererFactory1;
}
 
Subobject#opcRendererFactory1 {
   class: 'ilog.tgo.graphic.renderer.IltOPCDirectImageRendererFactory';
}
3. Define an image and an alarm color or gray-level parameter in CSS for each required base style
 
object."ilog.tgo.model.IltOffPageConnector"["type"=MyType]["objectState.Bell
core.State"=EnabledIdle] {
  sourceImage: '@|image("OPCMyType_EnabledIdle.png")';
  alarmColorLevel: 128;
}
object."ilog.tgo.model.IltOffPageConnector"["type"=MyType]["objectState.Bell
core.State"=DisabledIdle] {
  sourceImage: '@|image("OPCMyType_DisabledIdle.png")';
  alarmColorLevel: 140;
}
For details about how to create image base renderers, refer to Creating network element types from images and customizing them.
Labels and tooltips for connector types
The predefined off-page connector types have a label and a tooltip specified in the JViews TGO resource bundle.
The resources that apply to off-page connector types are identified as:
*ilog.tgo.OPC_Type_<TYPE NAME> : off-page connector type labels
*ilog.tgo.OPC_Type_<TYPE NAME>_ToolTip : off-page connector type tooltips
You can edit the values directly in the JViews TGO resource bundle files.
When you create new off-page connector types, the label and tooltip information will also be retrieved from the same resource bundle to be displayed, for example, in a table cell. As you declare new types, register the corresponding entries in the resource bundle file.
Suppose that you have created the following new off-page connector type:
 
IltOffPageConnector.Type opcType = new IltOffPageConnector.Type("MyType");
You should declare the following properties in the JTGOMessages.properties file:
*ilog.tgo.OPC_Type_MyType=My Type
*ilog.tgo.OPC_Type_MyType_ToolTip=My Off-Page Connector Type

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