Interacting with the network view

The IlpNetwork allows you to associate behavior with the network view as a whole and with the business objects it contains. JViews TGO provides predefined view interactors to manage the behavior of the network view. See View interactors.

With the default view interactors, you can:

associate actions with mouse events and focus events
associate actions with keyboard events
define a pop-up menu factory to build a pop-up menu that displays in the view

Each view interactor works with one network view only and is managed by the network controller. A network view can have several interactors, but only one interactor is active at a time.

View interactors have two modes of operation:

Transient
Permanent

In transient mode, the view interactor removes itself from the network view when it has performed its action.

In permanent mode, the view interactor remains in the view until the controller removes it.

By default, view interactors are permanent.

View interactors can display a pop-up menu.

A view interactor has a context implemented through IlpViewInteractionContext. When a user gesture is completed, the network view clones this context and makes it accessible through IlpViewActionEvent.

The predefined view interactors are in the ilog.tgo.interactor package and are subclasses of IlvManagerViewInteractor. When one of these interactors is installed, it must be wrapped in an IlpViewsViewInteractor.

How to wrap a predefined view interactor when installing it

IlvManagerViewInteractor iltInteractor = new Ilt...Interactor();
IlpViewInteractor ilpInteractor =
  new IlpViewsViewInteractor(iltInteractor);
controller.setViewInteractor(ilpInteractor);

Setting the view interactor

The method setViewInteractor allows you to set the view interactor, that is, the object-independent interactor, which is active at a given moment in the view. This interactor is replaced whenever the end user activates a different interactor. Such activation occurs, for example, when the user clicks a toolbar button.

Some interactors are one-shot interactors, that is, they have the attribute permanent:false in CSS. When such an interactor finishes its interaction, it is replaced by the default view interactor.

To customize through CSS, refer to The Interactor rule.

View interactor and default view interactor

When you use the setViewInteractor method you are attaching the specified interactor directly to the view. On the other hand, the setDefaultViewInteractorallows you to define the interactor that will be attached when the current interactor is detached from the view and no other interactor is attached. The default interactor is not attached automatically to the view, so it will not be available immediately.

The following example combines both methods:

// Configuring the default view interactor and making
// it active
IltSelectInteractor selInteractor = new IltSelectInteractor();
selInteractor.setEditingAllowed(true);
IlpViewsViewInteractor viewsInteractor = 
      new IlpViewsViewInteractor(selInteractor);

network.setDefaultViewInteractor(viewsInteractor);
network.setViewInteractor(viewsInteractor);

In this example, you define the default view interactor through the call to setDefaultViewInteractor , and you activate it through the call to setViewInteractor so that it is immediately available.

How to associate an action with a mouse event and modifier in the network view

You can associate actions with mouse events, with or without modifiers, by using either CSS or the API.

The following extract shows how to customize the default view interactor in CSS:

Network {
  interactor: true;
}

Interactor {
  viewInteractor: @+viewInt;
} 

Subobject#viewInt {
  class: 'ilog.cpl.graphic.views.IlpViewsViewInteractor';
  action[0]: @+viewAction0;
}

Subobject#viewAction0 {
  class: 'ilog.cpl.interactor.IlpGestureAction';
  gesture: BUTTON3_CLICKED;
  modifiers: shift;
  action: @+myAction;
}

Subobject#myAction {
  class: 'my.custom.ActionImplementation';
}

The same configuration can be achieved through the API, as follows:

IlpNetwork network = // ...

// Retrieve the view interactor
IlpViewInteractor viewInteractor = network.getDefaultViewInteractor();

// Create an actionAction 
myAction = new MyAction();

// Clicking the 3rd mouse button will trigger myAction
viewInteractor.setGestureAction(IlpGesture.BUTTON3_CLICKED,
                                InputEvent.SHIFT_DOWN_MASK,myAction);

You can also customize the actions that are associated with the interactors defined in the network component toolbar. This configuration is done with the toolbar button definition.

How to associate an action with a mouse event for a network ToolBar button interactor

You can associate actions with mouse events when one of the interactors defined in the network component toolbar is active. The following CSS extract illustrates this configuration:

Network {
  toolbar: true;
}

ToolBar {
  enabled: true;
  button[0]: @+SelectButton;
}

