Java-Editor

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
=====JavaFX=====
JavaFX wird ab Version 14.0 vom Java-Editor unterstützt. Die Entwicklung dieser neuen grafischen Benutzeroberfläche für den Java-Editor hat viele Monate in Anspruch genommen. Doch ich denke, dass sich die Arbeit insgesamt gelohnt hat. Man kann nun mit einer zeitgemäßen GUI-Bibliothek arbeiten, die auch mit CSS gestaltet werden kann. Das Erstellen einer GUI-Oberfläche wird für Programmieranfänger noch leichter gemacht, weil der Objekt-Inspektor standardmäßig nur die wichtigsten Attribute von GUI-Komponenten anzeigt. Dadurch können die GUI-Komponenten deutlich leichter konfiguriert werden. Außerdem stehen jetzt grafische Grundfiguren wie Kreis, Rechteck und Vieleck zur Verfügung, womit sich auch im Unterricht einfacher GUI-Anwendungen mit grafischen Objekten gestalten lassen.

Ab dem JDK 11 ist JavaFX nicht mehr im JDK enthalten und muss zusätzlich installiert werden. Sie können sich über https://gluonhq.com/products/javafx/ ein JavaFX Windows SDK herunterladen und parallel zum OpenJDK installieren. In der Konfiguration trägt man unter [[Konfiguration#Interpreter|Interpreter/JavaFX-Ordner]] den JavaFX-Ordner ein.

Eine Dokumentation von JavaFX kann über https://www.oracle.com/technetwork/java/javase/documentation/jdk8-doc-downloads-2133158.html heruntergeladen werden. Den Pfad der Indexdatei docsfx\api\index.html wird unter [[Konfiguration#Dokumentation|Dokumentation - Manual Java FX]] eingetragen. 

{{:de:javafxconf.png|}}

Beachten Sie bitte, dass Sie in der Konfiguration unter //Sichtbarkeit// einstellen können, welche Registerkarten angezeigt werden. Für JavaFX benötigen Sie FX Base, FX Controls und FX Shapes. Die Registerkarten für AWT und Swing können Sie hier deaktivieren.

Gerhard Röhner\\
1.03.2017

=====JavaFX Base=====

==== Label ====
{{:de:Jlabelicon.png}} 
Mit einer Label-Komponente beschriftet man eine Komponente eines GUI-Formulars.
Eine Label-Komponente kann außer Text auch ein Bild oder Beides darstellen.  
Um ein Bild darzustellen wählt man im Objekt-Inspektor beim Attribut //Graphic// die gewünschte Bilddatei aus.
Dabei wird die ausgewählte Bilddatei automatisch in den Ordner //images// kopiert.

Beispiel: {{:de:Jlabel.png}}

<html><img src="http://vg08.met.vgwort.de/na/e6e9facc1aea42109ec8cfe694337370" width="1" height="1" alt=""></html>
----

==== TextField ====
{{:de:jtextfieldicon.png}}
Mit einer TextField-Komponente kann man Text ein- oder ausgeben. Zum Eingeben verwendet man die Methode //getText()//,  zum Ausgeben die Methode //setText()//.

Beispiel: 
{{:de:jtextfield.png}}
<code java>String Name = tfName.getText();</code>
----
==== NumberField ====
{{:de:Jnumberfieldicon.png}}
Mit einer NumberField-Komponente kann man eine Zahl ganz einfach ein- oder ausgeben, da die Konvertierung in den gewünschten numerischen Datentyp über die Methoden //getDouble()//, //getFloat()//, //getInt()// und //getLong()// erfolgt:

Beispiel: 
{{:de:Jnumberfieldde.png}}
<code java>int Alter = nfAlter.getInt();</code>

Dezimalzahlen können mit maximaler oder einer angegeben Anzahl von Nachkommastellen ausgegeben werden:

Beispiel:
<code java>nfSumme.setDouble(Summe);    // maximale Anzahl von Nachkommastellen: 3657.42323426347834    
nfSumme.setDouble(Summe, 2); // zwei Nachkommastellen:                3657.42 </code>
----
==== TextArea ====
{{:de:Jtextareaicon.png}}
Eine TextArea-Komponente stellt mehrzeiligen Text dar, eine TextField-Komponente einen einzeiligen.
Im Objekt-Inspektor kann man den Text eingeben. Zur Laufzeit fügt man mit der Methode //appendText()//
Text hinzu bzw. setzt den Text mit //setText()// oder liest ihn mit //getText()// ein. 
Die Zeilen werden durch das Steuerzeichen "\n" (new line) voneinander getrennt.

