Overview

This tutorial is designed to guide you step by step through the process of creating the app. This app, designed to manage customer information, demonstrates how to use webforJ to build a functional and user-friendly interface with features for viewing, adding, and editing customer data. Each section will build upon the last, but feel free to skip ahead as needed.

Each step in the tutorial will result in a program that compiles into a WAR file, which can be deployed to any Java web app server. For this tutorial, the Maven Jetty plugin will be used to deploy the app locally. This lightweight setup ensures the app can quickly run, and that changes will be seen in real time during development.

Tutorial app features

• Working with data in a table.
• Using the ObjectTable and asset management.
• Routing and navigation
• Data Bindings and validation

Prerequisites

To get the most out of this tutorial, it’s assumed that you have a basic understanding of Java programming and are familiar with tools like Maven. If you’re new to webforJ, don’t worry - the framework’s fundamentals will be covered along the way.

The following tools/resources should be present on your development machine

• Java 17 or higher
• Maven
• A Java IDE
• A web browser
• Git (recommended but not required)

webforJ Prerequisites

See this article for a more detailed overview of the required tools.

Sections

The tutorial is broken into the following sections. Proceed sequentially for a comprehensive walkthrough, or skip ahead for specific information.

Project setup

For those looking to skip ahead to specific topics, it's recommended to first read the Project Setup section before moving ahead.

📄️ Project Setup

In this tutorial, the app will be structured into four steps, each introducing new features as the project progresses. By following along, you’ll gain a clear understanding of how the app evolves and how each feature is implemented.

📄️ Creating a Basic App

This first step lays the foundation for the customer management app by creating a simple, interactive interface. This demonstrates how to set up a basic webforJ app, with a single button that opens a dialog when clicked. It’s a straightforward implementation that introduces key components and gives you a feel for how webforJ works.

📄️ Working With Data

This step focuses on adding data management and display capabilities to the demo app. To do this, dummy data about various Customer objects will be created, and the app will be updated to handle this data and display it in a Table added to the previous app.

📄️ Scaling with Routing and Composites

This step focuses on implementing routing to enhance the scalability and organization of the app structure. To achieve this, the app will be updated to handle multiple views, allowing navigation between different functionalities such as editing and creating customer entries. It will outline creating views for these functionalities, using components like Composite to build modular and reusable layouts.

📄️ Validating and Binding Data

Data binding is a mechanism that connects the UI components of your app directly with the underlying data model, enabling automatic synchronization of values between the two. This eliminates the need for repetitive getter and setter calls, reducing development time and improving code reliability.