Benutzer-Werkzeuge

Webseiten-Werkzeuge


en:javafx

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
en:javafx [2018/12/22 13:23] – [QuadCurve] roehneren:javafx [2022/09/02 10:27] (aktuell) – Externe Bearbeitung 127.0.0.1
Zeile 2: Zeile 2:
 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. 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.
  
-Please note that in the configuration under //Visibility// you can set which tabs are displayedFor JavaFX you need FX Base, FX Controls and FX ShapesYou can disable the tabs for AWT and Swing here.+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 OpenJDKIn 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|}} {{: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 Gerhard Röhner
Zeile 30: Zeile 33:
 {{:de:jtextfield.png}} {{:de:jtextfield.png}}
 <code java>String Name = tfName.getText();</code> <code java>String Name = tfName.getText();</code>
-\\ 
 ---- ----
- 
 ==== NumberField ==== ==== NumberField ====
 {{:de:Jnumberfieldicon.png}} {{:de:Jnumberfieldicon.png}}
Zeile 46: Zeile 47:
 <code java>nfSum.setDouble(Sum);    // maximal number of decimal places: 3657.42323426347834     <code java>nfSum.setDouble(Sum);    // maximal number of decimal places: 3657.42323426347834    
 nfSum.setDouble(Sum, 2); // two decimal places:               3657.42 </code> nfSum.setDouble(Sum, 2); // two decimal places:               3657.42 </code>
-\\ 
 ---- ----
 ==== TextArea ==== ==== TextArea ====
Zeile 59: Zeile 59:
 <code java>  taOutput.setText("Output:\n\n"); <code java>  taOutput.setText("Output:\n\n");
   taOutput.appendText("Number " + Number+ " found! \n");</code>   taOutput.appendText("Number " + Number+ " found! \n");</code>
-\\ 
 ---- ----
 ==== Button ==== ==== Button ====
Zeile 83: Zeile 82:
 {{:en:isselecteden.png}} {{:en:isselecteden.png}}
 <code java>  if (myCheckBox.isSelected()) ...</code> <code java>  if (myCheckBox.isSelected()) ...</code>
-\\ 
-\\ 
 ---- ----
-==== RadioButton & ToggleGroup ====+==== Buttongroup ====
 {{:en:radiobuttonen.png}} {{:en:radiobuttonen.png}}
-RadioButtons offer different options, from which you can choose just one.\\+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
  
-To group RadioButtons, you need to include an invisible ToggleGroup component {{:en:buttongroup.png}} in the form. +For a buttongroup of radiobuttons the Java-Editor places this method into the java source code: 
-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: +<code java>  public String buttonGroup1TG_getSelectedButtonGroupLabel() { 
- +    RadioButton rb = (RadioButton)buttonGroup1TG.getSelectedToggle(); 
-Example: +    if (rb !null) return rb.getText(); 
- +    return ""; 
-<code java>RadioButton choosenRadioButton = (RadioButton) toggleGroup1.getSelectedToggle();  +  } </code> 
-String choosenchoosenRadioButton.getText(); </code> +   
-\\+so it's easy to get the selected JRadioButton of a Buttongroup:\\ 
 +<code java>  if (bgColorTG_getSelectedButtonGroupLabel().equals("green"))</code>
 ---- ----
 ==== ListView ==== ==== ListView ====
Zeile 123: Zeile 120:
 If the ListView contains numbers, the selected string must be converted into a number: If the ListView contains numbers, the selected string must be converted into a number:
 <code java>  String s = (String) myList.getSelectionModel().getSelectedItem(); <code java>  String s = (String) myList.getSelectionModel().getSelectedItem();
-  int Number= Integer.parseInt(s);</code+  int Number= Integer.parseInt(s);</code
-\\+
 ---- ----
 ==== ComboBox ==== ==== ComboBox ====
Zeile 149: Zeile 145:
  
 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. 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 ==== ==== Spinner ====
Zeile 159: Zeile 154:
 At runtime you can use the //getValue()// method to get the current value: At runtime you can use the //getValue()// method to get the current value:
 <code java>  int value= mySpinner.getValue(); </code> <code java>  int value= mySpinner.getValue(); </code>
-\\+ 
 +To react directly to spinner changes, use the //mouseClicked// event.
 ---- ----
 ==== Canvas ==== ==== Canvas ====
