Hello World

Getting Started

This Hello World tutorial takes you right into the code. To get a better understanding what's going on conceptually, take a look at the design page.

Downloads

Please download the binary version (processeditor.jar).

Setting up your IDE

Simply configure your IDE to provide support for the processeditor.jar and create a new project. For additional features like PDF export or the WebModeler, add the required libraries as documented in README.md.

Say Hello!

Let's create a JFrame with a JPanel representing a ProcessEditor. Paste the following source in your IDE:

import net.frapu.code.visualization.ProcessEditor;
import javax.swing.*;

public class helloworld1 {

    public static void main(String args[]) {
       // Create a new Process Editor JPanel with a default model
        ProcessEditor editor = new ProcessEditor();

        // Do some Swing stuff to show the JPanel
        JFrame f = new JFrame("Hello World 1");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.setSize(600,300);
        f.add(editor);
        f.setVisible(true);
    }
}

The running program should look like this. Try adding new elements via the context menu:

Now let's add a custom process model that really shows us "Hello World"! We create a new BPMN 2.0 Model "My Process" and two Tasks, stating "Hello" and "World". Both tasks are connected by a Sequence Flow. We add all three elements to the model and give it as a parameter to the editor instantiation:

import net.frapu.code.visualization.ProcessEditor;
import net.frapu.code.visualization.bpmn.*;
import javax.swing.*;

public class helloworld2 {

    public static void main(String args[]) {

        // Create a new BPMN model
        BPMNModel myModel = new BPMNModel("My Process");

        // Create a number of elements
        Task task1 = new Task(200,100, "Hello");
        Task task2 = new Task(400,100, "World");

        // Create a sequence flow connecting the elements
        SequenceFlow flow1 = new SequenceFlow(task1, task2);

        // Add elements and flow to the model
        myModel.addNode(task1);
        myModel.addNode(task2);
        myModel.addFlow(flow1);

        // Create a new Process Editor JPanel with your own model
        ProcessEditor editor = new ProcessEditor(myModel);

        // Do some Swing stuff to show the JPanel
        JFrame f = new JFrame("Hello World 2");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.setSize(600,300);
        f.add(editor);
        f.setVisible(true);
    }
}

Have fun!

The Process Editor package sports a number of cool extensions in the com.inubit.research package that have been tightly integrated. One extension provides an animation queue for adding and removing elements in the editor based on timing information. The queue takes care of executing all animations at their requested time.

Paste the following code snippet at the end of the main method to get an idea (helloworld3.java). The code first adds a new StartEvent to the editor one second after the code line has been executed. A few lines later, we add a property change (color, position) to the StartEvent, starting after five seconds. Have fun watching it!

		import com.inubit.research.animation.AnimationFacade;
		[...]

		// Create another node
        StartEvent event1 = new StartEvent(100,100, "Start");
        // Enable animation effects in editor
        editor.setAnimationEnabled(true);
        // Add node after 1000ms with a 2000ms fade-in effect
        editor.getAnimator().addProcessNode(event1, 2000, 1000, AnimationFacade.Type.TYPE_FADE_IN);

        // Change properties, create copy of node
        StartEvent newProperties = new StartEvent();
        // Set background to red and change position
        newProperties.setBackground(Color.RED);
        newProperties.setPos(50,50);
        /* Add change request to animation queue, starting after 5000ms (since the first animation is
           still pending yet!
         */
        editor.getAnimator().animateNode(event1, newProperties, 2000, 5000);
        
        [...]

Listen!

The Process Editor provides a number of different Listeners, both at model and editor level. To give you an idea, the following code snippets show how you can listen to changes to a process model (addition/removal of nodes and edges, as well as property changes, see helloworld4.java).

[...]

public class helloworld4 implements ProcessModelListener {

    public helloworld4() {
    }

    public static void main(String args[]) {
    	
    	[...]
    	
   	    // Add elements and flow to the model
        myModel.addNode(task1);
        myModel.addNode(task2);
        myModel.addFlow(flow1);

        // Add Listener to the model
        myModel.addListener(new helloworld4());

        // Create a new Process Editor JPanel with your own model
        ProcessEditor editor = new ProcessEditor(myModel);
    }

    @Override
    public void processNodeAdded(ProcessNode processNode) {
        System.out.println("Process Node type "+processNode.getClass().toString()+
                " added at "+processNode.getPos());
    }

    @Override
    public void processNodeRemoved(ProcessNode processNode) {
        System.out.println("Process Node "+processNode.getName()+" removed.");
    }

    @Override
    public void processEdgeAdded(ProcessEdge processEdge) {
        System.out.println("Process Edge between "+processEdge.getSource()+" and "+
                processEdge.getTarget()+" added.");

    }

    @Override
    public void processEdgeRemoved(ProcessEdge processEdge) {
        System.out.println("Process Edge between "+processEdge.getSource()+" and "+
                processEdge.getTarget()+" removed.");

    }

    @Override
    public void processObjectPropertyChange(ProcessObject processObject, String property,
                                            String oldValue, String newValue) {
        System.out.println("Property "+property+" of Process Object "+processObject.toString()+
                " changed from "+oldValue+" to "+newValue);
    }
}

Take a look at the console: Already the animation will fire a lot of property change events. Afterwards you can add/modify elements manually and watch the corresponding events.