Gui in bestehendes Java-Programm

[intermex]

Hallo,

ich würde gerne die Basis/Grundlage der Implementierung einer Gui in ein schon funktionierenden Programm kennenlernen.
Zum Beispiel:
Ich habe ein einfaches Würfelspiel in Java geschrieben und möchte dazu jetzt eine GUI. Diese habe ich in After Effects entworfen.
Ich möchte jetzt die entworfenen Animationen, Panels etc. in mein Java Programm einbauen.

Und nun ab diesem Punkt herscht bei mir eine absolute Denkblockade
Die Zusammenführung des Java-Programms(des Codes) und der GUI(visuelles Erscheinungsbild) erschließt mich mir überhaupt nicht.

Zur Info: Ich ziehe After Effects für das Designen einer GUI vor. Ich weiß das es auch Swift, Axure RP usw. gibt.


Ich hoffe ich bekomme ein paar grundlegende Infos.

 

[lam_tr]

Hi intermex,

ich verstehe das nicht ganz. Ist After Effects nicht eher eine Anwendung für Video Bearbeitung, womit man Effekte einfache hinzufügen kann?
Willst du ein Video/GUI in eine Java Anwendung machen?

Bisher kenne ich für GUI Programmierung in Java für Desktop Apps nur AWT, Swing, SWT und JavaFX.

Aber wenn du jetzt ein Spiel machen willst, gibt es noch Jogl oder JMonkey.

Mit diese Bibliotheken solltes du deine Klassen und Methoden problemlos aufrufen können.

Aber mit After Effects ist es vermutlich schwerer.

 

[intermex]

Ich verstehe das nicht ganz. Ist After Effects nicht eher eine Anwendung für Video Bearbeitung, womit man Effekte einfache hinzufügen kann?
Willst du ein Video/GUI in eine Java Anwendung machen?

Ja, Sie haben recht. After Effects ist eher für GUI-Protoyping.
Aber die Einbindung oder Umwandlung des GUI-Protoype in bestehenden Code, damit sich das Programm dann eben wie die entworfene GUI darstellt, verstehe ich noch nicht.
Geht das über die von Ihnen angesprochenen Bibliotheken?

 

[lam_tr]

Für viele dieser Bibliotheken gibt es einen Designer womit du die Anwendung per Drag und Drop zusammenbasteln kannst. Ich arbeite generell sehr gerne mit JavaFX.

Dort wird die UI als XML abgespeichert und weiter kannst du den Codebehind / Controller Klasse generieren lassen und dort deine Logik ausführen

 

[intermex]

Ah okay, vielen Dank.

Und zum Beispiel ich bastel mir eine Anwendung zusammen. Kann ich die darin befindlichen Elemente(z.B Textfeld, Hintergrund, Form und Größe, "OK"-Button) aus einem selbstgestalteten Design(in Form einer Datei wie .jpg ...) hinzufügen?

 

[lam_tr]

Warum willst du die Steuerelemente über PNG stylen? In JavaFX kannst du die Elemente direkt stylen. Ansonsten kannst du eine ImageView nehmen und es darstellen lassen.

 

[intermex]

Genaus das möchte ich ja wissen. Die Grundlage um aus Code eine ansprechende und intuitive Benutzerfläche zu designen/implementieren.

Ich habe ein Bild angehangen. Würden Sie sagen dass ich mit JavaFX so eine Benutzeroberfläche implementieren kann? Das ist dass einzige was ich eigentlich wissen möchte, bevor ich mir Sachen aneigne die ich im Nachhinein nicht benötige.

 

[lam_tr]

Genaus das möchte ich ja wissen. Die Grundlage um aus Code eine ansprechende und intuitive Benutzerfläche zu designen/implementieren.

Ich habe ein Bild angehangen. Würden Sie sagen dass ich mit JavaFX so eine Benutzeroberfläche implementieren kann? Das ist dass einzige was ich eigentlich wissen möchte, bevor ich mir Sachen aneigne die ich im Nachhinein nicht benötige.

Also das was ich an JavaFX so schätze ist, das stylen der Controls. Es ist so einfach und vor allem sehr vielfältig ist. Ich hoffe das wird jetzt nicht als Werbung betrachtet. Ich habe eine CV App geschrieben und das als Vorlage benutzt. Diese Vorlage ist 100 % JavaFX.

Das coole an JavaFX / OpenJFX, es läuft auf vielen Plattformen (Web, Android, IOS, etc.).

Es ist nur eine Frage der Zeit, aber wenn dir das Stylen Spaß machst, kannst du bestimmt einige Stunden dran sitzen, So ist das bei mir der Fall.

 

[dzim]

