Experimented with jointjs, modified the selection of dependencies, added some dialogs.

Kieker.WebGUI/src/main/java/kieker/webgui/beans/request/SelectedDependenciesBean.java

@@ -22,6 +22,7 @@ package kieker.webgui.beans.request;
 
 import java.util.ArrayList;
 import java.util.List;
+import javax.faces.application.FacesMessage;
 
 import javax.faces.bean.ManagedBean;
 import javax.faces.bean.RequestScoped;
@@ -94,7 +95,10 @@ public class SelectedDependenciesBean {
 		if (this.project != null) {
 			this.project.getDependencies().clear();
 			this.project.getDependencies().addAll(this.dependencies);
-		}
+            FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "", "Dependencies saved."));
+		} else {
+            FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "", "No project selected."));
+        }
 	}
 
 }

Kieker.WebGUI/src/main/webapp/main.xhtml

@@ -10,8 +10,7 @@
         <h:head>
             <title>Kieker.WebGUI</title>
             <link rel="stylesheet" type="text/css" href="../main.css" />
-            <script src="../main/raphael-min.js" type="text/javascript"></script>
-            <script src="../main/joint.dia.uml.min.js" type="text/javascript"></script>
+            <script src="../main/joint.all.min.js" type="text/javascript"></script>
         </h:head>
 
         <h:body>
@@ -35,7 +34,7 @@
                                 <p:menuitem value="Save Project" ajax="true" action="#{availableProjectsBean.saveProject(selectedProjectBean.getSelectedProject())}" update=":projectsForm" />  
                                 <p:menuitem value="Set as Main Project" ajax="true" action="#{selectedProjectBean.setMainProject(selectedProjectBean.getSelectedProject())}" update=":projectsForm" />
                                 <p:separator />
-                                <p:menuitem value="Delete Project" ajax="true" action="#{availableProjectsBean.deleteProject(selectedProjectBean.getSelectedProject())}" update=":projectsForm" />
+                                <p:menuitem value="Delete Project" ajax="true" onclick="deleteProjectDialog.show()" />
                                 <p:menuitem value="Reset Project" ajax="true" action="#{availableProjectsBean.resetProject(selectedProjectBean.getSelectedProject())}" update=":projectsForm" />
                                 <p:separator />
                                 <p:menuitem value="Configure Dependencies" ajax="false" url="/Kieker.WebGUI/projectDependencies" />
@@ -83,7 +82,8 @@
                             <p:menuitem value="Save Project" ajax="true" action="#{availableProjectsBean.saveProject(selectedProjectBean.getSelectedProject())}" update=":projectsForm" />
                             <p:menuitem value="Set as Main Project" ajax="true" action="#{selectedProjectBean.setMainProject(selectedProjectBean.getSelectedProject())}" update=":projectsForm :toolpalette" />
                             <p:separator />
-                            <p:menuitem value="Delete Project" ajax="true" action="#{availableProjectsBean.deleteProject(selectedProjectBean.getSelectedProject())}" update=":projectsForm" />
+                            <p:menuitem value="Delete Project" ajax="true" onclick="deleteProjectDialog.show()" />
+
                             <p:menuitem value="Reset Project" ajax="true" action="#{availableProjectsBean.resetProject(selectedProjectBean.getSelectedProject())}" update=":projectsForm" />
                             <p:separator />
                             <p:menuitem value="Configure Dependencies" ajax="false" url="/Kieker.WebGUI/projectDependencies" />
@@ -102,8 +102,12 @@
                 <!-- ******************************************************************************** -->
                 <!-- The following layout unit is within the center and used for the graph. -->
                 <p:layoutUnit position="center">
-                    <div id="workspace" style="width: fill-available; height: 100%" >
+                    <div style="width: fill-available; height: 100%" id="myfsa"  >
+
                     </div>
+                    <script type="text/javascript">
+
+                    </script>
                 </p:layoutUnit>
                 <!-- ******************************************************************************** -->
 
