PrimeFaces - Diagram Example

Following example shows how to use PrimeFaces's Diagram component to display SVG content.

JSF page

src/main/webapp/index.xhtml

<h:body style="margin:50px;">
    <h2>PrimeFaces Diagram Example</h2>
    <p:diagram value="#{myBean.model}"
               styleClass="panel"/>

    <style type="text/css">
    .my-box {
        border:1px solid #aaa;
        width:70px;
        height:20px;
        padding:10px;
        background:#eee;
        text-align: center;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
    }
    .panel{
        margin:0 auto;
        height:230px;
        width:200px;
        background:pink;
    }

    </style>
</h:body>

The manage bean

@ManagedBean
@ViewScoped
public class MyBean {
  private DefaultDiagramModel model;

  @PostConstruct
  public void init() {
      model = new DefaultDiagramModel();
      model.setMaxConnections(-1);

      //Box 1
      Element e1 = new Element();
      e1.setDraggable(false);
      e1.setData("Box 1");
      e1.setStyleClass("my-box");
      e1.setX("50px");
      e1.setY("15px");
      //appending a dot to bottom
      DotEndPoint p1 = new DotEndPoint();
      p1.setAnchor(EndPointAnchor.BOTTOM);
      p1.setRadius(4);
      e1.addEndPoint(p1);
      model.addElement(e1);

      //Box 2
      Element e2 = new Element();
      e2.setDraggable(false);
      e2.setData("Box 2");
      e2.setStyleClass("my-box");
      e2.setX("50px");
      e2.setY("160px");
      //appending a dot to top
      DotEndPoint p2 = new DotEndPoint();
      p2.setAnchor(EndPointAnchor.TOP);
      p2.setRadius(4);
      e2.addEndPoint(p2);
      model.addElement(e2);

      //connecting the two dots
      Connection c = new Connection();
      c.setSource(p1);
      c.setTarget(p2);
      c.setConnector(new StraightConnector());
      model.connect(c);
  }

  public DefaultDiagramModel getModel() {
      return model;
  }
}

mvn tomcat7:run-war

Output

Example Project

Dependencies and Technologies Used:

• primefaces 6.1 primefaces
• jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• datafactory 0.8: Library to generate data for testing.
• JDK 1.8
• Maven 3.3.9