Following on from Adam's sterling work of graphical monitoring of BPEL Processes in his blog entry on Graphical BP Monitoring one of the most common question was why can't we generate this auto-magically. Well within this blog entry I will take you through the steps required to generate SCG files from a BPEL and then extend the NetBeans Interface to allow the user to simply Right-Click a bpel file and generate a svg file.

Because both BPEL and SVG are XML based I considered doing the SVG generation using XSLT but on further thought decided that it would be more prudent to write the entire application using Java. This would allow me the flexibility to generate layout functionality and thus provide me with more control. To this end I also decided that I would like my icon library to be interchangeable and hence has built a separate, small web application, that simple provides the appropriate icon set.

The first part of the blog will take the you through the key points associated with converting a BPEL 2.0 file to the SVG format whilst the second part will look at integrating it into the NetBeans Framework.

---

Related Articles

• Generating SVG From BPEL 2 Files
• BPEL 2 SVG Update
• BPEL 2 SVG Documentation
• Simple Web Based BPEL 2 SVG Monitor Implementation

---

Resources

• BPEL2SVGJavaLibrary - Core conversion Java
  
• BPEL2SVGIcons - Simple Web Application to serve icons
  
• BPEL2SVGBpelModule - Test Bpel Module
  
• SVGGeneratorModule - NetBeans Module to integrate Conversion Library
  

Generating SVG from BPEL 2.0

---

To illustrate the generation of SVG from BPEL code I have built the three projects defined below.

In this first release I have not added functionality for the items listed below because I would like to see the responses and then make a decision on whether to drive this as an open source extension to Open ESB. Although they may not be available at present I have every intension of adding them in the near future.

1. Horizontal Layout
2. Property option to configure image location
   

BPEL2SVGIcons Web Application

---

The BPEL2SVGIcons project is a simple Web Application that contains no code and is essentially just a convenient storage location for the icons associated with the generated SVG files. The actual icon names are configured within Java Library describe later but I have chosen to name them after the Activity (see Below) and where the activity requires a start and end icon have identified these using the suffixes _start and _end respectively.

To build this project simply create a new Web Application (no need to specify any frameworks) and then simple create the sub-directory "icons" below the Web Pages and add the appropriate icons. This can then be built and deployed to the appropriate Application / Web Server.

I have assumed, for this blog, that the web application has a context path of "/BPEL2SVGIcons" and that it is installed on a local Application Server. This therefore gives me a base URL of "http://localhost:8080/BPEL2SVGIcons/icons" for the icons.
 


If the supplied icons do not suite you please feel free to generate your own but I would suggest using the names above if you do not want to edit the code.

BPEL2SVGJavaLibrary

---

This Java Library consists of an Interface definition and an associated Impl class for each of the Activities currently available within the Open ESB BPEL 2.0 implementation. I will not describe all these classes but will describe the functionality of the various methods defined within the Top Level ActivitiesInterface and where appropriate include code examples. In addition to these classes these exist a number of associated processing classes which will be described.

BPEL2SVGFactory
This singleton Factory class provides a single location to access the various project constants and generate the Icon Paths associated with the various activities.

LayoutManager
Used to initiate the SVG Layout functionality and store the key information controlling the layout of the components.

BPELInterface / BPELImpl
Represents the BPEL file to be processed and is used to load ans processes the BPEL file. During the processing of the BPEL file the elements (i.e. XML Elements) will be read and where appropriate converted to the appropriate Activity implementation which will initiate a read of all sub-activities.
ActivityInterface
This is the key interface that defines all the methods required to process and format the BPEL and SVG.

