Inleiding

Voor het programma is een java frontend nodig, zodat het gebruikt kan worden door een eindgebruiker via een exe bestand. Hiervoor zijn meerdere opties voor een library mogelijk, zoals JavaFX of Swing. Dit moet vroeg besloten worden omdat het onwikkelen van een frontend handig is om dingen te presenteren aan de product owner, en het duurt lang, dus is het beter om dit te ontwikkelen aan het begin van het project.

De hoofdvraag is dus Kunnen wij beter JavaFX of Swing als java frontend framework library gebruiken om een nieuwe versie van rokade te maken?

...

Wat zijn de voor en nadelen van Swing?

Hoe maak je een JavaFX applicatie?

Hoe maak je een Swing appliatie?

Wat is het verschil tussen JavaFX en Swing?

Wat is JavaFX?

JavaFX is een platform en framework library dat gebruikt wordt voor de ontwikkeling van desktopapplicaties en rijke internettoepassingen. Het is gebaseerd op Java en biedt een uitgebreide set tools en bibliotheken om interactieve en visueel aantrekkelijke gebruikersinterfaces te creëren. Met JavaFX kunnen ontwikkelaars diverse moderne technologieën integreren om boeiende en responsieve applicaties te bouwen.

Wat zijn de voor en nadelen van JavaFX?

Voordelen van JavaFX.

1. CSS styling: Het is mogelijk om JavaFX applicaties te stylen met Cascading style sheets. Dit maakt het mogelijk om net als bij HTML websites de elementen en het uiterlijk van elkaar te scheiden, en om applicaties te maken die er uniek uitzien zonder de code onoverzichtelijk te maken. JavaFX CSS Reference Guide. (n.d.)
2. Verschillende media: Binnen JavaFX is het makkelijk om video of audiobestanden af te spelen. Het is zelfs mogelijk om webpaginas binnen een applet te bekijken, of om 3D beelden te renderen. Dit zit allemaal in de JavaFX library, hier zijn bij andere libraries apparte plugins voor nodig. JavaFX Overview (Release 8). (n.d.).
3. Leercurve: JavaFX is makkelijker te leren dan andere frontend libraries zoals Swing.(Larkin, P. (2022, July 20). JavaFX vs Swing: The Key Differences ) Ook is de Yaeger engine van de HAN gebouwd op JavaFX, waardoor alle teamleden al een beetje bekend zijn met de structuur van een JavaFX applicatie. YaegerGame (yaeger 2023.2024 API). (n.d.).

Nadelen van JavaFX

1. Jong: JavaFX is jonger dan de veelgebruikte alternatieven, en is door de gemeenschap en oracle de laatste jaren een beetje verwaarloosd. Het heeft dus relatief minder ondersteuning en software tools om te gebruiken dan de alternatieven.(Larkin, P. (2022, July 20). JavaFX vs Swing: The Key Differences )

Wat is Swing?

Swing is een grafische gebruikersinterface (GUI)-toolkit die de GUI-componenten bevat . Swing biedt en een reeks widgets en pakketten biedt om geavanceerde GUI-componenten voor Java-toepassingen te maken. De applicatie Het is een voorganger van JavaFX en is gebouwd bovenop de bestaande verouderde Java Abstract Widget Toolkit (AWT).  

Swing wordt vaak gebruikt gewaardeerd vanwege zijn platformonafhankelijkheid, waardoor ontwikkelaars Java-toepassingen kunnen schrijven die op verschillende besturingssystemen kunnen draaien zonder dat er aanpassingen nodig zijn. Het maakt gebruik van het Java AWT maar biedt meer geavanceerde en moderne GUI-componenten en functionaliteiten. 

Swing, als een Als onderdeel van de Java Foundation Classes (JFC) , heeft Swing de manier waarop Java-desktopapplicaties worden ontwikkeld en ervaren drastisch veranderd. Met zijn rijke functionaliteit en flexibiliteit heeft Swing een grote invloed gehad op de ontwikkeling van GUI-toepassingen in Java.