Beispiel:
{{:de:Jtextareade.png}}
<code java>  taAusgabe.setText("Ausgabe:\n\n");
  taAusgabe.appendText("Zahl " + Zahl + " gefunden! \n");</code>
----
==== Button ====
{{:de:jbuttonicon.png}}
Klickt man in einem GUI-Formular eine Button-Komponente an so wird die zum Button gehörende Ereignismethode ausgeführt.

Jede Button-Komponente erhält automatisch eine Ereignismethode für das Anklicken des Buttons. 

Beispiel:
<code java>  public void button1_Action(Event evt) {
    // TODO hier Quelltext einfügen
  } // end of button1_Action</code>

Beim Doppelklicken eines Buttons im GUI-Formular wird der Cursor des Quelltexteditors an den Anfang der zugehörigen Ereignismethode platziert.

Gibt man im Objekt-Inspektor im Attribut //Text// die Beschriftung eines Buttons ein, so wird automatisch ein passender Name für den Button erzeugt.
----
==== CheckBox ====
{{:de:Jcheckboxicon.png}}
Eine CheckBox-Komponente kann ausgewählt sein oder nicht. Den aktuellen Zustand liefert die Methode //isSelected()//.

Beispiel: 
{{:de:isselectedde.png}}
<code java>  if (MeineCheckBox.isSelected()) ...</code>
----
==== Buttongroup ====
{{:de:radiobuttonde.png}}
Eine Buttongroup gruppiert Radiobuttons oder Checkboxen. Setzen Sie das Attribut Checkboxes auf true, wenn Sie eine Gruppe von Checkboxen wünschen. Geben Sie Ihre Optionen mit dem Items-Attribut ein.

Für Radiobuttons fügt der Java-Editor diese Methode in den Quelltext ein:

<code java>  public String buttonGroup1TG_getSelectedButtonGroupLabel() { ... }</code>

Damit lässt sich dann ganz einfach die ausgewählte Option einer Buttongroup ermitteln. Beispiel:

<code java>  if (bgFarbeTG_getSelectedButtonGroupLabel().equals("grün"))</code>
\\
----
==== ListView ====
{{:de:list.png}}

Eine ListView-Komponente zeigt eine Liste von Objekten, also z.B. Strings an. Der Anwender kann ein oder mehrere Objekte auswählen.\\

Im Objekt-Inspektor kann man über das Attribut //Items// Strings in die Liste eingeben. 

Die Daten der ListView werden in einer //ObservableArrayList// verwaltet. Zur Laufzeit kann man mit Methoden der ObservableArrayList die Daten bearbeiten.

Beispiele:

Zugriff über die ObservableArrayList 
<code java>  meineListeObservableList.add("Vera");
  meineListeObservableList.remove(0);
  String s = (String) meineListeObservableList.get(3);</code>

Die ObservableArrayList kennt zwar alle Daten, aber ein Element wird in der ListView ausgewählt, nicht in der ObservableArrayList.

Zugriff über die ListView
<code java>int i = meineListe.getSelectionModel().getSelectedIndex();
String s = (String) meineListe.getSelectionModel().getSelectedItem();</code>

Enthält die ListView Zahlen, so muss der ausgewählte String noch in eine Zahl umgewandelt werden:
<code java>  String s = (String) meineListe.getSelectionModel().getSelectedItem();
  int Zahl = Integer.parseInt(s);</code>
----
==== ComboBox ====
{{:de:combobox.png}}

Eine ComboBox-Komponente ist eine Kombination aus einer Eingabezeile und einer ausklappbaren Auswahlliste. Der Anwender kann zur Laufzeit ein Listenelement auswählen oder in der Eingabezeile Text eingeben.

Im Objekt-Inspektor kann man über das Attribut //Items// Strings in die Auswahlliste eingeben. Um in der Eingabezeile einer ComboBox etwas eingeben zu können, setzt man das Attribut //editable// auf //true//.

Die Daten der ComboBox werden in einer //ObservableArrayList// verwaltet. Zur Laufzeit kann man die Daten mit Methoden des ObservableArrayListbearbeiten.

Beispiele:

Zugriff über die ObservableArrayList
<code java>  meineComboBoxObservableList.add("Vera");
  meineComboBoxObservableList.remove(0);
  String s = (String) meineComboBoxObservableList.get(3);</code>

Die ObservableArrayList kennt zwar alle Daten, aber ein Element wird vom Benutzer in der ComboBox ausgewählt, nicht in der ObservableArrayList.

