Select Interactor

> > > > >

The select interactor allows you to select one or more objects and move them without performing a full refresh of the page.

To define one object, use the following tag:

<jvdf:selectInteractor id="select"/>

To set the object on the view, use the following tag:

<jvdf:diagrammerView id="thediagrammer" interactorId="select"/>

Note

If you just want to trigger a server-side action when an object is clicked, use the nodeOrLinkSelectInteractor instead.

Move Selection

The select interactor allows you to move the selection if the following conditions are met:

The moveAllowed property of the interactor is set to true (default value).
The server-side object is movable.
The node layout is disabled.

Basic Selection Management Configuration

You can customize the way the selection is performed and displayed by using a facet on the diagrammerView tag, as follows:

<jvdf:diagrammerView id="thediagrammer" interactorId="select">
  <f:facet name="selectionManager">
      <jvdf:selectionManager imageMode="false" […] />
  </f:facet>
</jvdf:diagramerView>

The selection manager has two display modes:

image mode

The image is refreshed after each selection. A new image is requested to the server at each selection which allows the client to get nice selection graphics.
regular mode

Rectangles representing the selection are displayed on top of the view. The round-trip to the server is minimal: the generation of a new image is not required and the response time is faster but the selection feedback is limited to a selection rectangle.

The default mode is the image mode.

Other parameters can be configured on the selection manager, like for example the line width or the color of the selection rectangle used in regular selection mode:

<jvdf:selectionManager lineWidth="2" lineColor="red"/>

Information on Selection

You can register a listener that is called when the selection changes:

<jvdf:selectionManager onSelectionChanged="displayProperties(selection)"/>

The onSelectionChanged attribute value is JavaScript™ code that is executed when the selection has changed. The execution context defines the variable selection , which stores the current selection as an array of IlvSelectionRectangle instances.

The JavaScript code can be a function as follows:

// Alert the ID and bounds of all the selected objects
function displayProperties(selection) {
  for (var i = 0; i < selection.length; i++)
   alert(selection[i].getID()+" "+selection[i].getBounds());  
}

Besides ID and bounds properties of the selected object, you might want to get also the properties of the selected node or link in the JViews Diagrammer model.

This can be done by configuring a property accessor on the selection manager:

<jvdf:selectionManager propertyAccessor="#{serverBean.propertyAccessor}" [...] />

With:

public class ServerBean {
  private IlvFacesDiagrammerPropertyAccessor accessor = 
  new IlvFacesDiagrammerPropertyAccessor();
  public IlvFacesDiagrammerPropertyAccessor getPropertyAccessor() {
    return accessor;
  }
}

The IlvFacesDiagrammerPropertyAccessor contains several methods that can be either called or redefined to configure or specialize the way it gives access to model properties.

Once done, in the JavaScript you can access all the methods of the IlvSelectionRectangle and code as follows:

// Alert all the properties of all the selected objects
function displayProperties(selection) {
  for (var i = 0; i < selection.length; i++) {
    var propertiesNames = selection[i].getObjectPropertyNames();
    for (var j = 0; j < propertiesNames.length; j++)
        alert(selection[i].getObjectProperty(propertiesNames[j]));
  }   
}

In addition, if the diagrammerView has been set as editable:

<jvdf:diagrammerView editable="true" [...] />

you can also set properties on the client such that they can be committed back to the model on the server. You can do this by using the following code:

// Modify a property on the first selected object
thediagrammer.getSelectionManager().getSelection()[0].
setObjectProperty("propertyName","propertyValue");
// [other modifications]
thediagrammer.getSelectionManager().
     commitSelectionProperties(true, oncompleted, onfailed);

where:

oncompleted is a JavaScript function that is called when the server has completed the changes, to handle errors that may have occurred while setting the new values. The parameter of the oncompleted method is an array of IlvSelectionPropertiesError objects.
onfailed is a JavaScript function that is called when the commit could not occur due to network problems.

To obtain selected object properties information on the client side while you are running the selection in image mode, you need to force an additional request by setting the property forceUpdateProperties to true . In regular mode this feature is available without any overhead.

Select an Object by Its Identifier

Objects can be selected on the client side by their identifier by means of the following JavaScript method: IlvAbstractSelectionManager.selectById.

The identifier of an object is retrieved through the SDM model (see Implementing the behavior of data model objects). You can also retrieve the identifier by using directly the JViews Diagrammer method getID.

You can select one object by means of the following JavaScript method call:

thediagrammer.getSelectionManager().selectById("nodeId");

This method call deselects the objects currently selected and selects the object with the identifier nodeId . You can extend or reduce the selection by selecting or deselecting a node as follows:

thediagrammer.getSelectionManager().selectById("nodeId", true);

This method call keeps the existing selection and selects the object with the identifier nodeId if it is not already selected, otherwise it deselects it.

Clear the Selection

To clear the selection use the following JavaScript method call: IlvAbstractSelectionManager.deselectAll

For example:

thediagrammer.getSelectionManager().deselectAll();

Select all the Objects

To select all the selectable objects use the following JavaScript method: IlvAbstractSelectionManager.selectAll

For example:

thediagrammer.getSelectionManager().selectAll();

Note

If the select interactor is set on the view and if the view has the focus, you can use CTRL+A to select all the objects.

Image Mode or Rectangle Mode

Using one mode rather than the other depends on your criteria: performance or graphic feedback.

Image mode provides a better graphic feedback but is slower because of the image generation and the need for an extra request to get additional information about the selection on the client.

Rectangle mode offers basic graphic feedback but better performance.

Move Selection

The select interactor also allows you to move the selection if:

The moveAllowed property of the interactor is set to true (default value).
The server-side object is movable.
The node layout is disabled.

Current section

The JViews Maps JSF component set