Wat zijn de voor en nadelen van

...

Swing?

Voordelen van Swing:

Het platform biedt een breed scala aan aanpasbare gebruikersinterfacecomponenten, zoals knoppen, tekstvelden, tabellen en grafieken, die kunnen worden gestileerd en aangepast om te voldoen aan de ontwerpvereisten van een applicatie. JavaFX maakt gebruik van FXML (FXML Markup Language), een op XML gebaseerde taal waarmee ontwikkelaars de structuur van de gebruikersinterface kunnen definiëren, waardoor de scheiding tussen de gebruikersinterface en de applicatielogica mogelijk wordt gemaakt.

CSS-styling kan worden toegepast om de vormgeving van de gebruikersinterface aan te passen, wat een flexibele manier biedt om de uitstraling van de applicatie te veranderen en een consistente gebruikerservaring te creëren. Met JavaFX kunnen ontwikkelaars krachtige 2D- en 3D-graphics creëren, inclusief ondersteuning voor animatie en speciale effecten. Hierdoor kunnen interactieve en visueel indrukwekkende gebruikersinterfaces worden ontworpen.

Bovendien bevat JavaFX ingebouwde ondersteuning voor het afspelen van audio- en videobestanden, evenals voor het weergeven van afbeeldingen en andere media-inhoud. Dit maakt multimedia-integratie mogelijk in JavaFX-applicaties. Een belangrijk voordeel van JavaFX is de platformonafhankelijkheid. JavaFX-toepassingen kunnen worden uitgevoerd op verschillende besturingssystemen, waaronder Windows, macOS en Linux, waardoor ontwikkelaars een breed publiek kunnen bereiken.

Al met al biedt JavaFX een uitgebreide set tools en bibliotheken waarmee ontwikkelaars snel en efficiënt interactieve en visueel aantrekkelijke desktopapplicaties en RIAs kunnen bouwen. Met zijn krachtige grafische mogelijkheden, flexibele lay-outopties en platformonafhankelijkheid is JavaFX een populaire keuze geworden voor het ontwikkelen van moderne Java-toepassingen.

Wat zijn de voor en nadelen van Swing?

Wat is het verschil tussen JavaFX en Swing?

Conclusie

Bronnen

Oud 

Oud 

Oud 

Oud 

Oud 

Restful API

Een restful api is een serverapplicatie die requests kan handlen die het krijgt van een clientapplicatie, vaak een browser. Als de applicatie ontwikkeld zou worden als een RESTful server applicatie zou er een website bij ontwikkeld moeten worden die de server requests en responses verwerkt met behulp van javascript of PHP. Hiervoor is dus een website nodig, en een host machine.

Voor en nadelen van een Restful API

Voordelen:

• Een user interface kan gemaakt worden met behulp van HTML en CSS, wat erg goed te stijlen is. Het kan dus precies gemaakt worden volgens de wensen van de opdrachtgever.
• Een HTML frontend is makkelijker om responsive te maken, en dit maakt het gebruik op allerlijk soorten devices mogelijk.
• Het is veel modulairder, met een goede specification kan iedereen een andere frontend ontwikkelen. 
• Het is eenvoudiger om een beveiligde database connectie te leggen, omdat de database op dezelfde machine gehost kan worden als de API.
• Alle teamgenoten zijn al bekend met RESTful apis en HTML frontends

Nadelen: 

• Er moet een website ontwikkeld worden die los staat van de applicatie.
• Er moet extra beveiliging gemaakt worden om de webapp te beveiligen tegen ongewenste gebruikers.
• Er moet meer gehost worden dan alleen een database.
• De webapp zou eventueel compatible gemaakt moeten worden met de bestaande wordpress website.

Beste keus voor een RESTful API

Bijna alle teamleden zijn al bekend met Jakarta EE Wildfly, maar er zijn ook andere opties zoals Spring of andere frameworks die aan de stack toe te voegen zijn. De belangrijkste technische keuzes die bij deze optie horen zijn de keuzes voor de frameworks die gebruikt worden voor de frontend, vooral de javascript frameworks om de JSON objecten correct af te handelen. Hier zou ook een onderzoek voor gedaan moeten worden.

