Veuillez patienter...
ajax-loader

Accueil  >  Ressources  >  Graphvis  >  Graphvis 2 démo Ajax.

Composant Graphvis 2 pour Primefaces avec CytoscapeWeb 2: Les comportements Ajax

sysord

Ajax behaviors Example (Html5 + JQuery):

Due to the ajax=true attribute, every graph change on the client side is sent to the server.
Ajax behaviors have been set and Ajax requests are fired on selection or unselection events.
After every Ajax Request the textArea at the bottom of the graph is updated with a dump of the server side model.



Style:
Layout:
  • Random
  • Arbor
  • Grid
Shape:
  • ELLIPSE
  • RECTANGLE
  • TRIANGLE
Color:
Size: 
<p:growl id="growl" />
	
<h:form id="mainForm">	
	<div style="height:400px;width:49%; border:solid 1px; padding:2px; float:left">
		<p>
			Due to the ajax=true attribute, every graph change on the client side is sent to the server.<br/>
			Ajax behaviors has been set and Ajax request are fired on selection or unselection events.<br/>
			After every Ajax Request the textArea at the bottom of the graph is updated with a dump of 
			the server side model. <a href="http://localhost:8080/Sysord/ressource_graphvis_demo_ajaxBehaviors.jsf"> [online demo]</a>			
		</p>
		<div id="dijGraphContainer" style="height:75%;">
			
			<p:graphvis2 id="graph"  value="#{demoAjaxBehaviorsBean.graphModel}"  
				widgetVar="myGraph" ajax="true" update ="mainForm:txtModelDescription" 
				style="border: 1px solid #ddd;margin: Opx 0;">
								
				<p:ajax event="select" listener="#{demoAjaxBehaviorsBean.onSelectItems}" update=":growl" />
 				<p:ajax event="unselect" listener="#{demoAjaxBehaviorsBean.onUnselectItems}" update=":growl" />
				<p:ajax event="nodeSelect" listener="#{demoAjaxBehaviorsBean.onSelectNodes}" update=":growl" />
				<p:ajax event="nodeUnselect" listener="#{demoAjaxBehaviorsBean.onUnselectNodes}" update=":growl" />
				<p:ajax event="edgeSelect" listener="#{demoAjaxBehaviorsBean.onSelectEdges}" update=":growl" />
				<p:ajax event="edgeUnselect" listener="#{demoAjaxBehaviorsBean.onUnselectEdges}" update=":growl" />					
								
			</p:graphvis2>
										 
	 	</div>			 	
 	</div>
	<div id="stylePanel" style="margin-left:50%; width:30%;">
		<p:fieldset >
			<p:commandButton  value="generate new Graph"  style="width:100%" action="#{demoAjaxBehaviorsBean.fillGraphModel()}" onsuccess="myGraph.synchronize(true)"/>										
			<p:commandButton type="button" value="Remove selected nodes" onclick="removeSelectedNodes()" style="width:100%"/>										
			<p:commandButton type="button" value="Create edge between selected nodes" onclick="createEdges()" style="width:100%"/>										
			<br/><br/><b><h:outputText value="Style:"/></b> 
			<h:panelGrid columns = "2" style="font-size:10px">
				<h:outputText value="Layout:"/> 
				<p:selectOneMenu  widgetVar="layoutSelector" onchange="myGraph.doLayout(this.value);" >
					<f:selectItem itemLabel="Random" itemValue="randomLayout" />
					<f:selectItem itemLabel="Arbor" itemValue="arborLayout" />
					<f:selectItem itemLabel="Grid" itemValue="gridLayout" />
				</p:selectOneMenu>

				<h:outputText value="Shape:"/> 
				<p:selectOneMenu  widgetVar="shapeSelector">
					<f:selectItem itemLabel="ELLIPSE" itemValue="ELLIPSE" />
					<f:selectItem itemLabel="RECTANGLE" itemValue="RECTANGLE" />
					<f:selectItem itemLabel="TRIANGLE" itemValue="TRIANGLE" />
				</p:selectOneMenu>
				<h:outputText value="Color:"/> 
				<p:colorPicker id="colorPicker" widgetVar="colorPicker" style="vertical-align:top"/>
				<h:outputText value="Size:"/> 						
				<p:spinner widgetVar="spinSize" value="10" min="10" max="50" size="2" style="vertical-align:top"/>
			</h:panelGrid>
			<p:commandButton type="button" onclick="applyStyleOnSelection()" value="Apply style on selection" style="width:100%"/>
		</p:fieldset>						 	
	</div>		 	
	
	<p:inputTextarea id="txtModelDescription" value ="#{demoAjaxBehaviorsBean.modelDescription}" style="clear:left;width:100%; height:20%;overflow:auto;font-size:10px;"  />
</h:form>

<script type="text/javascript">

	$(document).ready(function() {
		$(colorPicker.jqId + '_livePreview').css('background-color', getSelectedColor());
		shapeSelector.value = "ELLIPSE";
	});

	function removeSelectedNodes(){
		myGraph.getSelectedNodes().map(function(node){myGraph.removeNode(node.getId())});
		myGraph.redraw();
	}

	function applyStyleOnSelection(){
		var color = getSelectedColor();
		var size = spinSize.value;
		var shape = shapeSelector.value;
		
		myGraph.getSelectedNodes().map(
			function(node){
				node.setColor(color);
				node.setSize(size);
				node.setShape(shape);						
			}
		);

		myGraph.getSelectedEdges().map(
				function(edge){
					edge.setColor(color);
					edge.setWidth(size);
					edge.setLabel("" + size)
				}
			);

	}
	
	function createEdges(){
		var color = getSelectedColor();
		var size = spinSize.value;
		var sourceNode = null;
		myGraph.getSelectedNodes().map(
				function(node){
					if(sourceNode){
						var id = "E_" + new Date().getTime();
						myGraph.addEdge(id, id, sourceNode.getId(), node.getId(), true, size, color)		
					}
					sourceNode = node;
				}
		);
		myGraph.redraw();
	}
	
	function getSelectedColor(){
		//color from the colorpicker widget
		return '#' + $('.ui-colorpicker_hex > :input').val();
	}

	function arrIdsToString(arrItems){
		var strIds = "";
		arrItems.map(function(item){strIds += item.getId() + ', '});
		return strIds;
	}

</script>