STP/BPMN Component/EclipseCon2008

Get the most of the BPMN modeler

This page features the tutorial Get the most of the BPMN modeler for EclipseCon 2008.

This page is related to Developing with the STP BPMN modeler and Using the STP BPMN modeler.

Get the code

through Eclipse spaces

Through the STP Subversion

Tutorial outline

• 16h: Presentation
• 16h15: Modeling BPMN
• 16h45: Interactions with the modeler
• 17h05: Get your own editor
• 17h35: Future plans and conclusions
• 17h50: Questions

BPMN modeling sample

Bugzilla project

Below is a list of items we want to cover during the BPMN modeling sample.

The bugzilla process

• Palette
• Popup toolbar
• Appearance tab
• Creating basic shapes
  • Different activity types
  • Gateways
• Sequence and messaging edges
  • Connection rules
  • Customized handles
  • Customize the edge and the reset connection button
  • Change the order of edges for an activity
• Insert space tool
• Using artifacts
  • TODO tags
• Validation
  • Using the builder to validate the diagram
• Documentation
  • Attaching a reference to a project file to a shape
  • Opening a file

The annotation coding sample

Link to the code

The bug view

This sample demonstrates how you can integrate the BPMN modeler with an external application. Our coding sample will consist in creating a new plugin, which will transform bugs into text annotations during a drag and drop operation.

In this sample we will use a plugin (org.eclipse.bpmn.sample.bugView) which shows a tree view of various bugs.

Creating the drag and drop plugin

Create the plugin, make it dependent of org.eclipse.stp.bpmn.diagram and org.eclipse.stp.bpmn.sample.bugView.

IDnDHandlers

Open the extensions tab and create a new extension for org.eclipse.core.runtime.adapters:

<extension point="org.eclipse.core.runtime.adapters">
   <factory adaptableType="org.eclipse.stp.bpmn.sample.bugView.bug.view.IBug" 
            class="org.eclipse.stp.bpmn.sample.bugDnD.dnd.BugAdapterFactory">
      <adapter type="org.eclipse.stp.bpmn.dnd.IDnDHandler"/>
   </factory>
</extension>

Then, we create the adapter factory by naming it BugAdapterFactory and placing it in dnd package under the plugin class.

The contents of the adapter factory should like this:

public class BugAdapterFactory implements IAdapterFactory {
 
    public Object getAdapter(Object adaptableObject, Class adapterType) {
        if (adaptableObject instanceof IBug && 
                IDnDHandler.class.equals(adapterType)) {
            return new BugDnDHandler((IBug) adaptableObject);
        }
        return null;
    }
 
    public Class[] getAdapterList() {
        return new Class[] {IDnDHandler.class};
    }
 
}

We create a BugDnDHandler class that will extend AbstractViewDnDHandler.

In its constructor this class takes a IBug object.

You can split the IDnDHandler implementation into two aspects. It implements a menu look and feel on one hand, and returns a command on the other hand.

We determine the number of items to show in the menu, and we provide a label and an image for each of them.

public int getItemCount() {
        return 1;
    }
 
    public Image getMenuItemImage(IGraphicalEditPart hoverPart, int index) {
        if (bug.getState() == IBug.FIXED) {
            return BugView.BUG_FIXED;
        } else {
            return BugView.BUG;
        }
    }
 
    public String getMenuItemLabel(IGraphicalEditPart hoverPart, int index) {
        return "Drop a bug over the diagram";
    }

Now for the interesting bits: the drop command itself. public Command getDropCommand(IGraphicalEditPart hoverPart, int index, Point dropLocation) { BPMNVisual2ProcessGenerator generator = new BPMNVisual2ProcessGenerator(); TextAnnotation textA = generator.addTextAnnotation(null, bug.getSummary()); Map<String, String> details = new HashMap<String, String>(); details.put("state", String.valueOf(bug.getState())); details.put("number", String.valueOf(bug.getNumber())); generator.addAnnotation(textA, BUG_ANNOTATION_SOURCE, details); generator.generateViews(); View textAnnotationView = generator.getSemantic2notationMap().get(textA);   return getDropViewCommand(Collections.singletonList(textAnnotationView), dropLocation, hoverPart); }

In this method, we use a generator to generate semantic elements and their views. Let's create the generator: BPMNVisual2ProcessGenerator generator = new BPMNVisual2ProcessGenerator(); Now we use it to create a text annotation that we annotate with an EAnnotation. TextAnnotation textA = generator.addTextAnnotation(null, bug.getSummary()); Map<String, String> details = new HashMap<String, String>(); details.put("state", String.valueOf(bug.getState())); details.put("number", String.valueOf(bug.getNumber())); generator.addAnnotation(textA, BUG_ANNOTATION_SOURCE, details); We generate the view of the text annnotation: generator.generateViews(); View textAnnotationView = generator.getSemantic2notationMap().get(textA); We use a helper method defined in the super class to create the command that will actually drop the view. return getDropViewCommand(Collections.singletonList(textAnnotationView), dropLocation, hoverPart);

So we need an other extension point to activate our plugin, uh ? We will settle for an annotation decorator.

Annotation decorators

Let's create the org.eclipse.stp.bpmn.sample.bugDnD.decorator package, and get back to the Manifest editor. We select the org.eclipse.stp.bpmn.diagram.EAnnotationDecorator extension point in the wizard. The source attribute showing should be the bug annotation source. File:Extension point annotation decorator part 2.png

