Conventional fxml views

[ghazyami]

Conventional FXML views

Conventional FXML views offers a convenient way to load FXML based views, by following structural and naming conventions a view can easily be used without manually loading the .fxml file and associated stylesheet and resource bundle

• Class that extends io.quarkiverse.fx.FXMLView
• FXML file with the same name as the class above, located at under the same directory structure as the class above under src/main/resources
• Stylesheet file with the same name as the class above, located at under the same directory structure as the class above under src/main/resources (Optional)
• Resource bundle file with the same name as the class above, located at under the same directory structure as the class above under src/main/resources (Optional)

Example

// src/main/java/org/example/ContactCardView.java
// src/main/resources/org/example/ContactCardView.fxml
// src/main/resources/org/example/ContactCardView.css (Optional)
// src/main/resources/org/example/ContactCardView.properties (Optional)

// Having these files in place we can simply load the view by injecting the instance then calling getNode() on it

@Inject
ContactCardView view;

public void start(@Observes @PrimaryStage final Stage stage) {
    Scene scene = new Scene(view.getNode());
    stage.setScene(scene);
    stage.show();
}

ContactCardView.java

@Dependent
public class ContactCardView extends FXMLView<VBox> {}

Extending FXMLView specifying the root node as defined on ContactCardView.fxml

ContactCardView.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>

<VBox alignment="CENTER" spacing="20.0" xmlns="http://javafx.com/javafx/21.0.1" xmlns:fx="http://javafx.com/fxml/1"
styleClass="red-bg">
   <padding><Insets bottom="10.0" left="10.0" right="10.0" top="10.0"/></padding>
   <Label id="firstName" text="John"/>
   <Label id="lastName" text="Doe"/>
   <Label id="location" text="%location"/>
</VBox>

styleClass set to a class defined on ContactCardView.css
text set to an entry defined on ContactCardView.properties resource bundle

ContactCardView.css

.red-bg {
    -fx-background-color: red;
}

ContactCardView.properties

location=Some location

[CodeSimcoe]

I kind of doubt this belongs in this extension.
One good hint for that is the deployment processor is not involved.
It could be used as an external library, not as part of this extension.

I leave it open for other feedbacks.

[ghazyami]

Good point!, Implementation relies on CDI. It can be an external library that only works with this extension or updated to handle other DI environments.

There are already similar libraries like afterburner.fx (standalone) and ignite (micronaut).

So I felt it's suitable to have this to integrate with CDI

[hantsy]

I would like there is an annotation @FxmlView to attach the view to the controller, make the codes are similar to the MVC architecture.

Ideally, the controller can be a CDI bean to process the business logic, the JavaFX fxml file is used to layout the UI, also can access the controller properties/method via EL like Jakarta Faces/Facelets.

Personally I have used JavaFX Weaver core moudle to integrate CDI/Weld with JavaFX in my example project, https://github.com/hantsy/cargotracker-regapp/blob/master/src/main/java/org/eclipse/cargotrakcer/regapp/ui/HandlingReportController.java#L28

[hantsy]

CSSL_EXT -> CSS_EXT

[hantsy]

Looks good, but I think my issue #43 can be another topic, use annotation instead of the view extended class.

I think most logic of the FXMLView can be extracted to into a standalone class(like the FxWeaver) and reused for scan views by annotations.