User Tools

Site Tools


en:javafx

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 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 Documentation - Manual Java FX.

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

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:


TextField

With a TextField component you can input or output text. To input text use the method getText(), to output text the method setText().

Example:

String Name = tfName.getText();

NumberField

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:

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

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:

  taOutput.setText("Output:\n\n");
  taOutput.appendText("Number " + Number+ " found! \n");

Button

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

A CheckBox component may or may not be selected. The current state is provided by the method isSelected().

Example:

  if (myCheckBox.isSelected()) ...

RadioButton & ToggleGroup

RadioButtons offer different options, from which you can choose just one.

To group RadioButtons, you need to include an invisible ToggleGroup component in the form. The name of this ToggleGroup component is specified for each RadioButton in the object inspector at the ToggleGroup attribute.

With the help of the ToggleGroup one can determine the selected option:

Example:

RadioButton choosenRadioButton = (RadioButton) toggleGroup1.getSelectedToggle(); 
String choosen= choosenRadioButton.getText(); 

ListView

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);</code
----
==== ComboBox ====
{{:de:combobox.png}}
 
A ComboBox component is a combination of an input line and a drop-down selection list. The user can select a list element at runtime or enter text in the input line.
 
In the object inspector you can enter strings into the selection list via the attribute //Items//. To be able to enter something in the input line of a ComboBox, set the attribute //editable// to //true//.
 
The data of the ComboBox are managed in an //ObservableArrayList//. At runtime you can manipulate the data using methods of the ObservableArrayList.
 
Examples:
 
Access via ObservableArrayList
<code java>  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

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(); 

Canvas

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

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:


With a MenuBar component you can create a menu bar. The menu bar displays the menus (menu components) assigned to it.


ContextMenu

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.

—-

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

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

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

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

With a ToolBar component you can combine several buttons and separators.

ToolBar toolBar1 = new ToolBar();
toolBar1.getItems().addAll(bNew, bOpen, new Separator(), bPrint); 

Separator

With a Separator component you can separate GUI components by a line.


ToggleButton

A ToggleButton component can like a switch be on or off.

    if (toggleButton1.isSelected()) ...

PasswordField

With a PasswordField component you can enter a password that will hide the individual characters.


ChoiceBox

A ChoiceBox component is a ComboBox component that allows you to just select but not type anything.


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

An HTMLEditor component allows editing and formatting of text. Formatting is done by marking it with HTML.

String s = hTMLEditor1.getHtmlText();

WebView


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


With a ColorPicker component you can choose a color.

Color c = colorPicker1.getValue();

DatePicker


With a DatePicker component you can select a date.

LocalDate d = datePicker1.getValue();

Pagination

With a Pagination component you can navigate between pages of a content.


FileChooser

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

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

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

With an ImageView component one can display a picture (image).


MediaView

With a MediaView component you can view a video with the MediaPlayer.


TableView

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

With a TreeTableView component you can display a tree table.


JavaFX Shapes

Graphics can be programmed with the shape components of JavaFX.

Circle

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

A Rectangle component represents a rectangle. The Fill attribute sets its fill color, the Stroke its frame color.


Ellipse

An Ellipse component represents an ellipse. The Fill attribute sets its fill color, the Stroke its frame color.


Polygon

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

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

A line component represents a line. In addition to the color of the line (Stroke), there are some other attributes for their design.


Text

A text component represents a text. With \ n one can create line breaks.


QuadCurve

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

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

The SVGPath component represents a simple shape that is constructed by parsing SVG path data from a String.


en/javafx.txt · Last modified: 2019/04/07 20:30 by roehner