Subobject#SelectButton {
  actionType: "Select";
  usingObjectInteractor: true;
  opaqueMove: true;
  action[0]: @+action0;
}

Subobject#action0 {
  gesture: BUTTON1_DOUBLE_CLICKED;
  class: 'my.custom.ActionImplementation';
}

In this configuration, the action ActionImplementation is triggered when a double-click event occurs while the selection interactor is set in the network view. You can define any list of actions associated with gestures by using the indexed property action . To be accepted by the CSS customization, the action class must be a JavaBean™.

The CSS to associate an action with a mouse event and a modifier is slightly different:

Subobject#SelectButton { 
  actionType: "Select"; 
  usingObjectInteractor: true; 
  opaqueMove: true; 
  action[0]: @+gestureAction0; 
} 

Subobject#gestureAction0 { 
  class: 'ilog.cpl.interactor.IlpGestureAction'; 
  gesture: BUTTON1_DOUBLE_CLICKED; 
  modifiers: 'shift,control'; 
  action: @+action0; 
} 

Subobject#action0 { 
  class: 'my.custom.ActionImplementation'; 
}

You can find out whether this event occurred on an IlpObject by means of the following code (which should be in your Action implementation):

How to check whether a given action occurred in the network view interactor

// Implementation of the ActionListener interface
public void actionPerformed(ActionEvent e) {
  // JTGO interactors use IlpViewActionEvent
  IlpViewActionEvent viewEvent = (IlpViewActionEvent)e;
  // Get the IlpObject (if any) where the interaction occurred
  IlpObject ilpObj = viewEvent.getIlpObject();
  // Perform operation on the given object
}

How to associate an action with a keyboard event in the network view

You can associate actions with keyboard events by using either CSS or the API.

The following extract shows how to proceed in CSS:

Network {
  interactor: true;
}  

Interactor {
  viewInteractor: @+viewInt;
}

Subobject#viewInt {
  class: 'ilog.cpl.graphic.views.IlpViewsViewInteractor';
  action[0]: @+viewAction0;
}

Subobject#viewAction0 {
  class: 'ilog.cpl.interactor.IlpKeyStrokeAction';
  keyStroke: 'typed D';
  action: @+myAction;
}

Subobject#myAction {
  class: 'my.custom.ActionImplementation';
}

The same configuration can be achieved through the API, as follows:

// Create an actionAction myAction = new MyAction();
// Typing CTRL+D will trigger myAction
viewInteractor.setKeyStrokeAction(KeyStroke.getKeyStroke('D',java.awt.Event.CTRL_MASK),
                                  myAction);

You can also customize the keystroke actions that are associated with the interactors defined in the network component toolbar. This configuration is performed with the toolbar button definition. The following CSS extract illustrates how this can be achieved:

How to associate an action with a keyboard event for a network toolbar button interactor

You can associate actions with keyboard events when one of the interactors defined in the network component toolbar is active. The following CSS extract illustrates this configuration:

Network {
  toolbar: true;
}

ToolBar {
  enabled: true;
  button[0]: @+SelectButton;
}

Subobject#SelectButton {
  actionType: "Select";
  usingObjectInteractor: true;
  opaqueMove: true;
  action[0]: @+action0;
}

Subobject#action0 {
  key: "control A";
  class: "ilog.cpl.graph.action.IlpSelectAllObjectsAction";
}

In this configuration, the action " IlpSelectAllObjectsAction " is triggered when a Control-A keyboard event occurs while the selection interactor is set in the network view. You can define any list of actions associated with keyboard events by using the indexed property action . To be accepted by the CSS customization, the action class must be a JavaBean.

How to define a pop-up menu factory for the network view

You can customize a pop-up menu factory for the network view either through CSS or through the API.

The following extract shows how to add a pop-up menu factory through CSS:

Network {
  interactor: true;
}

Interactor {
  viewInteractor: @+viewInt;
}

Subobject#viewInt {
  class: 'ilog.cpl.graphic.views.IlpViewsViewInteractor';
  popupMenuFactory: @+viewPopupMenuFactory;
}

Subobject#viewPopupMenuFactory {
  class: MyPopupMenuFactory;
}

The same configuration can be achieved through the API, as follows:

// Subclass IlpAbstractPopupMenuFactory, which has useful shortcuts
IlpPopupMenuFactory popupMenuFactory = new IlpAbstractPopupMenuFactory() {
  // Add the identifier of each of the selected objects to the menu
  public JPopupMenu createPopupMenu (IlpObjectSelectionModel ilpSelectionModel)  
{
    // Create an empty popup menu
    JPopupMenu menu = new JPopupMenu();
    // Access the selected objects from the selection model
    Collection selectedObjects = ilpSelectionModel.getSelectedObjects();
    // fill the menu according to the current selection
    return menu;

  }
};

The following code shows you how to associate the defined pop-up menu factory with the network component:

How to associate a pop-up menu factory with the network component

// Set the popup menu factory to the view interactor
viewInteractor.setPopupMenuFactory(popupMenuFactory);

You can also customize a pop-up menu factory that is associated with the interactors defined in the network component toolbar. This configuration is performed with the toolbar button definition. The following CSS extract illustrates how this can be achieved:

How to define a pop-up menu factory for a network toolbar button interactor

The following CSS extract illustrates this configuration:

Network {
  toolbar: true;
}

ToolBar {
  enabled: true;
  button[0]: @+SelectButton;
}

Subobject#SelectButton {
  actionType: "Select";
  usingObjectInteractor: true;
  opaqueMove: true;
  popupMenuFactory: @=viewPopupMenuFactory;
}

Subobject#viewPopupMenuFactory {
  class: 'AlarmPopupMenuFactory';
}

The pop-up menu factory is customized using property popupMenuFactory in the button configuration. To be accepted during the CSS customization, the pop-up menu factory class must be a JavaBean.

Selection interactor

The IltSelectInteractor class allows you to select, move, and interact directly with objects. You can:

Click an object to select it and deselect all other objects.
Use Shift-click to select an unselected object or to deselect a selected object while keeping other prior selected objects selected.
Drag a selection rectangle to select all objects within this rectangle.
Drag one selected object and thereby cause all other selected objects to move in relation to it.

If setUsingObjectInteractor(true) is called on the interactor, then you can also:

Use other gestures that are understood by a specific object interactor.

You can configure the selection interactor to use Ctrl-click instead of Shift-click for multiple selection.

How to configure the selection interactor for multiple selection in the network view

In CSS, use the following rules:

Subobject#SelectButton {
  multipleSelectionModifier: "java.awt.event.InputEvent.CTRL_MASK";
  selectionModifier: "java.awt.event.InputEvent.SHIFT_MASK";
}

In the API, use the following code:

setMultipleSelectionModifier(InputEvent.CTRL_MASK);
setSelectionModifer(InputEvent.SHIFT_MASK);

Group reshape interactor

The IltEditGroupInteractor class allows you to change the shape of rectangular, polygonal, and linear groups ( IltGroup, IltLinearGroup, IltRectGroup and IltPolyGroup). Clicking an object starts shape editing interaction. Clicking the background ends it.

For polygonal and linear groups:

Dragging a vertex moves it.
Ctrl-click on a vertex removes it.
Ctrl-click on an edge adds a vertex at that point on the edge.

Make rectangular node interactor

The IltMakeRectGroupInteractor class creates a node with a rectangular shape ( IltRectGroup). One corner of the rectangle is denoted by the point where the cursor is located when the mouse button is released. Make sure that you do really move the mouse between the time when you press and the time when you release the mouse button. Otherwise, the shape is created empty and the node might be invisible.

Make polygonal node interactor

The IltMakePolyGroupInteractor class creates a node with a polygonal shape ( IltPolyGroup). A point is added each time the user clicks. Double-clicking marks the last point to be added.

Make polyline node interactor

The IltMakeLinearGroupInteractor class creates a node with a polyline shape ( IltLinearGroup). A point is added each time the user clicks. Double-clicking marks the last point to be added.

Make link interactor

The IltMakeLinkInteractor class creates links ( IltLink) between nodes. This interactor works in the following way: the user clicks one node and then goes on dragging the mouse over another node so that the two nodes are selected. When the user releases the mouse, a link is drawn between the two nodes.

For a detailed description of interactors and gestures, refer to Interacting with the graphic components.

Current section

Network component services