PatternFly Java is a 💯 Java implementation of PatternFly without any JavaScript dependencies (except for the charts). Its goal is to provide an easy-to-use, elegant, and efficient API to build complex web applications with PatternFly in Java. PatternFly Java integrates with and builds upon Elemento's builder API. It works with both GWT and J2CL. The following code snippet gives a taste of what PatternFly Java looks like:

body().add(page()
        .addSkipToContent(skipToContent("main-id"))
        .addMasthead(masthead()
                .addMain(mastheadMain()
                        .addToggle(mastheadToggle())
                        .addBrand(mastheadBrand()
                                .addLogo(mastheadLogo("/"))))
                .addContent(mastheadContent()
                        .addToolbar(toolbar())))
        .addSidebar(pageSidebar()
                .addBody(pageSidebarBody()
                        .addNavigation(navigation(flat)
                                .addItem(navigationItem("get-started", "Get started", "/get-started"))
                                .addItem(navigationItem("get-involved", "Get involved", "/get-involved")))))
        .addMain(pageMain("main-id")
                .addSection(pageSection()
                        .add(content()
                                .add(title(1, "PatternFly - Java"))
                                .add(p()
                                        .add(a("https://github.com/patternfly-java/patternfly-java", "_blank")
                                                .text("PatternFly Java"))
                                        .add(" is a 💯 Java implementation of ")
                                        .add(a("https://www.patternfly.org/", "_blank")
                                                .text("PatternFly"))
                                        .add(" without any JavaScript dependencies based on GWT/J2CL and ")
                                        .add(a("https://github.com/hal/elemento", "_blank")
                                                .text("Elemento"))
                                        .add("."))))));

PatternFly Java aims to provide almost complete support for all components, charts, extensions, and layouts. To see it in action, head over to the showcase. It demonstrates all currently supported components and layouts. To get all the details about using PatternFly Java, look at the API documentation.

Get started

PatternFly Java is available on Maven Central. The easiest way is to import its BOM

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>org.patternfly</groupId>
            <artifactId>patternfly-java-bom</artifactId>
            <version>0.4.17</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

and add a dependency to either

<dependency>
    <groupId>org.patternfly</groupId>
    <artifactId>patternfly-java-gwt</artifactId>
    <type>gwt-lib</type>
</dependency>

or

<dependency>
    <groupId>org.patternfly</groupId>
    <artifactId>patternfly-java-j2cl</artifactId>
</dependency>

depending on your stack. If you're using GWT, inherit from org.patternfly.PatternFly:

<module>
    <inherits name="org.patternfly.PatternFly"/>
</module>

Dependencies

PatternFly Java has no JavaScript dependencies (except for the charts – see below). Everything necessary is included in the code base for both GWT and J2CL. However, PatternFly Java does not come with stylesheets. You are expected to include or bundle the necessary stylesheets yourself. Take a look at the PatternFly getting started guide for more information.

You can also take a look at the code of the showcase to see how to set up and use PatternFly Java.

Charts

To use charts, you need to install the @patternfly-java/charts NPM package. This package wraps the supported PatternFly React Chart components as web components.

Install the package using npm:

npm install @patternfly-java/charts

Import it in your JavaScript file:

import "@patternfly-java/charts/dist/charts";

Modules

PatternFly Java consists of these Maven modules (a-z):

Module	Description
patternfly-java-bom	Bill of materials
patternfly-java-charts	Charts
patternfly-java-codeeditor	Code editor extension
patternfly-java-components	Components
patternfly-java-core	Core classes
patternfly-java-finder	Finder extension
patternfly-java-gwt	GWT support
patternfly-java-icons	Icons
patternfly-java-j2cl	J2CL support
patternfly-java-layouts	Layouts
patternfly-java-tokens	Tokens

Here’s the dependency graph of these maven modules and their external dependencies:

API design

PatternFly Java integrates with and builds upon Elemento's builder API. Static factory methods are used to create the components, and public instance methods add child elements and modify the component.

In general, the API for a component can be classified into these groups:

Static factory methods

These methods are used to create a component. They are usually named after the component, are overloaded to accept required and optional arguments, and return an instance of the newly created component:

Button button1 = button("Click me!");
Button button2 = button("PatternFly", "https://www.patternfly.org");

Add methods

These methods add subcomponents to a main component. They are usually called add<SubComponent>() and return the main component so that the method call can be chained with other methods.

Dropdown dropdown = dropdown()
        .addToggle(menuToggle("Dropdown"))
        .addMenu(menu()
                .addContent(menuContent()
                        .addList(menuList()
                                .addItem(actionMenuItem("item-0", "Action")))));

Builder / modifier methods

These methods modify the current component. They return the current component so that the method call can be chained with other methods.

Card card = card()
        .flat()
        .rounded()
        .large();

ARIA-related methods

These methods set ARIA-related attributes in the component. They're usually named aria<Attribute>() and return the component so that the method call can be chained with other methods.

Navigation navigation = navigation(flat)
        .ariaScrollBackLabel("← back")
        .ariaScrollForwardLabel("→ forward");

Event handlers