Method	Description
public ActivityInterface processSubActivities(StringTokenizer bpelST);	Takes a StringTokenizer, tokenized with "<" representation of the bpel file contents and then preceeds to search through the tokens to identify the Activity. When an activity is found then the appropriate ActivityImpl class is instantiated and if this is not a single line Activity definition the instantiated classes processSubActivities method is called passing the StringTokenizer. On completion of the recursive calls the Sub Activities are added to the Activity's list of sub activities.
public void layout(int startXLeft, int startYTop);	Given the passed starting x and y coordinates this method defines the actual x and y coordinates for the SVG component based on the final layout. Once it has calculated it own image location, if these is one, and its end image, if required, it will process all the sub activities calling their layout method with calculate x and y coordinates.
public String getSVGString();	Generates the actual SVG string that will define the components (images / arrows / text) associated with this Activity. It will, where appropriate, call the getSubActivitiesSVGString to get the information associated with the sub activities.
public String getSubActivitiesSVGString();	Calls the getSVGString on all sub activities for this activity
public List<ActivityInterface> getSubActivities();	Gets the all the sub activities of this activity
public SVGCoordinates getEntryArrowCoords();	Calculates and returns the entry point where the connecting arrow should end on the component.
public SVGCoordinates getExitArrowCoords();	Calculates and returns the entry point where the connecting arrow should exit from this component.
public SVGDimension getDimension();	Calculate the overall Dimensions of this Activity. This is done by first calculating the Dimensions of all Sub Activvities and then summing them appropriately. This method will vary in its processing based on which Activity is actually instantiated. For example single line Activities, such as the Invoke, will only need the space required for the image + the standard spacing values whilst more complex Activities, such as Flow, will require their sub activities to be summed.
public String getName(); public void setName(String name); public String getDisplayName(); public void setDisplayName(String displayName); // Start Icon Methods public int getStartIconXLeft(); public void setStartIconXLeft(int xLeft); public int getStartIconYTop(); public void setStartIconYTop(int yTop); public int getStartIconWidth(); public int getStartIconHeight(); public void setStartIconHeight(int iconHeight); public void setStartIconWidth(int iconWidth); public String getStartIconPath(); public void setStartIconPath(String iconPath); // End Icon methods public int getEndIconXLeft(); public void setEndIconXLeft(int xLeft); public int getEndIconYTop(); public void setEndIconYTop(int yTop); public int getEndIconWidth(); public int getEndIconHeight(); public String getEndIconPath(); public boolean isIncludeAssigns(); public boolean isVerticalChildLayout(); public void setVerticalChildLayout(boolean verticalChildLayout); public boolean isHorizontalChildLayout(); public String getEndTag();	Generic Getters & Setters for the properties.

GenerateSVG
Main class that will generate the SVG based on a BPEL file.

Usage :

BPEL2SVGBpelModule Test Bpel Processes

---

The BPEL2SVGBpelModule exists only to demonstrate the SVG Generator process. It contains a number of BPEL Processes but these are not complete and / or valid. This is not a requirement for testing because we are simple interested in the layout of the SVG for a given BPEL. Following are a number of examples that show the BPEL and its SVG side by side.

Simple BPEL

BPEL With Flow

Pick & OnMessage BPEL


Additional examples can be found in the BPEL2SVGIcons project and the SVG files can be opened with you browser.

Integrating into NetBeans

---

To simplify the process of integration I will copy the java classes defined above into the new NetBeans Module rather than link to the library. The reason for this is that I want a self contained Plug-in Module that does not need to reference any external library code.

Writing the NetBeans Module

---

I will assume that you are reasonably experienced with developing NetBeans Plug-in and hence will quickly summarise the steps required to create the module.

1. New -> NetBeans Modules -> Module (Next)
   
1. Project Name : BPEL2SVGGenerator
2. Standalone Module
3. (Next)
4. Code Base Name : com.sun.aph.bpel.svg.generator
5. XML Layer : com/sun/aph/bpel/svg/generator/layer.xml
6. (Finish)
2. Add the following Module Dependencies:
   
   
   
   
3. Copy the contents of the src directory from the BPEL2SVGJavaLibrary into the project source directory.
   
4. Right-Click on the module and Select New -> Action
1. Select Conditionally  Enabled
   
2. Cookie Class : EditorCookie
   
