User Tools

Site Tools


en:javafx

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
en:javafx [2018/12/22 13:08]
roehner [Circle]
en:javafx [2019/04/07 20:30] (current)
roehner
Line 2: Line 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
Line 30: Line 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}}
Line 46: Line 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 ====
Line 59: Line 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 ====
Line 83: Line 82:
 {{:​en:​isselecteden.png}} {{:​en:​isselecteden.png}}
 <code java> ​ if (myCheckBox.isSelected()) ...</​code>​ <code java> ​ if (myCheckBox.isSelected()) ...</​code>​
-\\ 
-\\ 
 ---- ----
 ==== RadioButton & ToggleGroup ==== ==== RadioButton & ToggleGroup ====
Line 99: Line 96:
 <code java>​RadioButton choosenRadioButton = (RadioButton) toggleGroup1.getSelectedToggle(); ​ <code java>​RadioButton choosenRadioButton = (RadioButton) toggleGroup1.getSelectedToggle(); ​
 String choosen= choosenRadioButton.getText();​ </​code>​ String choosen= choosenRadioButton.getText();​ </​code>​
-\\ 
 ---- ----
 ==== ListView ==== ==== ListView ====
Line 123: Line 119:
 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 ====
Line 149: Line 144:
  
 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 ====
Line 159: Line 153:
 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>​
-\\ 
 ---- ----
 ==== Canvas ==== ==== Canvas ====
Line 175: Line 168:
  
 <code java> ​ gc.strokeLine(40,​ 10, 10, 40);</​code>​ <code java> ​ gc.strokeLine(40,​ 10, 10, 40);</​code>​
-\\ 
 ---- ----
 ==== Turtle ==== ==== Turtle ====
Line 187: Line 179:
 Example: Example:
 {{:​de:​turtlesetorigin.png}} {{:​de:​turtlesetorigin.png}}
-\\ 
 ---- ----
 ==== MenuBar ==== ==== MenuBar ====
Line 193: Line 184:
  
 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 ====
Line 206: Line 196:
  
 {{:​en:​jpopupmenudemo2.png}} ​ {{:​en:​jpopupmenudemo2.png}} ​
- 
-\\ 
 ---- ----
 ==== MenuButton ==== ==== MenuButton ====
Line 213: Line 201:
  
 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 ====
Line 220: Line 206:
  
 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}} ​
Line 235: Line 217:
   double value = slider1.getValue();​   double value = slider1.getValue();​
 </​code>​ </​code>​
- 
-\\ 
 ---- ----
 ==== ProgressBar==== ==== ProgressBar====
Line 246: Line 226:
   progressBar1.setProgress(0.3);​   progressBar1.setProgress(0.3);​
 </​code>​ </​code>​
- 
-\\ 
 ---- ----
- 
 ==== ToolBar==== ==== ToolBar====
 {{:​de:​toolbar.png}} ​ {{:​de:​toolbar.png}} ​
Line 259: Line 236:
 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====
Line 272: Line 246:
     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====
Line 297: Line 264:
 String s = hTMLEditor1.getHtmlText();​ String s = hTMLEditor1.getHtmlText();​
 </​code>​ </​code>​
-\\ 
 ---- ----
 ==== WebView==== ==== WebView====
Line 303: Line 269:
  
 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====
Line 314: Line 278:
 Color c = colorPicker1.getValue();​ Color c = colorPicker1.getValue();​
 </​code>​ </​code>​
- 
-\\ 
 ---- ----
 ==== DatePicker==== ==== DatePicker====
Line 325: Line 287:
 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====
Line 349: Line 307:
 File f = fileChooser1_openFile();​ File f = fileChooser1_openFile();​
 </​code>​ </​code>​
- 
-\\ 
 ---- ----
 ==== FileChooser==== ==== FileChooser====
Line 368: Line 324:
 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.
Line 386: Line 340:
 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.
Line 403: Line 353:
  
 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=====
Line 423: Line 371:
  
 </​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 ==== 
- +{{:​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.  
 +----
en/javafx.1545480512.txt.gz · Last modified: 2018/12/22 13:08 by roehner