GUI - Drag & Drop Elemente

[sven1987]

hallo,

ich habe die Aufgabe ein GUI zu programmieren, bei welchem man verschiedene Elemente per Drag & Drop einfügt und mittels Maus verbinden kann.

Diese Elemente sollte man dann per doppelklick öffnen können und verschiedene Parameter eingeben.

Das ganze soll dann per "Konfigurate" Button in eine txt Datei gespeichert werden.

Ich bin kompletter Neueinsteiger in Sachen Drag & Drop Programmierung und suche daher die passende Programmiersprache und Tipps mit der ich das am besten umsetzen kann.

Hat irgendjemand von euch ein paar Hilfreiche Ideen oder Ansätze, wie ich am besten beginnen soll.

lg und Danke

 

[Marcinek]

Du möchtest in einem Java-Forum wissen, welche Sprache du benutzen sollst um D&D zu implementieren?

Oder hast du dich für Java entschieden und möchtest wissen, wie es in Java geht:

Introduction to DnD (The Java™ Tutorials > Creating a GUI With JFC/Swing > Drag and Drop and Data Transfer)

Übrigens: Tutorial java drag and drop ==> Ungefähr 1.480.000 Ergebnisse(0,30 Sekunden)

 

[andreT]

Meine Meinung/Erfahrung bzgl. Java-DnD : http://www.java-forum.org/awt-swing...es-projekt-brauche-stichworte.html#post934906

 

[sven1987]

also ich habe die Meisten Erfahrungen mit Java und C, deswegen wird es warsch. Java

also ich brauche ein GUI wo ich verschiedene Elemente (welche sich z.b. links oder unten am GUI befinden) im GUI platziere und verbinde und somit eine "Wirkkette" erzeuge.

und so eine Art Netzwerkstruktur mit den Elementen aufbaue....

 

[sven1987]

also im generellen würdet ihr mir abraten d&d mit java zu machen?

 

[Michael...]

also im generellen würdet ihr mir abraten d&d mit java zu machen?

Ich nicht. Wenn ich die Anforderungen richtig verstanden habe, ist aber das Vorhaben nichts was man mit D&D realisieren würde. Das einzige was da evtl. in Frage kommt wäre das Hereinziehen in die "Arbeitsfläche". Da man aber die Wirkketten/Netzwerkstruktur ohnehin selbst zeichnen muss, fände ich es einfacher alles komplett selbst zu zeichnen.

 

[andreT]

also im generellen würdet ihr mir abraten d&d mit java zu machen?

JA! ... Aber das was du vorhast hat m.E. nichts mit DnD zu tun!
Du möchtest wohl sowas in der Art wie Klassendiagramme o.ä. zeichnen können und dann die Objekte hin- und herschieben und mit Linien verbinden können und sowas, richtig? Wenn ja, dann ist das alles ohnehin "nur" Java2D (siehe Tutorials im Forum). Dann musst du neben dem 2D-Zeichnen der Items eigtl. nur mit den üblichen Java MouseListenern arbeiten, und die verrichten ihre Arbeit in Java ganz hervorragend!!!

 

[sven1987]

ja also die hauptsymbole z.b.Sensor, Aktuator, Prozessor usw sollen vordefiniert sein und per drag& drop beliebig oft hinein gezogen werden.

z.b. das ein Prozessor mit 10 Sensoren und 2 Aktuatoren verbunden werden kann und jedes Element dann per Doppelklick eine Auswahl an individuell einstellbaren Parametern anzeigt.

also ich ziehe 10 Sensoren, 1 Prozessor und 2 Aktuatoren hinein, verbinde die alle an den Eingang vom Prozessor (natürlich sollten vorher die Eingänge und Ausgänge (und andere Parameter) definiert werden)

wenn ich dann alle verbindungen und Parameter eingestellt habe, gehe ich auf "generate" und er schreibt mir alle Parameter in ein txt file und speichert es z.b. in einem gewünschten Ordner

 

[andreT]

