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";
}

Map an IltCardDirectImageBaseRendererFactory to the new type

Using the API SetValue:

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.