https://github.com/patternfly-java/patternfly-java
PatternFly Java implementation
https://github.com/patternfly-java/patternfly-java
elemento gwt hacktoberfest j2cl java patternfly
Last synced: about 21 hours ago
JSON representation
PatternFly Java implementation
- Host: GitHub
- URL: https://github.com/patternfly-java/patternfly-java
- Owner: patternfly-java
- License: apache-2.0
- Created: 2019-11-21T15:27:02.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2026-01-28T07:41:06.000Z (2 months ago)
- Last Synced: 2026-01-28T23:39:11.990Z (2 months ago)
- Topics: elemento, gwt, hacktoberfest, j2cl, java, patternfly
- Language: Java
- Homepage: https://patternfly-java.github.io/
- Size: 4.98 MB
- Stars: 31
- Watchers: 3
- Forks: 6
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- gwt-boot-awesome-lili - patternfly-java - UI framework based on (UI Framework)
README
[](https://github.com/patternfly-java/patternfly-java/actions/workflows/verify.yml) [](https://patternfly-java.github.io/apidocs/) [](https://deepwiki.com/patternfly-java/patternfly-java) [](https://central.sonatype.com/search?q=g%3Aorg.patternfly)  [](https://app.gitter.im/#/room/#pf4-java_core:gitter.im)
PatternFly Java is a 💯 Java implementation of [PatternFly](https://www.patternfly.org/) without any JavaScript dependencies (except for the [charts](#patternfly-javacharts)). 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](https://github.com/hal/elemento#builder-api). It works with both GWT and J2CL. The following code snippet gives a taste of what PatternFly Java looks like:
```java
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](https://patternfly-java.github.io/). It demonstrates all currently supported components and layouts. To get all the details about using PatternFly Java, look at the [API documentation](https://patternfly-java.github.io/apidocs/).
# Get started
PatternFly Java is available on [Maven Central](https://central.sonatype.com/search?q=g%3Aorg.patternfly). The easiest way is to import its BOM
```xml
org.patternfly
patternfly-java-bom
0.6.16
pom
import
```
and add a dependency to either
```xml
org.patternfly
patternfly-java-gwt
gwt-lib
```
or
```xml
org.patternfly
patternfly-java-j2cl
```
depending on your stack. If you're using GWT, inherit from `org.patternfly.PatternFly`:
```xml
```
## JavaScript Dependencies
PatternFly Java has **no JavaScript** dependencies. Everything necessary is included in the code base for both GWT and J2CL. The only exception is the charts package, which wraps PatternFly React Chart components as web components so they can be used from Java.
```
npm install @patternfly-java/charts
```
```js
import "@patternfly-java/charts/dist/charts";
```
## Stylesheets
PatternFly Java does **not** come with PatternFly styles. You have to provide them yourself. Please follow the PatternFly [getting started guide](https://www.patternfly.org/get-started/develop/#develop-with-htmlcss).
In addition, PatternFly Java defines a set of its own styles in the `core` and `extensions/finder` packages. Unlike other components that map to existing PatternFly components, the finder extension has no related PatternFly component and relies entirely on its own styles.
All NPM packages are published under the [`@patternfly-java`](https://www.npmjs.com/org/patternfly-java) scope and share the same version number as the Maven artifacts.
### @patternfly-java/core
Bundles the PatternFly Java CSS stylesheets required by PatternFly Java components and layouts.
```
npm install @patternfly-java/core
```
```js
import "@patternfly-java/core";
```
### @patternfly-java/finder
Provides the CSS for the [finder](https://patternfly-java.github.io/extensions/finder) extension. Only needed if you use the finder component.
```
npm install @patternfly-java/finder
```
```js
import "@patternfly-java/finder";
```
# 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](https://github.com/hal/elemento#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:
```java
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()` and return the main component so that the method call can be chained with other methods.
```java
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.
```java
Card card = card()
.flat()
.rounded()
.large();
```
## ARIA-related methods
These methods set ARIA-related attributes in the component. They're usually named `aria()` and return the component so that the method call can be chained with other methods.
```java
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()`, 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](https://patternfly-java.github.io/apidocs/org/patternfly/handler/package-summary.html) that are reused in all components. In some cases, components also use specific event handlers that only apply to the component.
```java
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.
```java
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`](https://patternfly-java.github.io/apidocs/org/patternfly/component/BaseComponent.html) or [`BaseComponentSVG`](https://patternfly-java.github.io/apidocs/org/patternfly/component/BaseComponentSVG.html). These base classes implement [interfaces from Elemento](https://hal-console.gitbook.io/elemento/builder-api#classes-and-interfaces) to manipulate the component element.
In addition, components implement these interfaces to provide a common API:
- [`Modifiers.*`](https://patternfly-java.github.io/apidocs/org/patternfly/style/Modifiers.html)
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`](https://patternfly-java.github.io/apidocs/org/patternfly/style/Modifiers.Plain.html) interface. Other components that also provide a `plain` flag implement the `Modifiers.Plain` interface as well.
- [`Closable`](https://patternfly-java.github.io/apidocs/org/patternfly/component/Closeable.html)
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`](https://patternfly-java.github.io/apidocs/org/patternfly/core/ComponentContext.html), [`HasIdentifier`](https://patternfly-java.github.io/apidocs/org/patternfly/component/HasIdentifier.html), and [`HasItems`](https://patternfly-java.github.io/apidocs/org/patternfly/component/HasItems.html)
These interfaces are often implemented by components that have a parent-child relationship, like [`DataList`](https://patternfly-java.github.io/apidocs/org/patternfly/component/list/DataList.html) and [`DataLiistItem`](https://patternfly-java.github.io/apidocs/org/patternfly/component/list/DataListItem.html). [`HasItems`](https://patternfly-java.github.io/apidocs/org/patternfly/component/HasItems.html) is implemented by the parent component and provides methods to add and remove child items. [`ComponentContext`](https://patternfly-java.github.io/apidocs/org/patternfly/core/ComponentContext.html) and [`HasIdentifier`](https://patternfly-java.github.io/apidocs/org/patternfly/component/HasIdentifier.html) 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`](https://patternfly-java.github.io/apidocs/org/patternfly/component/ComponentIcon.html) and [`ComponentIconAndText`](https://patternfly-java.github.io/apidocs/org/patternfly/component/ComponentIconAndText.html)
These interfaces are implemented by components that provide text resp. an icon and a text.
- [`ComponentProgress`](https://patternfly-java.github.io/apidocs/org/patternfly/component/ComponentProgress.html)
Implemented by components that provide some kind of progress.
- [`Expandable`](https://patternfly-java.github.io/apidocs/org/patternfly/component/Expandable.html)
Implemented by components that provide some kind of expandable content.
- [`HasValue`](https://patternfly-java.github.io/apidocs/org/patternfly/component/HasValue.html) and [`HasObservableValue`](https://patternfly-java.github.io/apidocs/org/patternfly/component/HasObservableValue.html)
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](https://patternfly-java.github.io/).
# Icons
PatternFly Java comes with predefined icons for
- FontAwesome brand ([fab](https://fontawesome.com/search?o=r&m=free&f=brands))
- FontAwesome regular ([far](https://fontawesome.com/search?o=r&m=free&s=regular))
- FontAwesome solid ([fas](https://fontawesome.com/search?o=r&m=free&s=solid)) and
- PatternFly icons ([patternfly](https://www.patternfly.org/design-foundations/icons/#patternfly-icons))
There are static factory methods in [`IconsSets`](https://patternfly-java.github.io/apidocs/org/patternfly/icon/IconSets.html) to easily use these icons. The icons are returned as instances of the [`PredefinedIcon`](https://patternfly-java.github.io/apidocs/org/patternfly/icon/PredefinedIcon.html) 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`](https://patternfly-java.github.io/apidocs/org/patternfly/component/WithIcon.html) or [`WithIconAndText`](https://patternfly-java.github.io/apidocs/org/patternfly/component/WithIconAndText.html) and thus use a common API.
```java
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](https://www.patternfly.org/design-foundations/icons#all-icons) to get an overview of the available icons.
# Tokens
PatternFly Java comes with predefined enum constants for all PatternFly design [tokens](https://www.patternfly.org/tokens/about-tokens). They are defined in the enum class [`org.patternfly.token.Token`](https://patternfly-java.github.io/apidocs/org/patternfly/token/Token.html):
```java
public enum Token {
// enum constants omitted
;
/** The CSS custom property name starting with --pf-t */
public final String name;
/** The default value for the custom property. */
public final String value;
/** The property name wrapped in var(). */
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:
```java
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](https://github.com/patternfly-java/patternfly-java/issues/125)
- [charts](https://github.com/patternfly-java/patternfly-java/issues/127)
- [extensions](https://github.com/patternfly-java/patternfly-java/issues/126)
- [layouts](https://github.com/patternfly-java/patternfly-java/issues/128)
# 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](https://app.gitter.im/#/room/#pf4-java_core:gitter.im), enter the [discussions](https://github.com/orgs/patternfly-java/discussions) or use the GitHub [issues](https://github.com/patternfly-java/patternfly-java/issues) to report bugs or request new features.
Of course, you're welcome to [contribute](CONTRIBUTING.md) to PatternFly Java. If you like what you're seeing, leave us a star!