Wenn du die Hauptsymbole aus z.B. einem Menü in das "Zeichenpanel" ziehen willst, muss das ja auch nicht unbedingt mit DnD umgesetzt sein. Im Netbeans (glaub ich?!) GUI Editor klickst du z.B. ein Element (z.B. JLabel) an, und wenn du dann mit der Maus auf das Zeichenpanel gehst, ändert sich der Mauszeiger in ein Kreuz/Fadenkreuz. Dann kannst du mit Linksklick das Element dorthin platzieren wo die Maus gerade positioniert ist. Das wäre eine schicke Alternative zu DnD.
Das Zeichenpanel selbst ist dann ja ohnehin aussschliesslich Java2D-Painting!

Hier mal der Link zum Java-DnD : Introduction to DnD (The Java™ Tutorials > Creating a GUI With JFC/Swing > Drag and Drop and Data Transfer)
Wie im meinem verlinkten Post bereits bemerkt, schreib dir ruhig vorher mal ein DnD Testprogramm und schau ob du mit den Bugs ggf. leben kannst.

edit: Java DnD ist kein Hexenwerk und wird letztlich genauso erzeugt wie andere/beliebige Programmteile. Du musst da nicht zwingend irgendwelche GUI Elemente überschreiben o.ä.. Das hat dann den Vorteil das du den DnD Teil in externe Klassen schreiben kannst, und wenn du in deinem Progamm DnD aktivieren willst, kannst du das durchaus mit einem Einzeiler erledigen OHNE das da die GUI o.ä. angepasst werden muss. Aus diesem Grund würde ich an deiner Stelle erstmal das eigentliche Programme schreiben, und wenn du dann noch DnD supporten möchtest kannst du das ja dann noch problemlos einbauen.

 

[sven1987]

ich habe jetzt ein perfektes Beispiel gefunden

gwt-dnd demo

so in etwa soll das funktionieren, jedoch statt den Widgets halt z.b. ein Sensor Aktuator, Prozessor usw....

jedoch soll es eine Applikation sein und nicht Web basierend

 

[sven1987]

also ich habe mich jetzt für GEF entschieden

Ich habe jetzt ein simples Programm aufgebaut mit hilfe von dem Buch Eclipse-Graphical-Editing-Framework-Addison-Wesley

ich habe 3 Symbole (Sensor-, Aktor-und Super-Element) erstellt, aber ich kann sie nicht per Drag an Drop bewegen.

Ich habe eine neue Klasse (FigureMover) erstellt und den Code aus dem Buch eingegeben, aber es hat keine irgendwie keine Wirkung, die Elemente lassen sich nicht bewegen....

weiß wer den Fehler, bzw kann mir wer weiterhelfen?

main:

package com.qualityeclipse.genealogy.view;

import org.eclipse.draw2d.*;
import org.eclipse.draw2d.geometry.*;
import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Canvas;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Group;
import org.eclipse.swt.widgets.Shell;
import com.qualityeclipse.genealogy.listener.*;


public class main {
	
	public static void main(String[] args) {
		Shell shell= new Shell(new Display());
		
		shell.setSize(800, 600);
		shell.setText("DTF Parametereingabe mit Drag and Drop Funktion");
		shell.setLayout(new GridLayout());
		
		Canvas canvas = createDiagram(shell);
		canvas.setLayoutData(new GridData(GridData.FILL_BOTH));
		
		Display display = shell.getDisplay();
		shell.open();
		while (!shell.isDisposed()) {
			while (!display.readAndDispatch()) {
				display.sleep();
			
			}
		}
	}
	
	
	
	
	