Also um die Frage zu beantworten (was @lam_tr ja auch schon gemacht hat): Na klar kannst du deine GUI mit JavaFX sehr anspruchsvoll gestalten und z.B. Vorgaben von Designern folgen.

Z.B. Dirk Lemmermann, der eine Business-UI mitgestaltet (Bsp. hier:

https://twitter.com/i/web/status/1301871841443708928

) berichtet da ab und an von, wie der Designer etwas vorgibt und sie es umsetzen.
Also ja: Das Design ist absolut möglich mit JavaFX umzusetzen.

ABER: Vermutlich nicht von dir sofort, denn um so etwas wie sein UI oder das aus deinem Beispiel (oder auch das von @lam_tr) umzusetzen, muss man sich – egal mit welchen Framework – wirklich auseinandersetzen und es kennen. Aus dem Ärmel schüttelt man das nicht.

Btw: @lam_tr - das Design ist mir auf Twitter (und YouTube) untergekommen... EMF? Kann man das brauchen? Die Hashtags waren ja (#JavaFX #EMF #Xcore #UI #Designer). Sieht jedenfalls cool aus.

 

[lam_tr]

Also um die Frage zu beantworten (was @lam_tr ja auch schon gemacht hat): Na klar kannst du deine GUI mit JavaFX sehr anspruchsvoll gestalten und z.B. Vorgaben von Designern folgen.

Z.B. Dirk Lemmermann, der eine Business-UI mitgestaltet (Bsp. hier:

https://twitter.com/i/web/status/1301871841443708928

) berichtet da ab und an von, wie der Designer etwas vorgibt und sie es umsetzen.
Also ja: Das Design ist absolut möglich mit JavaFX umzusetzen.

ABER: Vermutlich nicht von dir sofort, denn um so etwas wie sein UI oder das aus deinem Beispiel (oder auch das von @lam_tr) umzusetzen, muss man sich – egal mit welchen Framework – wirklich auseinandersetzen und es kennen. Aus dem Ärmel schüttelt man das nicht.

Btw: @lam_tr - das Design ist mir auf Twitter (und YouTube) untergekommen... EMF? Kann man das brauchen? Die Hashtags waren ja (#JavaFX #EMF #Xcore #UI #Designer). Sieht jedenfalls cool aus.

Hallo dzim,

danke für das Kompliment. Das ich heute soweit geschafft habe, habe ich dir auch sehr viel zu verdanken!

Und bezüglich EMF, das ist einer meiner Lieblings API. Ich benutze es hautpsächlich für Codegenerierung, DSL beschreiben und vor allem zur Modellerstellung. Wenn du ein Metamodell damit erstellt hast, gibt es so viele Features von Haus schon mitgeliefert:
- Undo / Redo
- Baumstruktur (mit Tom Schindls Framework lässt sich das Modell ohne viel Aufwand in ein TreeView abbilden, wenn du mein Video gesehen hast, müsstest du das auch gemerkt haben.). Ich fand es bisher immer sehr krampfhaft mein Java Modell in ein TreeView abzubilden. Die Travesierung der einzelnen Knotentypen macht das Framework für dich
- Gilt auch für ListView und TableView
- Die Darstellung der Knoten lassen sich über LabelProvider stylen und bestimmen welcher Text dargestellt wird Das kennst du bestimmt auch noch oder von JFace.
- Serialisieren / Deserialisieren von Modell zur XMI (XML Dialect für Metamodelle) und Json
- Das coolste an dem Framework ist, es funktioniert auch ohne Eclipse ^^
- Und das ModelSwitch bei EMF ist einfach der burner. Hier als Beispiel: Beim Selektiere eines Knotens im Baum rufe diesen Switch auf, dann wird die passende Methode für den Knoten ausgeführt, ich habe hier ein ChartFXRenderer zum Darstellen einzelner Diagramme als Beispiel. ChartSwitch Basisklasse ist eine generierte, genauso wie die Modellklassen. An sich rufe ich dann nur ChartFXRenderer#doSwitch(node) auf, dann bekomme ich ein JavaFX Node zurück.

public class ChartFXRenderer extends ChartSwitch<Node> {

    @Override
    public Node caseStackedBarChart3dFX(StackedBarChart3dFX object) {
        StandardCategoryDataset3D<String, String, String> dataset = new StandardCategoryDataset3D<>();

        object.getSeries().forEach(series -> {
            DefaultKeyedValues<String, Double> s = new DefaultKeyedValues<>();
            series.getValues().forEach(v -> s.put(v.getName(), v.getValue()));
            String name = series.getName() == null ? "Test " + object.getSeries().indexOf(series) : series.getName();
            String rowKey = series.getRowKey() == null ? "Row" : series.getRowKey();
            dataset.addSeriesAsRow(name, rowKey, s);
        });

        String title = "Stacked Bar Chart";
        String subtitle = "Put the data source here";
        Chart3D chart = Chart3DFactory.createStackedBarChart(title, subtitle, dataset, null, null, "Value");
        return new Chart3DViewer(chart);
    }

        @Override
    public Node caseBarChartFX(BarChartFX object) {
        BaseBarChart<String, Number> chart = new BaseBarChart<>(new CategoryAxis(), new NumberAxis());
        currentChart = chart.getChart();
        caseChartFXConfig(object.getConfig());
        for (CategorySeriesFX s : object.getSeries()) {
            Series<String, Number> series = chart.addSerie(s.getName());
            for (CategoryValueFX item : s.getValues()) {
                series.getData().add(new XYChart.Data<String, Number>(String.valueOf(item.getName()), item.getValue()));
            }
        }
        return chart;
    }

    @Override
    public Node casePieChartFX(PieChartFX object) {
        BasePieChart chart = new BasePieChart();
        currentChart = chart;
        caseChartFXConfig(object.getConfig());
        for (CategorySeriesFX s : object.getSeries()) {
            for (CategoryValueFX value : s.getValues()) {
                chart.add(value.getName(), value.getValue());
            }
        }
        return chart;
    }

    @Override
    public Node caseBubbleChartFX(BubbleChartFX object) {
        BaseBubbleChart<Number, Number> chart = new BaseBubbleChart<>(new NumberAxis(), new NumberAxis());
        currentChart = chart.getChart();
        initChart(object, chart);
        return chart;
    }

    @Override
    public Node caseScatterChartFX(ScatterChartFX object) {
        BaseScatterChart<Number, Number> chart = new BaseScatterChart<>(new NumberAxis(), new NumberAxis());
        currentChart = chart.getChart();
        initChart(object, chart);
        return chart;
    }

    @Override
    public Node caseAreaChartFX(AreaChartFX object) {
        BaseAreaChart<Number, Number> chart = new BaseAreaChart<>(new NumberAxis(), new NumberAxis());
        currentChart = chart.getChart();
        initChart(object, chart);
        return chart;
    }

    private void initChart(XYChartFX object, BaseXYChart<Number, Number> chart) {
        caseChartFXConfig(object.getConfig());
        initSeries(object, chart);
        enablePanning(true);
        enableZooming(true);
    }

    private void initSeries(XYChartFX object, BaseXYChart<Number, Number> chart) {
        for (SeriesFX seriesFX : object.getSeries()) {
            Series<Number, Number> series = chart.addSerie(seriesFX.getName());
            for (XYValueFX item : seriesFX.getValues()) {
                series.getData().add(new XYChart.Data<Number, Number>(item.getX(), item.getY()));
            }
        }
    }

    @Override
    public Node caseLineChartFX(LineChartFX object) {
        BaseLineChart<Number, Number> chart = new BaseLineChart<>(new NumberAxis(), new NumberAxis());
        currentChart = chart.getChart();
        initChart(object, chart);
        return chart;
    }
....
}

- Beim Editieren des Models wird ein Notifier abgefeuert, was auch sehr hilfreich ist.

In der Eclipse Welt, wird dieses Framework zum Rendern von Eclipse und E4 benutzt.

Und ich benutzt zwar EMF aber zum beschreiben des Metamodells wird Xcore (anstatt DND, textuelle Form von Ecore) verwendet.

Source: Link

Oje jetzt habe ich dich voll zugetextet, sobald jemand mich nach EMF / JavaFX frage tick ich voll aus und erzähle immer so gerne viel darüber.

Meinst du mit cool, die CV, das Tool oder EMF Also ich finde EMF nimmt einem schon sehr viel ab.

Grüße
lam

 

[dzim]

Hi @lam_tr hat etwas arg lang gedauert.

Erstmal danke, dass mich da lobst, aber ich glaube es waren hier alle im Forum, die dich voran gebracht haben, zumal meine Aktivität ja recht nachgelassen hat... Tja. ;-)

Bin auch in den letzten Tag in einigen JavaFX-Sachen versumpft. Aber ich glaube, ich mach zwar gerne abstrusen Schei......benkleister, aber so cool strukturiert mache ich es selten. Ist schon lange her, dass ich mal auf Basis vom Eclipse-OSGi eine FX-Anwendung gemacht habe, aber da habe ich eher das Plugin-Framework verwendet und die Modell-Schiene aussen vor gelassen. Xtext und so fand ich immer interessant, hatte aber nie ein Projekt, in dem ich es verwenden konnte.

Ich bin momentan dabei, einem Kollegen bei einer alten – und von mir verbrochenen FX-Anwendung zu helfen – und ich muss sage: Man, hab ich früher kompliziert programmiert. Alles reagiert nur auf events. Alles ist sehr lose gekoppelt. Das ist zwar löblich, aber auch z.T. sehr schwer nur noch nachzuvollziehen.
Daher habe ich jetzt Kotlin ins Boot geholt. Und TornadoFX in abgespeckter (und wo ich es brauchte in erweiterter) Form reingezogen. Deklarative UI im Code! Yeah!

Ein anderes Projekt zum Spielen, war nochmal etwas mehr mit JavaFX und GraalVM (für Windows und Linux erst einmal), mit allen von uns benötigten Dependencies in einem speziellen Use-Case zum laufen zu bringen. Finde das interessant, aber der Weg zu GraalVM ist mitunter immer noch etwas harzig.

Danke nochmal für deinen Einblick in EMF. Ich fürchte nur, dass ich da so schnell nicht mehr hin kommen werde... ;-)