Zeile 175: Zeile 171:
  
 <code java>  gc.strokeLine(40, 10, 10, 40);</code> <code java>  gc.strokeLine(40, 10, 10, 40);</code>
-\\ 
 ---- ----
 ==== Turtle ==== ==== Turtle ====
Zeile 187: Zeile 182:
 Example: Example:
 {{:de:turtlesetorigin.png}} {{:de:turtlesetorigin.png}}
-\\ 
 ---- ----
 ==== MenuBar ==== ==== MenuBar ====
Zeile 193: Zeile 187:
  
 With a MenuBar component you can create a menu bar. The menu bar displays the menus (menu components) assigned to it. With a MenuBar component you can create a menu bar. The menu bar displays the menus (menu components) assigned to it.
-\\ 
 ---- ----
 ==== ContextMenu ==== ==== ContextMenu ====
Zeile 206: Zeile 199:
  
 {{:en:jpopupmenudemo2.png}}  {{:en:jpopupmenudemo2.png}} 
- 
-\\ 
 ---- ----
 ==== MenuButton ==== ==== MenuButton ====
Zeile 213: Zeile 204:
  
 In the object inspector enter the menu commands under //MenuItems//. For each menu command an event method is created. In the object inspector enter the menu commands under //MenuItems//. For each menu command an event method is created.
- 
-\\ 
 ---- ----
 ==== SplitMenuButton ==== ==== SplitMenuButton ====
Zeile 220: Zeile 209:
  
 In the object inspector enter the menu commands under //MenuItems//. For each menu command and the SplitMenuButton itself an event method is created. 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===== =====JavaFX Controls=====
 The control components of JavaFX extend the standard GUI components of JavaFX Base. The control components of JavaFX extend the standard GUI components of JavaFX Base.
- 
- 
 ==== Slider==== ==== Slider====
 {{:de:slider.png}}  {{:de:slider.png}} 
Zeile 235: Zeile 220:
   double value = slider1.getValue();   double value = slider1.getValue();
 </code> </code>
- 
-\\ 
 ---- ----
 ==== ProgressBar==== ==== ProgressBar====
Zeile 246: Zeile 229:
   progressBar1.setProgress(0.3);   progressBar1.setProgress(0.3);
 </code> </code>
- 
-\\ 
 ---- ----
- 
 ==== ToolBar==== ==== ToolBar====
 {{:de:toolbar.png}}  {{:de:toolbar.png}} 
Zeile 259: Zeile 239:
 toolBar1.getItems().addAll(bNew, bOpen, new Separator(), bPrint);  toolBar1.getItems().addAll(bNew, bOpen, new Separator(), bPrint); 
 </code> </code>
- 
-\\ 
 ---- ----
 ==== Separator==== ==== Separator====
 {{:de:separator.png}} With a Separator component you can separate GUI components by a line. {{:de:separator.png}} With a Separator component you can separate GUI components by a line.
-\\ 
 ---- ----
 ==== ToggleButton==== ==== ToggleButton====
Zeile 272: Zeile 249:
     if (toggleButton1.isSelected()) ...     if (toggleButton1.isSelected()) ...
 </code> </code>
- 
-\\ 
 ---- ----
 ==== PasswordField==== ==== PasswordField====
 {{:de:password.png}} With a PasswordField component you can enter a password that will hide the individual characters. {{:de:password.png}} With a PasswordField component you can enter a password that will hide the individual characters.
- 
-\\ 
 ---- ----
 ==== ChoiceBox==== ==== ChoiceBox====
 {{:de:choicebox.png}} A ChoiceBox component is a ComboBox component that allows you to just select but not type anything. {{:de:choicebox.png}} A ChoiceBox component is a ComboBox component that allows you to just select but not type anything.
