| « Tutorial: CSVCheck (1) | Ja! Ja! Mehr Popups! » |
Tutorial: Verbindungen mit TouchGraph GraphLayout visualisieren
Vor längerer Zeit habe ich bei SUN das Demo-Applet GraphLayout gesehen, das Verbindungen in einem dynamischen, animierten Diagramm zeigen kann.
Daraus ist TouchGraph-Projekt (bei sourceforge.net) hervorgegangen, das optische und funktionale Verbesserungen bietet:
TouchGraph wurde seit 2002 nicht mehr aktualisiert, umso erstaunlicher, dass man dazu kaum Tutorials findet. Hier also ein eigenes...
Fortsetzung:
Zunächst mal der Download: Du benötigst TouchGraph GraphLayout 1.22-jre11. Darin ist sowohl eine fertige JAR-Datei als auch der komplette Sourcecode enthalten. Startet man direkt die JAR-Datei, erscheint ein Demo wie oben. Und das soll nun mit eigenen Knotenpunkten und Verbindungen gefüllt werden.
Erstelle nun eine neue Java-Applikation mit einem JFrame als Programmoberfläche. Kopiere den Ordner "com" aus TGGraphLayout in den Source-Ordner Deines Projekts.
Im Package "com.touchgraph.graphlayout" findest Du die Klasse GLPanel. Diese ändern wir nun ein wenig, um sie von außen steuerbar zu machen.
In der Methode initialize() findet sich der Methodenaufruf randomGraph(). Damit werden die ganzen Knoten und Verbindungen der Demo-Anwendung erzeugt. Wir setzen den ganzen Block
Code:
try { | |
randomGraph(); | |
} catch ( TGException tge ) { | |
System.err.println(tge.getMessage()); | |
tge.printStackTrace(System.err); | |
} |
als Kommentar, damit er nicht mehr ausgeführt wird. Das war's auch schon, nun können wir die Kontrolle von außen übernehmen.
In unserem eigenen JFrame ergänzen wir noch ein paar Imports:
Code:
import com.touchgraph.graphlayout.Edge; | |
import com.touchgraph.graphlayout.GLPanel; | |
import com.touchgraph.graphlayout.Node; | |
import com.touchgraph.graphlayout.TGException; | |
import com.touchgraph.graphlayout.TGPanel; |
Nun soll ein neues GLPanel den ganzen Frame ausfüllen und zwei selbst festgelegte Knoten anzeigen.
Dazu fügen wir dem Konstruktor des JFrame drei Zeilen hinzu:
Code:
final GLPanel glPanel = new GLPanel (); | |
this.add ( glPanel); | |
updateGLPanel (glPanel); |
Die Methode updateGLPanel erstellen wir direkt in der Klasse des JFrame:
Code:
private void updateGLPanel (GLPanel glPanel) { | |
TGPanel tgPanel = glPanel.getTGPanel (); | |
try { | |
Node startNode = new Node ("1", "Start"); | |
tgPanel.addNode (startNode); | |
Node secondNode=new Node ("2", "Next"); | |
tgPanel.addNode (secondNode); | |
Edge firstEdge=new Edge (startNode, secondNode); | |
tgPanel.addEdge (firstEdge); | |
tgPanel.setSelect (startNode); | |
} catch (TGException ex) { | |
ex.printStackTrace (); | |
} | |
} |
Das dürfte selbsterklärend sein: Wir haben nacheinander zwei Knoten "Start" und "Next" erzeugt und dem tgPanel hinzugefügt. Anschließend kam noch eine Verbindung dieser beiden Knoten hinzu, und schließlich haben wir den Knoten "Start" selektiert, damit er farblich hervorgehoben in der Mitte erscheint.
Nächster Schritt: Passe die Methode updateGLPanel so an, wie Du sie brauchst. Die Knoten und Verbindungen können z.B. aus den Inhalten einer Datenbank erzeugt werden, oder aus einer XML-Datei.
Eine Starthilfe in Form eines minimalen Netbeans-Projekts gibt's HIER.
1 Kommentar
Ich möchte mich sehr herzlich bei Ihnen für diese Informationen. Das war für mich sehr hilfreich.
dankeschön nochmal
Adnane
Kommentar-Feed für diesen EintragKommentare sind für diesen Eintrag deaktiviert.