Ich meinte mit mit "cool" übrigens dein Tool, speziell das UI! Über das, was dahinter steht, kann ich ja nicht so viel sagen.

So. Allen zusammen noch weiterhin ein erfolgreiches Coden, auch wenn ich fürchte, dass wir @intermex hier im Thread etwas verschreckt haben.

 

[lam_tr]

Hi @lam_tr hat etwas arg lang gedauert.

Erstmal danke, dass mich da lobst, aber ich glaube es waren hier alle im Forum, die dich voran gebracht haben, zumal meine Aktivität ja recht nachgelassen hat... Tja. ;-)

Bin auch in den letzten Tag in einigen JavaFX-Sachen versumpft. Aber ich glaube, ich mach zwar gerne abstrusen Schei......benkleister, aber so cool strukturiert mache ich es selten. Ist schon lange her, dass ich mal auf Basis vom Eclipse-OSGi eine FX-Anwendung gemacht habe, aber da habe ich eher das Plugin-Framework verwendet und die Modell-Schiene aussen vor gelassen. Xtext und so fand ich immer interessant, hatte aber nie ein Projekt, in dem ich es verwenden konnte.

Ich bin momentan dabei, einem Kollegen bei einer alten – und von mir verbrochenen FX-Anwendung zu helfen – und ich muss sage: Man, hab ich früher kompliziert programmiert. Alles reagiert nur auf events. Alles ist sehr lose gekoppelt. Das ist zwar löblich, aber auch z.T. sehr schwer nur noch nachzuvollziehen.
Daher habe ich jetzt Kotlin ins Boot geholt. Und TornadoFX in abgespeckter (und wo ich es brauchte in erweiterter) Form reingezogen. Deklarative UI im Code! Yeah!