Standalone GUI framework

De oude versie van Rokade is een standalone Delphi applicatie. De eisen van de opdrachtgever kunnen ook opgelost worden door het net als Rokade een standalone applicatie te maken met een GUI framework binnen Java.

Voor en nadelen van een GUI framework

Voordelen:

• Een standalone applicatie kan eenvoudiger geconfigured worden voor een individuele user. 
• De gebruikers van de applicatie zijn al bekend met het gebruiken van een standalone applicatie.
• Frameworks als JavaFX zijn ook met CSS te stylen.
• Als een open source project zijn standalone applicaties makkelijker om aan te passen.

Nadelen:

• De meeste teamleden zijn niet bekend met GUI frameworks in Java.

Beste keus voor een GUI framework

...

1. Onafhankelijkheid: Swing-applicaties kunnen op alle moderne besturingssystemen gebruikt worden, dankzij java's design. Het is mogelijk om applicaties te ontwikkelen die er hetzelfde uitzien op verschillende computers, maar ook om zonder veel moeite het uiterlijk van de applcaties aan te passen aan het besturingssysteem van de gebruiker. (The JavaTM tutorials > Creating a GUI with Swing > Modifying the look and feel). (n.d.).

2. Ondersteunding: Swing is een erg oude library, dit heeft ook nadelen, maar zorgt er ook voor dat veel problemen al bekend en opgelost zijn. Er is veel documentatie over Swing beschikbaar, en veel software tools en plugins om ontwikkeling van Swing applicaties te ondersteunen. Iemand die hiermee bekend is kan dus efficient Swing applicaties ontwikkelen. (AnveshKumar. (2023, March 19). The battle of JavaFX vs Java Swing: Which one is best for you? DevDojo.)

Nadelen van Swing.

1. Leercurve: Voor beginnende ontwikkelaars kan het leren van Swing en het begrijpen van zijn concepten en functionaliteiten enige tijd vergen, vooral in vergelijking met eenvoudigere frontend-libraries, zoals persoonlijk bleek bij het onderzoek in hoofdstuk 7

2. Ouderdom: De Swing library is oud (Sun and Netscape to Jointly Develop Java Foundation Classes. (n.d.).), en is nog steeds gemaakt voor oudere besturingssystemen. Dit is handig als je een app wilt ontwikkelen die op nieuwe en oude systemen moet draaien, maar het zorgt er ook voor dat veel documentatie en hulpmiddelen zijn gemaakt voor oude besturingssystemen en frontend designs. Swing applicaties zien er dus vaak ouderwets uit. (The JavaTM tutorials > Creating a GUI with Swing > Modifying the look and feel). (n.d.).

Hoe maak je een JavaFX applicatie?

(Gemaakt met behulp van voorkennis, (First JavaFX Application - Javatpoint, z.d.) 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, 240);
stage.setTitle("Klukkluk v0.01");
stage.setScene(scene);
stage.show();
}

public static void main(String[] args) {
launch();
}
}
(Code snippet 6.1)

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)

Als er nu op de knop gedrukt wordt komt de volgende tekst tevoorschijn:
Image Added
(Afbeelding 6.3)

Nadat al deze stappen gevolgd zijn zou er een werkende JavaFX applicatie moeten zijn die een button bevat met gedrag.

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?

JavaFX en Swing zijn allebei goede opties voor het maken van een front-end. Er zijn echter wel een paar verschillen tussen de twee. In dit hoofdstuk wordt weergegeven wat deze verschillen precies zijn. 

1. Hoe ze dingen laten zien:

   • JavaFX organiseert alle onderdelen van de gebruikersinterface als knooppunten in een boomstructuur, wat meer flexibiliteit biedt voor speciale visuele effecten.
   • Swing gebruikt een traditioneler model waarbij onderdelen direct aan vensters worden toegevoegd, wat minder flexibiliteit kan betekenen voor complexe lay-outs.

