Appendix C  Graphical Types

The concept of a graphical type enables the specification of an external graphical presentation for ConceptBase objects. The graphical type is declared using a special pre-defined attribute category. An application program then uses this information to determine the graphical presentation of an object.

The next subsection introduces the basic concepts behind graphical types, while section C.2 presents the standard graphical type definitions for the ConceptBase Graph Editor. Section C.3 describes the definition of application-specific types.

C.1  The graphical type model

A specific graphical type is defined as an instance of the object GraphicalType. For the new Graph Editor implemented in Java, this class has been specialized in a class JavaGraphicalType. Instances of this class specify a graphical represenation of an object by defining graphical attributes such as shape, color, line thickness, font etc. Since the actual attributes and their admissible value depend on the used visualization tool, the definition of GraphicalType looks very simple.

GraphicalType in Class
end

The declaration of a graphical type for a concrete object is done by using the attribute graphtype which is defined for Proposition and therefore available for all objects:

Proposition with
  attribute
     graphtype : GraphicalType
end

The attribute can be defined explicitely for an object or can be specified by using a deductive rule (see section C.2 for an example). For the Graph Editor application included in the usage enviroment, one can attach a priority value to each graphical type. If there multiple graphtype attributes defined for one object, the graphical type with the highest priority value will be used.

Many applications employ multiple notations to provide different perspectives on the same set of objects. Each perspective emphasizes on a specific aspect of the world, such as the data oriented, the process oriented and the behavior oriented viewpoint, and uses an aspect-specific notation. A graphical notation (as e.g. the Entity-Relationship diagram) typically consists of a set of different graphical symbols (as e.g. diamonds, rectangles, and lines). A graphical palette is used to combine the set of graphical types that together form a notation:

Individual GraphicalPalette in Class with
  attribute
     contains : GraphicalType
     default : GraphicalType
end

In such a setting the same object may participate in different perspectives. ConceptBase offers the possibility to specify multiple graphical types for the same object. A tool can then provide different graphical views on the same object. To get the desired graphical type of an object under a specific palette, an application program specifies the name of the actual graphical palette as answer format when querying the ConceptBase server. Although this mechanism is available for arbitrary application programs we restrict our description to the ConceptBase Graph Editor.

The default specification serves as a catch all: an answer object, for which none of the graphical types of the current palette is specified, is presented using the default graphical type of that palette.

C.2  The standard graphical types

The Graph Editor is implemented using the Java Programming Language. It is entirely based on the Swing toolkit (package javax.swing). The graphical objects shown in the Graph Editor are all instances of the class JComponent in the javax.swing package. User-defined representations of objects can be provided by overwriting a specific class of the Graph Editor (details are given below).

C.2.1  The extended graphical type model

Based on our experience with the old graph browser for X11, we have extended the graphical type model for the Graph Editor. First, the class GraphicalType has been specialized by a class JavaGraphicalType:

Class JavaGraphicalType isA GraphicalType with
 attribute
   implementedBy : String;
   property : String;
   priority : Integer
 attribute,rule
   rPriority : $ forall jgt/JavaGraphicalType (not (exists i/Integer
                 A_e(jgt,priority,i))) ==> A(jgt,priority,0) $
end

Individual DefaultIndividualGT in JavaGraphicalType with
  attribute,property
     bgcolor : "210,210,210";
     textcolor : "0,0,0";
     linecolor : "0,0,0";
     shape : "i5.cb.graph.shapes.Rect"
  attribute,implementedBy
     implBy : "i5.cb.graph.cbeditor.CBIndividual"
end

The object DefaultIndividualGT is an example for the instantiation of a graphical type. The attribute implementedBy specifies the full name of the Java class that provides the implementation for this graphical type. This class has to be a sub class of "i5.cb.graph.cbeditor.CBUserObject". The property attribute specifies name-value pairs which will be used by the Java implementation to set certain properties, e.g. color, shape, font¹. The priority value is used to resolve ambiguity if multiple graphical types apply to one object. The graphical type with the highest priority will be used. The rule specifies a default value of 0 for the priority.

The graphical palette has also been extended. There are now defaults for different types of objects, and graphical types for implicit links can be defined. Thus, the default attribute defined in GraphicalPalette will not be used anymore. The contains attribute has still to be used, i.e. a graphical type will only be used if it is also contained in the current graphical palette. Although the attributes are not declared as single and necessary, each graphical palette should have at least one and at most one attribute in these categories.

Class JavaGraphicalPalette isA GraphicalPalette with
  attribute
     defaultIndividual : JavaGraphicalType;
     defaultLink : JavaGraphicalType;
     implicitIsA : JavaGraphicalType;
     implicitInstanceOf : JavaGraphicalType;
     implicitAttribute : JavaGraphicalType