3. (Next)
   
   
   
   
4. Category : BPEL
5. File Type Context Menu (text/x-bpel+xml)
6. Editor Context Menu (text/x-bpel+xml)
7. (Next)
   
   
   
   
8. Class Name : GenerateSVGAction
9. Display Name : Generate SVG
10. (Finish)
    
    
    
    
5. Modify the performAction Methods in the generated GenerateSVGAction.java to match the following:
   
   

    protected void performAction(Node[] activatedNodes) {
    EditorCookie editorCookie = activatedNodes[0].getLookup().lookup(EditorCookie.class);
    DataObject dataObject = activatedNodes[0].getLookup().lookup(DataObject.class);
    try {
    InputStream is = ((CloneableEditorSupport) editorCookie).getInputStream();
    BPELInterface bpel = new BPELImpl();
    String bpelStr = bpel.load(is);
    bpel.processBpelString(bpelStr);
    //Layout
    BPEL2SVGFactory factory = BPEL2SVGFactory.getInstance();
    LayoutManager layoutManager = factory.getLayoutManager();
    layoutManager.layoutSVG(bpel.getRootActivity());
    // Write SVG
    SVGInterface svg = new SVGImpl();
    svg.setRootActivity(bpel.getRootActivity());
   // System.out.println(svg.getSVGFileAsString());
    System.out.println(dataObject.getFolder().getPrimaryFile()+"/"+dataObject.getPrimaryFile().getName() + ".svg");
    FileObject svgFileObj = FileUtil.createData(dataObject.getFolder().getPrimaryFile(),dataObject.getPrimaryFile().getName() + ".svg");
    DataObject svgDo = DataObject.find(svgFileObj);
    File svgFile = new File(svgDo.getPrimaryFile().getPath());
    svg.store(svgFile);
    } catch (IOException ex) {
    ex.printStackTrace();
    } catch (Exception ex) {
    ex.printStackTrace();
    } catch (Throwable ex) {
    ex.printStackTrace();
    }
    }
   

   
   
6. We can now Clean and Build the project then test by installing in the Target Platform. When you do this you will see that their is now a new Context Menu Open for BPEL file nodes.
   
   
   
   

The above implementation could be packaged and installed but we will extend it to include some additional Layout options to improve the overall flexibility of the solution.

1. Right-Click on the project -> New -> Option Panel
2. Create Miscellaneous Panel
1. Title : SVG Generator Layout
2. Tool Tip : BPEL 2.0 SVG Generator Layout
   
   
   
   
3. (Next)
4. Class Name Prefix : GenerateSVG
   
   
   
   
5. (Finish)
6. In the Generated GenerateSVGPanel.java (.form) add the following:
1. Panel and set it to have a Titled Boarder and BoxLayout
1. Panel Flow Layout
1. Label
2. TextField - horizontalSpacingTF
3. Label
4. TextField - verticalSpacingTF
   
2. Panel Flow Layout
1. Label
2. RadioButton Group - layoutBG
3. RadioButton - horizontalRB
4. RadioButton - verticalRB
   
3. Panel Flow Layout
1. CheckBox - includeAssignCB
2. CheckBox - includeBoxesCB
7. The form will look as follows:
   
   
   
   
8. Switch to Source view and edit the load and save methods as follows:
   
   

    void load() {
    horizontalSpacingTF.setText(Integer.toString(NbPreferences.forModule(GenerateSVGPanel.class).getInt(HORIZONTAL_SPACING_KEY, 20)));
    verticalSpacingTF.setText(Integer.toString(NbPreferences.forModule(GenerateSVGPanel.class).getInt(VERTICAL_SPACING_KEY, 50)));
    includeAssignsCB.setSelected(NbPreferences.forModule(GenerateSVGPanel.class).getBoolean(INCLUDE_ASSIGN_KEY, true));
    includeBoxesCB.setSelected(NbPreferences.forModule(GenerateSVGPanel.class).getBoolean(INCLUDE_BOXES_KEY, true));
    horizontalRB.setSelected(NbPreferences.forModule(GenerateSVGPanel.class).getBoolean(HORIZONTAL_LAYOUT_KEY, false));
    verticalRB.setSelected(NbPreferences.forModule(GenerateSVGPanel.class).getBoolean(VERTICAL_LAYOUT_KEY, true));
    }
    
    public final static String HORIZONTAL_SPACING_KEY = "svg.generator.spacing.horizontal";
    public final static String VERTICAL_SPACING_KEY = "svg.generator.spacing.vertical";
    public final static String HORIZONTAL_LAYOUT_KEY = "svg.generator.layout.horizontal";
    public final static String VERTICAL_LAYOUT_KEY = "svg.generator.layout.vertical";
    public final static String INCLUDE_ASSIGN_KEY = "svg.generator.include.assigns";
    public final static String INCLUDE_BOXES_KEY = "svg.generator.inlude.boxes";
   
    void store() {
    int horizontalSpacing = 20;
    int verticalSpacing = 50;
    try {
    horizontalSpacing = Integer.parseInt(horizontalSpacingTF.getText());
    } catch (Exception e) {
    e.printStackTrace();
    }
    try {
    verticalSpacing = Integer.parseInt(verticalSpacingTF.getText());
    } catch (Exception e) {
    e.printStackTrace();
    }
    NbPreferences.forModule(GenerateSVGPanel.class).putInt(HORIZONTAL_SPACING_KEY, horizontalSpacing);
    NbPreferences.forModule(GenerateSVGPanel.class).putInt(VERTICAL_SPACING_KEY, verticalSpacing);
    NbPreferences.forModule(GenerateSVGPanel.class).putBoolean(INCLUDE_ASSIGN_KEY, includeAssignsCB.isSelected());
    NbPreferences.forModule(GenerateSVGPanel.class).putBoolean(INCLUDE_BOXES_KEY, includeBoxesCB.isSelected());
    NbPreferences.forModule(GenerateSVGPanel.class).putBoolean(HORIZONTAL_LAYOUT_KEY, horizontalRB.isSelected());
    NbPreferences.forModule(GenerateSVGPanel.class).putBoolean(VERTICAL_LAYOUT_KEY, verticalRB.isSelected());
    }
   

   
   
