Tutorial: Supporting Containment of Shapes
Version: 0.1
|
Date: August 11, 2005
|
Contents
·
Overview
·
References
·
Introduction
·
Supporting containment of
shapes
·
Show containment feedback
inside the container
·
Summary
[
back to top]
This tutorial provides the reader with the steps to containment
of shapes with-in other shapes on the diagram surface.
[
back to top]
This tutorial references the following tutoral:
Create a shape
[
back to top]
In this tutorial, we will use the Logic Diagram Example to
illustrate how to create a circuit shape that can contain other
logic elements (i.e. LED, And Gate etc.). To gain familiarity with
the Logic Diagram Example, refer to the
Logic ExampleGuide.
Having shapes contain other shapes is a common scenario that many
diagram editors need to handle. This is seen in the logic
example in the Circuit shape. The top level Circuit shape is
added to the palette and diagram surface in the same manner as the
LED shape. The difference is in how the view factory
initializes the view on creation. It is initializes with a
sub view that allows for containment with-in the top level
view. To demonstrate this we'll consider how the Circuit
shape was added to the Logic example.
See
#Add entries to thecontribution for the palette provider.
Add new View provider entry for the Circuit shape
This mechanism is the same as the LED shape except that we will
create a sub view inside the Circuit shape that will store the
children views. It is necessary to encapsulate this within a
sub view because we want to have the ability to collapse the sub
view to hide the children.
See
#Add new View providerentry
In the CircuitViewFactory class we create the notation view for
the Circuit and additionally we will create a child that will be
the container for views created by the user from the palette
with-in the Circuit.
In CircuitViewFactory:
/**
* @see
org.eclipse.gmf.runtime.diagram.ui.internal.view.AbstractNodeView#decorateView(org.eclipse.gmf.runtime.diagram.ui.internal.view.IContainerView,
*
org.eclipse.core.runtime.IAdaptable, java.lang.String, int,
boolean)
*/
protected void decorateView(IContainerView containerView,
IAdaptable semanticAdapter, String semanticHint, int index,
boolean persisted) {
super.decorateView(containerView, semanticAdapter, semanticHint,
index,
persisted);
getViewService().createNodeView(semanticAdapter, this,
"LogicCompartment", IView.APPEND); //$NON-NLS-1$
}
The controller for this container view is an EditPart called the
'ShapeCompartmentEditPart'. This EditPart is collapsible and
simulates some of the behavior of the root diagram drawing
surface. In the Logic example we override the default
'ShapeCompartmentEditPart' with a class called
'LogicShapeCompartmentEditPart'. This override is needed to
improve the usability of the drag behavior. By default, the
shape compartment allows marquee selection of children with-in its
bounds. However, this makes it difficult to move the top
level shape. We decided to override this behavior to allow
for more intuitive drag behavior of the Circuit itself. To
create the 'LogicShapeCompartmentEditPart' create the EditPart
provider entry for it with the id 'LogicCompartment' in the
LogicEditPartProvider class.
See
#Add new EditPart providerentry
To let the circuit contain a subcontainer for the
shapecompartment, set the layout manager as
ConstrainedToolbarLayout when creating a circuit figure. Otherwise
the circuit can not position the contained shape compartment
correctly with-in it's bounds.
In CircuitEditPart:
/**
* Creates a new Circuit Figure and returns it.
*
* @return Figure representing the circuit.
*/
protected NodeFigure createMainFigure() {
NodeFigure nf =
FigureFactory.createNewCircuit();
ConstrainedToolbarLayout
layout = new ConstrainedToolbarLayout();
nf.setLayoutManager(layout);
return nf;
}
Install a new edit policy 'ContainerHighlightEditPolicy' on
CircuitEditPart to highlight circuits when selected. Make
ContainerHighlightEditPolicy subclass from ContainerEditPolicy in
org.eclipse.gmf.runtime.diagram.ui plug-in. Overwrite
'showTargetFeedback' function in AbstractEditPolicy class.
In ContainerHighlightEditPolicy:
public void showTargetFeedback(Request request){
if(request.getType().equals(RequestConstants.REQ_MOVE) ||
request.getType().equals(RequestConstants.REQ_ADD) ||
request.getType().equals(RequestConstants.REQ_CLONE) ||
request.getType().equals(RequestConstants.REQ_CONNECTION_START)
||
request.getType().equals(RequestConstants.REQ_CONNECTION_END)
||
request.getType().equals(RequestConstants.REQ_CREATE)
)
showHighlight();
}
[
back to top]
In this tutorial, we did the following:
- Created container shape
- Learned how to display containment feedback when dragging
inside container.
Copyright
(c) 2000,2005 IBM Corporation and others. All Rights
Reserved.