@@ -162,6 +166,7 @@
                                     </p:commandLink>
                                 </h:form>
                             </p:treeNode>
+
                             <p:treeNode type="filter" icon="ui-icon-disk">
                                 <h:form>
                                     <p:commandLink>

Kieker.WebGUI/src/main/webapp/main/joint.dia.uml.min.js

-/**
- * Joint 0.4 - JavaScript diagramming library.
- * Copyright (c) David Durman 2009 - 2011
- * Licensed under the MIT license: (http://www.opensource.org/licenses/mit-license.php)
- */(function(g){var e=g.Joint;g=e.dia.Element;var h=e.point,f=e.dia.uml={};e.arrows.aggregation=function(){return{path:["M","7","0","L","0","5","L","-7","0","L","0","-5","z"],dx:9,dy:9,attrs:{stroke:"black","stroke-width":2,fill:"black"}}};f.aggregationArrow={endArrow:{type:"aggregation"},startArrow:{type:"none"},attrs:{"stroke-dasharray":"none"}};f.dependencyArrow={endArrow:{type:"basic",size:5},startArrow:{type:"none"},attrs:{"stroke-dasharray":"none"}};f.generalizationArrow={endArrow:{type:"basic", size:10,attrs:{fill:"white"}},startArrow:{type:"none"},attrs:{"stroke-dasharray":"none"}};f.arrow={startArrow:{type:"none"},endArrow:{type:"basic",size:5},attrs:{"stroke-dasharray":"none"}};f.State=g.extend({object:"State",module:"uml",init:function(a){a=e.DeepSupplement(this.properties,a,{radius:15,attrs:{fill:"white"},label:"",labelOffsetX:20,labelOffsetY:5,swimlaneOffsetY:18,actions:{entry:null,exit:null,inner:[]},actionsOffsetX:5,actionsOffsetY:5});this.setWrapper(this.paper.rect(a.rect.x,a.rect.y, a.rect.width,a.rect.height,a.radius).attr(a.attrs));this.addInner(this.getLabelElement());this.addInner(this.getSwimlaneElement());this.addInner(this.getActionsElement())},getLabelElement:function(){var a=this.properties,b=this.wrapper.getBBox(),c=this.paper.text(b.x,b.y,a.label).attr(a.labelAttrs||{}),d=c.getBBox();c.translate(b.x-d.x+a.labelOffsetX,b.y-d.y+a.labelOffsetY);return c},getSwimlaneElement:function(){var a=this.wrapper.getBBox(),b=this.properties;return this.paper.path(["M",a.x,a.y+b.labelOffsetY+ b.swimlaneOffsetY,"L",a.x+a.width,a.y+b.labelOffsetY+b.swimlaneOffsetY].join(" "))},getActionsElement:function(){var a=this.properties,b=a.actions.entry?"entry/ "+a.actions.entry+"\n":"";b+=a.actions.exit?"exit/ "+a.actions.exit+"\n":"";for(var c=a.actions.inner.length,d=0;d<c;d+=2)b+=a.actions.inner[d]+"/ "+a.actions.inner[d+1]+"\n";b=b.replace(/^\s\s*/,"").replace(/\s\s*$/,"");c=this.wrapper.getBBox();a=this.paper.text(c.x+a.actionsOffsetX,c.y+a.labelOffsetY+a.swimlaneOffsetY+a.actionsOffsetY,b); b=a.getBBox();a.attr("text-anchor","start");a.translate(0,b.height/2);return a},zoom:function(){this.wrapper.attr("r",this.properties.radius);this.shadow&&this.shadow.attr("r",this.properties.radius);this.inner[0].remove();this.inner[1].remove();this.inner[2].remove();this.inner[0]=this.getLabelElement();this.inner[1]=this.getSwimlaneElement();this.inner[2]=this.getActionsElement()}});f.StartState=g.extend({object:"StartState",module:"uml",init:function(a){a=e.DeepSupplement(this.properties,a,{position:h(0, 0),radius:10,attrs:{fill:"black"}});this.setWrapper(this.paper.circle(a.position.x,a.position.y,a.radius).attr(a.attrs))}});f.EndState=g.extend({object:"EndState",module:"uml",init:function(a){a=e.DeepSupplement(this.properties,a,{position:h(0,0),radius:10,innerRadius:a.radius&&a.radius/2||5,attrs:{fill:"white"},innerAttrs:{fill:"black"}});this.setWrapper(this.paper.circle(a.position.x,a.position.y,a.radius).attr(a.attrs));this.addInner(this.paper.circle(a.position.x,a.position.y,a.innerRadius).attr(a.innerAttrs))}, zoom:function(){this.inner[0].scale.apply(this.inner[0],arguments)}});f.Class=g.extend({object:"Class",module:"uml",init:function(a){a=e.DeepSupplement(this.properties,a,{attrs:{fill:"white"},label:"",labelOffsetX:20,labelOffsetY:5,swimlane1OffsetY:18,swimlane2OffsetY:18,attributes:[],attributesOffsetX:5,attributesOffsetY:5,methods:[],methodsOffsetX:5,methodsOffsetY:5});this.setWrapper(this.paper.rect(a.rect.x,a.rect.y,a.rect.width,a.rect.height).attr(a.attrs));this.addInner(this.getLabelElement()); this.addInner(this.getSwimlane1Element());this.addInner(this.getAttributesElement());this.addInner(this.getSwimlane2Element());this.addInner(this.getMethodsElement())},getLabelElement:function(){var a=this.properties,b=this.wrapper.getBBox(),c=this.paper.text(b.x,b.y,a.label).attr(a.labelAttrs||{}),d=c.getBBox();c.translate(b.x-d.x+a.labelOffsetX,b.y-d.y+a.labelOffsetY);return c},getSwimlane1Element:function(){var a=this.wrapper.getBBox(),b=this.properties;return this.paper.path(["M",a.x,a.y+b.labelOffsetY+ b.swimlane1OffsetY,"L",a.x+a.width,a.y+b.labelOffsetY+b.swimlane1OffsetY].join(" "))},getSwimlane2Element:function(){var a=this.properties,b=this.wrapper.getBBox(),c=this.inner[2].getBBox();return this.paper.path(["M",b.x,b.y+a.labelOffsetY+a.swimlane1OffsetY+c.height+a.swimlane2OffsetY,"L",b.x+b.width,b.y+a.labelOffsetY+a.swimlane1OffsetY+c.height+a.swimlane2OffsetY].join(" "))},getAttributesElement:function(){for(var a=" ",b=this.properties,c=0,d=b.attributes.length;c<d;c++)a+=b.attributes[c]+"\n"; a=a.replace(/^\s\s*/,"").replace(/\s\s*$/,"");c=this.wrapper.getBBox();a=this.paper.text(c.x+b.attributesOffsetX,c.y+b.labelOffsetY+b.swimlane1OffsetY+b.attributesOffsetY,a);b=a.getBBox();a.attr("text-anchor","start");a.translate(0,b.height/2);return a},getMethodsElement:function(){for(var a=" ",b=this.properties,c=0,d=b.methods.length;c<d;c++)a+=b.methods[c]+"\n";a=a.replace(/^\s\s*/,"").replace(/\s\s*$/,"");c=this.wrapper.getBBox();d=this.inner[2].getBBox();a=this.paper.text(c.x+b.methodsOffsetX, c.y+b.labelOffsetY+b.swimlane1OffsetY+b.attributesOffsetY+d.height+b.swimlane2OffsetY+b.methodsOffsetY,a);b=a.getBBox();a.attr("text-anchor","start");a.translate(0,b.height/2);return a},zoom:function(){this.inner[0].remove();this.inner[1].remove();this.inner[2].remove();this.inner[3].remove();this.inner[4].remove();this.inner[0]=this.getLabelElement();this.inner[1]=this.getSwimlane1Element();this.inner[2]=this.getAttributesElement();this.inner[3]=this.getSwimlane2Element();this.inner[4]=this.getMethodsElement()}})})(this);