end

C.2.2  Default graphical types

For the standard objects, there are a number of predefined graphical types. There are contained in the graphical palette DefaultJavaPalette which is used by default by the Graph Editor.

The object DefaultJavaPalette has also some rules which define the default relationship between objects and graphical types, e.g. all instances of Class have the graphical type ClassGT.

If you want to customize the graphical types for your model, then you must define the new graphical types (see below) and then add them to a new graphical palette as instance of JavaGraphicalPalette. Take the default graphical palette as a starting point since you may want to reuse some of the existing graphical types. See file 03-ERD-GTs.sml at link for an example.

C.3  Customizing the graphical types

To support the user in defining his own graphical types we provide some examples and documentation of the properties.

There are two ways to customize the graphical types:

• Defining new graphical types with different properties using the provided implementations
  i5.cb.graph.cbeditor.CBIndividual and i5.cb.graph.cbeditor.CBLink
• Defining new graphical types with a different implementation class which extends
  i5.cb.graph.cbeditor.CBUserObject (or CBIndividual or CBLink)

Both possibilities will presented in the next two subsections.

C.3.1  Properties of CBIndividual and CBLink

The easiest way to modify the representation of an object in the Graph Editor is to load an existing graphical type, modify its properties and store it as a new graphical type.

The properties available and there meaning are given in the following. Note that colors have to be given as RGB color value, e.g. "0,0,0" is black, "255,0,0" is red, "255,255,255" is white, etc. Furthermore, all attributes have to be strings, even if they are just numbers, e.g. use "1" instead of 1 as attribute value.

bgcolor:

Background color of the shape (default: transparent)

textcolor:

Foreground color of the shape (i.e. text color) (default: black "0,0,0")

linecolor:

Color of the border of the shape (default: transparent)

linewidth:

Width of the border of the shape (default: "1")

edgecolor:

Color of the edge (default: black "0,0,0")

edgewidth:

Width of the edge (default: "1")

edgestyle:

possible values are: "continuous", "dashed", "dotted", "dashdotted" (default: "continuous")

shape:

The name of the class representing the shape and implementing the interface i5.cb.graph.shape.IGraphShape (default: no shape). The package i5.cb.graph.shape defines some useful default shapes, see below for details. The shape will be drawn in the background of the small component. In the default implementation, the small component is a transparent JLabel, thus the shape is completely visible. Note, that this might not be the case if you are going to change the implementation of a graphical type (see subsection C.3.3 below).

image:

The location of an image icon file that shall be used to display a node (CBIndividual). The image tag is a replacement for the shape attribute. The image icon can be in PNG, GIF, or JPG format. See subsection C.3.4 for more details.

label:

The label to be used for this object instead of the object name

align:

Alignment of the label (possible values are "center", "left", and "right"; default is "center")

size:

Size of the node in pixels, e.g. "20x20" (default: done automatically by Java LayoutManager)

font:

Name of the font to be used for the shape (e.g., "Arial", default: Default font of Java)

fontsize:

Size of the font in pixels (default: default font size of Java)

fontstyle:

The style of the font (e.g., "bold", "italic", "underlined", "bold,italic", ... )

Edges with empty label (anonymous edge) are displayed with a square dot in the middle of the edge. The color of the square dot is by default the edgecolor and its size is set to 6 pixels. If the graphical type of an anonymous edge has bgcolor defined, then the square dot is adjusted to the edgewidth and displayed in bgcolor.

Do not forget to include the new graphical type into the graphical palette. It is not necessary to define a new graphical palette, you can extend the default palette. Furthermore, you have to define the graphtype attribute of some object in such a way that it refers to the new graphical type. Make sure, that the new graphical type has a higher priority than other graphical type which might apply (10 is the highest priority of the default graphical types).

An example of user-defined graphical types can be found in D.2, see also link.

C.3.2  Providing a new implementation for a graphical type

The implementedBy attribute of a graphical type specifies the class name of a Java class implementing this graphical type. This class has to be a subclass of “i5.cb.graph.cbeditor.CBUserObject”. If you are going to implement your own class, it is most useful to extend CBIndividual or CBLink in the package i5.cb.graph.cbeditor.

The class CBUserObject provides several methods which can be overwritten to implement your own graphical types:

Component getSmallComponent()

returns the small component (i.e. the component which is shown first). The return value should be an instance of javax.swing.JComponent although only java.awt.Component is required as return value. AWT Component will probably not work correctly in the Swing-based Graph Editor. If the method returns null, then the result of getComponent() will be used to visualize the object.

Component getComponent()

returns the main component for this user object. This component is used when the small component is not shown. To be compatible with the graph editor which is implemented in JFC/Swing, the component should be a subclass of JComponent. This method may return null, but then getSmallComponent must return a value.