- 
-\\ 
 ---- ----
 ==== Hyperlink==== ==== 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. {{: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==== ==== HTMLEditor====
Zeile 297: Zeile 267:
 String s = hTMLEditor1.getHtmlText(); String s = hTMLEditor1.getHtmlText();
 </code> </code>
-\\ 
 ---- ----
 ==== WebView==== ==== WebView====
Zeile 303: Zeile 272:
  
 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. 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==== ==== ColorPicker====
Zeile 314: Zeile 281:
 Color c = colorPicker1.getValue(); Color c = colorPicker1.getValue();
 </code> </code>
- 
-\\ 
 ---- ----
 ==== DatePicker==== ==== DatePicker====
Zeile 325: Zeile 290:
 LocalDate d = datePicker1.getValue(); LocalDate d = datePicker1.getValue();
 </code> </code>
- 
-\\ 
 ---- ----
 ==== Pagination==== ==== Pagination====
 {{:de:pagination.png}} With a Pagination component you can navigate between pages of a content. {{:de:pagination.png}} With a Pagination component you can navigate between pages of a content.
- 
-\\ 
 ---- ----
 ==== FileChooser==== ==== FileChooser====
Zeile 349: Zeile 310:
 File f = fileChooser1_openFile(); File f = fileChooser1_openFile();
 </code> </code>
- 
-\\ 
 ---- ----
 ==== FileChooser==== ==== FileChooser====
Zeile 368: Zeile 327:
 File f = fileChooser1_saveFile(); File f = fileChooser1_saveFile();
 </code> </code>
- 
-\\ 
 ==== DirectoryChooser==== ==== DirectoryChooser====
 {{:de:directorychooser.png}} With a DirectoryChooser component you can select a folder. {{:de:directorychooser.png}} With a DirectoryChooser component you can select a folder.
Zeile 386: Zeile 343:
 File d = directoryChooser1_openDirectory(); File d = directoryChooser1_openDirectory();
 </code> </code>
-\\ 
 ---- ----
 ==== ImageView==== ==== ImageView====
 {{:de:imageview.png}} With an ImageView component one can display a picture (//image//). {{:de:imageview.png}} With an ImageView component one can display a picture (//image//).
-\\ 
 ---- ----
 ==== MediaView==== ==== MediaView====
 {{:de:mediaview.png}} With a MediaView component you can view a video with the MediaPlayer. {{:de:mediaview.png}} With a MediaView component you can view a video with the MediaPlayer.
-\\ 
 ---- ----
- 
 ==== TableView==== ==== TableView====
 {{:en:tableview.png}} With a TableView component you can display a table. {{:en:tableview.png}} With a TableView component you can display a table.
Zeile 403: Zeile 356:
  
 The attribute //tableView1Items// stores the data to be displayed in the table. The attribute //tableView1Items// stores the data to be displayed in the table.
-\\ 
 ---- ----
 ==== TreeTableView==== ==== TreeTableView====
 {{:en:treetableview.png}} With a TreeTableView component you can display a tree table. {{:en:treetableview.png}} With a TreeTableView component you can display a tree table.
-\\ 
 ---- ----
 =====JavaFX Shapes===== =====JavaFX Shapes=====
Zeile 423: Zeile 374:
  
 </code> </code>
-\\ 
 ---- ----
 ==== Rectangle ==== ==== Rectangle ====
 {{:de:rectangle.png}} A Rectangle component represents a rectangle. The //Fill// attribute sets its fill color, the //Stroke// its frame color. {{:de:rectangle.png}} A Rectangle component represents a rectangle. The //Fill// attribute sets its fill color, the //Stroke// its frame color.
-\\ 
 ---- ----
 ==== Ellipse ==== ==== Ellipse ====
 {{:de:ellipse.png}} An Ellipse component represents an ellipse. The //Fill// attribute sets its fill color, the //Stroke// its frame color. {{:de:ellipse.png}} An Ellipse component represents an ellipse. The //Fill// attribute sets its fill color, the //Stroke// its frame color.
-\\ 
 ---- ----
 ==== Polygon==== ==== 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. {{: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 ==== ==== 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. {{: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 ==== ==== 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. {{: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 ==== ==== Text ====
 {{:de:text.png}} A text component represents a text. With \ n one can create line breaks. {{:de:text.png}} A text component represents a text. With \ n one can create line breaks.
-\\ 
 ---- ----
 ==== QuadCurve ==== ==== 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.  {{: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 ==== ==== CubicCurve ====
-{{:en:cubiccurve.png}} The CubiCurve 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. +{{: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==== ==== SVGPath====
 {{:en:svgpath.png}} The SVGPath component represents a simple shape that is constructed by parsing SVG path data from a String.  {{:en:svgpath.png}} The SVGPath component represents a simple shape that is constructed by parsing SVG path data from a String. 
-\\ 
 ---- ----
en/javafx.1545481411.txt.gz · Zuletzt geändert: 2018/12/22 13:23 von roehner