Skip to main content
Redhat Developers  Logo
  • Products

    Featured

    • Red Hat Enterprise Linux
      Red Hat Enterprise Linux Icon
    • Red Hat OpenShift AI
      Red Hat OpenShift AI
    • Red Hat Enterprise Linux AI
      Linux icon inside of a brain
    • Image mode for Red Hat Enterprise Linux
      RHEL image mode
    • Red Hat OpenShift
      Openshift icon
    • Red Hat Ansible Automation Platform
      Ansible icon
    • Red Hat Developer Hub
      Developer Hub
    • View All Red Hat Products
    • Linux

      • Red Hat Enterprise Linux
      • Image mode for Red Hat Enterprise Linux
      • Red Hat Universal Base Images (UBI)
    • Java runtimes & frameworks

      • JBoss Enterprise Application Platform
      • Red Hat build of OpenJDK
    • Kubernetes

      • Red Hat OpenShift
      • Microsoft Azure Red Hat OpenShift
      • Red Hat OpenShift Virtualization
      • Red Hat OpenShift Lightspeed
    • Integration & App Connectivity

      • Red Hat Build of Apache Camel
      • Red Hat Service Interconnect
      • Red Hat Connectivity Link
    • AI/ML

      • Red Hat OpenShift AI
      • Red Hat Enterprise Linux AI
    • Automation

      • Red Hat Ansible Automation Platform
      • Red Hat Ansible Lightspeed
    • Developer tools

      • Red Hat Trusted Software Supply Chain
      • Podman Desktop
      • Red Hat OpenShift Dev Spaces
    • Developer Sandbox

      Developer Sandbox
      Try Red Hat products and technologies without setup or configuration fees for 30 days with this shared Openshift and Kubernetes cluster.
    • Try at no cost
  • Technologies

    Featured

    • AI/ML
      AI/ML Icon
    • Linux
      Linux Icon
    • Kubernetes
      Cloud icon
    • Automation
      Automation Icon showing arrows moving in a circle around a gear
    • View All Technologies
    • Programming Languages & Frameworks

      • Java
      • Python
      • JavaScript
    • System Design & Architecture

      • Red Hat architecture and design patterns
      • Microservices
      • Event-Driven Architecture
      • Databases
    • Developer Productivity

      • Developer productivity
      • Developer Tools
      • GitOps
    • Secure Development & Architectures

      • Security
      • Secure coding
    • Platform Engineering

      • DevOps
      • DevSecOps
      • Ansible automation for applications and services
    • Automated Data Processing

      • AI/ML
      • Data Science
      • Apache Kafka on Kubernetes
      • View All Technologies
    • Start exploring in the Developer Sandbox for free

      sandbox graphic
      Try Red Hat's products and technologies without setup or configuration.
    • Try at no cost
  • Learn

    Featured

    • Kubernetes & Cloud Native
      Openshift icon
    • Linux
      Rhel icon
    • Automation
      Ansible cloud icon
    • Java
      Java icon
    • AI/ML
      AI/ML Icon
    • View All Learning Resources

    E-Books

    • GitOps Cookbook
    • Podman in Action
    • Kubernetes Operators
    • The Path to GitOps
    • View All E-books

    Cheat Sheets

    • Linux Commands
    • Bash Commands
    • Git
    • systemd Commands
    • View All Cheat Sheets

    Documentation

    • API Catalog
    • Product Documentation
    • Legacy Documentation
    • Red Hat Learning

      Learning image
      Boost your technical skills to expert-level with the help of interactive lessons offered by various Red Hat Learning programs.
    • Explore Red Hat Learning
  • Developer Sandbox

    Developer Sandbox

    • Access Red Hat’s products and technologies without setup or configuration, and start developing quicker than ever before with our new, no-cost sandbox environments.
    • Explore Developer Sandbox

    Featured Developer Sandbox activities

    • Get started with your Developer Sandbox
    • OpenShift virtualization and application modernization using the Developer Sandbox
    • Explore all Developer Sandbox activities

    Ready to start developing apps?

    • Try at no cost
  • Blog
  • Events
  • Videos

Building JBoss Projects with PatternFly and AngularJS

April 22, 2016
James Falkner
Related topics:
Java
Related products:
Developer Tools

