Erste JavaFX ~ Einfache Einführung Hallo weltähnliche GUI-Erstellung ~
Machst du es im Sommer? Adventskalender Teil 5
Einführung
Vielen Dank für das Lesen dieses Artikels. In diesem Artikel beschrieb der Autor eines Chick-Programmierers, der JavaFX seit etwa einem halben Jahr berührt, die Einführung von JavaFX und SceneBuilder sowie die Erstellung von Hellowa. Da einige Artikel, die in der Vergangenheit von jemandem geschrieben wurden, leichter zu verstehen sind, hoffe ich, dass Sie sie nur als Referenz lesen können.
Einführung
Installieren Sie Eclipse zunächst selbst.
Die Umgebung des Autors ist wie folgt. -macOS Sierra 10.12.6 -Eclipse Oxygen 4.7.3a
Die Elemente, die dieses Mal eingeführt werden sollen, sind wie folgt. -e (fx) clipse: Plugin zum Entwickeln von FX in Eclipse -Scene Builder: FX-GUI kann mit GUI erstellt werden (Ist es besser, es tatsächlich zu versuchen als Wörter)
Lass es uns tatsächlich tun.
Einführung von e (fx) clipse
Öffnen Sie Eclipse und wählen Sie "Hilfe-> Neue Software installieren" in der Statusleiste oben auf dem Bildschirm.
Wählen Sie aus der Dropdown-Liste "Arbeiten mit" das Element "Oxygen-http: //download.eclipse.org/releases/oxygen" aus.
Nach einer Weile des Lesens wird die mittlere Tabelle aktualisiert. Geben Sie also "fx" ein, in das "Filtereingabe" geschrieben ist.
Nach dem Neuladen wird der Abschnitt "e (fx) clipse --IDE" unter den allgemeinen Werkzeugen angezeigt. Wählen Sie ihn aus und wählen Sie "Weiter>" am unteren Rand des Fensters.
Wenn Sie "Weiter>" auswählen und fortfahren, wird der Bestätigungsbildschirm für die Nutzungsbedingungen angezeigt. Nachdem Sie zugestimmt haben, wählen Sie "Fertig stellen", um die Installation zu starten.
Starten Sie Eclipse nach Abschluss der Installation neu.
Einführung von Scene Builder
Laden Sie Scene Builder von der Oracle-Website herunter.
Gehen Sie zum Link hier und unter Download "Scene Builder Binaries (1.x, 2.0)". ) (Archiv).
Laden Sie unter "Java FX Scene Builder 2.0-bezogene Downloads" am Ende der Zielseite die für Ihr Betriebssystem geeignete komprimierte Datei herunter, nachdem Sie den Nutzungsbedingungen zugestimmt haben (Lizenzvereinbarung akzeptieren). (In meinem Fall javafx_scenebuilder-2_0-macosx-universal.dmg)
Öffnen Sie die heruntergeladene Datei und installieren Sie die Anwendung darin. 
Ziehen Sie unter macOS das Symbol links per Drag & Drop auf Anwendungen rechts.
Verknüpfung von Eclipse und Scene Builder
Öffnen Sie in Eclipse die Einstellungen. Wählen Sie das Java FX-Element aus und geben Sie den Pfad zum soeben eingeführten Scene Builder in das Textfeld neben der ausführbaren Scene Builder-Datei ein. Es ist einfach und zuverlässig, die Anwendungsdatei direkt unter "Durchsuchen" auszuwählen. Schließen Sie nach Eingabe des Pfads das Fenster, indem Sie unten rechts auf "Übernehmen und schließen" klicken.
Damit ist die Vorbereitung für die Einführung abgeschlossen. Ist Prost auf gute Arbeit.
Eigentlich ein Programm machen
Dieses Mal möchte ich eine GUI-Anwendung erstellen, die ein Textfeld zur Eingabe eines Namens enthält und die Meldung "Hallo ○○ !!" wird angezeigt, wenn die Schaltfläche nach Eingabe des Namens gedrückt wird.
Projekterstellung
Wählen Sie in Eclipse Neu aus und wählen Sie im JavaFX-Abschnitt "JavaFX-Projekt" aus. Nennen wir dieses Projekt "Hello FX".
Wählen Sie nach Eingabe des Projektnamens unten zweimal "Weiter>".
Ändern Sie nach dem Übergang zum oben gezeigten Fenster den Sprachabschnitt aus der Dropdown-Liste in "FXML".
Der Routentyp ist der Teil, der das Basisfenster auswählt, und dieses Mal wählen Sie "javafx.scene.layout.AnchorPane".
Ändern Sie den Dateinamen und den Controllernamen von Sample in Form und SampleController in FormController.
Wenn die Schritte bis zu diesem Punkt abgeschlossen sind und Sie die folgende Abbildung sehen, wählen Sie "Fertig stellen", um das Projekt zu erstellen.
Operation in Scene Builder
Klicken Sie im Anwendungspaket des erstellten Projekts mit der rechten Maustaste auf Form.fxml und wählen Sie In Scene Builder öffnen.
Der Szenen-Generator wird gestartet und Sie sehen einen Bildschirm wie den folgenden.
Machen Sie das zuvor festgelegte Ankerfenster sichtbar.
Wählen Sie unten links auf dem Bildschirm die Option Ankerfenster und dann rechts auf dem Bildschirm Layout.
Ändern Sie sowohl die Pref-Breite als auch die Pref-Höhe in 400. Dann erscheint ein Quadrat in der Mitte des Bildschirms.
Teileplatzierung
Als nächstes platzieren Sie ein Textfeld zur Eingabe eines Namens. Ziehen Sie aus der Liste der Contorolls auf der linken Seite des Bildschirms "Textfeld" per Drag & Drop in das Ankerfenster in der Mitte des Bildschirms an der gewünschten Position. Als Beispiel habe ich das Textfeld so platziert, dass der rechte Rand in der Mitte liegt.
Ordnen Sie als nächstes die Schaltflächen an. Ziehen Sie wie beim Textfeld die "Schaltfläche" in die Steuerelemente und legen Sie sie dort ab. Ich habe es so platziert, dass es am rechten Rand des Textfelds haftet.
Als nächstes platzieren Sie den Zeichenausgabeteil. Ziehen Sie die Beschriftung nach wie vor per Drag & Drop in die Steuerelemente. Da die Größe unmittelbar nach der Platzierung etwas klein ist, ändern Sie die Größe auf die gleiche Weise wie beim Erscheinen des Ankerfensters. Wählen Sie die platzierte Beschriftung aus und ändern Sie im Layout auf der rechten Seite des Bildschirms die bevorzugte Breite auf 370 und die bevorzugte Höhe auf 40. Passen Sie danach die Anordnung an, wenn sie größer wird.
Bis zu diesem Punkt sollten Sie die folgende Abbildung sehen.
Lassen Sie uns hier einmal überschreiben und speichern (Befehl + s). Die Änderungen in Scene Builder sind im Projekt mit Form.fxml verknüpft. Wenn Sie Form.fxml in Eclipse öffnen, wird der Code wie TextField und Label angezeigt.
Funktioniert mit FormContraller.java
Bereiten Sie den Betrieb des TextFields usw. vor, das im vorherigen Abschnitt des aktuellen Java-Programms platziert wurde.
Geben Sie als gemeinsame Operation für TextField, Button und Label nach Auswahl jeweils "fx: id" im Code auf der rechten Seite des Bildschirms ein.
fx: id fungiert als Kennung für die spätere Bearbeitung mit FormController.
Es wird empfohlen, dass das erste Zeichen mit einem Kleinbuchstaben beginnt, z. B. einer Variablendeklaration.
Dieses Mal setzen wir jede fx: id wie folgt.
-TextField「field_Name」
-Button「button_Enter」
-Label「label_Output」
Wenn Sie fx: id festlegen, wird in Scene Builder eine gelbe Warnung angezeigt. Einfach ausgedrückt lautet der Inhalt "In FormController gibt es kein Objekt, das fx: id entspricht!". Und keine Sorge, es wird durch die später beschriebene Operation verschwinden.
Führen Sie als Nächstes den Vorgang aus, um die Methode "Wenn auf die Schaltfläche geklickt wird" nur für die Schaltfläche zu erstellen.
Geben Sie den Punkt "On Acction" unter fx: id des Buttons wie fx: id ein.
Sagen wir diesmal "onButtonClicked".
Dies ist das Ende des Vorgangs in Scene Builder. Lassen Sie uns überschreiben und speichern und zu Eclipse zurückkehren.
Operation in Eclipse
Wählen Sie FormController.java und geben Sie wie unten gezeigt ein.
FormController.java
package application;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
public class FormController {
@FXML private TextField field_Name;
@FXML private Button button_Enter;
@FXML private Label label_Output;
@FXML public void onButtonClicked() {
label_Output.setText("Hello "+ field_Name.getText()+ " !!");
}
}
Fügen Sie @FXML hinzu, wenn Sie den in SceneBuilder (und Form.fxml) verknüpften Teil deklarieren. Stellen Sie sicher, dass jeder Objektname mit dem mit fx: id eingegebenen übereinstimmt. Stellen Sie in ähnlicher Weise sicher, dass der Methodenname mit dem Namen übereinstimmt, der in On Action of the Button Code eingegeben wurde.
Der Inhalt dieser Methode besteht darin, dass beim Drücken der Schaltfläche die Zeichen im Textfeld entfernt und die Beschriftung auf "Hallo ○○ !!" aktualisiert werden.
Führen Sie nach dem Ausfüllen des FormControllers Main.java aus, und ein quadratisches Fenster wird angezeigt.
Geben Sie einen Namen in das Textfeld ein und drücken Sie die Taste, um "Hallo ○○ !!" auszugeben. 
Damit ist die Hello World-ähnliche Benutzeroberfläche in JavaFX vorerst fertiggestellt.
Es ist lange her, aber danke fürs Lesen.
Bereite ein wenig vor
Es wird gesagt, dass es oben abgeschlossen ist, aber es ist ein Bonus, eine kleine Operation hinzuzufügen, um das Aussehen zu verbessern.
Diesmal,
- Löschen Sie "Label" sofort nach dem Starten von Label
- Stellen Sie die Schaltfläche "Button" auf "Enter".
- Ändern Sie die Schriftgröße von Label Ich werde drei Dinge tun.
Öffnen wir Form.fxml in Eclipse. Ändern Sie für "Label" in 1. einfach text = "Label" in \
In Bezug auf 3. erfolgt dies mit Scene Builder. Klicken Sie im Paket-Explorer von Eclipse mit der rechten Maustaste auf Form.fxml und führen Sie "Mit Szenen-Generator öffnen" aus.
Wählen Sie unten links im Scene Builder-Bildschirm die Option Beschriftung aus und wählen Sie dann in den Eigenschaften rechts im Bildschirm "Schriftart" aus. Sie können die Schriftgröße im Größenbereich des angezeigten Fensters festlegen. Für dieses Programm werden ca. 24 empfohlen.
Übrigens können Sie in Family in diesem Abschnitt Schriftart zu einer beliebigen Schriftart wechseln.
Versuchen Sie nach den obigen Änderungen erneut, Main.java auszuführen, und Sie sollten etwas wie die folgende Abbildung sehen.
abschließend
Dieses Mal haben wir, wie der Titel schon sagt, JavaFX eingeführt und eine einfache Hellowa-GUI erstellt. Da ich zum ersten Mal einen Artikel schreibe, kann es einige Teile geben, die schwer zu lesen sind oder Beschreibungen irreführen. In diesem Fall würde ich es begrüßen, wenn Sie in den Kommentaren darauf hinweisen könnten. Bitte beachten Sie auch hier, dass dieser Artikel ** nur als Referenz ** dient und nicht perfekt ist.
Vielen Dank, dass Sie so weit gelesen haben.
Recommended Posts