As conexões podem ser criadas e editadas instantaneamente usando arrastar e soltar. Neste exemplo, os computadores são fontes, enquanto os servidores são os alvos. Depois que uma conexão é criada, removida ou alterada usando arrastar e soltar, o diagrama faz uma solicitação ajax para salvar as alterações no modelo de backend. Além disso, eventos opcionais ajax são fornecidos como retornos de chamada.
$render=explode(" ", $_POST["partial_render"]);
$render[0]="alerta";
if($_POST["diagrama_sourceId"]=="411f-4312-994f-9d744a7f4b1d"){
$computador="A";
}
if($_POST["diagrama_sourceId"]=="a9f3-4011-830d-e378f5920145"){
$computador="B";
}
if($_POST["diagrama_sourceId"]=="1da6-480f-ac09-cff1c511d2df"){
$computador="C";
}
if($_POST["diagrama_targetId"]=="7dc4-4a87-8186-2d8eb48e02ff"){
$servidor="A";
}
if($_POST["diagrama_targetId"]=="9e3f-4c0e-bd35-1b9f5be0e67f"){
$servidor="B";
}
$detail= "Do Computador ".$computador." ao Servidor ".$servidor.".";
if(isset($_POST["diagrama_positionChange"])){
if($_POST["diagrama_elementId"]=="411f-4312-994f-9d744a7f4b1d"){
$computador="A";
}
if($_POST["diagrama_elementId"]=="a9f3-4011-830d-e378f5920145"){
$computador="B";
}
if($_POST["diagrama_elementId"]=="1da6-480f-ac09-cff1c511d2df"){
$computador="C";
}
$detail=" Computador ".$computador." movido!";
}
$resposta="
<span id="alerta" class="ui-growl-pl" data-widget="widget_alerta" data-summary="data-summary" data-detail="data-detail" data-severity="all,error" data-redisplay="true"></span>
<script id="alerta_s" type="text/javascript">
DinarteCoelho.cw("Growl", "widget_alerta", {
id: "alerta",
sticky: false,
life: 6000,
escape: true,
keepAlive: false,
msgs: [{
summary: "Conectado",
detail: "".$detail."",
severity: "info",
severityText: "Information"
}]
});
</script>
";
dc.cw("Growl", "widget_alerta", {
id: "alerta"
, sticky: false
, life: 6000
, escape: true
, keepAlive: false
, msgs: []
});
dc.cw("Diagram", "widget_diagrama", {
id: "diagrama"
, defaultConnector: ["Straight", {
stub: 0
, gap: 0
}]
, containment: false
, paintStyle: {
stroke: "#98AFC7"
, strokeWidth: 3
}
, hoverPaintStyle: {
stroke: "#5C738B"
}
, connectionOverlays: [["Arrow", {
location: 1.0
}]]
, maxConnections: -1
, endPoints: [{
uuid: "ad79617d-fb55-4ad6-b4fc-98371a0224ce"
, element: "9bb537fa-411f-4312-994f-9d744a7f4b1d"
, anchor: "Bottom"
, paintStyle: {
fill: "#98AFC7"
}
, hoverPaintStyle: {
fill: "#5C738B"
}
, isSource: true
, scope: "network"
, endpoint: ["Rectangle", {
width: 20
, height: 20
}]
}, {
uuid: "6acb8615-dc19-490e-9a2d-6aa316b5affd"
, element: "946fc986-a9f3-4011-830d-e378f5920145"
, anchor: "Bottom"
, paintStyle: {
fill: "#98AFC7"
}
, hoverPaintStyle: {
fill: "#5C738B"
}
, isSource: true
, scope: "network"
, endpoint: ["Rectangle", {
width: 20
, height: 20
}]
}, {
uuid: "28e3ac61-afac-42ae-bd12-0da27ebadf49"
, element: "1a9591aa-1da6-480f-ac09-cff1c511d2df"
, anchor: "Bottom"
, paintStyle: {
fill: "#98AFC7"
}
, hoverPaintStyle: {
fill: "#5C738B"
}
, isSource: true
, scope: "network"
, endpoint: ["Rectangle", {
width: 20
, height: 20
}]
}, {
uuid: "89d2fcc7-c54b-430e-8671-4b13c9e03063"
, element: "ce5e3fc7-7dc4-4a87-8186-2d8eb48e02ff"
, anchor: "AutoDefault"
, paintStyle: {
fill: "#98AFC7"
}
, hoverPaintStyle: {
fill: "#5C738B"
}
, isTarget: true
, scope: "network"
, endpoint: ["Dot", {
radius: 10
}]
}, {
uuid: "f44a48a8-2a2f-4294-bc27-1586a502a250"
, element: "80aec1b0-9e3f-4c0e-bd35-1b9f5be0e67f"
, anchor: "AutoDefault"
, paintStyle: {
fill: "#98AFC7"
}
, hoverPaintStyle: {
fill: "#5C738B"
}
, isTarget: true
, scope: "network"
, endpoint: ["Dot", {
radius: 10
}]
}]
, behaviors: {
disconnect: function (ext, event) {
dc.ab({
s: "diagrama"
, e: "disconnect"
, f: "formulario"
, p: "diagrama"
}, ext);
}
, connect: function (ext, event) {
dc.ab({
s: "diagrama"
, e: "connect"
, f: "formulario"
, p: "diagrama"
}, ext);
}
, connectionChange: function (ext, event) {
dc.ab({
s: "diagrama"
, e: "connectionChange"
, f: "formulario"
, p: "diagrama"
}, ext);
}
}
});