Share:

    Recently I've been looking into different UI tech in use for apps built onPatternFly Logo top of Red Hat middleware, and I've discovered that many of Red Hat's products use PatternFly (in differing capacities) for their administrative UIs. PatternFly is "A community of designers and developers collaborating to build a UI framework for enterprise web applications." (from the website). There are also components, directives, etc, for AngularJS projects (which I really like).

    This sounds awesome, particularly because I'm a terrible designer, so I thought I'd take a crack at converting an existing demo to use PatternFly, and along the way learn more about the framework and its best practices. These are concepts you can use in your own projects when building JS-heavy projects using Maven (which has about a billion ways to do things).

    You can find the demo on jbossdemocentral, along with instructions for building it. In this article, I will describe some of the highlights of what I learned.

    Existing Demo

    The demo I chose to start working with is the JBoss BRMS Cool Store demo, which is well maintained and updated, and uses JBoss BRMS to showcase the ability to change business rules on the fly. It does this in the context of a retail store demo.

    It has a Vaadin-based frontend, but for this demo I wanted to focus on the Angular/PatternFly bit, so while it's possible to integrate Vaadin and AngularJS, I chose to go pure AngularJS to avoid overloading the demo (I also know and like Vaadin already, so not a ton of learning potential for me there!).

    JavaScript dependencies

    The JavaScript for the app is in src/main/javascript (as suggested by Maven), and I've added some declarations in the POM to do the JS minification. Maven is also configured to place the resulting JS files where I need them to be within the final output .war file. The essentially static JavaScript libraries (including PatternFly) are pulled in via Bower, and are placed in src/main/webapp/vendor, and are excluded from the minification process via this declaration:

    PatternFly

    Because this is a shopping cart demo, not everything in PatternFly is needed (which also saves having to drag in every singlePatternFly dependency into the app!)

    The minimal set of dependencies are jQuery, Bootstrap, and AngularJS itself. I also added in one more dependency - Isotope - for doing fancy responsive layouts above and beyond what Bootstrap provides.

    PatternFly provides a nice basic layout that gives us a header and navigation, while the shopping cart itself uses PatternFly Cards. This feels pretty simple, and there's not much code either - I think the result looks rather nice.

    If you do too, then the expected result is confirmed: PatternFly solves most of your UX problems so you (as a developer) can concentrate on the rest of the app!

    Security & Account Management

    I also wanted to add the ability to have your own login, shopping cart and profile, and so this demo also uses Keycloak, a JBoss open source project (which is in the process of being productized by Red Hat, woo!) More on this in my next post.

    Future improvements

    • I used Patternfly CSS "off the shelf", instead of integrating with a CSS preprocessor like less. Again, for demo purposes. Using less would get your additional possibilities like mixins and easily change CSS values globally (colors, sizes, etc).
    • Right now, the entire app and REST interfaces are protected via Keycloak. In a real shopping cart, you would likely not want to protect the anonymous browsing of the store.
    • OpenShift anyone? Red Hat recently announced a $0 developer program, with the Red Hat CDK and Red Hat products, and the BRMS demo from which this Patternfly demo derives is already available there.
    Last updated: January 22, 2024

    Recent Posts

    • GuideLLM: Evaluate LLM deployments for real-world inference

    • Unleashing multimodal magic with RamaLama

    • Integrate Red Hat AI Inference Server & LangChain in agentic workflows

    • Streamline multi-cloud operations with Ansible and ServiceNow

    • Automate dynamic application security testing with RapiDAST

    Red Hat Developers logo LinkedIn YouTube Twitter Facebook

    Products

    • Red Hat Enterprise Linux
    • Red Hat OpenShift
    • Red Hat Ansible Automation Platform

    Build

    • Developer Sandbox
    • Developer Tools
    • Interactive Tutorials
    • API Catalog

    Quicklinks

    • Learning Resources
    • E-books
    • Cheat Sheets
    • Blog
    • Events
    • Newsletter

    Communicate

    • About us
    • Contact sales
    • Find a partner
    • Report a website issue
    • Site Status Dashboard
    • Report a security problem

    RED HAT DEVELOPER

    Build here. Go anywhere.

    We serve the builders. The problem solvers who create careers with code.

    Join us if you’re a developer, software engineer, web designer, front-end designer, UX designer, computer scientist, architect, tester, product manager, project manager or team lead.

    Sign me up

    Red Hat legal and privacy links

    • About Red Hat
    • Jobs
    • Events
    • Locations
    • Contact Red Hat
    • Red Hat Blog
    • Inclusion at Red Hat
    • Cool Stuff Store
    • Red Hat Summit

    Red Hat legal and privacy links

    • Privacy statement
    • Terms of use
    • All policies and guidelines
    • Digital accessibility

    Report a website issue