2. Lay-outs regelen:

   • JavaFX gebruikt speciale containers om onderdelen te organiseren, wat het gemakkelijker maakt om ze op de juiste plek te krijgen.
   • Swing heeft ook manieren om lay-outs te beheren, maar deze kunnen wat meer werk vereisen om de gewenste lay-out te krijgen.

3. Stijl geven:

   • JavaFX maakt gebruik van CSS, net als bij het stylen van websites, waardoor het eenvoudig is om een consistente uitstraling te creëren.
   • Swing regelt stijl meer met Java-code, dit kan wat meer gedoe zijn.

4. Media-ondersteuning:

   • JavaFX kan gemakkelijk audio, video en 3D-graphics afspelen zonder extra gedoe.
   • Swing heeft minder ingebouwde ondersteuning voor media en heeft soms extra hulpmiddelen nodig.

5. Leercurve:

   • JavaFX wordt vaak gezien als eenvoudiger te leren, vooral als je bekend bent met webtechnologieën.
   • Swing kan wat moeilijker zijn om onder de knie te krijgen, vooral voor beginners.

6. Moderniteit:

   • JavaFX wordt beschouwd als moderner en krijgt regelmatiger updates en verbeteringen.
   • Swing is al langer in gebruik en ontvangt misschien niet zo vaak updates als JavaFX.
7. IntelJ editor:
   • De JavaFX fxml editor in InteliJ is meer gefocust op het maken van gecompliceerde layouts met behulp van een rastersysteem.
   • De Swing form editor in InteliJ is eerder gefocust op het snel maken van een responsive programma, waarbij de exacte posities in een layout vaak automatisch beslist worden.

Conclusie

Op basis van de vergelijking tussen JavaFX en Swing kunnen we tot een conclusie komen over welk frontend-library het meest geschikt is voor het ontwikkelen van een nieuwe versie van Rokade.

Beide libraries hebben verschillende voor- en nadelen. JavaFX biedt bijvoorbeeld CSS-styling en een relatief makkelijke leercurve. Swing, aan de andere kant, biedt een lange geschiedenis van gebruik met veel documentatie en ondersteuning, maar het heeft een steilere leercurve en kan er wat gedateerd uitzien.

Het maken van een JavaFX-applicatie omvat het gebruik van FXML-bestanden om de lay-out te definiëren en controllers om het gedrag te beheren, terwijl Swing meer gericht is op het maken van UI-programma's in code, maar biedt ook opties voor een GUI maken met XML.

Op basis van deze analyse lijkt het gebruik van JavaFX gunstiger voor het ontwikkelen van een nieuwe versie van Rokade. Met een modernere uitstraling en relatief eenvoudige leercurve zou het efficiënter kunnen zijn voor het ontwikkelteam om mee te werken. Bovendien biedt JavaFX een breed scala aan mogelijkheden voor het creëren van visueel aantrekkelijke en interactieve gebruikersinterfaces.

Bronnen

1. 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

2. 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/
3. Larkin, P. (2022, July 20). JavaFX vs Swing: The Key Differences | Career Karma. Career Karma. https://careerkarma.com/blog/javafx-vs-java-swing/
4. 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
5. 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

6. 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=

7. JavaFX CSS Reference Guide. (n.d.). https://openjfx.io/javadoc/17/javafx.graphics/javafx/scene/doc-files/cssref.html#node

8. YaegerGame (yaeger 2023.2024 API). (n.d.). https://han-yaeger.github.io/yaeger/hanyaeger/com/github/hanyaeger/api/YaegerGame.html

9. JavaFX Overview (Release 8). (n.d.). https://docs.oracle.com/javase/8/javafx/get-started-tutorial/jfx-overview.htm#JFXST784
10. First JavaFX Application - javatpoint. (z.d.). www.javatpoint.com. https://www.javatpoint.com/first-javafx-application
11. Create a new JavaFX project | IntelliJ IDEA. (z.d.). IntelliJ IDEA Help. https://www.jetbrains.com/help/idea/javafx.html