Skip to main content

What's new in version 24.10?

· 6 min read
webforJ Team

cover image

webforJ version 24.10 is live and available for development. Learn more about what main features and fixes are included in this release.

As always, see the GitHub release overview for a more comprehensive list of changes.

New features and enhancements 🎉​

The following new components, features, and enhancements to various existing behavior have been introduced in this release:

TextArea and masked input component​

24.10 brings the addition of several new components to the webforJ library. This release introduces various masked fields and decorators that utilize masked input, allowing for specific input patterns. The following components have been made available for development:

  • MaskedDateField & MaskedDateFieldSpinner​

    These components allow users to input dates with a predefined format, with the spinner variant providing an intuitive way for users to increment or decrement date values.

  • MaskedNumberField & MaskedNumberFieldSpinner​

    Designed for numerical input, these fields ensure that users can only enter valid numbers. The spinner variant adds convenience by allowing users to adjust the value using increment/decrement controls.

  • MaskedTimeField & MaskedTimeFieldSpinner​

    These components handle time inputs, enforcing a standard time format. The spinner variant provides controls for easily adjusting time values.

  • MaskedTextField & MaskedTextFieldSpinner​

  • TextArea​

    A versatile, multi-line text input component ideal for larger text entries, such as comments or descriptions.

BusyIndicator, Loading and Spinner components​

The Spinner and BusyIndicator components have both been added in this release to the core webforJ components. The Spinner provides a simple, elegant way to display a loading animation, and can be used independently or as part of the BusyIndicator or Loading components.

Building on the Spinner, the BusyIndicator is an app-level loading overlay that indicates when the app is busy or processing data. It blocks user interaction until the process is complete. This component displays both a Spinner and a textual description while the process is occurring.

Show Code

The Loading component uses the same client component, but allows the addition of children and can be attached to any parent component, making it scoped to its parent.

Terminal emulator​

The webforJ Terminal component represents an exciting opportunity to emulate a terminal in a webforJ app. Based on xterm.js, this tool allows for interactions with a terminal while running within a webforJ app, blending command line features with modern web app capabilities.

Column layout​

The ColumnsLayout component has come to webforJ in 24.10, and is designed to offer a flexible and responsive layout solution in addition to the FlexLayout component. The ColumnsLayout easily facilitates two-dimensional layouts by providing columns rather than just rows. It dynamically adjusts the number of columns based on the width of the layout and utilizes breakpoints to determine how many columns should be displayed at different viewport widths to help with responsiveness.

Show Code

In addition to dynamic column adjustments, ColumnsLayout supports customizable alignment and spacing options. The ColumnsLayout component is designed to be intuitive and easy to use. It includes built-in methods for setting column spans and positions, making it simple to create complex layouts with minimal effort.

Next time you build a form, give this new component a try in your app!

Slider overhaul​

The Slider component has received on overhaul in this release. The appearance and use case for the component remains the same, ensuring that your applications have the same look and feel as they did prior to the updated API overhaul.

However, with this rework, a few of the methods have changed to better reflect modern standards. If you are using this component in your app, review the following methods to ensure you're using the updated API. An example of the various methods can be seen in the code demo below:

Show Code

Toast component​

Another powerful component introduced in 24.10 is the Toast component, which offers a subtle notification system commonly used in modern applications to inform users about the completion of an operation, system messages, or other important updates.

Developers can set the display duration, choose from various themes, and configure the position of the toast on the screen. The component supports multiple placements, and also allows for setting custom text and HTML content, giving developers the ability to style the messages as needed.

Show Code

Debugging tooling​

Logging to the console has gotten much more powerful in 24.10. A dedicated utility class can now be accessed statically through the App class to log styled messages to the browser console.

// Types
console().log("Log message");
console().info("Info message");
console().warn("Warn message");
console().error("Error message");
console().debug("Debug message");

A variety of builder-patterned methods are available for more fine-grained control over the appearance of messages in the console. These include font weight, style, size, text color, background color, and other configurations.

// A variety of options for custom logging display
console().weight().bolder().size().from("30px").color().red().style().italic().transform()
    .uppercase().background().cyan().warn("Mixing Styles");

Breaking changes 🛠​

When updating an existing project using an older version of webforJ, keep an eye out for the following breaking changes:

Console logging​

Using the browser's console to get valuable program information printed is an integral part of the development process. Previously, the App.consoleLog() and App.consoleError() methods enabled this behavior. In 24.10, these methods have been marked for deprecation. Going forward, use BrowserConsole, which comes with a slough of new features to enhance logging capabilities. The new equivalent method to print to the console is App.console().log().

HTML container​

The HtmlContainer component is marked for deprecation in 24.10. Going forward, use Element instead for custom content or use the Iframe component for embedding pages.

Rendering HTML in components​

Setting HTML text that's not specifically wrapped with <html> tags using the setText method is no longer possible. To set HTML, make sure to wrap your code with these tags to properly render the desired code.

// Valid
Button home = new Button("""
  <html>
    <dwc-icon name='home'></dwc-icon>
  </html>
""");
// Not Valid
Button home = new Button("""
    <dwc-icon name='home'></dwc-icon>
""");