Hoe maak je een JavaFX applicatie?

Text goes here

Hoe maak je een Swing applicatie?

(Gemaakt met behulp van voorkennis, Lesson: Getting Started with Swing (The Java^TM Tutorials > Creating a GUI With Swing). (n(First JavaFX Application - Javatpoint, z.d.) en Hejazi, F. (2019, May 7). IntelliJ IDEA GUI Designer Tutorial. Examples Java Code Geeks.)

Een Swing applicatie bestaat uit frames. Een Frame is wat door je systeem wordt gezien als een "window". Binnen een complexe applicatie bestaan de frames ook uit een of meerdere Panel(s). Een panel is een soort class dat UI elementen kan bevatten. Vanwege hoe de taal is opgezet kan je zelfs een frontend aanmaken zonder apparte classes aan te maken, zoals te zien in de code snippet hieronder:

en (Create A New JavaFX Project | IntelliJ IDEA, z.d.))

Om een JavaFX applicatie te starten en een scherm aan te maken moet er een start() methode aangemaakt worden en daarin moet er een stage aangemaakt worden. Deze stage krijgt een title en een scene. Om aan te geven hoe de scene eruit ziet wordt er een bestand aangeroepen genaamd welcome-screen.fxml. In dit bestand wordt bijgehouden hoe groot de scene is, wat er in zit (denk aan knoppen of labels met tekst) en bijvoorbeeld padding van de objecten die zich in de scene bevinden. Dit bestand wordt aangeroepen door de FXMLLoader. Dit is dan ook te zien in Code snippet 6.1.

package nl.eniac.klukkluk;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;