Kieker.WebGUI/src/main/webapp/main/projectDialogs.xhtml

@@ -30,4 +30,24 @@
         </h:form>
     </p:dialog>
     <!-- ******************************************************************************** -->
+
+    <!-- ******************************************************************************** -->
+    <!-- This is the dialog to delete the selected project. -->
+    <p:dialog id="deleteProjectDialog" header="Delete Project" resizable="false"
+              modal="true" widgetVar="deleteProjectDialog">
+        <h:form>
+            <h:outputText value="Do you really want to remove the selected project?" />
+            <br />
+            <br />
+            <center>
+                <p:commandButton value="Yes"
+                                 action="#{availableProjectsBean.deleteProject(selectedProjectBean.getSelectedProject())}"
+                                 update=":projectsForm"
+                                 oncomplete="deleteProjectDialog.hide()" />
+                <p:spacer width="100" height="10" />
+                <p:commandButton value="Cancel" onclick="deleteProjectDialog.hide()" />
+            </center>
+        </h:form>
+    </p:dialog>
+    <!-- ******************************************************************************** -->
 </ui:composition>
\ No newline at end of file

Kieker.WebGUI/src/main/webapp/projectDependencies.css

@@ -17,6 +17,10 @@
 }
 
 .my-picklist .ui-picklist .ui-picklist-list {
-   height: 120px;
-   width: 520px;
+    height: 120px;
+    width: 520px;
+}
+
+.column {
+    vertical-align: top
 }