Zugriff über die ComboBox
<code java>  int i = meineComboBox.getSelectionModel().getSelectedIndex();
  String s = (String) meineComboBox.getSelectionModel().getSelectedItem();</code>

Um automatisch auf eine Eingabe oder Auswahl in einer ComboBox reagieren zu können, erstellt man im Objekt-Inspector eine Ereignismethode für //action//.
----
==== Spinner ====
{{:de:jspinner.png}}

Mit einer Spinner-Komponente kann man Zahlen aus einem Bereich zwischen Minimum und Maximum auswählen.
Im Objekt-Inspektor legt man Minimum, Maximum, Schrittweite (AmountToStepBy) und aktueller Wert (InitialValue) fest.

Zur Laufzeit kann man mit der Methode getValue() den aktuellen Wert abfragen:
<code java>  int Wert = meinSpinner.getValue();</code>

Um direkt auf Änderungen eines Spinners zu reagieren, benutzt man das //mouseClicked//-Ereignis.
----
==== Canvas ====
{{:de:canvas.png}}

Eine Canvas-Komponente stellt eine Zeichenfläche zur Verfügung (canvas, engl. Leinwand).

Zum Zeichen auf der Zeichenfläche stellt eine Canvas-Komponente einen sogenannten Grafikkontext zur Verfügung. Man kann sich das vereinfacht als Deckfarbkasten aus dem Kunstunterricht vorstellen, während die Zeichenfläche dem Malblock entspricht.

Nennt man die Canvas-Komponente Zeichenflaeche, so erhält man den zugehörigen Grafikkontext mit

<code java>  GraphicsContext gc = Zeichenflaeche.getGraphicsContext2D();</code>

Mit Hilfe des Deckfarbkastens – sprich Grafikkontextes gc – kann man dann beispielsweise eine Strecke zeichnen:

<code java>  gc.strokeLine(40, 10, 10, 40);</code>
----
==== Turtle ====
{{:de:fxturtle.png}}

Ab Version 14.04 haben wir eine animierbare Turtle für Programme mit JavaFX-Oberfläche. 

Als didaktische Reduktion gibt es die Methoden //setOriginX(double x)// und //setOriginY(double y)//, mit welchen man in der Zeichenfläche ein aus dem Mathematikunterricht bekanntes Koordinatensystem (grün) einrichten kann. Die drawto- und moveto-Befehle der Turtle beziehen sich auf dieses Koordinatensystem.

Beispiel:
{{:de:turtlesetorigin.png}}
----
==== MenuBar ====
{{:de:menubardemo.png}}

Mit einer MenuBar-Komponente kann man eine Menüleiste erstellen. Die Menüleiste zeigt die Menüs (Menu-Komponenten) an, die ihr zugeordnet werden.
----
==== Menu ====
{{:de:jmenudemo.png}}

Mit einer Menu-Komponente erstellt man ein Menü für eine Menüleiste. Im Objekt-Inspektor gibt man beim Attribut //MenuBar// die gewünschte Menüleiste an, beim Attribut //MenuItems// trägt man die Menübefehle (z. B. New, Open, Save, Print, exit) ein und beim Attribut //Text// die Bezeichnung des Menüs (z. B. File) in der Menüleiste.

Für jeden Menübefehl erzeugt der Java-Editor eine zugehörige Ereignismethode.
----
==== ContextMenu ====
{{:de:contextmenude.png}}  

Mit einer ContextMenu-Komponente erstellt man ein Kontextmenü. Im Beispiel reagiert eine TextField-Komponente auf den Rechtsklick und zeigt das Kontextmenü an.

Im Objekt-Inspektor trägt man beim Attribut //MenuItems// die Menübefehle (z. B. Clear, Draw, Print) ein. 
Für jeden Menübefehl erzeugt der Java-Editor eine zugehörige Ereignismethode.

Zeigt man im Objekt-Inspektor alle Attribute an, so kann man beim Attribut //ContextMenu// den Namen eines Kontextmenüs eingeben.

{{:de:contextmenude2.png}}  
----
==== MenuButton ====
{{:de:menubutton.png}} Mit einer MenuButton-Komponente kann man ein Kontextmenü öffnen. 

Im Objekt-Inspektor gibt man unter //MenuItems// die Menübefehle ein. Zu jedem Menübefehl wird eine Ereignismethode angelegt.
----
==== SplitMenuButton ====
{{:de:splitmenubutton.png}} Eine SplitMenuButton-Komponente ist eine Kombination aus einem gewöhnlichen Button und einem MenuButton. 

