/* * SPL - The SPL Programming Language * Copyright (C) 2004, 2005 Clifford Wolf * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation; either version 2 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA * * wsfgraph.webspl: A simple demo for the WsfGraph class */ load "wsf"; load "wsf_graph"; load "wsf_display"; var description = <>

WsfGraph Example

This is a small example application for the WsfGraph Class, a WSF component for displaying and editing graphs. It is e.g. used in the admin interface of SPL Ticket for editing the ticket states and their relations.

The WsfGraph Class is using some advances JavaScript DOM stuff. It works with most browsers, but it works best with Mozilla Firefox.

You can click on the nodes and the connections and move the nodes.

; var node_list; object Node { var info; var name; var pos_x; var pos_y; var links; var color; method get_xywh() { return [ 'x' => pos_x, 'y' => pos_y, 'w' => 100, 'h' => 50 ]; } method set_xy(x, y) { pos_x = x; pos_y = y; info.set_html(description ~ "

Clicked on:

$name:
x=$pos_x
y=$pos_y

"); } method set_link(trg) { info.set_html(description ~ "

Clicked on:

$name -> ${node_list[trg].name}

"); } method get_color() { return color; } method get_html() { return "$name"; } method get_links() { return links; } method init(i, n, c, y, x, l) { info = i; name = n; color = c; pos_x = x; pos_y = y; links = l; return this; } } object Graphdemo WsfComponent { method get_html() { return <>
${children[0].get_html()} ${children[1].get_html()}
; } method init() { children[1] = new WsfDisplay(); children[1].set_html(description); children[0] = new WsfGraph( function() { return node_list; }, "images/wsf_graph_" ); children[0].iframe_attributes = 'style="width:100%; height:100%"'; children[0].iframe_header = ''; return *WsfComponent.init(); } } var page = new WsfDocument(); page.root = new Graphdemo(); node_list = [ 'n1' => new Node(page.root.children[1], "Node #1", "#aaffff", 200, 400, [ "n2", "n3", "n4", "n6" ] ), 'n2' => new Node(page.root.children[1], "Node #2", "#ffaaff", 300, 200, [ "n3", "n4", "n5", "n6" ] ), 'n3' => new Node(page.root.children[1], "Node #3", "#ffffaa", 100, 300, [ "n1" ] ), 'n4' => new Node(page.root.children[1], "Node #4", "#aaffaa", 200, 100, [ "n3", "n5" ] ), 'n5' => new Node(page.root.children[1], "Node #5", "#ffaaaa", 400, 100, [ "n6" ] ), 'n6' => new Node(page.root.children[1], "Node #6", "#aaaaff", 400, 400, [ "n5" ] ) ]; page.main();