	private static Canvas createDiagram(Composite parent) {
		
		Figure root = new Figure();//root Figure und simples Layout erzeugen 
		root.setFont(parent.getFont()); //setze Font für root Figure, dass jedes Lable korrekt kalkuliert wird
		
		XYLayout layout = new XYLayout();
		root.setLayoutManager(layout);
		
		Canvas canvas = new Canvas(parent, SWT.DOUBLE_BUFFERED);//canvas erzeugen um root Figur zu erzeugen
		canvas.setBounds(10, 10, 100, 100); //groeße und position von Canvas festlegen funktioneirt nicht!
		canvas.setBackground(ColorConstants.white); // Hintergrundfarbe bestimmen
		LightweightSystem lws = new LightweightSystem(canvas);
		
		
		
		//create Sensor Figure
		IFigure sensor = createSensorFigure("Sensor");
		root.add(sensor);
		layout.setConstraint(sensor,
				new Rectangle (new Point(300, 200), sensor.getPreferredSize()));
		
		//create AKtuator Figure
		IFigure aktuator = createAktuatorFigure("Aktuator");
		root.add(aktuator);
		layout.setConstraint(aktuator,
				new Rectangle (new Point(700, 200), aktuator.getPreferredSize()));
		
		//create Super Element
		IFigure Super = createSuperFigure("Super Element");
		root.add(Super,
				new Rectangle(new Point (450, 50),
						Super.getPreferredSize()));
		
		
		root.add(connect(sensor, Super));
		root.add(connect(Super, aktuator));
		
		
		// create Button
		Button button = new Button("Create txt File for Simulation");
		root.add(button, 
				new Rectangle(575, 532, 200, 20));
		
		
		
		Group group = new Group(canvas, 0);
		group.setBounds(5, 5, 200, 600);
		//group.setBackground(ColorConstants.gray);
		group.setText("Auswahl der Elemente:");
		
		

		
		lws.setContents(root);
		return canvas;
	}

	
	private static IFigure connect(IFigure figure1, IFigure figure2) {
		PolylineConnection connection = new PolylineConnection();
		connection.setSourceAnchor(new ChopboxAnchor(figure1));
		connection.setTargetAnchor(new ChopboxAnchor(figure2));
		return connection;
	}





	private static IFigure createSuperFigure(String name) {
		RectangleFigure rectangleFigure = new RectangleFigure();
		rectangleFigure.setBackgroundColor(ColorConstants.darkGray);
		rectangleFigure.setLayoutManager(new ToolbarLayout());
		rectangleFigure.setPreferredSize(150, 350);
		rectangleFigure.add(new Label(name));
		return rectangleFigure;
	}



//private RectangleFigure createAktuatorFigure(String name) {

	private static IFigure createAktuatorFigure(String name) {
		RectangleFigure rectangleFigure = new RectangleFigure();
		rectangleFigure.setBackgroundColor(ColorConstants.lightBlue);
		rectangleFigure.setLayoutManager(new ToolbarLayout());
		rectangleFigure.setPreferredSize(50, 50);
		rectangleFigure.add(new Label(name));
		//new FigureMover(rectangleFigure);
		return rectangleFigure;
	}


	private static IFigure createSensorFigure(String name) {
		RectangleFigure rectangleFigure = new RectangleFigure();
		rectangleFigure.setBackgroundColor(ColorConstants.lightGray);
		rectangleFigure.setLayoutManager(new ToolbarLayout());
		rectangleFigure.setPreferredSize(50, 50);
		rectangleFigure.add(new Label(name));
		return rectangleFigure;
		}


}package com.qualityeclipse.genealogy.view;

import org.eclipse.draw2d.*;
import org.eclipse.draw2d.geometry.*;
import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Canvas;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Group;
import org.eclipse.swt.widgets.Shell;


public class main {
	
	public static void main(String[] args) {
		Shell shell= new Shell(new Display());
		
		shell.setSize(800, 600);
		shell.setText("DTF Parametereingabe mit Drag and Drop Funktion");
		shell.setLayout(new GridLayout());
		
		Canvas canvas = createDiagram(shell);
		canvas.setLayoutData(new GridData(GridData.FILL_BOTH));
		
		Display display = shell.getDisplay();
		shell.open();
		while (!shell.isDisposed()) {
			while (!display.readAndDispatch()) {
				display.sleep();
			
			}
		}
	}
	
	
	
	
	