Shape getShape()

returns the shape for this component. Shape is defined in the package java.awt and represents any type of shape, e.g. polygon, rectangle, ellipse, etc. As said above, the shape is shown in the background of the small component, so it may not be visible if the small component is not transparent. The default implementation in CBIndividual and CBLink provide a transparent JLabel as small component so that the shape is visible. The Graph Editor contains several predefined shapes (see below).

boolean doCommit()

This method is called when the user has clicked on the "Commit" button. Changes that have been made within this component (e.g. within a form) can then be added to the list of objects to be removed/added from the database. If the method returns false, then the commit operation will be aborted.

Furthermore, the CBUserObject class provides several methods which might be useful for implementing new graphical types:

String toString()

returns the full object name of the Telos object which is represented by this user object

TelosObject getTelosObject()

returns the Telos object which is represented by this user object (see documentation of package i5.cb.telos.object for more details on TelosObject)

CBFrame getCBFrame()

returns the frame in which this object is presented (a CBFrame is an extension of a JInternalFrame)

ObjectBaseInterface getObi()

returns the ObjectBaseInterface (i.e. a connection to the server) of the current frame. This is useful if you want to execute your own queries to retrieve additional information from the server. (see documentation of package i5.cb.telos.object and i5.cb.api for more details)

String getProperty(String property)

returns the value of a property

boolean hasProperty(String property)

returns true if the property is defined for this graphical type

JPopupMenu getPopupMenu()

returns the popup menu for this object. By using this method you can extend the popup menu with own operations. If you overwrite this method, the operations in the default popup menu will not be available.

Example: The following example defines a graphical type that uses a JButton to visualize the object. Only the method getSmallComponent is overwritten. The background color of the button will be changed if the property bgcolor has been defined. The example shows that the implementation of graphical types is quite simple.

import i5.cb.graph.cbeditor.*;
import javax.swing.*;

import java.awt.Component;

/**
 * An example for a user defined CBUserObject
 */

public class MyOwnGraphType extends CBUserObject {

    public Component getSmallComponent() {
       JButton jButton=new JButton(this.getTelosObject().toString());
       if(hasProperty("bgcolor"))
          jButton.setBackground(CBUtil.stringToColor(getProperty("bgcolor")));
       return jButton;
    }
}

C.3.3  Shapes

The package i5.cb.graph.shape contains several shapes which might be useful for the ConceptBase Graph Editor. To use these shapes, you have to specify the full class name (including the package name) as value of the property shape of a graphical type.

The class GraphShapePolygon is the base class for most of the shapes defined here and might be used to define your own shapes. Its constructor is identical with the constructor of java.awt.Polygon:

public GraphShapePolygon(int[] xs, int[] ys, int num)

xs and ys describe the coordinates of the corners of the polygon and num is the length of the array xs or ys. Start and end point should be identical. For example, to define a triangle, you need the following code:

import i5.cb.graph.shape.GraphShapePolygon;

public class Triangle extends GraphShapePolygon {
    private static int xpoints[]={0,2,4,0};
    private static int ypoints[]={2,0,2,2};

    public Triangle() {
        super(xpoints,ypoints,4);
    }
}

C.3.4  Icons

You can specify an image icon that is displayed instead of a shape to be drawn for the small compoment of a node (CBIndividual). The syntax for specifying an image icon is

  image: "<image file location>"

You can specify either the URL of the image file or the local path of the file in the URL syntax. For example

Class AgentGT in JavaGraphicalType with
  rule
   gtrule : $ forall a/Agent (a graphtype AgentGT) $
  property
   textcolor : "0,0,0";
   linecolor : "0,0,0";
   image: "http://myserver.comp.eu/images/AgentIcon.png"
  implementedBy
   implBy : "i5.cb.graph.cbeditor.CBIndividual"
  priority
    pr : 20
end

associates the graphical type AgentGT to the image icon AgentIcon.png. You can also point to local files via the file protocol:

Class AgentGT in JavaGraphicalType with
  rule
    gtrule : $ forall a/Agent (a graphtype AgentGT) $
  property
    textcolor : "0,0,0";
    linecolor : "0,0,0";
    image: "file:///home/jonny/images/AgentIcon.png"
  implementedBy
    implBy : "i5.cb.graph.cbeditor.CBIndividual"
  priority
    pr : 20
end

Note that the image icon is looked up by the graph editor. Hence, the location must be in the file system of the computer on which the graph editor runs. If you place the image icon on a web server, then the graph editor will be able to fetch it from any computer provided that the access rights are set properly.

An example on using image icons is provided in the CB-Forum at link.

1

Colors are given as RGB color value, e.g. 210,210,210 is light grey and 0,0,0 is black.