Home

FluentFxCSS Wiki

FluentFxCSS is a Java library designed to simplify the programmatic styling of JavaFX applications. It provides a fluent, type-safe builder API to construct CSS styles for Node, Region, Shape, and Text elements, promoting cleaner, more maintainable, and refactorable styling code within your Java projects.

Features

• Fluent API: Define styles using intuitive, chained method calls.
• Type-Safe: Catch styling errors at compile-time rather than runtime. Methods are specific to applicable node types.
• Reusable Style Definitions: Create StyleDefinition objects that can be applied to multiple nodes or merged with other definitions.
• CSS Generation:
  • Apply styles directly inline to JavaFX nodes (node.setStyle(...)).
  • Generate CSS class rule strings (e.g., .my-class { ... }) and pseudo-class rules (e.g., .my-class:hover { ... }) for use in stylesheets.
• Common Properties Covered: Includes builders for most frequently used CSS properties for Node, Region, Shape, and Text.
• Custom Property Fallback: Allows setting any arbitrary CSS property as a fallback.
• Unit Support: Many length-based properties support specifying units (PX, EM, PERCENT, PT, CM - via UnitValue enum).

Why FluentFxCSS?

While JavaFX's CSS support is powerful, managing styles programmatically through string concatenation can be error-prone and hard to refactor. FluentFxCSS aims to:

• Improve Readability: Make programmatic styling code look more like declarative definitions.
• Enhance Maintainability: Easier to update and manage styles within Java code.
• Reduce Errors: Leverage Java's type system to prevent applying inappropriate styles or using incorrect CSS values.
• Promote Reusability: Define common styles once and reuse them across your application.

Basic Usage

// ... inside your JavaFX application (e.g., start method)

// 1. Create Style Definitions
StyleDefinition paneLook = FluentFxCss.paneStyle()
    .padding(15, UnitValue.PX)
    .backgroundColor(Color.LIGHTSTEELBLUE)
    .borderStyle(BorderStyleValue.SOLID)
    .borderColor(Color.SLATEGRAY)
    .borderWidth(2)
    .borderRadius(5)
    .cursor(Cursor.HAND)
    .build();

StyleDefinition titleLook = FluentFxCss.textStyle()
    .fontFamily("Verdana")
    .fontWeight(FontWeight.BOLD)
    .fontSize(20, UnitValue.PT)
    .fill(Color.NAVY)
    .build();

StyleDefinition circleLook = FluentFxCss.shapeStyle()
    .fill(Color.ORANGERED)
    .stroke(Color.DARKRED)
    .strokeWidth(3)
    .opacity(0.85)
    .build();

// 2. Create Nodes
Pane myPane = new Pane();
myPane.setPrefSize(200, 100);
Text myTitle = new Text("Styled Title");
Circle myCircle = new Circle(50, 50, 30);

// 3. Apply Styles Inline
paneLook.applyTo(myPane);
titleLook.applyTo(myTitle);
circleLook.applyTo(myCircle);

// 4. Generate CSS Class Rules (for stylesheets)
String buttonHoverCss = FluentFxCss.regionStyle()
    .backgroundColor(Color.LIGHTGREEN)
    .opacity(0.9)
    .build()
    .toCssPseudoClass("my-button", "hover");

System.out.println(buttonHoverCss);
/*
Output:
.my-button:hover {
    -fx-background-color: #90EE90FF;
    -fx-opacity: 0.9;
}
*/

// To use the generated CSS class, add it to a stylesheet and apply the class to a node:
// String stylesheetContent = buttonHoverCss;
// String dataUriCss = "data:text/css;base64," + Base64.getEncoder().encodeToString(stylesheetContent.getBytes());
// scene.getStylesheets().add(dataUriCss);
// myButtonNode.getStyleClass().add("my-button");

Available Stylers

• FluentFxCss.nodeStyle(): For javafx.scene.Node for properties common to all javafx.scene.Nodes (opacity, effects, cursor, etc.). These are also available on specialized stylers through inheritance.
• FluentFxCss.paneStyle(): For javafx.scene.layout.Pane and general region properties.
• FluentFxCss.regionStyle(): For javafx.scene.layout.Region specific properties (background, border, padding, etc.).
• FluentFxCss.shapeStyle(): For javafx.scene.shape.Shape specific properties (fill, stroke, etc.).
• FluentFxCss.textStyle(): For javafx.scene.text.Text specific properties (font, text decorations, etc.).
• (If you have nodeStyle()) FluentFxCss.nodeStyle():

Each styler provides methods for CSS properties relevant to its target node type. All stylers inherit base styling methods like opacity(), dropShadow(), cursor(), and customProperty().

Building Style Definitions

After configuring styles using the fluent methods, call .build() on the styler:

StyleDefinition myStyle = FluentFxCss.paneStyle()
    // ... chain style methods ...
    .build();

This creates an immutable StyleDefinition object.

Using Style Definitions

StyleDefinition objects offer several ways to use the defined styles:

• myStyle.applyTo(Node node): Applies styles inline to a single node.
• myStyle.applyTo(Node... nodes): Applies styles inline to multiple nodes.
• myStyle.getCssString(): Returns the raw CSS string (e.g., "-fx-padding: 10px; -fx-background-color: blue;").
• myStyle.toCssClass(String className): Generates a CSS class rule string (e.g., .my-class { ... }).
• myStyle.toCssPseudoClass(String baseClassName, String pseudoClass): Generates a CSS pseudo-class rule string (e.g., .my-class:hover { ... }).
• myStyle.toCssRule(String selector): Generates a CSS rule with any custom selector.
• myStyle.mergeWith(StyleDefinition other): Combines this style with another (properties from other take precedence).