=====JavaFX=====
JavaFX is supported as of version 14.0 by the Java-Editor. The development of this new graphical user interface for the Java-Editor took many months. But I think that the work was worth it. You can now work with a contemporary GUI library, which can also be designed with CSS. Creating a GUI interface is made even easier for novice programmers because, by default, the Object-Inspector displays only the most important attributes of GUI components. This makes the GUI components much easier to configure. In addition, graphic basic figures such as circle, rectangle and polygon are now available, which can also be used to design simple GUI applications with graphic objects in the classroom.
As of JDK 11 JavaFX is no longer included in the JDK and must be additionally installed. You can download a JavaFX Windows SDK from https://gluonhq.com/products/javafx/ and install it in parallel to OpenJDK. In the configuration enter the JavaFX folder under [[configuration#interpreter|Interpreter- JavaFX-folder]].
A documentation of JavaFX can be downloaded at https://www.oracle.com/technetwork/java/javase/documentation/jdk8-doc-downloads-2133158.html. The path of the file docsfx\api\index.html is entered under [[configuration#documentation|Documentation - Manual Java FX]].
{{:en:visibilityen.png|}}
Please note that in the configuration under //Visibility// you can set which tabs are displayed. For JavaFX you need FX Base, FX Controls and FX Shapes. You can disable the tabs for AWT and Swing here.
Gerhard Röhner
1.03.2017
=====JavaFX Base=====
==== Label ====
{{:de:Jlabelicon.png}}
A label component is used to label a component of a GUI form.
A label component can also display a picture or both.
To display an image, select the desired image file in the object inspector at the //Graphic// attribute.
The selected image file is automatically copied to the //images// folder.
Example: {{:de:Jlabel.png}}
----
==== TextField ====
{{:de:jtextfieldicon.png}}
With a TextField component you can input or output text. To input text use the method //getText()//, to output text the method //setText()//.
Example:
{{:de:jtextfield.png}}
String Name = tfName.getText();
----
==== NumberField ====
{{:de:Jnumberfieldicon.png}}
With a NumberField component you can easily input or output a number because the conversion to the desired numeric data type is done by the methods //getDouble()//, //getFloat()//, //getInt()// and //getLong()//.
Example:
{{:en:jnumberfielden.png}}
int Age = nfAge.getInt();
Decimal numbers can be output with a maximal or a specified number of decimal places:
Example:
nfSum.setDouble(Sum); // maximal number of decimal places: 3657.42323426347834
nfSum.setDouble(Sum, 2); // two decimal places: 3657.42
----
==== TextArea ====
{{:de:Jtextareaicon.png}}
A TextArea component represents multiline text, a TextField component a single-line text.
In the object inspector you can enter the text. At runtime you add text with //appendText()//,
set it with //setText()// or read it with //getText()//.
The lines are separated by the control character "\n" (new line).
Example:
{{en:jtextareaen.png}}
taOutput.setText("Output:\n\n");
taOutput.appendText("Number " + Number+ " found! \n");
----
==== Button ====
{{:de:Jbuttonicon.png}}
If you click on a button component in a GUI form, the event method belonging to the button will be executed.
Each button component automatically receives an event method for clicking the button.
Example:
public void button1_Action(Event evt) {
// TODO add your code here
} // end of button1_Action
When you double click a button in the GUI form, the cursor of the source text editor is placed at the beginning of the associated event method.
If you enter the caption of a button in the attribute //Text// in the object inspector, a suitable name for the button is automatically generated.
----
==== CheckBox ====
{{:en:jcheckboxicon.png}}
A CheckBox component may or may not be selected. The current state is provided by the method //isSelected()//.
Example:
{{:en:isselecteden.png}}
if (myCheckBox.isSelected()) ...
----
==== Buttongroup ====
{{:en:radiobuttonen.png}}
A Buttongroup groups Radiobuttons or Checkboxes. Set the attribute Checkboxes to true if you want a group of Checkboxes. Enter your options using the Items attribute.
For a buttongroup of radiobuttons the Java-Editor places this method into the java source code:
public String buttonGroup1TG_getSelectedButtonGroupLabel() {
RadioButton rb = (RadioButton)buttonGroup1TG.getSelectedToggle();
if (rb != null) return rb.getText();
return "";
}
so it's easy to get the selected JRadioButton of a Buttongroup:\\
if (bgColorTG_getSelectedButtonGroupLabel().equals("green"))
----
==== ListView ====
{{:en:list.png}}
A ListView component displays a list of objects, mostly Strings. The user can select one or more objects. With the //Items// attribute in the object inspector you can enter strings into a //ListView//.
The data of the ListView is managed in an //ObservableArrayList//. At runtime one can manipulate the data with methods of the ObservableArrayList.
Examples:
Access via ObservableArrayList
myListObservableList.add("Vera");
myListObservableList.remove(0);
String s = (String) myListObservableList.get(3);
Although the ObservableArrayList knows all the data, an item is selected in the ListView, not in the ObservableArrayList.
Access via ListView
int i = myList.getSelectionModel().getSelectedIndex();
String s = (String) myList.getSelectionModel().getSelectedItem();
If the ListView contains numbers, the selected string must be converted into a number:
String s = (String) myList.getSelectionModel().getSelectedItem();
int Number= Integer.parseInt(s); myComboBoxObservableList.add("Vera");
myComboBoxObservableList.remove(0);
String s = (String) myComboBoxObservableList.get(3);
Although the ObservableArrayList knows all the data, an item is selected by the user in the ComboBox, not in the ObservableArrayList.
Accees via ComboBox
int i = myComboBox.getSelectionModel().getSelectedIndex();
String s = (String)myComboBox.getSelectionModel().getSelectedItem();
To be able to react automatically to an input or selection in a ComboBox an event method for //action// is created in the object inspector.
----
==== Spinner ====
{{:de:jspinner.png}}
With a spinner component one can select numbers from a range between minimum and maximum.
In the object inspector you define minimum, maximum, increment (AmountToStepBy) and current value (InitialValue).
At runtime you can use the //getValue()// method to get the current value:
int value= mySpinner.getValue();
To react directly to spinner changes, use the //mouseClicked// event.
----
==== Canvas ====
{{:de:canvas.png}}
A Canvas component provides a drawing area.
To draw on the drawing area you can get a graphic context from the Canvas component. This graphic context is used as a paintbox with many drawing possibilities.
You get the graphics context from your Canvas component named drawingarea in this way:
GraphicsContext gc = drawingarea.getGraphicsContext2D();
With the help of the graphical context gc you can draw a line, for example:
gc.strokeLine(40, 10, 10, 40);
----
==== Turtle ====
{{:de:fxturtle.png}}
From version 14.04 we have an animatable turtle for programs with JavaFX interface.
As a didactic reduction there are the methods //setOriginX(double x)// and //setOriginY(double y)//, which can be used to set up a coordinate system (green) known from mathematics lessons in the drawing area. The drawto and moveto commands of the Turtle refer to this coordinate system.
Example:
{{:de:turtlesetorigin.png}}
----
==== MenuBar ====
{{:de:menubardemo.png}}
With a MenuBar component you can create a menu bar. The menu bar displays the menus (menu components) assigned to it.
----
==== ContextMenu ====
{{:de:jpopupmenudemo.png}}
A ContextMenu component is used to create a context menu. In the example a TextField component responds to the right-click and displays the context menu.
In the object inspector you enter the menu commands (eg Clear, Draw, Print) at the attribute //MenuItems//.
For each menu command the Java Editor generates an associated event method.
If you display all attributes in the object inspector, you can enter the name of a context menu at the //ContextMenu// attribute.
{{:en:jpopupmenudemo2.png}}
----
==== MenuButton ====
{{:de:menubutton.png}} With a MenuButton component you can open a context menu.
In the object inspector enter the menu commands under //MenuItems//. For each menu command an event method is created.
----
==== SplitMenuButton ====
{{:de:splitmenubutton.png}} A SplitMenuButton component is a combination of an ordinary button and a MenuButton.
In the object inspector enter the menu commands under //MenuItems//. For each menu command and the SplitMenuButton itself an event method is created.
----
=====JavaFX Controls=====
The control components of JavaFX extend the standard GUI components of JavaFX Base.
==== Slider====
{{:de:slider.png}}
With a slider component you can select a continuous or discrete (//SnapToTicks//) numerical value between minimum and maximum by dragging with the mouse.
double value = slider1.getValue();
----
==== ProgressBar====
{{:de:progressbar.png}}
With a ProgressBar component you can see the progress of an operation in the range 0 to 1 as a horizontal bar.
progressBar1.setProgress(0.3);
----
==== ToolBar====
{{:de:toolbar.png}}
With a ToolBar component you can combine several buttons and separators.
ToolBar toolBar1 = new ToolBar();
toolBar1.getItems().addAll(bNew, bOpen, new Separator(), bPrint);
----
==== Separator====
{{:de:separator.png}} With a Separator component you can separate GUI components by a line.
----
==== ToggleButton====
{{:en:togglebuttonen.png}} A ToggleButton component can like a switch be //on// or //off//.
if (toggleButton1.isSelected()) ...
----
==== PasswordField====
{{:de:password.png}} With a PasswordField component you can enter a password that will hide the individual characters.
----
==== ChoiceBox====
{{:de:choicebox.png}} A ChoiceBox component is a ComboBox component that allows you to just select but not type anything.
----
==== Hyperlink====
{{:de:hyperlink.png}} A hyperlink component represents a text as a reference, which you can click on. Like a button, it triggers an event that can be responded to in an event method.
----
==== HTMLEditor====
{{:en:htmleditor.png}}
An HTMLEditor component allows editing and formatting of text. Formatting is done by marking it with HTML.
String s = hTMLEditor1.getHtmlText();
----
==== WebView====
{{:de:webview.png}}\\
A WebView component can display the web page for an internet address. In the //URL// attribute of the object inspector enter the internet address with protocol, e.g. http://www.javaeditor.org.
----
==== ColorPicker====
{{:en:colorpicker.png}}\\
With a ColorPicker component you can choose a color.
Color c = colorPicker1.getValue();
----
==== DatePicker====
{{:en:datepicker.png}}\\
With a DatePicker component you can select a date.
LocalDate d = datePicker1.getValue();
----
==== Pagination====
{{:de:pagination.png}} With a Pagination component you can navigate between pages of a content.
----
==== FileChooser====
{{:de:filechooser.png}} With a FileChooser component one can select a file.
This method is add to the source code:
public File fileChooser1_openFile() {
return fileChooser1.showOpenDialog(null);
}
It can be used like this:
File f = fileChooser1_openFile();
----
==== FileChooser====
{{:de:filechooser2.png}} With a FileChooser component one can select a file.
This method is add to the source code:
public File fileChooser1_openFile() {
return fileChooser1.showSaveDialog(null);
}
It can be used like this:
File f = fileChooser1_saveFile();
==== DirectoryChooser====
{{:de:directorychooser.png}} With a DirectoryChooser component you can select a folder.
This method is add to the source code:
public File directoryChooser1_openDirectory() {
return directoryChooser1.showDialog(null);
}
It can be used like this:
File d = directoryChooser1_openDirectory();
----
==== ImageView====
{{:de:imageview.png}} With an ImageView component one can display a picture (//image//).
----
==== MediaView====
{{:de:mediaview.png}} With a MediaView component you can view a video with the MediaPlayer.
----
==== TableView====
{{:en:tableview.png}} With a TableView component you can display a table.
In the //GenericType// attribute, specify the type of lines to be displayed.
The attribute //tableView1Items// stores the data to be displayed in the table.
----
==== TreeTableView====
{{:en:treetableview.png}} With a TreeTableView component you can display a tree table.
----
=====JavaFX Shapes=====
Graphics can be programmed with the shape components of JavaFX.
==== Circle ====
{{:de:circle.png}} A Circle component represents a circle. The //Fill// attribute sets its fill color, the //Stroke// its frame color.
If you place a Circle component on a canvas component, you can use the //MouseMoved// canvas event to move the circle.
public void canvas1_MouseMoved(MouseEvent evt) {
circle1.setCenterX(evt.getX());
circle1.setCenterY(evt.getY());
}
----
==== Rectangle ====
{{:de:rectangle.png}} A Rectangle component represents a rectangle. The //Fill// attribute sets its fill color, the //Stroke// its frame color.
----
==== Ellipse ====
{{:de:ellipse.png}} An Ellipse component represents an ellipse. The //Fill// attribute sets its fill color, the //Stroke// its frame color.
----
==== Polygon====
{{:de:polygon.png}} A Polygon component represents a closed polyline. The //Points// attribute specifies the coordinates of the waypoints. They refer to the rectangle surrounding the ployline.
----
==== Arc ====
{{:de:arc.png}} An Arc component represents a circular or elliptical arc. //StartAngle// is the start angle, //Length// the arc length in degrees, and //Type// specifies the arc type.
----
==== Line ====
{{:de:line.png}} A line component represents a line. In addition to the color of the line (//Stroke//), there are some other attributes for their design.
----
==== Text ====
{{:de:text.png}} A text component represents a text. With \ n one can create line breaks.
----
==== QuadCurve ====
{{:en:quadcurve.png}} The Quadcurve component defines a quadratic Bézier parametric curve segment in (x,y) coordinate space. Drawing a curve that intersects both the specified coordinates (startX, startY) and (endX, enfY), using the specified point (controlX, controlY) as Bézier control point.
----
==== CubicCurve ====
{{:en:cubiccurve.png}} The CubicCurve component defines a cubic Bézier parametric curve segment in (x,y) coordinate space. Drawing a curve that intersects both the specified coordinates (startX, startY) and (endX, enfY), using the specified points (controlX1, controlY1) and (controlX2, controlY2) as Bézier control points.
----
==== SVGPath====
{{:en:svgpath.png}} The SVGPath component represents a simple shape that is constructed by parsing SVG path data from a String.
----