	private static Canvas createDiagram(Composite parent) {
		
		Figure root = new Figure();//root Figure und simples Layout erzeugen 
		root.setFont(parent.getFont()); //setze Font für root Figure, dass jedes Lable korrekt kalkuliert wird
		
		XYLayout layout = new XYLayout();
		root.setLayoutManager(layout);
		
		Canvas canvas = new Canvas(parent, SWT.DOUBLE_BUFFERED);//canvas erzeugen um root Figur zu erzeugen
		canvas.setBounds(10, 10, 100, 100); //groeße und position von Canvas festlegen funktioneirt nicht!
		canvas.setBackground(ColorConstants.white); // Hintergrundfarbe bestimmen
		LightweightSystem lws = new LightweightSystem(canvas);
		
		/*
		
		private IFigure createPersonFigure(String name) {
		RectangleFigure rectangleFigure = new RectangleFigure();
		rectangleFigure.setBackgroundColor(ColorConstants.lightGray);
		rectangleFigure.setLayoutManager(new ToolbarLayout());
		rectangleFigure.setPreferredSize(50, 50);
		rectangleFigure.add(new Lable(name));
		return rectangleFigure;
		}
		
		IFigure sensor = createPersonFigure("Sensor");
		root.add(sensor
		layout.setConstraint(sensor,
				new Rectangle (new Point(20, 20), sensor.getPreferredSize()));
		
		IFigure aktuator = createPersonFigure("Aktuator");
		root.add(aktuator);
		layout.setConstraint(aktuator,
				new Rectangle (new Point(120, 120), aktuator.getPreferredSize()));
			}
		*/
			
	
	
		
		Button button = new Button("Create txt File for Simulation");
		root.add(button, 
				new Rectangle(575, 532, 200, 20));
		
		
		
		Group group = new Group(canvas, 0);
		group.setBounds(5, 5, 200, 600);
		//group.setBackground(ColorConstants.gray);
		group.setText("Auswahl:");
		
		

		
		lws.setContents(root);
		return canvas;
	}



	private static IFigure createPersonFigure(String string) {
		// TODO Auto-generated method stub
		return null;
	}

}

FigureMover:

package com.qualityeclipse.genealogy.view;

import org.eclipse.draw2d.*;
import org.eclipse.draw2d.geometry.*;
import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Canvas;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Group;
import org.eclipse.swt.widgets.Shell;
import com.qualityeclipse.genealogy.listener.*;


public class main {
	
	public static void main(String[] args) {
		Shell shell= new Shell(new Display());
		
		shell.setSize(800, 600);
		shell.setText("DTF Parametereingabe mit Drag and Drop Funktion");
		shell.setLayout(new GridLayout());
		
		Canvas canvas = createDiagram(shell);
		canvas.setLayoutData(new GridData(GridData.FILL_BOTH));
		
		Display display = shell.getDisplay();
		shell.open();
		while (!shell.isDisposed()) {
			while (!display.readAndDispatch()) {
				display.sleep();
			
			}
		}
	}
	
	
	
	
	
	private static Canvas createDiagram(Composite parent) {
		
		Figure root = new Figure();//root Figure und simples Layout erzeugen 
		root.setFont(parent.getFont()); //setze Font für root Figure, dass jedes Lable korrekt kalkuliert wird
		
		XYLayout layout = new XYLayout();
		root.setLayoutManager(layout);
		
		Canvas canvas = new Canvas(parent, SWT.DOUBLE_BUFFERED);//canvas erzeugen um root Figur zu erzeugen
		canvas.setBounds(10, 10, 100, 100); //groeße und position von Canvas festlegen funktioneirt nicht!
		canvas.setBackground(ColorConstants.white); // Hintergrundfarbe bestimmen
		LightweightSystem lws = new LightweightSystem(canvas);
		
		
		
		//create Sensor Figure
		IFigure sensor = createSensorFigure("Sensor");
		root.add(sensor);
		layout.setConstraint(sensor,
				new Rectangle (new Point(300, 200), sensor.getPreferredSize()));
		
		//create AKtuator Figure
		IFigure aktuator = createAktuatorFigure("Aktuator");
		root.add(aktuator);
		layout.setConstraint(aktuator,
				new Rectangle (new Point(700, 200), aktuator.getPreferredSize()));
		
		//create Super Element
		IFigure Super = createSuperFigure("Super Element");
		root.add(Super,
				new Rectangle(new Point (450, 50),
						Super.getPreferredSize()));
		
		
		root.add(connect(sensor, Super));
		root.add(connect(Super, aktuator));
		
		
		// create Button
		Button button = new Button("Create txt File for Simulation");
		root.add(button, 
				new Rectangle(575, 532, 200, 20));
		
		
		
		Group group = new Group(canvas, 0);
		group.setBounds(5, 5, 200, 600);
		//group.setBackground(ColorConstants.gray);
		group.setText("Auswahl der Elemente:");
		
		

		
		lws.setContents(root);
		return canvas;
	}

	
	private static IFigure connect(IFigure figure1, IFigure figure2) {
		PolylineConnection connection = new PolylineConnection();
		connection.setSourceAnchor(new ChopboxAnchor(figure1));
		connection.setTargetAnchor(new ChopboxAnchor(figure2));
		return connection;
	}