These methods add event handlers for various events to the component. They are usually named on<Event>(), accept an event handler, and return the component so that the method call can be chained with other methods. PatternFly Java defines some common event handlers that are reused in all components. In some cases, components also use specific event handlers that only apply to the component.

Drawer drawer = drawer().id("drw")
        .onToggle((e, c, expanded) -> console.log("Drawer expanded: " + expanded));

Public API / getters

These methods do something with the component or return a value, a property, or some other kind of information. They return either void or a value/property.

Switch switch_ = switch_("id", "name");
boolean value = switch_.value();

Common interfaces

Common behavior across all components is implemented by base classes and interfaces. All components extend from either BaseComponent or BaseComponentSVG. These base classes implement interfaces from Elemento to manipulate the component element.

In addition, components implement these interfaces to provide a common API:

• Modifiers.*
  The sub-interfaces defined in this 'umbrella' interface are used to toggle one specific flag of a component. For example, card().plain() toggles the plain flag of the card component and is defined in the Modifiers.Plain interface. Other components that also provide a plain flag implement the Modifiers.Plain interface as well.
• Closable
  Implemented by components that provide some kind of popup that can be closed. The interface provides methods to register event handlers when the popup is closed.
• ComponentContext, HasIdentifier, and HasItems
  These interfaces are often implemented by components that have a parent-child relationship, like DataList and DataLiistItem. HasItems is implemented by the parent component and provides methods to add and remove child items. ComponentContext and HasIdentifier are implemented by the child components and provide methods to store and retrieve arbitrary values and get a unique identifier for the child item.
• ComponentIcon and ComponentIconAndText
  These interfaces are implemented by components that provide text resp. an icon and a text.
• ComponentProgress
  Implemented by components that provide some kind of progress.
• Expandable
  Implemented by components that provide some kind of expandable content.
• HasValue and HasObservableValue
  These interfaces are implemented by components that provide a value or an observable value.

---

The best way to experience the API is to take a look at the code snippets of the various components and layouts in the showcase.

Icons

PatternFly Java comes with predefined icons for

• FontAwesome brand (fab)
• FontAwesome regular (far)
• FontAwesome solid (fas) and
• PatternFly icons (patternfly)

There are static factory methods in IconsSets to easily use these icons. The icons are returned as instances of the PredefinedIcon class, which is essentially an instance of an SVG builder and allows easy customization of the returned icon.

Components that support icons usually implement the interface WithIcon or WithIconAndText and thus use a common API.

import static org.patternfly.component.IconPosition.start;
import static org.patternfly.icon.IconSets.fas.book;
import static org.patternfly.icon.IconSets.fas.cube;
import static org.patternfly.icon.IconSets.fas.flag;
import static org.patternfly.icon.IconSets.fas.globe;
import static org.patternfly.icon.IconSets.fas.plusCircle;
import static org.patternfly.icon.IconSets.patternfly.key;

DescriptionList dl = descriptionList()
        .addGroup(descriptionListGroup()
                .addTerm(descriptionListTerm("Name").icon(cube()))
                .addDescription(descriptionListDescription("Example")))
        .addGroup(descriptionListGroup()
                .addTerm(descriptionListTerm("Namespace").icon(book()))
                .addDescription(descriptionListDescription()
                        .add(a("#").textContent("mary-test"))))
        .addGroup(descriptionListGroup()
                .addTerm(descriptionListTerm("Labels").icon(key()))
                .addDescription(descriptionListDescription("example")))
        .addGroup(descriptionListGroup()
                .addTerm(descriptionListTerm("Pod selector").icon(globe()))
                .addDescription(descriptionListDescription()
                        .add(button().iconAndText(plusCircle(), "app=MyApp", start)
                                .inline().link())))
        .addGroup(descriptionListGroup()
                .addTerm(descriptionListTerm("Annotation").icon(flag()))
                .addDescription(descriptionListDescription("2 annotations")));

See also the PatternFly website about icons to get an overview of the available icons.

Tokens

PatternFly Java comes with predefined enum constants for all PatternFly design tokens. They are defined in the enum class org.patternfly.token.Token:

public enum Token {

    // enum constants omitted
    ;

    /** The CSS custom property name starting with <code>--pf-t</code> */
    public final String name;
    /** The default value for the custom property. */
    public final String value;
    /** The property name wrapped in <code>var()</code>. */
    public final String var;

    Token(String name, String value, String var) {
        this.name = name;
        this.value = value;
        this.var = var;
    }
}

Here's an example of how to use the token definitions:

import elemental2.dom.HTMLElement;

import static org.patternfly.token.Token.globalFontSizeSm;
import static org.patternfly.token.Token.globalTextColorDisabled;

HTMLElement container = div()
        .style("color", globalTextColorDisabled.var)
        .style("font-size", globalFontSizeSm.var)
        .element();

PatternFly support

PatternFly Java aims to provide almost complete support for all components, charts, extensions, and layouts. The following issues show how many components, charts, extensions, and layouts have already been implemented.

• components
• charts
• extensions
• layouts

Get involved

PatternFly Java is still under development. The API might change, and things might not work as expected. Please give it a try and share your feedback. Join the chat, enter the discussions or use the GitHub issues to report bugs or request new features.

Of course, you're welcome to contribute to PatternFly Java. If you like what you're seeing, leave us a star!