Ein anderes Projekt zum Spielen, war nochmal etwas mehr mit JavaFX und GraalVM (für Windows und Linux erst einmal), mit allen von uns benötigten Dependencies in einem speziellen Use-Case zum laufen zu bringen. Finde das interessant, aber der Weg zu GraalVM ist mitunter immer noch etwas harzig.

Danke nochmal für deinen Einblick in EMF. Ich fürchte nur, dass ich da so schnell nicht mehr hin kommen werde... ;-)

Ich meinte mit mit "cool" übrigens dein Tool, speziell das UI! Über das, was dahinter steht, kann ich ja nicht so viel sagen.

So. Allen zusammen noch weiterhin ein erfolgreiches Coden, auch wenn ich fürchte, dass wir @intermex hier im Thread etwas verschreckt haben.

Hallo dzim,

Erstmal danke, dass mich da lobst, aber ich glaube es waren hier alle im Forum, die dich voran gebracht haben, zumal meine Aktivität ja recht nachgelassen hat... Tja. ;-)

Ja stimmt, bezüglich Java habe ich auch andere Kollegen dieses Forums zu bedanken. Ich bezog mich den Dank mehr an den JavaFX Part. Wie auch immer ich denke du weisst schon was ich meine.

Kotlin ist eine Sache die ich auch schon lange machen möchte, aber die nie die Zeit dafür bekommen. Kannst du mir mal ein Beispiel " Deklarative UI im Code! Yeah!" geben, um das ganze etwas schmackhafter zu machen?

TornadoFX scheint auch vielversprechend zu sein. Ich muss das mal genauer mit Kotlin unter die Lupe nehmen.

Wenn JavaFX und GraalVM ist doch Gluon Substrate oder? Wenn JavaFX Android Entwicklung unter Windows geht bin ich auch voll bei dir. Leider warte ich da immer noch auf den Tag.

Und dir auch vielen Dank für das Kompliment.