Customizing various aspects of card carriers
Customizing card types
In JViews TGO, the card type attribute defines how the object base is represented. Each card 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 base representation of card objects either by using an implementation of a predefined base renderer, such as
IltCardImageBaseRendererFactory or
IltCardSVGBaseRendererFactory, or by defining a new implementation of
IltCardBaseRenderer. The principle to create a new
IltCardBaseRenderer is the same as to create a new
IltNEBaseRenderer. For details, refer to
Extending the class IltNEBaseRenderer.
How to create and register a card type (using the API)
IltCard.Type MyType = new IltCard.Type("CType");
IltSettings.SetValue("Card.Type.CType.Renderer",
new IltBaseRendererFactory() {
public IltBaseRenderer createValue() {
return new MyCardTypeBaseRenderer();
}
});
How to create and register a card type (using CSS)
You can create new card types by using global CSS settings as shown in the following code sample.
setting."ilog.tgo.model.IltCard"{
types[0]: @+cardType0;
}
Subobject#cardType0 {
class: 'ilog.tgo.model.IltCard.Type';
name: "CType";
}
For more information, see
Using global settings.
How to customize a card type (using CSS)
You can also 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 is renderer.
setting."ilog.tgo.model.IltCard.Type"[name="CType"] {
renderer: @+cardRendererFactory;
}
Subobject#cardRendererFactory {
class: 'MyCardRendererFactory';
}
In this code sample, the name of the renderer factory class that is included in the search path is MyCardRendererFactory.
How to create a new card type using an image
The following code sample shows how to create a new card type and associate it with an image.
The full application is provided as part of the
JViews TGO demonstration software at
<installdir> /samples/equipment/imageRenderer.
String fileName = "rj45.png";
// create the new type that will be associated with the GIF image
IltCard.Type cardType = new IltCard.Type("RJ45");
try {
// Retrieve the image using the Image Repository
Image img =
IltSystem.GetDefaultContext().getImageRepository().getImage(fileName);
// then map the drawer factory created using the GIF with the new type
IltCardImageBaseRendererFactory factory =
new IltCardImageBaseRendererFactory(img, 255, 1, 255);
IltSettings.SetValue("Card.Type.RJ45.Label", "RJ45");
IltSettings.SetValue("Card.Type.RJ45.Renderer", factory);
// Note: the numerical values above have been adjusted using the
// Image Color Tuner application provided with JTGO.
} catch (Exception e) {
e.printStackTrace();
}
How to create a new card 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 card using one image per base style:
Create a new type of card
Using the API:
IltCard.Type cardType = new IltCard.Type("RJ45");
or, using global CSS settings:
setting."ilog.tgo.model.IltCard"{
types[0]: @+cardType0;
}
Subobject#cardType0 {
class: 'ilog.tgo.model.IltCard.Type';
name: "RJ45";
}
IltSettings.SetValue("Card.Type.RJ45.Label", "RJ45");
IltSettings.SetValue("Card.Type.RJ45.Renderer",
new IltCardDirectImageBaseRendererFactory());
or, using global CSS settings:
setting."ilog.tgo.model.IltCard.Type"[name=RJ45] {
renderer: @+cardRendererFactory;
}
Subobject#cardRendererFactory {
class: 'ilog.tgo.graphic.renderer.IltCardDirectImageBaseRendererFactory';
}
Define an image and an alarm color or gray-level parameter in CSS for each required base style
object."ilog.tgo.model.IltCard"["type"=RJ45]["objectState.Bellcore.State"=En
abledIdle] {
sourceImage: '@|image("CardRJ45_EnabledIdle.png")';
alarmColorLevel: 128;
}
object."ilog.tgo.model.IltCard"["type"=RJ45]["objectState.Bellcore.State"=Di
sabledIdle] {
sourceImage: '@|image("CardRJ45_DisabledIdle.png")';
alarmColorLevel: 140;
}
For details about how to create image base renderers, refer to
Creating network element types from images and customizing them.
The predefined card types have a label and a tooltip specified in the
JViews TGO resource bundle. For details, see
About globalization.
The resources that apply to card types are identified as:
ilog.tgo.Card_Type_<TYPE NAME> : card type labels
ilog.tgo.Card_Type_<TYPE NAME>_ToolTip : card type tooltips
You can edit the values directly in the JViews TGO resource bundle files.
When you create new card 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 declare new card types, register the corresponding entries into the resource bundle file, as follows:
Considering that you have created the following new card type:
IltCard.Type MyType = new IltCard.Type("CType");
You should declare the following properties in the JTGOMessages.properties file:
ilog.tgo.Card_Type_CType=C Type ilog.tgo.Card_Type_CType_ToolTip=My New Card Type Customizing card tiny types
In the tree and table components, you can represent card objects as tiny objects. Each card type can be associated with a tiny base renderer that is responsible for drawing the tiny graphic representation.
JViews TGO allows you to customize the tiny type representation by using one of the predefined base renderer factories, such as
IltTinyImageBaseRendererFactory or
IltTinySVGBaseRendererFactory, or by creating your own implementation of
IltTinyBaseRenderer. The principle to create a new
IltTinyBaseRenderer is the same as to create a new
IltNEBaseRenderer. For details, refer to
Extending the class IltNEBaseRenderer.
How to modify a card tiny representation (using the API)
IltCard.Type MyType = new IltCard.Type("CType");
IltSettings.SetValue("Card.TinyType.CType.Renderer",
new IltTinyImageBaseRendererFactory(YOUR_IMAGE,
YOUR_IMAGE_PARAMETERS));
How to modify a card tiny representation (using CSS)
You can customize the renderer using global CSS settings. The CSS property to customize here is tinyRenderer. In the example below, the name of the renderer factory class that is included in the search path is MyCardTinyRendererFactory.
setting."ilog.tgo.model.IltCard.Type"[name="CType"] {
tinyRenderer: @+cardTinyRendererFactory0;
}
Subobject#CardTinyRendererFactory0 {
class: 'MyCardTinyRendererFactory';
}
For details about how to create image base renderers, refer to
Creating network element types from images and customizing them.
Customizing card names
Card names can be customized using the same properties as for the other predefined business objects. For a complete list of properties that apply to the card name representation, refer to
Customizing the label of a business object.
In addition to these properties, card objects have the following specific property.
CSS property for card names
Property Name | Type | Default Value | Description |
verticalLabelStacksGlyphs | boolean | false | Denotes the way a vertical label is built. If this property is set to true, the vertical label is build by stacking the characters. In this case, the properties labelWrappingMode, labelWrappingWidth, and labelWrappingHeight are ignored. |
How to customize card names
While most of the predefined business objects display their label at the bottom of the base, cards display their label in its center. The following example shows how you can adjust the position of the label:
object."ilog.tgo.model.IltCard" {
labelPosition: Bottom;
labelSpacing: 25;
}
Customizing card states and alarms
Cards display state and alarm information in the same way as other predefined business objects. For a complete list of the relevant properties, refer to
Customizing object and alarm states of predefined business objects.
Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.