\ No newline at end of file

Kieker.WebGUI/src/main/webapp/projectDependencies.xhtml

@@ -20,21 +20,29 @@
                     to get back to the main menu.
                 </p:layoutUnit>
 
-                <p:layoutUnit header="Currently used Dependencies" position="center" >
+                <p:layoutUnit header="Currently used Dependencies for '#{selectedProjectBean.selectedProject.name}'" position="center" >
                     <h:form>
-                        <p:selectManyCheckbox value="#{selectedDependenciesBean.dependencies}"  
-                                              layout="pageDirection"
+                        <h:panelGrid columns="2" columnClasses="column">
+                            <h:panelGrid columns="1">
+                                <p:commandButton ajax="true" value="Accept Selection" action="#{selectedDependenciesBean.submit()}" style="width: 100%"  update=":messages"/>
+                                <p:commandButton ajax="true" value="Reset Selection" style="width: 100%" />
+                            </h:panelGrid>
+
+                            <p:selectManyMenu value="#{selectedDependenciesBean.dependencies}"   style="width: 100%"
                                               converter="kieker.webgui.converter.MIDependencyToStringConverter">  
-                            <f:selectItems value="#{availableDependenciesBean.dependencies}" var="dependency" itemLabel="#{dependency.filePath}" />  
-                        </p:selectManyCheckbox> 
-                        <p:spacer width="0px" height="20px"/>
-                        <div align="center">
-                            <p:commandButton ajax="false" value="Submit" actionListener="#{selectedDependenciesBean.submit()}"/>
-                        </div>
+                                <f:selectItems value="#{availableDependenciesBean.dependencies}"  
+                                               var="dependency" itemLabel="#{dependency.filePath}"  
+                                               itemValue="#{player}" />  
+                            </p:selectManyMenu>  
+
+                        </h:panelGrid>
                     </h:form>
                 </p:layoutUnit>
 
             </p:layout>
+
+            <p:growl id="messages" showDetail="true" autoUpdate="true" sticky="false"/>  
+
         </body>
     </f:view>