Then we instantiate the class in charge of decorating the annotated shapes, let's name it BugAnnotationDecorator. This class implements IEAnnotationDecorator: public String getAssociatedAnnotationSource() { return BugDnDHandler.BUG_ANNOTATION_SOURCE; }   public Direction getDirection(EditPart part, EModelElement elt, EAnnotation ann) { return Direction.SOUTH_WEST; }   public ImageDescriptor getImageDescriptor(EditPart part, EModelElement element, EAnnotation annotation) { return BugDnDPlugin.imageDescriptorFromPlugin(BugDnDPlugin.PLUGIN_ID, "icons/bug_decorator.gif"); }   public IFigure getToolTip(EditPart part, EModelElement element, EAnnotation annotation) { Label label = new Label(); label.setText("#" + annotation.getDetails().get("number")); return label; }

Now we can run the demo! Open the execution environment and a BPMN diagram, along with the bug view.

Drop a bug view over the pool and here is the result:

Extending the modeler

Link to the code

In this part, we will rebrand the modeler and add more functionalities to our diagram.

Opening a bug in the browser So far we have seen how to annotate shapes with bugs. While this is certainly looking good, it'd be great to actually use that for a practical purpose. In this section we will learn how to override the edit part provider to extend the annotation edit parts and give a different open edit policy that will open the bugs in a browser. We create a new plugin named org.eclipse.stp.bpmn.sample.bugEditor for this. In GMF, the edit part service looks for edit part providers, sorts them depending on their priority, and picks the one with the highest one (there are other ways to activate or deactivate the provider, see this help page for more). We add an extension point on org.eclipse.gmf.runtime.diagram.ui.editpartProviders?, designating the class and the priority on which we want this provider to be executed. We create the provider by extending the default edit part provider, setting a new factory. public class BugEditPartProvider extends BpmnEditPartProvider {   public BugEditPartProvider() { setFactory(new BugEditPartFactory()); setAllowCaching(true); }   } The factory extends the BPMN factory. Its only method consists in returning an edit part representing a view passed as an argument:   /** * Creates a special text annotation edit part */ public EditPart createEditPart(EditPart context, Object model) { if (model instanceof View) { final View view = (View) model; int viewVisualID = BpmnVisualIDRegistry.getVisualID(view); switch (viewVisualID) { case TextAnnotationEditPart.VISUAL_ID : [...] case TextAnnotation2EditPart.VISUAL_ID : [...] } } return super.createEditPart(context, model); } } For the case of the text annotation edit parts, we override the default edit parts to change their default edit policies: return new TextAnnotationEditPart(view) {   @Override protected void createDefaultEditPolicies() { super.createDefaultEditPolicies(); installEditPolicy(EditPolicyRoles.OPEN_ROLE, new OpenBugEditPolicy()); } }; We then write the open bug edit policy which will open a browser with the bug url when requested: String number = EcoreUtil.getAnnotation(((EModelElement) object), BugDnDHandler.BUG_ANNOTATION_SOURCE, "number"); // and open the browser try { PlatformUI.getWorkbench().getBrowserSupport().createBrowser( IWorkbenchBrowserSupport.AS_EXTERNAL | IWorkbenchBrowserSupport.NAVIGATION_BAR | IWorkbenchBrowserSupport.LOCATION_BAR, "openbug", // the id, use the same if you want to reuse the same browser "Bug #" + number, // the title ""). // the tooltip openURL(new URL("http://bugs.eclipse.org/" + number)); } catch (Exception e) { e.printStackTrace(); } Now try opening the bug by double-clicking on the text annotation while pushing Shift. It should open the bug in an external browser.

Getting your own editor It's just a final touch on top of our additions; we want our own editor. To do that we will subclass BpmnDiagramEditor, and declare it as the default one for *.bpmn_diagram files. public class BugBpmnEditor extends BpmnDiagramEditor {   public static final String ID = "org.eclipse.stp.bpmn.sample.bugeditor.editor";   static {   PlatformUI.getWorkbench().getEditorRegistry(). setDefaultEditor("*.bpmn_diagram", ID); //$NON-NLS-1$ } } We need to declare the BugBpmnEditor editor in plugin.xml. On top of that we bind it to its diagram action bar contributor. <extension point="org.eclipse.ui.editors"> <editor class="org.eclipse.stp.bpmn.sample.bugeditor.BugBpmnEditor" contributorClass="org.eclipse.stp.bpmn.sample.bugeditor.BugDiagramActionBarContributor" extensions="bpmn_diagram" icon="icons/bug.gif" id="org.eclipse.stp.bpmn.sample.bugeditor.editor" name="Bug BPMN Editor"> </editor> </extension> This contributor doesn't do much, just redirecting to our new editor the actions contributed to the BPMN editor. public class BugDiagramActionBarContributor extends BpmnDiagramActionBarContributor {   protected Class getEditorClass() { return BugBpmnEditor.class; }   protected String getEditorId() { return BugBpmnEditor.ID; } } We bind the BPMN palette provider to the bug editor. <extension point="org.eclipse.gmf.runtime.diagram.ui.paletteProviders"> <paletteProvider class="org.eclipse.stp.bpmn.diagram.providers.BpmnPaletteProvider"> <Priority name="Lowest"/> <editor id="org.eclipse.stp.bpmn.sample.bugeditor.editor"/> </paletteProvider> </extension> And then we add the same customizations that are done on the modeler, by adding global action handlers.