public class KlukklukApplication extends Application {
    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(KlukklukApplication.class.getResource("welcome-screen.fxml"));
        Scene scene = new Scene(fxmlLoader.load(), 320, 240public static void main(String[] args){
    Frame frame = new Frame("simple app");
    Panel panel = new Panel();
    Label label = new Label("This is a label");
    TextField textField = new TextField("enter text here");
    Button button = new Buttonstage.setTitle("SubmitKlukkluk v0.01");
    panel.add(label    stage.setScene(scene);
     panel.add(textField   stage.show();
    panel.add(button);}

    frame.add(panel);public static void main(String[] args) {
    frame.pack();
    frame.validatelaunch();
    frame.setVisible(true);}
}
(Code snippet 76.1)

In dit stuk code wordt een frame, een panel en UI elementen aangemaakt. De UI elementen worden toegevoegd aan de panel, en de panel wordt toegevoegd aan het frame. De laatste regels zijn boilerplate code om het frame te laten zien. Dit ziet er vervolgens zo uit:

Image Removed

(Afbeelding 7.1)

Dit ziet er echter niet echt goed uit, Swing heeft echter de mogelijkheid om UI elementen in te delen met XML. Dit kan met de hand, of met een IDE, dit is bij dit onderzoek met IntelliJ gedaan.

Met de editor van IntelliJ kunnen dezelfde UI elementen in de voorbeeldApplicatie geplaatst worden. Dit wordt hier gedaan in een class die Jframe extend. De class vertegenwoordigd dus een window. Dit is de indeling van UI elementen en code nu:

Image Removed

(Afbeelding 7.2)

Het resultaat ziet er vervolgens zo uit:

Image Removed

(Afbeelding 7.3)

Swing wordt echter natuurlijk voornamelijk gebruikt om interactieve applicaties te ontwikkelen, dit kan gedaan worden met listeners. Listeners kunnen aan een aantal UI elementen toegevoegd worden, en triggeren een stuk Java-code als ze getriggerd worden. Triggers kunnen bijvoorbeeld het klikken op een knop, het aanslaan van een toets op het toetsenbord of het hovereren over een UI element met een cursor zijn. Een action listener voor een klik actie op de submitknop in de vorige app ziet er bijvoorbeeld zo uit:

submitButton.addActionListener(new ActionListener() {
    @Override
    public void actionPerformed(ActionEvent actionEvent) {
        //add code here
    }
});

(Code snippet 7.2)

Met setters kunnen ook attributen van UI elementen aangepast worden, bijvoorbeeld de tekst in een tekstvak, de tekst op een label, of een knop "enabled" is, etc.

Code tussen de haken waar de comment staat wordt nu uitgevoerd als er op de knop gedrukt wordt. Met deze kennis is de volgende applicatie gemaakt:

Image Removed

(Afbeelding 7.4)

In deze applicatie kan er op de knoppen gedrukt worden om de tekst in het label te veranderen. De tekst wordt "Hello Computer!" of "Hello World!" als er gedrukt wordt op de "Computer!" of "World!" knop. Als er op de "Me!" knop gedrukt wordt wordt de ingevoerde tekst uit het tekstvak gehaald en achter "Hello" in het label geplakt. Als er "Jane" is ingevoerd wordt de tekst in het label bijvoorbeeld "Hello Jane!":

Image Removed

(Afbeelding 7.5)

Dit is gedaan door de getters en setters van het tekstveld en het label te gebruiken:

meButton.addActionListener(new ActionListener() {
    @Override
    public void actionPerformed(ActionEvent actionEvent) {
        label.setText("Hello "+ naamField.getText()+"!");
    }
});

(Code snippet 7.3)

Op deze manier kunnen er interactieve Swing applicaties gemaakt worden. Alle code van de gemaakte applicaties zijn te vinden op de repository.

Wat is het verschil tussen JavaFX en Swing?

Conclusie

Bronnen


Het resultaat van deze code is te zien in de volgende afbeelding. Zoals te zien is wordt de title weergegeven als applicatie naam. 
Image Added
(Afbeelding 6.1)


Om deze scene iets meer opvulling te geven moet er in het fxml bestand aangegeven worden wat er allemaal in de scene opgenomen moet worden. In dit bestand kunnen echter geen echte functionaliteiten gegeven worden aan de objecten. 
Er wordt hieronder wel een knop aangemaakt maar in het bestand wordt nergens gezegd wat de knop nou precies moet doen. Om dit op te lossen wordt er aangegeven wat de controller is van deze scene. Dat wordt gedaan door dit het volgende stukje code fx:controller="nl.eniac.klukkluk.KlukklukController".
Bij de button wordt er met de onAction tag aangegeven welke methode het gedrag van deze button bevat. Dit wordt uitgevoerd op het moment dat er op de button geklikt wordt. 

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>

<?import javafx.scene.control.Button?>
<VBox alignment="CENTER" spacing="20.0" xmlns:fx="http://javafx.com/fxml"
      fx:controller="nl.eniac.klukkluk.KlukklukController">
  <padding>
    <Insets bottom="20.0" left="20.0" right="20.0" top="20.0"/>
  </padding>

  <Label fx:id="welcomeText"/>
  <Button text="Test" onAction="#onHelloButtonClick"/>
</VBox>
(Code snippet 6.2)

Nu we de button hebben toegevoegd ziet de applicatie er zo uit: 
Image Added
(Afbeelding 6.2)

Om gedrag te geven aan de button en de label moet er een Controller klasse aangemaakt worden die dit gedrag bevat. Door gebruik te maken van onAction in het FXML bestand weet JavaFX welke methode hij moet gebruiken.
De label welcomeText bevat nu nog geen tekst en is dus eigenlijk onzichtbaar in afbeelding 6.2. In de methode onHelloButtonClick() wordt er wel tekst toegewezen aan dit label. 
Als er dus op de knop wordt gedrukt nu wordt deze tekst ook echt toegekend aan welcomeText. 
package nl.eniac.klukkluk;

import javafx.fxml.FXML;
import javafx.scene.control.Label;

public class KlukklukController {
    @FXML
    private Label welcomeText;

    @FXML
    protected void onHelloButtonClick() {
        welcomeText.setText("Kukkluk is up and running.");
    }
}
(Code snippet 6.3)

module nl.eniac.klukkluk.klukkluk {
    requires javafx.controls;
    requires javafx.fxml;

    requires org.controlsfx.controls;
    requires com.dlsc.formsfx;
    requires org.kordamp.ikonli.javafx;
    requires org.kordamp.bootstrapfx.core;

    opens nl.eniac.klukkluk to javafx.fxml;
    exports nl.eniac.klukkluk;
}
(Code snippet 6.4)

Hoe maak je een Swing applicatie?

(Gemaakt met behulp van voorkennis, Lesson: Getting Started with Swing (The Java^TM Tutorials > Creating a GUI With Swing). (n.d.) en Hejazi, F. (2019, May 7). IntelliJ IDEA GUI Designer Tutorial. Examples Java Code Geeks.)

Een Swing applicatie bestaat uit frames. Een Frame is wat door je systeem wordt gezien als een "window". Binnen een complexe applicatie bestaan de frames ook uit een of meerdere Panel(s). Een panel is een soort class dat UI elementen kan bevatten. Vanwege hoe de taal is opgezet kan je zelfs een frontend aanmaken zonder apparte classes aan te maken, zoals te zien in de code snippet hieronder:

public static void main(String[] args){
    Frame frame = new Frame("simple app");
    Panel panel = new Panel();
    Label label = new Label("This is a label");
    TextField textField = new TextField("enter text here");
    Button button = new Button("Submit");

    panel.add(label);
    panel.add(textField);
    panel.add(button);
    frame.add(panel);

    frame.pack();
    frame.validate();
    frame.setVisible(true);
}
(Code snippet 7.1)

In dit stuk code wordt een frame, een panel en UI elementen aangemaakt. De UI elementen worden toegevoegd aan de panel, en de panel wordt toegevoegd aan het frame. De laatste regels zijn boilerplate code om het frame te laten zien. Dit ziet er vervolgens zo uit:

Image Added

(Afbeelding 7.1)

Dit ziet er echter niet echt goed uit, Swing heeft echter de mogelijkheid om UI elementen in te delen met XML. Dit kan met de hand, of met een IDE, dit is bij dit onderzoek met IntelliJ gedaan.

Met de editor van IntelliJ kunnen dezelfde UI elementen in de voorbeeldApplicatie geplaatst worden. Dit wordt hier gedaan in een class die Jframe extend. De class vertegenwoordigd dus een window. Dit is de indeling van UI elementen en code nu:

Image Added

(Afbeelding 7.2)

Het resultaat ziet er vervolgens zo uit:

Image Added

(Afbeelding 7.3)

Swing wordt echter natuurlijk voornamelijk gebruikt om interactieve applicaties te ontwikkelen, dit kan gedaan worden met listeners. Listeners kunnen aan een aantal UI elementen toegevoegd worden, en triggeren een stuk Java-code als ze getriggerd worden. Triggers kunnen bijvoorbeeld het klikken op een knop, het aanslaan van een toets op het toetsenbord of het hovereren over een UI element met een cursor zijn. Een action listener voor een klik actie op de submitknop in de vorige app ziet er bijvoorbeeld zo uit:

submitButton.addActionListener(new ActionListener() {
    @Override
    public void actionPerformed(ActionEvent actionEvent) {
        //add code here
    }
});

(Code snippet 7.2)

Met setters kunnen ook attributen van UI elementen aangepast worden, bijvoorbeeld de tekst in een tekstvak, de tekst op een label, of een knop "enabled" is, etc.

Code tussen de haken waar de comment staat wordt nu uitgevoerd als er op de knop gedrukt wordt. Met deze kennis is de volgende applicatie gemaakt:

Image Added

(Afbeelding 7.4)

In deze applicatie kan er op de knoppen gedrukt worden om de tekst in het label te veranderen. De tekst wordt "Hello Computer!" of "Hello World!" als er gedrukt wordt op de "Computer!" of "World!" knop. Als er op de "Me!" knop gedrukt wordt wordt de ingevoerde tekst uit het tekstvak gehaald en achter "Hello" in het label geplakt. Als er "Jane" is ingevoerd wordt de tekst in het label bijvoorbeeld "Hello Jane!":

Image Added

(Afbeelding 7.5)

Dit is gedaan door de getters en setters van het tekstveld en het label te gebruiken:

meButton.addActionListener(new ActionListener() {
    @Override
    public void actionPerformed(ActionEvent actionEvent) {
        label.setText("Hello "+ naamField.getText()+"!");
    }
});

(Code snippet 7.3)

Op deze manier kunnen er interactieve Swing applicaties gemaakt worden. Alle code van de gemaakte applicaties zijn te vinden op de repository.

Wat is het verschil tussen JavaFX en Swing?

Conclusie

Bronnen

Lesson: Getting Started with Swing (The Java^TM Tutorials > Creating a GUI With Swing). (n.d.). https://docs.oracle.com/javase/tutorial/uiswing/start/index.html
Hejazi, F. (2019, May 7). IntelliJ IDEA GUI Designer Tutorial. Examples Java Code Geeks. https://examples.javacodegeeks.com/java-development/desktop-java/ide/intellij-idea/intellij-idea-gui-designer-tutorial/
Larkin, P. (2022, July 20). JavaFX vs Swing: The Key Differences | Career Karma. Career Karma. https://careerkarma.com/blog/javafx-vs-java-swing/
How to set the look and feel (The JavaTM tutorials > Creating a GUI with Swing > Modifying the look and feel). (n.d.). https://docs.oracle.com/javase/tutorial/uiswing/lookandfeel/plaf.html#available
AnveshKumar. (2023, March 19). The battle of JavaFX vs Java Swing: Which one is best for you? DevDojo. https://devdojo.com/anvesh_kumar/the-battle-of-javafx-vs-java-swing-which-one-is-best-for-you
Sun and Netscape to Jointly Develop Java Foundation Classes. (n.d.). https://web.archive.org/web/20120509230952/http://www2.prnewswire.com/cgi-bin/stories.pl?ACCT=104&STORY=%2Fwww%2Fstory%2F84048&EDATE=
JavaFX CSS Reference Guide. (n.d.). https://openjfx.io/javadoc/17/javafx.graphics/javafx/scene/doc-files/cssref.html#node
YaegerGame (yaeger 2023.2024 API)
Lesson: Getting Started with Swing (The Java^TM Tutorials > Creating a GUI With Swing). (n.d.). https://docs.oracle.com/javase/tutorial/uiswing/start/index.html
Hejazi, F. (2019, May 7). IntelliJ IDEA GUI Designer Tutorial. Examples Java Code Geeks. https://examples.javacodegeeks.com/java-development/desktop-java/ide/intellij-idea/intellij-idea-gui-designer-tutorial/
Larkin, P. (2022, July 20). JavaFX vs Swing: The Key Differences | Career Karma. Career Karma. https://careerkarma.com/blog/javafx-vs-java-swing/
How to set the look and feel (The JavaTM tutorials > Creating a GUI with Swing > Modifying the look and feel). (n.d.). https://docs.oracle.com/javase/tutorial/uiswing/lookandfeel/plaf.html#available
AnveshKumar. (2023, March 19). The battle of JavaFX vs Java Swing: Which one is best for you? DevDojo. https://devdojo.com/anvesh_kumar/the-battle-of-javafx-vs-java-swing-which-one-is-best-for-you
Sun and Netscape to Jointly Develop Java Foundation Classes. (n.d.). https://webhan-yaeger.archivegithub.orgio/webyaeger/20120509230952hanyaeger/http:com/github/www2.prnewswire.com/cgi-bin/stories.pl?ACCT=104&STORY=%2Fwww%2Fstory%2F84048&EDATE=JavaFX CSS Reference Guidehanyaeger/api/YaegerGame.html
JavaFX Overview (Release 8). (n.d.). https://openjfxdocs.oracle.iocom/javadocjavase/178/javafx.graphics/javafx/scene/doc-files/cssref.html#nodeYaegerGame (yaeger 2023.2024 API). (n/get-started-tutorial/jfx-overview.htm#JFXST784
First JavaFX Application - javatpoint. (z.d.). www.javatpoint.com. https://www.javatpoint.com/first-javafx-application
Create a new JavaFX project | IntelliJ IDEA. (z.d.). IntelliJ IDEA Help. https://han-yaeger.github.io/yaeger/hanyaeger/com/github/hanyaeger/api/YaegerGame.htmlJavaFX Overview (Release 8). (n.d.). https://docswww.oraclejetbrains.com/javasehelp/8idea/javafx/get-started-tutorial/jfx-overview.htm#JFXST784.html

Space shortcuts

Page tree

Versions Compared

Old Version 22

New Version 23

Key

Hoe maak je een JavaFX applicatie?

Hoe maak je een Swing applicatie?

Wat is het verschil tussen JavaFX en Swing?

Conclusie

Bronnen

Hoe maak je een Swing applicatie?

Wat is het verschil tussen JavaFX en Swing?

Conclusie

Bronnen

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 22

New Version 23

Key

Hoe maak je een JavaFX applicatie?

Hoe maak je een Swing applicatie?

Wat is het verschil tussen JavaFX en Swing?

Conclusie

Bronnen

Hoe maak je een Swing applicatie?

Wat is het verschil tussen JavaFX en Swing?

Conclusie

Bronnen