	private static IFigure createSuperFigure(String name) {
		RectangleFigure rectangleFigure = new RectangleFigure();
		rectangleFigure.setBackgroundColor(ColorConstants.darkGray);
		rectangleFigure.setLayoutManager(new ToolbarLayout());
		rectangleFigure.setPreferredSize(150, 350);
		rectangleFigure.add(new Label(name));
		return rectangleFigure;
	}



//private RectangleFigure createAktuatorFigure(String name) {

	private static IFigure createAktuatorFigure(String name) {
		RectangleFigure rectangleFigure = new RectangleFigure();
		rectangleFigure.setBackgroundColor(ColorConstants.lightBlue);
		rectangleFigure.setLayoutManager(new ToolbarLayout());
		rectangleFigure.setPreferredSize(50, 50);
		rectangleFigure.add(new Label(name));
		//new FigureMover(rectangleFigure);
		return rectangleFigure;
	}


	private static IFigure createSensorFigure(String name) {
		RectangleFigure rectangleFigure = new RectangleFigure();
		rectangleFigure.setBackgroundColor(ColorConstants.lightGray);
		rectangleFigure.setLayoutManager(new ToolbarLayout());
		rectangleFigure.setPreferredSize(50, 50);
		rectangleFigure.add(new Label(name));
		return rectangleFigure;
		}


}package com.qualityeclipse.genealogy.view;

import org.eclipse.draw2d.*;
import org.eclipse.draw2d.geometry.*;
import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Canvas;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Group;
import org.eclipse.swt.widgets.Shell;


public class main {
	
	public static void main(String[] args) {
		Shell shell= new Shell(new Display());
		
		shell.setSize(800, 600);
		shell.setText("DTF Parametereingabe mit Drag and Drop Funktion");
		shell.setLayout(new GridLayout());
		
		Canvas canvas = createDiagram(shell);
		canvas.setLayoutData(new GridData(GridData.FILL_BOTH));
		
		Display display = shell.getDisplay();
		shell.open();
		while (!shell.isDisposed()) {
			while (!display.readAndDispatch()) {
				display.sleep();
			
			}
		}
	}
	
	
	
	
	
	private static Canvas createDiagram(Composite parent) {
		
		Figure root = new Figure();//root Figure und simples Layout erzeugen 
		root.setFont(parent.getFont()); //setze Font für root Figure, dass jedes Lable korrekt kalkuliert wird
		
		XYLayout layout = new XYLayout();
		root.setLayoutManager(layout);
		
		Canvas canvas = new Canvas(parent, SWT.DOUBLE_BUFFERED);//canvas erzeugen um root Figur zu erzeugen
		canvas.setBounds(10, 10, 100, 100); //groeße und position von Canvas festlegen funktioneirt nicht!
		canvas.setBackground(ColorConstants.white); // Hintergrundfarbe bestimmen
		LightweightSystem lws = new LightweightSystem(canvas);
		
		/*
		
		private IFigure createPersonFigure(String name) {
		RectangleFigure rectangleFigure = new RectangleFigure();
		rectangleFigure.setBackgroundColor(ColorConstants.lightGray);
		rectangleFigure.setLayoutManager(new ToolbarLayout());
		rectangleFigure.setPreferredSize(50, 50);
		rectangleFigure.add(new Lable(name));
		return rectangleFigure;
		}
		
		IFigure sensor = createPersonFigure("Sensor");
		root.add(sensor
		layout.setConstraint(sensor,
				new Rectangle (new Point(20, 20), sensor.getPreferredSize()));
		
		IFigure aktuator = createPersonFigure("Aktuator");
		root.add(aktuator);
		layout.setConstraint(aktuator,
				new Rectangle (new Point(120, 120), aktuator.getPreferredSize()));
			}
		*/
			
	
	
		
		Button button = new Button("Create txt File for Simulation");
		root.add(button, 
				new Rectangle(575, 532, 200, 20));
		
		
		
		Group group = new Group(canvas, 0);
		group.setBounds(5, 5, 200, 600);
		//group.setBackground(ColorConstants.gray);
		group.setText("Auswahl:");
		
		

		
		lws.setContents(root);
		return canvas;
	}



	private static IFigure createPersonFigure(String string) {
		// TODO Auto-generated method stub
		return null;
	}

}