Styling > Customizing Subnetworks

Subnetworks allow you to create applications that display a network inside another network. They are created automatically by the ILOG JViews TGO network component when you define a containment relationship between objects in the data source.

A subnetwork can be defined as any business object with child objects in the network component. You can display it either collapsed or expanded in the network component.

images/collapsedSubnetwork.gif

Figure 7.1 Collapsed Subnetwork

images/expandedSubnetwork.gif

Figure 7.2 Expanded Subnetwork
How to Customize the Overview Object of a Subnetwork

In the collapsed representation, the subnetwork is displayed using an overview object, which is the graphic representation of the parent object as defined in the business model.

For example, in the sample

<installdir>/samples/network/basic, where <installdir> is the directory where JViews TGO is installed,

a subnetwork is defined with the following properties:

The graphic representation of the subnetwork in its collapsed state is provided by the same attributes and properties defined for network element objects. When customizing your subnetwork objects, you should use the CSS properties that apply to the business class used as the overview object.

#SubNetwork1 {
  functionVisible: false;
  detailLevel: MaximumDetails;
}
How to Customize the Expanded Representation of a Subnetwork

The following example illustrates the use of CSS to customize the graphic representation of an expanded subnetwork:

object."test.MyObject" {
  subnetworkTitle: @name;
  subnetworkTitleJustification: CENTER;
  subnetworkFrame: TITLEBAR_FRAME;
  subnetworkTitleColor: white;
  subnetworkRightMargin: 3;
  subnetworkLeftMargin: 3;
}

Please refer to the following table for a complete list of properties that can be used to customize subnetworks in their expanded representation.

Table 7.1 CSS Properties for Expanded Subnetworks
Property Name 
Type 
Default Value 
Description 
subnetworkBackground 
Color 
Color(128,128,128,128) 
Denotes the background color of a subnetwork. 
subnetworkBottomMargin 
float 
5 
Denotes the bottom margin of the frame of a subnetwork. 
subnetworkCollapseIconVisible 
boolean 
true 
Denotes whether the collapse icon is added to the detail objects of a subnetwork. 
subnetworkExpansionIconVisible 
boolean 
true 
Denotes whether the in-place expansion icon is added to the overview object of a subnetwork. 
subnetworkForeground 
Color 
Color.black 
Denotes the color of the frame around the subnetwork. 
subnetworkFrame 
IlpObjectFrameType 
FILLED_RECTANGLE_FRAME 
Denotes the type of frame used by the subnetwork. The possible values are: 
TITLEBAR_FRAME 
FILLED_RECTANGLE_FRAME 
NO_FRAME 
subnetworkLeftMargin 
float 
5 
Denotes the left margin of the frame of a subnetwork. 
subnetworkOpaque 
boolean 
false 
Defines whether the subnetwork is opaque or not. The value of this property is taken into account only if property subnetworkFrame is set to TITLEBAR_FRAME. If subnetworkFrame is set to NO_FRAME, subnetworkOpaque is automatically set to false. If subnetworkFrame is set to FILLED_RECTANGLE_FRAME, subnetworkOpaque is automatically set to true
subnetworkRightMargin 
float 
5 
Denotes the right margin of the frame of a subnetwork. 
subnetworkShowingTitle 
boolean 
false 
Defines whether the subnetwork shows the title or not. 
subnetworkTitle 
String 
Empty string 
Defines the title of the subnetwork. 
subnetworkTitleColor 
Color 
Color.white 
Defines the color used in the title of the subnetwork. 
subnetworkTitleJustification 
int 
Left|Top 
Defines the justification of the title of the subnetwork. The possiblle values are: 
Left|Top 
Right|Top 
Center|Top 
Left|Bottom 
Right|Bottom 
Center|Bottom 
Left|Top|Wrapped 
Right|Top|Wrapped 
Center|Top|Wrapped 
Left|Bottom|Wrapped 
Right|Bottom|Wrapped 
Center|Bottom|Wrapped 
Examples of values: 
Left|Top|Wrapped, or Right|Bottom 
subnetworkTopMargin 
float 
5 
Denotes the top margin of the frame of a subnetwork. 

How to Use Subnetwork Properties in a User-defined Class
object."mypackage.MyType" {
    subnetworkTitle: @name;
    subnetworkTitleJustification: Center;
    subnetworkFrame: TITLEBAR_FRAME;
    subnetworkTitleColor: blue;
    subnetworkRightMargin: 3;
    subnetworkLeftMargin: 3;
}
How to Customize Subnetwork Interactors

The IlpGraphController methods setCollapsionBackgroundInteractor and setExpandInteractor can be used to customize subnetwork interactors to replace the default behavior of expand/collapse when double clicking a subnetwork.

Example

IlpDefaultObjectInteractor objInteractor = new IlpDefaultObjectInteractor();
Action myAction = new TestAction();
objInteractor.setGestureAction(IlpGesture.BUTTON1_DOUBLE_CLICKED, myAction);
objInteractor.setPopupMenuFactory(new TestPopupMenuFactory());
networkComponent.getController().
  setCollapsionBackgroundInteractor(objInteractor);
networkComponent.getController().setExpansionInteractor(objInteractor);