9. Executing the Plug-in and selecting Tools -> Options -> Miscellaneous will display a series of Tab one of which will be our newly created  "SVG Generator Layout" Tab.
   
   
   
   
10. We will now need to return to the GenerateSVGAction.java to modify the performAction method to read these options and then assign them to the layout. So modify the performAction methods to match the following and fix any imports.
    
    

     protected void performAction(Node[] activatedNodes) {
     EditorCookie editorCookie = activatedNodes[0].getLookup().lookup(EditorCookie.class);
     DataObject dataObject = activatedNodes[0].getLookup().lookup(DataObject.class);
     try {
     InputStream is = ((CloneableEditorSupport) editorCookie).getInputStream();
     BPELInterface bpel = new BPELImpl();
     String bpelStr = bpel.load(is);
     bpel.processBpelString(bpelStr);
     //Layout
     BPEL2SVGFactory factory = BPEL2SVGFactory.getInstance();
     LayoutManager layoutManager = factory.getLayoutManager();
     // Set properties defined in the Option Panel
     layoutManager.setXSpacing(NbPreferences.forModule(GenerateSVGPanel.class).getInt(GenerateSVGPanel.HORIZONTAL_SPACING_KEY, 20));
     layoutManager.setYSpacing(NbPreferences.forModule(GenerateSVGPanel.class).getInt(GenerateSVGPanel.VERTICAL_SPACING_KEY, 50));
     layoutManager.setIncludeAssigns(NbPreferences.forModule(GenerateSVGPanel.class).getBoolean(GenerateSVGPanel.INCLUDE_ASSIGN_KEY, true));
     layoutManager.setShowSequenceBoxes(NbPreferences.forModule(GenerateSVGPanel.class).getBoolean(GenerateSVGPanel.INCLUDE_BOXES_KEY, true));
     layoutManager.setVerticalLayout(NbPreferences.forModule(GenerateSVGPanel.class).getBoolean(GenerateSVGPanel.VERTICAL_LAYOUT_KEY, true));
     
     layoutManager.layoutSVG(bpel.getRootActivity());
     // Write SVG
     SVGInterface svg = new SVGImpl();
     svg.setRootActivity(bpel.getRootActivity());
    // System.out.println(svg.getSVGFileAsString());
     System.out.println(dataObject.getFolder().getPrimaryFile()+"/"+dataObject.getPrimaryFile().getName() + ".svg");
     FileObject svgFileObj = FileUtil.createData(dataObject.getFolder().getPrimaryFile(),dataObject.getPrimaryFile().getName() + ".svg");
     DataObject svgDo = DataObject.find(svgFileObj);
     File svgFile = new File(svgDo.getPrimaryFile().getPath());
     svg.store(svgFile);
     } catch (IOException ex) {
     ex.printStackTrace();
     } catch (Exception ex) {
     ex.printStackTrace();
     } catch (Throwable ex) {
     ex.printStackTrace();
     }
     }
    

    
    
11. Clean and Build then generate an NBM which can be installed intot he local IDE.

The Module I built can be found on the NetBeans Plug-in Portal.