Im Objekt-Inspektor gibt man unter //MenuItems// die Menübefehle ein. Zu jedem Menübefehl und zum SplitMenuButton selbst wird eine Ereignismethode angelegt.
----
=====JavaFX Controls=====
Die Control-Komponenten von JavaFX erweitern die standardmäßigen GUI-Komponenten von JavaFX Base.

==== Slider====
{{:de:slider.png}} Mit einer Slider-Komponente kann man durch Ziehen mit der Maus einen kontinuierlichen oder diskreten (//SnapToTicks//) numerischen Wert zwischen Minimum und Maximum auswählen.

<code java>
  double value = slider1.getValue();
</code>
----
==== ProgressBar====
{{:de:progressbar.png}} Mit einer ProgressBar-Komponente kann man den Fortschritt einer Operation im Bereich 0 bis 1 als horizontalen Balken anzeigen.

<code java>
  progressBar1.setProgress(0.3);
</code>
----
==== ProgressIndicator====
{{:de:progressindicator.png}} Mit einer ProgressIndicator-Komponente kann man den Fortschritt einer Operation im Bereich 0 bis 1 als Kreisausschnitt anzeigen.

<code java>
  progressIndicator1.setProgress(0.75);
</code>
----
==== ToolBar====
{{:de:toolbar.png}} Mit einer ToolBar-Komponente kann man mehrere Buttons und Separators zusammen fassen.

<code java>
ToolBar toolBar1 = new ToolBar();
toolBar1.getItems().addAll(bNeu, bOeffnen, new Separator(), bDrucken); 
</code>
----
==== Separator====
{{:de:separator.png}} Mit einer Separator-Komponente kann man GUI-Komponenten durch eine Linie voneinander abtrennen.
----
==== ToggleButton====
{{:de:togglebutton.png}} Eine ToggleButton-Komponente kann wie ein Schalter auf //ein// oder //aus// stehen.

<code java>
    if (toggleButton1.isSelected()) ...
</code>
----
==== PasswordField====
{{:de:password.png}} Mit einer PasswordField-Komponente kann man ein Passwort eingeben, bei dem die einzelnen Zeichen verdeckt angezeigt werden..
----
==== ChoiceBox====
{{:de:choicebox.png}} Eine ChoiceBox-Komponente ist eine ComboBox-Komponente, bei der man nur auswählen, aber nichts eingeben kann.
----
==== Hyperlink====
{{:de:hyperlink.png}} Eine Hyperlink-Komponente stellt einen Text als Verweis dar, den man anklicken kann. Wie bei einem Button wird dann ein Ereignis ausgelöst, auf das man in einer Ereignismethode reagieren kann.
----
==== HTMLEditor====
{{:de:htmleditor.png}} 
Eine HTMLEditor-Komponente ermöglicht die Bearbeitung und Formatierung von Text. Die Formatierung erfolgt durch Auszeichnung mit HTML.

<code java>
String s = hTMLEditor1.getHtmlText();
</code>
----
==== WebView====
{{:de:webview.png}}\\
Eine WebView-Komponente kann die Webseite zu einer Internetadresse anzeigen. Im Attribut //URL// des Objekt-Inspektors gibt man die Internetadresse mit Protokoll an, z.B. http://www.javaeditor.org.
----
==== ColorPicker====
{{:de:colorpicker.png}}
Mit einer ColorPicker-Komponente kann man eine Farbe auswählen.

<code java>
Color c = colorPicker1.getValue();
</code>
----
==== DatePicker====
{{:de:datepicker.png}}\\
Mit einer DatePicker-Komponente kann man ein Datum auswählen.

<code java>
LocalDate d = datePicker1.getValue();
</code>
----
==== Pagination====
{{:de:pagination.png}} Mit einer Pagination-Komponente kann man zwischen Seiten eines Inhalts navigieren.
----
==== FileChooser====
{{:de:filechooser.png}} Mit einer FileChooser-Komponente kann man eine Datei auswählen.

Im Quelltext wird diese Methode ergänzt:

<code java>
public File fileChooser1_openFile() {
  return fileChooser1.showOpenDialog(null);
}
</code>

Sie kann so verwendet werden:

<code java>
File f = fileChooser1_openFile();
</code>
----
==== FileChooser====
{{:de:filechooser2.png}} Mit einer FileChooser-Komponente kann man eine Datei auswählen.

Im Quelltext wird diese Methode ergänzt:

<code java>
public File fileChooser1_openFile() {
  return fileChooser1.showSaveDialog(null);
}
</code>

Sie kann so verwendet werden:

<code java>
File f = fileChooser1_saveFile();
</code>
----
==== DirectoryChooser====
{{:de:directorychooser.png}} Mit einer DirectoryChooser-Komponente kann man einen Ordner auswählen.

Im Quelltext wird diese Methode ergänzt:

<code java>
public File directoryChooser1_openDirectory() {
  return directoryChooser1.showDialog(null);
}
</code>

Sie kann so verwendet werden:

<code java>
File d = directoryChooser1_openDirectory();
</code>
----
==== ImageView====
{{:de:imageview.png}} Mit einer ImageView-Komponente kann man ein Bild (//Image//) anzeigen.
----
==== MediaView====
{{:de:mediaview.png}} Mit einer MediaView-Komponente kann man ein Video mit dem MediaPlayer anzeigen.
----
==== TableView====
{{:de:tableview.png}} Mit einer TableView-Komponente kann man eine Tabelle anzeigen.

Im Attribut //GenericType// gibt man den Typ der darzustellenden Zeilen an. 
Im Attribut //tableView1Items// werden die in der Tabelle anzuzeigenden Daten gespeichert.
----
=====JavaFX Shapes=====

Mit den Shape-Komponenten von JavaFX können Grafiken programmiert werden.

==== Circle ====
{{:de:circle.png}} Eine Circle-Komponente stellt einen Kreis dar. Das Attribut //Fill// legt seine Füllfarbe, das Attribut //Stroke// seine Rahmenfarbe fest.

Platziert man eine Circle-Komponente auf einer Canvas-Komponenten, so kann man mit dem Canvas-Ereignis //mouseMoved// den Kreis bewegen.

<code java>
public void canvas1_MouseMoved(MouseEvent evt) {
  circle1.setCenterX(evt.getX());
  circle1.setCenterY(evt.getY());
} 
</code>
----
==== Rectangle ====
{{:de:rectangle.png}} Eine Rectangle-Komponente stellt ein Rechteck dar. Das Attribut //Fill// legt seine Füllfarbe, das Attribut //Stroke// seine Rahmenfarbe fest.
----
==== Ellipse ====
{{:de:ellipse.png}} Eine Ellipse-Komponente stellt ein Ellipse dar. Das Attribut //Fill// legt seine Füllfarbe, das Attribut //Stroke// seine Rahmenfarbe fest.
----
==== Polygon====
{{:de:polygon.png}} Eine Polygon-Komponente stellt einen geschlossenen Streckenzug dar. Im Attribut //Points// gibt man die Koordinaten der Streckenpunkte an. Sie beziehen sich auf das den Streckenzug umgebende Rechteck.
----
==== Polyline====
{{:de:polyline.png}} Eine Polyline-Komponente stellt einen offenen Streckenzug dar. Im Attribut //Points// gibt man die Koordinaten der Streckenpunkte an. Sie beziehen sich auf das den Streckenzug umgebende Rechteck.
----
==== Arc ====
{{:de:arc.png}} Eine Arc-Komponente stellt einen Kreis- oder Ellipsenbogen dar. //StartAngle// ist der Anfangswinkel, //Length// die Bogenlänge in Grad und //Type// gibt den Bogentyp an. 
----
==== Line ====
{{:de:line.png}} Eine Line-Komponente stellt eine Strecke dar. Neben der Farbe der Strecke (//Stroke//) gibt es einige weitere Attribute zu deren Gestaltung.
----
==== Text ====
{{:de:text.png}} Eine Text-Komponente stellt einen Text dar. Mit \n kann man Zeilenumbrüche erzeugen.
----
==== QuadCurve ====
{{:de:quadcurve.png}} Die QuadCurve-Komponente definiert ein quadratisches parametrisches Bézier-Kurvensegment im (x, y) -Koordinatenraum. Es wird eine Kurve gezeichnet, die die angegebenen Koordinaten (startX, startY) und (endX, enfY) schneidet, wobei der angegebene Punkt (controlX, controlY) als Bézier-Steuerpunkt verwendet wird.
----
==== CubicCurve ====
{{:de:cubiccurve.png}} Die CubicCurve-Komponente definiert ein kubisch parametrisches Bézier-Kurvensegment im (x, y) -Koordinatenraum. Es wird eine Kurve gezeichnet, die die angegebenen Koordinaten (startX, startY) und (endX, enfY) schneidet, wobei die angegebenen Punkte (controlX1, controlY1) und (controlX2, controlY2) als Bézier-Steuerpunkte verwendet werden.
----
==== SVGPath====
{{:en:svgpath.png}} Die SVGPath-Komponente stellt eine einfache geometrische Form dar, die durch Analysieren von SVG-Pfaddaten aus einem String erstellt wird.
----