Typos and small errors in JavaFX Fundamentals articles ( https://dev.java/learn/javafx/core/ ) #258

Hello dev.java team!

Thanks for all the great content (and for getting permission in this case to share content from "The Definitive Guide to Modern Java Clients with JavaFX 17: Cross-Platform Mobile and Cloud Development" available for purchase at
https://link.springer.com/chapter/10.1007/978-1-4842-7268-8_2 for free) .

Here I report some typos and other small possible mistakes in these articles that your team may wish to fix, as a way of giving back to the team for sharing this content.

In the latest version of https://dev.java/learn/javafx/core/fxml/ (archived as is at https://web.archive.org/web/20260704020359/https://dev.java/learn/javafx/core/fxml/)

• In the code snippet first introducing Scene.fxml (before updating it to depend on Styles.css, in the 2nd code snippet the error below is not present),
  in the VBox opening tag:

  <VBox alignment="CENTER" prefHeight="350.0" prefWidth="350.0" spacing="50.0"
  xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx=http://javafx.com/fxml/1
  fx:controller="org.modernclient.FXMLController">
  

  I think xmlns:fx=http://javafx.com/fxml/1 should have quotes around "http://javafx.com/fxml/1" to avoid the runtime error:
  Message: Open quote is expected for attribute "xmlns:fx" associated with an element type "VBox".

  This apparent error is also present in the upstream book "The Definitive Guide to Modern Java Clients with JavaFX 17: Cross-Platform Mobile and Cloud Development" ebook at O'Reilly (November 2021 version), https://link.springer.com/chapter/10.1007/978-1-4842-7268-8_2

• it may be useful to add the java/javac command arguments that are recommended for this example, it is somewhat non-obvious what the preferred way is to get the getResource() calls to return the resources using the directory structure described (by image)
  Given the directory structure described in the image

  $ tree
  .
  └── src
      └── main
          ├── java
          │   └── org
          │       └── modernclient
          │           ├── FXMLController.java
          │           └── MyShapesFXML.java
          └── resources
              ├── fxml
              │   └── Scene.fxml
              └── styles
                  └── Styles.css
  

  If one doesn't want to use the javac -d flag to create a separate output directory, the following will suffice (replacing /home/liveuser/Downloads/javafx-sdk-26.0.1/lib with wherever your javafx is)

  $ javac --module-path /home/liveuser/Downloads/javafx-sdk-26.0.1/lib --add-modules javafx.controls,javafx.fxml  $(find . -name "*.java")
  $ java --module-path /home/liveuser/Downloads/javafx-sdk-26.0.1/lib --add-modules javafx.controls,javafx.fxml  -cp src/main/java/:src/main/resources org.modernclient.MyShapesFXML
  

  adding both the src/main/java AND the src/main/resources to the classpath so the provided getResource("/fxml/Scene.fxml") and getResource("/css/Styles.css") will work.
  But maybe your team would recommend a different way.

In the latest version of https://dev.java/learn/javafx/core/ (archived as is at https://web.archive.org/web/20260703001657/https://dev.java/learn/javafx/core/ )

• In the section link

  Putting all together

  "Putting all together" should probably be "Putting It All Together" to be grammatical and also to agree with:

  • how it is quoted elsewhere in this tutorial e.g. "checkout Putting It All Together part of these series" at https://web.archive.org/web/20260703020000/https://dev.java/learn/javafx/core/layout/ .
  • the upstream source for this material, "The Definitive Guide to Modern Java Clients with JavaFX 17: Cross-Platform Mobile and Cloud Development" ebook at O'Reilly (November 2021 version) , https://link.springer.com/chapter/10.1007/978-1-4842-7268-8_2
    (in which this is titled "Putting It All Together")

In the latest version of https://dev.java/learn/javafx/core/all/ (archived as is at https://web.archive.org/web/20260703183539/https://dev.java/learn/javafx/core/all/ )

• Now, in the heading on the section page (not the TOC link as was mentioned for correction above)

  Putting all together

  "Putting all together" should also probably be "Putting It All Together" to be grammatical and also to agree with:

  • how it is quoted elsewhere in this tutorial e.g. "checkout Putting It All Together part of these series" at https://web.archive.org/web/20260703020000/https://dev.java/learn/javafx/core/layout/ .
  • the upstream source for this material, "The Definitive Guide to Modern Java Clients with JavaFX 17: Cross-Platform Mobile and Cloud Development" ebook at O'Reilly (November 2021 version)
    (in which this is titled "Putting It All Together" within the JavaFX Fundamentals chapter at https://link.springer.com/chapter/10.1007/978-1-4842-7268-8_2 )

• In the code example beginning with

listView.getSelectionModel().selectedItemProperty().addListener(
    personChangeListener = (observable, oldValue, newValue) -> { // [newValue is of type Object]
         // newValue can be null if nothing is selected
         selectedPerson = newValue; // [missing cast to Person here, unless ListView is declared ListView<Person>]
         modifiedProperty.set(false);
     if (newValue != null) {
         // Populate controls with selected Person
        firstnameTextField.setText(selectedPerson.getFirstname()); // [cast to Person if ListView is not ListView<Person> needed to be able to call .getFirstname()]
       // [...]

since the declarations of personChangeListener, selectedPerson are not shown (modifiedProperty is demonstrated elsewhere in the article),
and the appropriate use of generic for ListView is also not shown (that ListView<Person> must be set),
it may be useful to add the hint that one needs to declare some instance variables on the class for these examples to work, specifically
in FXMLController.java one must declare:

@FXML
 ListView<Person> listView;
 Person selectedPerson;
 ChangeListener<Person> personChangeListener;

• In the sentence

  You define the keyboard shortcut by preceding the targeted letter with an underbar character in the label.

  "underbar" should probably be replaced with "underscore".
  Note that this IS how it is written in the upstream book at "The Definitive Guide to Modern Java Clients with JavaFX 17: Cross-Platform Mobile and Cloud Development" ebook at O'Reilly (November 2021 version) ,
  https://link.springer.com/chapter/10.1007/978-1-4842-7268-8_2 , though.

• In the sentences

  There’s two ways to fix this.
  First is to remove the item and add it back again with the new values.
  The second way is to define an extractor for the underlying object.

  "There's two" may be clearer as "There are two", and "First is to" may be clearer as "The first way is to".
  [After writing the above, I checked the upstream source book and I see that there it is "There are" in the upstream; though it is still "First is to" there.:

  There are two ways to address this. First is to remove the item and add it back again with the new values.

  ]

In the latest version of https://dev.java/learn/javafx/core/layout/ (archived as is at https://web.archive.org/web/20260703020000/https://dev.java/learn/javafx/core/layout/ )

• In the sentence

  BorderPane is convenient for desktop applications with discreet sections, including a top toolbar (Top), a bottom status bar (Bottom), a center work area (Center), and two side areas (Right and Left).

  "discreet" should be "discrete" (they are different words, and "discrete" is the appropriate meaning here).
  Note that this typo is specific to the dev.java version of this text and was not visible in the latest "The Definitive Guide to Modern Java Clients with JavaFX 17: Cross-Platform Mobile and Cloud Development" ebook at O'Reilly (November 2021 version) , https://link.springer.com/chapter/10.1007/978-1-4842-7268-8_2
  which has "discrete" (correct).

• In the sentences

  This layout is convenient for nodes whose sizes can vary, such as ImageView nodes or shapes.
  TilePane is similar to FlowPane, except TilePane uses equal-sized cells.

  "FlowPane" is hyperlinked but, inconsistently, neither "ImageView" nor "TilePane" are hyperlinked.
  It may be useful to readers if they were hyperlinked as "ImageView" and "TilePane".

• In the sentence

  We also set margins around the label with BorderPane static method setMargin().

  "BorderPane" should be "BorderPane" to be consistent.

• In the sentence

  We use SplitPane in our master-detail UI example (checkout Putting It All Together part of these series).

  "checkout Putting It All Together part of these series" should be "check out the Putting It All Together part of these series"

• In the sentence

  Here, we add a Label to an AnchorPane and anchor it to the lower-left side of the pane with a 10-pixel offset:

  "Label" should be "Label" and "AnchorPane" should be "AnchorPane".

• In the sentence

  centers the text node along the bottom edge of the StackPane.

  "StackPane" should be "StackPane"

• In the sentence

  Returning to MyShapes, the Scene holds the scene graph, defined by its root node.

  "Scene" should be "Scene" to be consistent.

• In the sentence

  You can nest HBox nodes inside a VBox for a grid-like effect or nest VBox nodes inside an HBox component.

  "nest VBox nodes inside an HBox component" should be "nest VBox nodes inside an HBox component"

• In the sentence

  What’s left is to configure the Stage.

  "Stage" should be "Stage"

Reading / reviewing https://dev.java/learn/javafx/core/effects/ (archived as is at https://web.archive.org/web/20260703022752/https://dev.java/learn/javafx/core/effects/ )

• In the sentence

  Linear gradients require two or more colors, called Stops.

  "Stops" should be "Stops".

• Under the section "Linear Gradient"
  it may be useful to mention that the gradient can be applied using setFill() (as a Paint subclass).
  That is out of the following three lines needed to reproduce the example,
  only the first 2 steps are shown:

  Stop[] stops = new Stop[]{new Stop(0, Color.DODGERBLUE), new Stop(0.5, Color.LIGHTBLUE), new Stop(1.0, Color.LIGHTGREEN)};
  LinearGradient gradient = new LinearGradient(0, 0, 0, 1, true,CycleMethod.NO_CYCLE, stops);
  ellipse.setFill(gradient); // [this line is not shown, may slow down or stall some readers]
  

  Compare this to the next section, "DropShadow", which explicitly shows how to apply the effect to achieve the outcome in the provided image:

  ellipse.setEffect(new DropShadow(30, 10, 10, Color.GRAY));

  Or the section after that, "Reflection" which shows how to apply the effect:

  text.setEffect(r);

• In the sentences

  For example, the FadeTransition controls a node’s opacity, varying the property over time. To fade something out gradually, you change its opacity from fully opaque (1) to completely transparent (0). The TranslateTransition moves a node by modifying its translateX and translateY properties (or translateZ if you’re working in 3D).
  You can play multiple transitions in parallel with a ParallelTransition or sequentially with a SequentialTransition. To control timing between two sequential transitions, use PauseTransition or configure a delay before a transition begins with Transition method setDelay(). You can also define an action when a Transition completes using the Transition action event handler property onFinished.

  For consistency of hyperlinking to the Transition classes, "FadeTransition" should be "FadeTransition" and "TranslateTransition" should be "TranslateTransition".

In the latest version of https://dev.java/learn/javafx/core/structure/ (archived as is at https://web.archive.org/web/20260703001644/https://dev.java/learn/javafx/core/structure/ ),

• In the sentence

  For example, you can place multiple VBox controls in an HBox or put an AnchorPane into one pane of a SplitPane control

  "VBox" is not hyperlinked whereas HBox and others are . It should link to https://download.java.net/java/GA/javafx26/docs/api/javafx.graphics/javafx/scene/layout/VBox.html .

Thanks!