diff --git a/docs/blog/2024-04-08-webforj-v24.00/24.00.md b/docs/blog/2024-04-08-webforj-v24.00/24.00.md
index 0c065c824..eae5a92d4 100644
--- a/docs/blog/2024-04-08-webforj-v24.00/24.00.md
+++ b/docs/blog/2024-04-08-webforj-v24.00/24.00.md
@@ -28,11 +28,13 @@ See the [GitHub release overview](https://github.com/webforj/webforj/releases/ta
This release introduces a new [`Table`](/docs/components/table/overview) component, allowing developers access to a lightweight, fast and optimized way to display their data.
-
@@ -47,9 +49,9 @@ Using the `Table` in your app is simple, and follows a few easy steps outlined i
## Navigator component
-
@@ -66,10 +68,12 @@ The `Navigator` can be customized with various settings that configure the text,
## Splitter component
-
diff --git a/docs/blog/2024-04-26-webforj-v24.01/24.01.md b/docs/blog/2024-04-26-webforj-v24.01/24.01.md
index 40904dc9b..3cc7bfa2a 100644
--- a/docs/blog/2024-04-26-webforj-v24.01/24.01.md
+++ b/docs/blog/2024-04-26-webforj-v24.01/24.01.md
@@ -42,10 +42,10 @@ Functionality such as transformation and validation further enhance the binding
## Login component
-
The latest `Login` component in webforJ offers an intuitive and efficient interface for user authentication, enabling users to log in using their username and password. This component is highly customizable to enhance user experiences across various devices and locales.
diff --git a/docs/blog/2024-06-03-webforj-v24.02/24.02.md b/docs/blog/2024-06-03-webforj-v24.02/24.02.md
index 615c7634b..2621691b7 100644
--- a/docs/blog/2024-06-03-webforj-v24.02/24.02.md
+++ b/docs/blog/2024-06-03-webforj-v24.02/24.02.md
@@ -25,10 +25,10 @@ As always, see the [GitHub release overview](https://github.com/webforj/webforj/
## Option dialogs
-
With 24.02, webforJ introduces a robust option dialog feature that allows applications to interact with users and gather input effectively. These dialogs are modal, meaning they halt app execution until the user provides input, ensuring critical messages are addressed before proceeding. These function similarly to `JOptionPane` in Swing, addressing the need for blocking dialogs in web applications.
@@ -47,9 +47,9 @@ The various dialog options are provided to help clarify and specify the type of
The `ProgressBar` in 24.02 has gotten a powerful, comprehensive overhaul. This component provides a visual representation of task progress, making it easy for users to monitor the completion status of ongoing tasks. The progress bar fills up as the task progresses, displaying the percentage of completion both visually and textually.
-
diff --git a/docs/blog/2024-07-23-webforj-v24.10/24.10.md b/docs/blog/2024-07-23-webforj-v24.10/24.10.md
index adaf97a41..d92d31ab6 100644
--- a/docs/blog/2024-07-23-webforj-v24.10/24.10.md
+++ b/docs/blog/2024-07-23-webforj-v24.10/24.10.md
@@ -57,10 +57,10 @@ The `Spinner` and `BusyIndicator` components have both been added in this releas
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.
-
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.
@@ -77,10 +77,10 @@ The webforJ `Terminal` component represents an exciting opportunity to emulate a
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](/docs/components/flex-layout) 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.
-
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.
@@ -93,10 +93,10 @@ The `Slider` component has received on overhaul in this release. The appearance
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:
-
### Toast component
@@ -105,10 +105,10 @@ Another powerful component introduced in `24.10` is the `Toast` component, which
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.
-
### Debugging tooling
diff --git a/docs/blog/2025-05-19-webforj-v25.01/25.01.md b/docs/blog/2025-05-19-webforj-v25.01/25.01.md
index d4cc1d767..e38021312 100644
--- a/docs/blog/2025-05-19-webforj-v25.01/25.01.md
+++ b/docs/blog/2025-05-19-webforj-v25.01/25.01.md
@@ -38,10 +38,10 @@ For more information on the `Tree` component, how to use it in an app, and the v
Below is an example of a `Tree` component:
-
## Introducing startforJ
diff --git a/docs/blog/2025-08-21-buildingbettercss/index.md b/docs/blog/2025-08-21-buildingbettercss/index.md
index 704cbc78c..b26af639e 100644
--- a/docs/blog/2025-08-21-buildingbettercss/index.md
+++ b/docs/blog/2025-08-21-buildingbettercss/index.md
@@ -165,10 +165,13 @@ The `::part()` pseudo-element is like having a key to specific rooms in an other
Here's a dashboard I put together that uses most of the stuff I've mentioned - CSS Grid, DWC tokens, and component-specific styling:
-
This dashboard shows how all the pieces work together in practice. The responsive layout uses CSS Grid with custom media queries for mobile optimization. All the colors and spacing come from DWC tokens, so changing the primary color at the root level updates the entire interface. The combination of external CSS and inline component styles keeps everything maintainable, which is great because I definitely needed to go back and fix things multiple times.
diff --git a/docs/blog/2025-09-09-webforj-v25.03/25.03.md b/docs/blog/2025-09-09-webforj-v25.03/25.03.md
index ed75c6308..a8e154797 100644
--- a/docs/blog/2025-09-09-webforj-v25.03/25.03.md
+++ b/docs/blog/2025-09-09-webforj-v25.03/25.03.md
@@ -75,11 +75,13 @@ The new column management APIs offer both interactive and programmatic control.
These features are particularly valuable in data-heavy applications like financial dashboards and reporting tools, where different users need to arrange columns to match their workflow patterns.
-
diff --git a/docs/blog/2026-01-27-webforj-v25.11/25.11.md b/docs/blog/2026-01-27-webforj-v25.11/25.11.md
index 7de5c4d18..b830e45ff 100644
--- a/docs/blog/2026-01-27-webforj-v25.11/25.11.md
+++ b/docs/blog/2026-01-27-webforj-v25.11/25.11.md
@@ -24,10 +24,12 @@ Starting with one of the most exciting changes, webforJ now provides a first-cla
The programmatic API handles any DOM update. All a developer needs to do is use `Page.getCurrent().startViewTransition()`, which returns a builder for configuring the transition:
Elements with matching transition names animate between states, with the browser handling the animation automatically.
@@ -84,10 +86,12 @@ Each `append()` call adds content to the stream, and auto-scroll keeps the lates
User avatars appear everywhere—in profiles, comments, team lists, and more. This is a common component that's present in nearly all modern web apps where users log in. The new **Avatar** component makes adding them simple.
Passing a name to the `Avatar` generates initials automatically. To use photos, simply add an image as a child element. The `Avatar` comes with seven themes, two shapes, and multiple sizes to cover common cases.
diff --git a/docs/blog/2026-03-17-webforj-v25.12/25.12.md b/docs/blog/2026-03-17-webforj-v25.12/25.12.md
index a28c672ce..d42f98075 100644
--- a/docs/blog/2026-03-17-webforj-v25.12/25.12.md
+++ b/docs/blog/2026-03-17-webforj-v25.12/25.12.md
@@ -25,10 +25,12 @@ Tables with lots of columns can get hard to read fast. Column groups solve this
@@ -56,10 +58,12 @@ No more writing custom lodash templates for common patterns. `25.12` ships a com
@@ -176,7 +180,7 @@ First up, the [`Accordion`](/docs/components/accordion): a vertically stacked se
@@ -214,8 +218,8 @@ Badges integrate naturally with other components. Attach one to a `Button` with
diff --git a/docs/blog/2026-04-28-webforj-v26.00/26.00.md b/docs/blog/2026-04-28-webforj-v26.00/26.00.md
index f83157cda..7404b21ab 100644
--- a/docs/blog/2026-04-28-webforj-v26.00/26.00.md
+++ b/docs/blog/2026-04-28-webforj-v26.00/26.00.md
@@ -59,8 +59,8 @@ See the [webforJ AI plugin](/docs/integrations/ai-tooling) documentation for per
By default, a `Dialog` stretches to fill the available horizontal space, perfect for larger forms, overkill for a compact "Are you sure?" prompt. The new `setAutoWidth(true)` method flips that behavior, sizing the dialog to its content so small prompts stay small.
@@ -80,8 +80,8 @@ See the [Dialog auto width](/docs/components/dialog#auto-width) documentation fo
The `TabbedPane` picks up a new rendering mode in `26.00`. Flip `setSegment(true)` and the tabs snap into a compact segment control with a sliding pill indicator, a natural fit for toggling between a few related views or filter options.
diff --git a/docs/docs/advanced/debouncing.md b/docs/docs/advanced/debouncing.md
index cbad23bee..7c858fd16 100644
--- a/docs/docs/advanced/debouncing.md
+++ b/docs/docs/advanced/debouncing.md
@@ -10,8 +10,8 @@ slug: debouncing
Debouncing is a technique that delays executing an action until a specified time has elapsed since the last call. Each new call resets the timer. This is useful for scenarios like search-as-you-type, where you want to wait until the user stops typing before executing a search query.
diff --git a/docs/docs/advanced/view-transitions.md b/docs/docs/advanced/view-transitions.md
index 9a220d60b..dfff76185 100644
--- a/docs/docs/advanced/view-transitions.md
+++ b/docs/docs/advanced/view-transitions.md
@@ -13,10 +13,12 @@ title: View Transitions
View transitions provide animated transitions when the [DOM](/docs/glossary#dom) changes, reducing visual jarring and maintaining spatial context during navigation or content updates. webforJ integrates with the browser's [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) to handle the complexity of coordinating animations between old and new states.
@@ -97,14 +99,14 @@ When working with lists or repeated components, include a unique identifier in t
:::
### List reordering {#list-reordering}
@@ -125,13 +127,13 @@ Page.getCurrent().startViewTransition()
```
## Custom CSS animations {#custom-css-animations}
@@ -185,10 +187,12 @@ Page.getCurrent().startViewTransition()
```
## CSS customization {#css-customization}
diff --git a/docs/docs/architecture/controls-components.md b/docs/docs/architecture/controls-components.md
index b6f130436..24f25eef9 100644
--- a/docs/docs/architecture/controls-components.md
+++ b/docs/docs/architecture/controls-components.md
@@ -6,17 +6,17 @@ title: BBj Controls and webforJ Components
The webforJ framework is designed to provide a Java API around the BBj language's DWC, offers a robust architecture for building and managing components.
-## Mapping BBj controls to webforJ components {#mapping-bbj-controls-to-webforj-components}
+## Mapping BBj controls to webforJ components {#mapping-bbj-controls-to-webforj-components}
One of the fundamental principles of webforJ is the binding of BBj controls with webforJ components. In this architecture, every webforJ component shipped with the product has a one-to-one mapping with an underlying BBj control. This mapping ensures that Java components mirror the behavior and properties of their BBj counterparts seamlessly.
This close correspondence between webforJ components and BBj controls simplifies development and allows Java developers to work with familiar concepts when building web-based applications without the need to write any BBj code.
-## The `DwcComponent` base class {#the-dwccomponent-base-class}
+## The `DwcComponent` base class {#the-dwccomponent-base-class}
At the heart of webforJ's component architecture lies the DWCComponent base class. All webforJ components inherit from this class. This inheritance grants each webforJ component access to its underlying BBj control, providing a direct link between the Java component and the BBj control it represents.
However, it's important to note that developers are restricted from extending the DWCComponent class further. Attempting to do so will result in a runtime exception that disallows such extensions. This restriction is in place to maintain the integrity of the underlying BBj control and ensure that developers do not inadvertently manipulate it in ways that could lead to unintended consequences.
-### Final classes and extension restrictions {#final-classes-and-extension-restrictions}
+### Final classes and extension restrictions {#final-classes-and-extension-restrictions}
In webforJ, most component classes, with the exception of the built-in HTML Elements and any classes extending these, are declared as `final`. This means that they are not available for extension or subclassing. This design choice is deliberate and serves multiple purposes:
1. **Control Over Underlying BBj Control**: As mentioned earlier, extending webforJ component classes would grant developers control over the underlying BBj control. To maintain the consistency and predictability of component behavior, this level of control is restricted.
@@ -28,11 +28,11 @@ In webforJ, most component classes, with the exception of the built-in HTML Elem
-## Composite components: extending through composition {#composite-components-extending-through-composition}
+## Composite components: extending through composition {#composite-components-extending-through-composition}
In webforJ framework, the concept of composite components plays a pivotal role in extending component functionality. Composite components are Java classes that are not restricted by the final keyword, allowing developers to create new components that extends the behavior of a single component, or combines multiple components into one, by composing existing components. Classes which facilitate this behavior have been created for developer use. See the `Composite` and `ElementComposite` sections to see how to properly create composite components.
This approach encourages a more modular and flexible development style, enabling developers to build tailored components that meet specific requirements.
\ No newline at end of file
diff --git a/docs/docs/building-ui/composite-components.md b/docs/docs/building-ui/composite-components.md
index 144e9c406..6f08ac499 100644
--- a/docs/docs/building-ui/composite-components.md
+++ b/docs/docs/building-ui/composite-components.md
@@ -155,10 +155,12 @@ public class InteractiveMap extends Composite
{
The following example demonstrates a Todo app where each item is a `Composite` component consisting of a [`RadioButton`](../components/radiobutton) styled as a switch and a Div with text:
-
@@ -167,8 +169,10 @@ height='500px'
Sometimes you may want to use a `Composite` to group related components together into a single unit, even when reusability isn't the main concern:
diff --git a/docs/docs/building-ui/element-composite.md b/docs/docs/building-ui/element-composite.md
index df8e81d9a..ffd470c27 100644
--- a/docs/docs/building-ui/element-composite.md
+++ b/docs/docs/building-ui/element-composite.md
@@ -17,9 +17,9 @@ It's possible to do everything with the `Element` class itself, without using th
The examples on this page demonstrate how to implement the [Shoelace QR code web component](https://shoelace.style/components/qr-code) using the `ElementComposite` class.
-
@@ -60,9 +60,9 @@ String title = get(TITLE, false, String);
In the demo below, properties have been added for the QR code based on the documentation for the web component. Methods have then been implemented which allow users to get and set the various properties that have been implemented.
-
@@ -101,9 +101,9 @@ For specialized event handling, create custom event classes with configured payl
In the example below, a click event has been created and then added to the QR code component. This event, when fired, will display the "X" coordinate of the mouse at the time of clicking the component, which is provided to the Java event as data. A method is then implemented to allow the user to access this data, which is how it's displayed in the app.
-
diff --git a/docs/docs/building-ui/elements.md b/docs/docs/building-ui/elements.md
index 52464a6c3..0e1032e37 100644
--- a/docs/docs/building-ui/elements.md
+++ b/docs/docs/building-ui/elements.md
@@ -12,10 +12,12 @@ webforJ developers have the option of choosing not only from the rich library of
The `Element` component cannot be extended, and is not the base component for all components within webforJ. To read more about webforJ's component hierarchy, read [this article](../architecture/controls-components.md).
:::
-
## Adding events {#adding-events}
@@ -24,10 +26,12 @@ In order to utilize events that may come with your element, you can use the `Ele
There are also additional options to further customize events by using the Event Options configurations.
-
@@ -47,10 +51,12 @@ The `Element` component supports the composition of child components. Developers
3. **`setText(String text)`**: This method behaves similarly to the `setHtml()` method, but injects literal text into the `Element`.
-
@@ -97,10 +103,12 @@ Both synchronous and asynchronous function calling will wait until the `Element`
In the demo below, an event is added to an HTML `Button`. This event is then fired programmatically by calling the `callJsFunctionAsync()` method. The resulting PendingResult is then used to create another message box once the asynchronous function has been completed.
-
diff --git a/docs/docs/building-ui/events.md b/docs/docs/building-ui/events.md
index b6628c3ef..57788c986 100644
--- a/docs/docs/building-ui/events.md
+++ b/docs/docs/building-ui/events.md
@@ -96,8 +96,8 @@ This approach minimizes the need to query the component for information, as the
Below is a demonstration showing the addition of a ButtonClickEvent to a [`Button`](#). This [`Button`](#) also uses information coming with the event's payload to display information on the screen.
-
\ No newline at end of file
diff --git a/docs/docs/building-ui/using-components.md b/docs/docs/building-ui/using-components.md
index 34c42c9f2..d71878ee2 100644
--- a/docs/docs/building-ui/using-components.md
+++ b/docs/docs/building-ui/using-components.md
@@ -121,10 +121,12 @@ nameField.addValueChangeListener(e -> submitButton.setEnabled(!e.getValue().isBl
The following login form demonstrates `setEnabled()` in practice. The sign-in button stays disabled until both fields have content, making it clear to the user that input is required before proceeding:
-
@@ -158,10 +160,12 @@ A common use of `setVisible()` in containers is revealing additional UI only whe
The following settings panel demonstrates this: basic notification preferences are always visible, and a section of advanced options only appears when the user asks for it. The save button activates as soon as any setting is changed:
-
@@ -189,10 +193,12 @@ This is preferable to showing validation errors only after the user clicks submi
In this contact form, the name field must not be empty, the email must contain an `@` symbol, and the message must be at least 10 characters long:
-
diff --git a/docs/docs/components/accordion.md b/docs/docs/components/accordion.md
index 1cda9d663..18b2e8ad1 100644
--- a/docs/docs/components/accordion.md
+++ b/docs/docs/components/accordion.md
@@ -33,7 +33,7 @@ AccordionPanel panel = new AccordionPanel("Title", new Paragraph("Body content."
@@ -76,7 +76,7 @@ Accordion accordion = new Accordion(panel1, panel2, panel3);
@@ -102,7 +102,7 @@ accordion.closeAll();
@@ -128,7 +128,7 @@ accordion.setEnabled(false);
@@ -158,7 +158,7 @@ Content added via `addToHeader()` fully replaces the default label text. `setLab
@@ -178,7 +178,7 @@ panel.setIcon(null);
@@ -199,7 +199,7 @@ outer.add(innerAccordion);
diff --git a/docs/docs/components/alert.md b/docs/docs/components/alert.md
index d1eef2aed..0abb9ac74 100644
--- a/docs/docs/components/alert.md
+++ b/docs/docs/components/alert.md
@@ -18,10 +18,10 @@ Alerts help draw attention to key information without disrupting the user's work
An `Alert` can hold rich content like text, buttons, and other components. Set a theme to visually distinguish the type of message being displayed.
-
## Dismissing alerts {#dismissing-alerts}
@@ -34,10 +34,10 @@ closableAlert.setClosable(true);
```
Alerts often do more than display messages—they can trigger follow-up actions when dismissed. Use the `AlertCloseEvent` to handle these cases and respond when the user dismisses the `Alert`.
-
:::tip Reusable Alert Component
@@ -51,10 +51,10 @@ Closing the alert only hides it—it doesn’t destroy the component, so you can
The `Alert` component supports multiple themes to visually distinguish different types of messages—such as success, error, warning, or info. These themes can be applied using the `setTheme()` method or directly in the constructor.
-
@@ -62,10 +62,10 @@ height = '650px'
The expanse defines the visual size of the `Alert` component. You can set it using the `setExpanse()` method or pass it directly to the constructor. The available options come from the Expanse enum: `XSMALL`, `SMALL`, `MEDIUM`, `LARGE`, and `XLARGE`.
-
diff --git a/docs/docs/components/app-layout.md b/docs/docs/components/app-layout.md
index 0c0116858..256101d4b 100644
--- a/docs/docs/components/app-layout.md
+++ b/docs/docs/components/app-layout.md
@@ -36,11 +36,16 @@ Each part of the layout is a `Div`, which can contain any valid webforJ control.
The following code sample will result in an app with a collapsible sidebar that contains a logo and tabs for various content options and a header. The demo uses the dwc-icon-button web component to create a drawer toggle button. The button has the data-drawer-toggle attribute which instructs the DwcAppLayout to listen to click events coming from that component to toggle the drawer state.
-
+
## Full width navbar {#full-width-navbar}
@@ -55,11 +60,16 @@ myApp.setFooterOffscreen(false);
```
-
+
## Multiple toolbars {#multiple-toolbars}
@@ -69,12 +79,17 @@ The navbar has no limit to the number of toolbars you can add. A `Toolbar` is a
The following demo shows how to use two toolbars, The first one houses the drawer's toggle button and the app's title. The second toolbar houses a secondary navigation menu.
-
+
## Sticky toolbars {#sticky-toolbars}
@@ -88,12 +103,17 @@ When `AppLayout.setHeaderReveal(true)` is set called, the header will be visible
With the help of the CSS custom property `--dwc-app-layout-header-collapse-height` it's possible to control how much of the header navbar will be hidden.
-
+
## Mobile navigation layout {#mobile-navigation-layout}
@@ -107,12 +127,17 @@ Same as `AppLayout.setHeaderReveal()`, `AppLayout.setFooterReveal()` is supporte
By default, when the screen width is 800px or less , the drawer will be switched to popover mode. This is called the breakpoint. The popover mode means that the drawer will pop over the content area with an overlay. It's possible to configure the breakpoint by using the `setDrawerBreakpoint()` method and the breakpoint must be a valid [media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries).
-
+
## Drawer utilities {#drawer-utilities}
@@ -160,12 +185,17 @@ layout.addToDrawerHeaderActions(
Drawer actions appear in the **right-aligned section** of the drawer’s header.
-
+
diff --git a/docs/docs/components/appnav.md b/docs/docs/components/appnav.md
index cb43845f2..e0fcdb91c 100644
--- a/docs/docs/components/appnav.md
+++ b/docs/docs/components/appnav.md
@@ -37,10 +37,13 @@ If you want the group header to trigger a custom action (such as opening externa
:::
-
diff --git a/docs/docs/components/avatar.md b/docs/docs/components/avatar.md
index 6b9bd690e..1397a1c02 100644
--- a/docs/docs/components/avatar.md
+++ b/docs/docs/components/avatar.md
@@ -30,11 +30,13 @@ Avatar avatar = new Avatar("John Doe", "J");
The example below showcases avatars in a team panel context. Each `Avatar` displays either a profile image or auto-generated initials based on the user's name. Clicking an `Avatar` opens a dialog with an enlarged view.
-
## Displaying images {#displaying-images}
@@ -97,8 +99,8 @@ avatar.onClick(event -> {
Avatars can be displayed as circles or squares. The default shape is `CIRCLE`, which is standard for user avatars. Use `SQUARE` for entities like teams, companies, or applications.
@@ -119,8 +121,8 @@ The following themes are available:
Each theme also has an outlined variant for a lighter visual treatment:
@@ -129,8 +131,8 @@ height='120px'
Control the avatar size using the `setExpanse()` method. The component supports nine size options ranging from `XXXSMALL` to `XXXLARGE`.
diff --git a/docs/docs/components/badge.md b/docs/docs/components/badge.md
index d660a050c..e164cf88a 100644
--- a/docs/docs/components/badge.md
+++ b/docs/docs/components/badge.md
@@ -55,8 +55,8 @@ Icon-only badges work especially well for compact status indicators in dense lay
@@ -79,8 +79,8 @@ Attach a `Badge` to a `Button` using `setBadge()`. The badge appears at the top-
@@ -91,8 +91,8 @@ Add a `Badge` as a suffix on a `Tab` using `setSuffixComponent()`. This is a nat
@@ -111,8 +111,8 @@ Apply a theme using `setTheme()` or through the constructor.
@@ -132,8 +132,8 @@ Use `setExpanse()` to control badge size. Nine sizes are available, ranging from
diff --git a/docs/docs/components/busyindicator.md b/docs/docs/components/busyindicator.md
index 427672898..8a25d43db 100644
--- a/docs/docs/components/busyindicator.md
+++ b/docs/docs/components/busyindicator.md
@@ -18,10 +18,10 @@ The `BusyIndicator` in webforJ displays as a simple spinner, making it easy to u
In this example, the `BusyIndicator` prevents any user actions across the entire interface until the operation completes.
-
## Backdrops {#backdrops}
@@ -45,10 +45,10 @@ The `BusyIndicator` component in webforJ includes a `Spinner` that visually indi
Here's an example of how you can customize the spinner within a `BusyIndicator` component:
-
## Use cases {#use-cases}
diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md
index 672f4c2d8..84e68bebd 100644
--- a/docs/docs/components/button.md
+++ b/docs/docs/components/button.md
@@ -39,9 +39,9 @@ The `Button` class is a versatile component that is commonly used in various sit
The following example demonstrates buttons used for form submission and clearing input:
-
@@ -60,10 +60,10 @@ By default, an `Icon` inherits the button's theme and expanse.
Below are examples of buttons with text to the left and right, as well as a button with only an icon:
-
### Names {#names}
@@ -74,9 +74,9 @@ The `Button` component utilizes naming, which is used for accessibility. When a
Button components, like many others, can be disabled to convey to a user that a certain action is not yet or is no longer available. A disabled button will decrease the opacity of the button, and is available for all button themes and expanses.
-
Disabling a button can be done at any time in the code by using the setEnabled(boolean enabled) function. For added convenience, a button can also be disabled when clicked using the built-in setDisabledOnClick(boolean enabled) function.
@@ -105,9 +105,9 @@ While there are many use cases for each of the various themes, some examples use
Shown below are example buttons with each of the supported Themes applied:
-
@@ -121,9 +121,9 @@ Different sizes are often appropriate for different uses:
Below are the various expanses supported for the `Button` component:
-
diff --git a/docs/docs/components/checkbox.md b/docs/docs/components/checkbox.md
index 536a99904..3d1e70b7a 100644
--- a/docs/docs/components/checkbox.md
+++ b/docs/docs/components/checkbox.md
@@ -37,10 +37,10 @@ Check boxes can utilize the Position enum. Show below are the two settings:
-
@@ -53,10 +53,10 @@ The `CheckBox` component supports indeterminism, which is a UI pattern commonly
- **Hierarchical data**: Indeterminism can be employed in scenarios where there is a hierarchical relationship between CheckBoxes. For example, when selecting categories and subcategories, indeterminism can represent that some subcategories are selected while others are not, and the parent component is in the indeterminate state.
-
## Styling {#styling}
@@ -66,10 +66,10 @@ height = '150px'
The following Expanses values allow for quick styling without using CSS.
Expanses are supported by use of the `Expanse` enum class. Below are the expanses supported for the checkbox component:
-
diff --git a/docs/docs/components/columns-layout.md b/docs/docs/components/columns-layout.md
index 48c1c67e8..0c72dbc95 100644
--- a/docs/docs/components/columns-layout.md
+++ b/docs/docs/components/columns-layout.md
@@ -16,10 +16,10 @@ The `ColumnsLayout` component arranges items into a responsive column-based layo
By default, a `ColumnsLayout` arranges items in two columns and takes the full width of its parent. The display can be further adjusted with breakpoints and alignment settings, covered in the sections below.
-
:::info Horizontal Layouts
@@ -71,10 +71,10 @@ layout.setBreakpoints(breakpoints);
The demonstration below shows an example of setting multiple breakpoints at construction, using breakpoints to configure the [`Span`](#column-span-and-spans-per-breakpoint) of a component, and demonstrates the resizing capabilities of the `ColumnsLayout` when the app is resized:
-
## Column `Span` and spans per `Breakpoint` {#column-span-and-spans-per-breakpoint}
@@ -151,10 +151,10 @@ columnsLayout.setColumn(email, "medium", 2);
In the following demonstration, notice that when the `"medium"` breakpoint is triggered, the `email` field spans both columns, and the `confirmPassword` field is placed into the first column, rather than its default placement in the second column:
-
:::tip Avoid collisions
@@ -178,10 +178,10 @@ Available `Alignment` options include:
- `BASELINE`: Aligns based on the text or content inside the column, aligning items to the text baseline rather than other alignment options.
- `AUTO`: Auto alignment.
-
In the demo above, the `Submit` button has been given `ColumnsLayout.Alignment.END` to ensure that it appears at the end, or in this case to the right, of its column.
@@ -212,10 +212,10 @@ You can use an integer to define the minimum width in pixels or use a `String` t
Building responsive and attractive layouts is possible using both the [`FlexLayout`](./flex-layout) component and the `ColumnsLayout` component, as well as a combination of the two. Below is a sample of the [form created in the FlexLayout](./flex-layout#example-form) article, but using a `ColumnLayout` scheme instead:
-
## Styling {#styling}
diff --git a/docs/docs/components/dialog.md b/docs/docs/components/dialog.md
index 08efc5a7d..986fe948a 100644
--- a/docs/docs/components/dialog.md
+++ b/docs/docs/components/dialog.md
@@ -17,10 +17,10 @@ The `Dialog` component displays a popup window that overlays the current view, d
The `Dialog` is organized into three sections: a header, a content area, and a footer. Components can be added to each section using `addToHeader()`, `addToContent()`, and `addToFooter()`.
-
## Usages {#usages}
@@ -44,10 +44,10 @@ height = '225px'
By enabling the backdrop attribute of the webforJ `Dialog` component, a backdrop will be displayed behind the `Dialog`. Additionally, when enabled, the Dialog's blurred attribute will blur the backdrop of the `Dialog`. Modifying these settings can help users by providing depths, visual hierarchy, and context, leading to more clear guidance for a user.
-
## Opening and closing the `Dialog` {#opening-and-closing-the-dialog}
@@ -59,20 +59,20 @@ After creating a new `Dialog` object, use the `open()` method to display the dia
Developers can choose which interactions close the `Dialog` with `setCancelOnEscKey()` and `setCancelOnOutsideClick()`. Additionally, the `setClosable()` method can prevent or allow both hitting the ESC key and clicking outside the `Dialog` to close the component.
-
## Auto-focus {#auto-focus}
When enabled, auto-focus will automatically give focus to the first element within the dialog that can be focused. This is useful in helping to direct the attention of users, and is customizable via the `setAutoFocus()` method.
-
## Draggable {#draggable}
@@ -82,30 +82,30 @@ The `Dialog` has built in functionality to be draggable, allowing the user to re
### Snap to edge {#snap-to-edge}
It is also possible to calibrate this behavior to snap to the edge of the screen, meaning the `Dialog` will automatically align itself with the edge of the display when released from its drag and drop date. Snapping can be changed via the `setSnapToEdge()` method. The `setSnapThreshold()` takes a number of pixels, which will set how far the `Dialog` should be from the sides of the screen before it will automatically snap to the edges.
-
## Positioning {#positioning}
The dialog's position can be manipulated using the built-in `setPosx()` and `setPosy()` methods. These methods take a string argument which can represent any applicable CSS unit of length, such as pixels or view height/width. A list of these measurements [can be found at this link](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages).
-
### Vertical alignment {#vertical-alignment}
In addition to manual assignment of a dialog's X and Y position, it is possible to use the dialog's built-in enum class to align the `Dialog`. There are three possible values, `TOP`, `CENTER` and `BOTTOM`, each of which can be used with the `setAlignment()` method.
-
### Full screen and breakpoints {#full-screen-and-breakpoints}
@@ -116,10 +116,10 @@ The `Dialog` can be set to enter full screen mode. When full screen is enabled,
By default, the `Dialog` stretches to fill the available horizontal space. When auto width is enabled via `setAutoWidth(true)`, the `Dialog` sizes itself based on its content width instead.
-
## Styling {#styling}
@@ -138,10 +138,10 @@ While there are many use cases for each of the various themes, some examples use
- **Gray**: Good for subtle actions, such as minor settings or actions that are more supplementary to a page, and not part of the main functionality.
- **Info**: The Info theme is a good choice to provide clarifying, additional information to a user when pushed.
-
\ No newline at end of file
diff --git a/docs/docs/components/drawer.md b/docs/docs/components/drawer.md
index d0e7a41e1..fff2f0c02 100644
--- a/docs/docs/components/drawer.md
+++ b/docs/docs/components/drawer.md
@@ -18,9 +18,13 @@ Drawers stack automatically when multiple are opened, making them a flexible cho
The example below shows this behavior within the [`AppLayout`](../components/app-layout) component. The navigation drawer triggered by the hamburger menu is built into [`AppLayout`](../components/app-layout), while the welcome popup at the bottom uses a standalone `Drawer` instance. Both coexist and stack independently, demonstrating how Drawers can be integrated within layout components or used as standalone elements.
-
## Autofocus
@@ -28,8 +32,8 @@ cssURL='/css/drawer/drawerWelcome.css'
The `Drawer` component supports autofocus, which automatically sets focus on the first focusable element when the `Drawer` opens. This improves usability by bringing attention directly to the first actionable element.
@@ -98,8 +102,8 @@ Available placement options:
@@ -133,9 +137,11 @@ The `Drawer` component exposes additional content without disrupting the current
Each contact displays an avatar, name, location, and action button for quick access to details or communication. This approach works well for building compact tools like contact pickers, settings panels, or notifications.
@@ -144,9 +150,11 @@ height='600px'
This example uses a `Drawer` as a task manager. You can add tasks, check them off, and clear completed ones. The `Drawer` footer includes form controls to interact with the task list, and the “Add Task” [`Button`](../components/button) disables itself if 50 tasks are reached.
diff --git a/docs/docs/components/fields/color-field.md b/docs/docs/components/fields/color-field.md
index c4592bb67..d83bf7ecf 100644
--- a/docs/docs/components/fields/color-field.md
+++ b/docs/docs/components/fields/color-field.md
@@ -20,10 +20,12 @@ The `ColorField` component lets users select a color through the browser's nativ
`ColorField` extends the shared `Field` class, which provides common features across all field components. The following example lets the user pick a color and displays its tetradic complements.
-
diff --git a/docs/docs/components/fields/date-field.md b/docs/docs/components/fields/date-field.md
index ae815461d..67285087c 100644
--- a/docs/docs/components/fields/date-field.md
+++ b/docs/docs/components/fields/date-field.md
@@ -20,9 +20,9 @@ The `DateField` component lets users input or select a date by year, month, and
`DateField` extends the shared `Field` class, which provides common features across all field components. The following example creates departure and return DateFields that stay in sync, with min and max constraints to limit the selectable range.
-
## Field value (`LocalDate`) {#field-value-localdate}
diff --git a/docs/docs/components/fields/date-time-field.md b/docs/docs/components/fields/date-time-field.md
index b8733b708..56808535f 100644
--- a/docs/docs/components/fields/date-time-field.md
+++ b/docs/docs/components/fields/date-time-field.md
@@ -20,9 +20,9 @@ The `DateTimeField` component lets users input both a date and a time in a singl
`DateTimeField` extends the shared `Field` class, which provides common features across all field components. The following example creates a labeled `DateTimeField` for selecting a departure date and time.
-
## Usages {#usages}
diff --git a/docs/docs/components/fields/masked/datefield.md b/docs/docs/components/fields/masked/datefield.md
index cf6005c58..bb7fe7243 100644
--- a/docs/docs/components/fields/masked/datefield.md
+++ b/docs/docs/components/fields/masked/datefield.md
@@ -20,7 +20,11 @@ The `MaskedDateField` is focused solely on **date** values. If you need a simila
The `MaskedDateField` can be instantiated with or without parameters. You can define an initial value, a label, a placeholder, and an event listener for value changes.
-
+
## Mask rules {#mask-rules}
@@ -187,10 +191,11 @@ dateField.restoreValue();
You can set the value to restore with `setRestoreValue()`, passing a [`LocalDate`](https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/time/LocalDate.html) instance.
-
+
## Validation patterns {#validation-patterns}
@@ -215,10 +220,11 @@ You should always validate the input value in your app logic, even if a regular
The `MaskedDateField` includes a built-in calendar picker that lets users select a date visually, rather than typing it. This enhances usability for less technical users or when precise input is required.
-
+
### Accessing the picker {#accessing-the-picker}
@@ -281,10 +287,11 @@ picker.setShowWeeks(true);
The `MaskedDateFieldSpinner` extends [`MaskedDateField`](#basics) by adding spinner controls that let users increment or decrement the date using arrow keys or UI buttons. It provides a more guided interaction style, especially useful in desktop-style applications.
-
+
### Key features {#key-features}
diff --git a/docs/docs/components/fields/masked/numberfield.md b/docs/docs/components/fields/masked/numberfield.md
index 01967ea07..f934fb56b 100644
--- a/docs/docs/components/fields/masked/numberfield.md
+++ b/docs/docs/components/fields/masked/numberfield.md
@@ -20,10 +20,10 @@ The `MaskedNumberField` can be instantiated with or without parameters. It suppo
This demo showcases a **Tip Calculator** that uses `MaskedNumberField` for intuitive numeric input. One field is configured to accept a formatted bill amount, while the other captures a whole-number tip percentage. Both fields apply numeric masks to ensure consistent and predictable formatting.
-
## Mask rules {#mask-rules}
@@ -95,10 +95,10 @@ field.setNegateable(false);
When `negatable` is set to `false`, the field blocks any attempts to enter a minus sign or otherwise input negative values.
-
## Min and max values {#min-and-max-values}
@@ -144,10 +144,10 @@ numberField.restoreValue();
The restore value must be explicitly set. If not defined, the feature will not revert the field.
-
## `MaskedNumberFieldSpinner` {#maskednumberfieldspinner}
@@ -155,10 +155,10 @@ height = '150px'
The `MaskedNumberFieldSpinner` extends [`MaskedNumberField`](#basics) by adding spinner controls that let users increase or decrease the value using step buttons or arrow keys.
This is ideal for inputs like quantities, pricing adjustments, rating controls, or any scenario where users make incremental changes.
-
### Key features {#key-features}
diff --git a/docs/docs/components/fields/masked/textfield.md b/docs/docs/components/fields/masked/textfield.md
index 3ba37dac9..e9e871e38 100644
--- a/docs/docs/components/fields/masked/textfield.md
+++ b/docs/docs/components/fields/masked/textfield.md
@@ -62,9 +62,9 @@ If the mask only contains `X`, the field behaves like a standard [`TextField`](.
This is useful when you want to reserve the ability to format without applying strict character rules.
:::
-
@@ -106,9 +106,9 @@ field.restoreValue();
You can set the value to restore with `setRestoreValue()`. If no restore value is set, the field will revert to the initial value at the time it was rendered.
-
@@ -117,9 +117,9 @@ height='200px'
The `MaskedTextFieldSpinner` extends [`MaskedTextField`](#basics) by adding spinner controls that let users cycle through a list of predefined values.
This improves the user experience in situations where the input should be constrained to a fixed set of valid options.
-
diff --git a/docs/docs/components/fields/masked/timefield.md b/docs/docs/components/fields/masked/timefield.md
index e5f111285..2739ed6c8 100644
--- a/docs/docs/components/fields/masked/timefield.md
+++ b/docs/docs/components/fields/masked/timefield.md
@@ -20,7 +20,11 @@ The `MaskedTimeField` is built for **time-only** input. If you’re looking for
The `MaskedTimeField` can be instantiated with or without parameters. You can define an initial value, a label, a placeholder, and an event listener for value changes.
-
+
## Mask rules {#mask-rules}
@@ -103,10 +107,11 @@ field.restoreValue();
- **Programmatically**, by calling `restoreValue()`
- **Via keyboard**, by pressing ESC (this is the default restore key unless overridden by an event listener)
-
+
## Validation patterns {#validation-patterns}
@@ -131,10 +136,11 @@ You should always validate the input value in your app logic, even if a regular
The `MaskedTimeField` includes a built-in time picker that lets users select a time visually, rather than typing it. This enhances usability for less technical users or when precise input is required.
-
+
### Accessing the picker {#accessing-the-picker}
@@ -203,10 +209,11 @@ This ensures the dropdown list contains predictable, evenly spaced values like `
The `MaskedTimeFieldSpinner` extends [`MaskedTimeField`](#basics) by adding spinner controls that let users increment or decrement the time using arrow keys or UI buttons. It provides a more guided interaction style, especially useful in desktop-style applications.
-
+
### Key features {#key-features}
diff --git a/docs/docs/components/fields/number-field.md b/docs/docs/components/fields/number-field.md
index 9a0f44bdc..c1ac9e37e 100644
--- a/docs/docs/components/fields/number-field.md
+++ b/docs/docs/components/fields/number-field.md
@@ -20,9 +20,9 @@ The `NumberField` component accepts numeric input and rejects invalid values aut
`NumberField` extends the shared `Field` class, which provides common features across all field components. The following example creates a `NumberField` with a label and placeholder text.
-
## Field value {#field-value}
diff --git a/docs/docs/components/fields/password-field.md b/docs/docs/components/fields/password-field.md
index b0b608e7d..d1a6c917c 100644
--- a/docs/docs/components/fields/password-field.md
+++ b/docs/docs/components/fields/password-field.md
@@ -20,9 +20,9 @@ The `PasswordField` component allows users to input a password securely. It's di
`PasswordField` extends the shared `Field` class, which provides common features across all field components. The following example creates a `PasswordField` with a label and placeholder text.
-
## Field value {#field-value}
diff --git a/docs/docs/components/fields/text-field.md b/docs/docs/components/fields/text-field.md
index c3558aecd..987a32cde 100644
--- a/docs/docs/components/fields/text-field.md
+++ b/docs/docs/components/fields/text-field.md
@@ -44,9 +44,9 @@ You can specify the type of the TextField using the `setType()` method. Similarl
- `Type.SEARCH`: A single-line text field for entering search strings. Line-breaks are automatically removed from the input value.
-
diff --git a/docs/docs/components/fields/time-field.md b/docs/docs/components/fields/time-field.md
index f62ae7114..b15af956d 100644
--- a/docs/docs/components/fields/time-field.md
+++ b/docs/docs/components/fields/time-field.md
@@ -20,9 +20,9 @@ description: A component that provides a default browser-based time picker for s
`TimeField` extends the shared `Field` class, which provides common features across all field components. The following example creates a reminder `TimeField` initialized to the current time.
-
## Usages {#usages}
diff --git a/docs/docs/components/flex-layout.md b/docs/docs/components/flex-layout.md
index fd536dc98..de4dd24f0 100644
--- a/docs/docs/components/flex-layout.md
+++ b/docs/docs/components/flex-layout.md
@@ -28,11 +28,13 @@ The `FlexLayout` adds components next to one another according to its direction,
To set the direction on an existing `FlexLayout` object, use the `setDirection()` method. The horizontal options are `FlexDirection.ROW` (left to right) or `FlexDirection.ROW_REVERSE` (right to left), and the vertical options are `FlexDirection.COLUMN` (top to bottom) or `FlexDirection.COLUMN_REVERSE` (bottom to top).
-
### Positioning {#positioning}
@@ -47,11 +49,13 @@ The `setAlignment()` method controls how items will display along the cross axis
The `setAlignContent()` method controls the space around the cross axis, and will take effect only when a layout has multiple lines.
:::
-
### Wrapping {#wrapping}
@@ -78,11 +82,13 @@ use the `.vertical().wrap()` combination.
The following demo allows you to build a container with the desired flex properties selected from the various menus. This tool can be used not only to create a visual example of the various methods, but also to create your own layouts with your desired properties. To use a layout you customize, simply copy the output code and add your desired elements for use in your program.
-
@@ -101,11 +107,13 @@ This property accepts a unitless integer value that specifies the relative order
It's important to note that the order property only affects the visual order of the items within the container, not their actual position in the DOM. This means that screen readers and other assistive technologies will still read the items in the order they appear in the source code, not in the visual order.
:::
-
### Self alignment {#self-alignment}
@@ -120,11 +128,13 @@ Self alignment uses the same values as content alignment.
This property is especially useful when you need to align a specific item differently from the other items in the container. See the sample below for an example of aligning a single item:
-
### Flex basis {#flex-basis}
@@ -139,10 +149,10 @@ By default, the `Item Basis` property is set to `auto`, which means that the siz
The following demo allows you to select one or more boxes and change the `Item Basis` for the selected items.
-
### Flex grow and shrink {#flex-grow--shrink}
@@ -164,9 +174,11 @@ The form below demonstrates how `FlexLayout` organizes input fields into a struc
If you prefer a column-based structure, look at the `ColumnsLayout` version of this form in the [`ColumnsLayout`](../components/columns-layout) article to see how it compares.
:::
-
\ No newline at end of file
diff --git a/docs/docs/components/google-charts.md b/docs/docs/components/google-charts.md
index 6d9f43ceb..bc14dba7a 100644
--- a/docs/docs/components/google-charts.md
+++ b/docs/docs/components/google-charts.md
@@ -30,10 +30,12 @@ To create a chart, specify a chart type, configure its visual options, and provi
This example creates a geo chart that maps revenue data across different countries, with custom colors, legend positioning, and chart area sizing:
-
@@ -41,10 +43,12 @@ height='300px'
The `GoogleChart` addon offers a comprehensive array of chart types to suit various data visualization requirements. Selecting the appropriate chart type is essential for effectively communicating the data's story. See the gallery below for examples of common charts that can be used in a webforJ app.
-
@@ -108,14 +112,12 @@ chart.setData(data);
Once the data is prepared, it can be applied to the GoogleChart using the setData method.
-
-
-
### Loading data and options from JSON {#loading-data-and-options-from-json}
You can also load data and options from JSON files using Gson for easier management. This approach helps keep your data and options organized and easy to update.
@@ -147,15 +149,15 @@ Invoke `redraw()` in scenarios such as:
- **Upon Changing Options**: Applies new styling or configuration changes to the chart.
- **For Responsive Adjustments**: Adjusts the chart's layout or size when the container's dimensions change, ensuring optimal display across devices.
-
-
-
## Exporting charts as images {#exporting-charts-as-images}
The `getImageUri()` method provides a way to export your Google Charts as base64-encoded PNG images. This method is particularly useful for sharing charts outside the web environment, embedding them into emails or documents, or simply for archival purposes.
diff --git a/docs/docs/components/icon.md b/docs/docs/components/icon.md
index 0f7444a5a..326995704 100644
--- a/docs/docs/components/icon.md
+++ b/docs/docs/components/icon.md
@@ -20,9 +20,9 @@ Additionally, `Icon` components are loaded on demand from a content delivery net
When creating an `Icon`, you'll need to identify a specific pool and the name of the icon itself.
Some icons also offer the choice between an outlined or a filled version via [variations](#variations).
-
@@ -87,9 +87,9 @@ Icon music = FontAwesomeIcon.create("user", FontAwesomeIcon.Variate.SOLID);
The following demo illustrates how to use icons from different pools, apply variations, and seamlessly integrate them into components.
-
@@ -112,9 +112,9 @@ Icons after a component's text is ideal for components that either offer supplem
Ultimately, consistency is key. Once you choose a style, maintain it across your site for a cohesive and user-friendly design.
-️
diff --git a/docs/docs/components/infinitescroll.md b/docs/docs/components/infinitescroll.md
index 96cc873bf..baf0264a3 100644
--- a/docs/docs/components/infinitescroll.md
+++ b/docs/docs/components/infinitescroll.md
@@ -18,12 +18,13 @@ When users reach the bottom of scrollable content, `InfiniteScroll` triggers an
The `InfiniteScroll` component emits events and maintains internal state to help manage how and when content is loaded.
-
To fetch more data when the user scrolls, use the `onScroll()` or `addScrollListener()` method to register a listener. Inside the listener, you typically load additional content and call `update()` to refresh the `InfiniteScroll` state.
@@ -59,12 +60,13 @@ infiniteScroll.setText("Loading more items...");
Similarly, you can customize the [`Icon`](../components/icon) displayed during loading by using `setIcon()`.
-
### Full customization {#full-customization}
@@ -74,12 +76,13 @@ you can add content directly into the special content slot using `addToContent()
When you populate the content slot, it replaces the default loading layout entirely.
-
## Styling {#styling}
diff --git a/docs/docs/components/lists/choice-box.md b/docs/docs/components/lists/choice-box.md
index 5f97be273..8aa0b9ff5 100644
--- a/docs/docs/components/lists/choice-box.md
+++ b/docs/docs/components/lists/choice-box.md
@@ -45,10 +45,12 @@ dropdown using CSS or shadow part selectors from the parent component becomes ch
In the demo below, the Dropdown type is set and used in the CSS file to select the dropdown and change the background color.
-
@@ -60,9 +62,9 @@ By default, the number of rows displayed in the dropdown of a `ChoiceBox` will b
Using a number that is less than or equal to 0 will result in unsetting this property.
:::
-
diff --git a/docs/docs/components/lists/combo-box.md b/docs/docs/components/lists/combo-box.md
index 2f0479bf3..c437da8eb 100644
--- a/docs/docs/components/lists/combo-box.md
+++ b/docs/docs/components/lists/combo-box.md
@@ -36,20 +36,20 @@ The ComboBox component is a versatile input element that combines the features o
Changing the custom value property allows control over whether or not a user is able to change the value in the `ComboBox` component's input field. If `true`, which is the default, then a user can change the value. If set to `false`, the user won't be able to change the value. This can be set using the setAllowCustomValue() method.
-
## Placeholder {#placeholder}
A placeholder can be set for a `ComboBox` which will display in the text field of the component when it is empty to prompt users for the desired entry in the field. This can be done using the setPlaceholder() method.
-
## Dropdown type {#dropdown-type}
@@ -61,10 +61,12 @@ dropdown using CSS or shadow part selectors from the parent component becomes ch
In the demo below, the Dropdown type is set and used in the CSS file to select the dropdown and change the background color.
-
@@ -76,9 +78,9 @@ By default, the number of rows displayed in the dropdown of a `ComboBox` will be
Using a number that is less than or equal to 0 will result in unsetting this property.
:::
-
diff --git a/docs/docs/components/lists/list-box.md b/docs/docs/components/lists/list-box.md
index 32e1b9662..944c6fe3b 100644
--- a/docs/docs/components/lists/list-box.md
+++ b/docs/docs/components/lists/list-box.md
@@ -42,10 +42,10 @@ On touch devices, when multiple selection is enabled, users can select multiple
Additionally, the arrow keys can be used to navigate the `ListBox`, and typing a letter key while the `ListBox` has focus will select the option that begins with that letter, or cycle through the options beginning with that letter should multiple options exist.
-
## Styling {#styling}
diff --git a/docs/docs/components/loading.md b/docs/docs/components/loading.md
index bc5731894..a29283234 100644
--- a/docs/docs/components/loading.md
+++ b/docs/docs/components/loading.md
@@ -18,11 +18,13 @@ The simplest way to create a `Loading` component is by initializing it without a
Here's an example of creating a `Loading` component with a message:
-
## Scoping {#scoping}
@@ -60,11 +62,13 @@ The `Loading` component in webforJ includes a `Spinner` that visually indicates
Here's an example of how you can customize the spinner within a `Loading` component:
-
## Use cases {#use-cases}
diff --git a/docs/docs/components/login.md b/docs/docs/components/login.md
index bdfc7ca84..d624f41d8 100644
--- a/docs/docs/components/login.md
+++ b/docs/docs/components/login.md
@@ -16,10 +16,10 @@ The `Login` component simplifies user authentication by providing a ready-to-use
Create a `Login` dialog by instantiating the component and calling `open()` to display it. The dialog includes username and password fields, input validation, and a sign-in button by default.
-
## Login submission {#login-submission}
@@ -28,10 +28,10 @@ When users enter their username and password, the `Login` component validates th
The following illustrates a basic `Login` component. If the username and password are both set to `"admin"` respectively, the login dialog closes, and a [Logout] button appears. If the credentials don't match, the default error message is displayed.
-
:::info Disabling the [Sign in] Button
@@ -61,10 +61,10 @@ If no action URL is set, form submission is handled through the `LoginSubmitEven
The titles, descriptions, labels, and messages within the `Login` component are fully customizable using the `LoginI18n` class. This flexibility allows you to tailor the login interface to meet specific localization requirements or personalization preferences.
-
## Custom fields {#custom-fields}
@@ -73,11 +73,13 @@ The `Login` component includes several slots that allow you to add extra fields
The following login has a custom field added for a customer ID. This can help you manage companies or departments with shared content across multiple users.
-
:::info Name Required
@@ -90,10 +92,10 @@ Custom fields must have a name set using `setName()` to be included in the form
To make the cancel button visible, provide a label for it. You can also listen to cancel events to handle the cancellation appropriately.
-
:::tip Hiding Elements
diff --git a/docs/docs/components/markdownviewer.md b/docs/docs/components/markdownviewer.md
index a9adc754e..da6d499cb 100644
--- a/docs/docs/components/markdownviewer.md
+++ b/docs/docs/components/markdownviewer.md
@@ -31,9 +31,9 @@ String content = viewer.getContent();
:::tip
The component implements `HasText`, so `setText()` and `getText()` work as aliases for the content methods.
:::
-
@@ -67,9 +67,9 @@ viewer.setProgressiveRender(true);
When enabled, content added via `setContent()` or `append()` goes into a buffer and displays incrementally. When disabled, content appears immediately.
-
@@ -139,9 +139,9 @@ When using progressive rendering, don't re-enable input fields based solely on w
The following demo simulates an AI chat interface using `append()` with progressive rendering enabled:
-
diff --git a/docs/docs/components/navigator.md b/docs/docs/components/navigator.md
index 2cf8842c2..7d6066550 100644
--- a/docs/docs/components/navigator.md
+++ b/docs/docs/components/navigator.md
@@ -18,9 +18,9 @@ Often, a `Navigator` component displays information found in a bound `Repository
To do this, simply pass the desired `Repository` object to an applicable `Navigator` object's constructor:
-
@@ -54,9 +54,9 @@ The `setMax()` method allows you to define the maximum number of page links to d
navigator.getPaginator().setMax(maxPages);
```
-
@@ -76,9 +76,9 @@ The `Navigator` component provides extensive customization options for buttons,
In the following example, the `setText()` method displays a numeric value to the user. Clicking the buttons fires the `onChange` method of the `Navigator`, which comes with a `Direction` value the clicked button.
-
@@ -124,9 +124,9 @@ navigator.setTooltipText("Go to the last page", Navigator.Part.LAST_BUTTON);
Various layout options exist for the `Navigator` component to provide flexibility in displaying pagination controls. To access these layouts, use the `Navigator.Layout` enum's values. The options are as follows:
-
diff --git a/docs/docs/components/option-dialogs/confirm.md b/docs/docs/components/option-dialogs/confirm.md
index 49f319249..c4bd78955 100644
--- a/docs/docs/components/option-dialogs/confirm.md
+++ b/docs/docs/components/option-dialogs/confirm.md
@@ -15,10 +15,10 @@ A `ConfirmDialog` is a modal dialog designed to allow the user to choose one of
The `ConfirmDialog` provides a way to ask users for confirmation or to choose between multiple options, such as `Yes/No` or `OK/Cancel`, ensuring that they acknowledge and confirm their actions.
-
## Types {#types}
@@ -47,10 +47,10 @@ The `ConfirmDialog` supports the following message types. When you configures a
In the following sample, the code configures a confirm dialog of type `CUSTOM` with a custom title and message.
-
## Result {#result}
diff --git a/docs/docs/components/option-dialogs/file-chooser.md b/docs/docs/components/option-dialogs/file-chooser.md
index bcaaa8dcf..8b7aed9c5 100644
--- a/docs/docs/components/option-dialogs/file-chooser.md
+++ b/docs/docs/components/option-dialogs/file-chooser.md
@@ -15,10 +15,10 @@ sidebar_position: 10
The `FileChooserDialog` provides a way to select files or directories from the file system, enabling users to choose directories for saving data, or perform file operations.
-
## Result {#result}
@@ -71,10 +71,10 @@ dialog.show();
When the seletion mode is `FILES`, The `FileChooserDialog` allows you to set filters to limit the types of files that listed. You can configure filters using the `setFilters(List filters)` method.
-
### Custom filters {#custom-filters}
diff --git a/docs/docs/components/option-dialogs/file-save.md b/docs/docs/components/option-dialogs/file-save.md
index 63d75fdab..ddbae4816 100644
--- a/docs/docs/components/option-dialogs/file-save.md
+++ b/docs/docs/components/option-dialogs/file-save.md
@@ -15,10 +15,10 @@ sidebar_position: 15
The `FileSaveDialog` provides a streamlined method for saving files to the file system, offering user-configurable options for file naming and handling existing files.
-
## Result {#result}
@@ -115,10 +115,10 @@ dialog.setI18n(i18n);
The `FileSaveDialog` allows you to set filters to limit the types of files that can be saved using the `setFilters(List filters)` method.
-
### Custom filters {#custom-filters}
diff --git a/docs/docs/components/option-dialogs/file-upload.md b/docs/docs/components/option-dialogs/file-upload.md
index 7ec5d410b..8994ac4df 100644
--- a/docs/docs/components/option-dialogs/file-upload.md
+++ b/docs/docs/components/option-dialogs/file-upload.md
@@ -27,10 +27,10 @@ The `FileUploadDialog` returns an `UploadedFile` object that contains informatio
The resulting string will be returned from the `show()` method, or the equivalent `OptionDialog` method as shown below.
:::
-
### Moving uploaded files {#moving-uploaded-files}
diff --git a/docs/docs/components/option-dialogs/input.md b/docs/docs/components/option-dialogs/input.md
index 65b15f595..daaa5ced6 100644
--- a/docs/docs/components/option-dialogs/input.md
+++ b/docs/docs/components/option-dialogs/input.md
@@ -15,10 +15,10 @@ An `InputDialog` is a modal dialog designed to prompt the user for input. The di
The `InputDialog` prompts users for input, such as text, numbers, or other data. Because the dialog is modal, the app waits for the user to respond before continuing:
-
## Types {#types}
@@ -51,10 +51,10 @@ The `InputDialog` supports the following message types. When you configures a ty
In the following sample, The user is prompted to enter its password to access the app. If login fails, the user will prompted
again.
-
## Result {#result}
diff --git a/docs/docs/components/option-dialogs/message.md b/docs/docs/components/option-dialogs/message.md
index 1f6723b82..d6cdd8f89 100644
--- a/docs/docs/components/option-dialogs/message.md
+++ b/docs/docs/components/option-dialogs/message.md
@@ -41,10 +41,10 @@ The `MessageDialog` supports the following message types. When you configures a
In the following sample, The code configures a message dialog of type `WARNING`. with a custom title and message.
-
:::tip Dialog & Button Theme
diff --git a/docs/docs/components/progressbar.md b/docs/docs/components/progressbar.md
index 1e4cc670a..6356bb385 100644
--- a/docs/docs/components/progressbar.md
+++ b/docs/docs/components/progressbar.md
@@ -22,9 +22,9 @@ The `ProgressBar` component is useful for visualizing the completion status of t
The following example shows a striped, animated progress bar with start, pause, and reset controls:
-
@@ -43,9 +43,9 @@ bar.setValue(50);
The `ProgressBar` can be oriented horizontally or vertically.
-
@@ -53,9 +53,9 @@ height='175px'
The `ProgressBar` supports an indeterminate state for tasks with unknown completion time.
-
@@ -75,9 +75,9 @@ ProgressBar bar = new ProgressBar(15, "Downloading: {{x}}%");
The `ProgressBar` component comes with themes built in for quick styling without the use of CSS. These themes are pre-defined styles that can be applied to buttons to change their appearance and visual presentation.
They offer a quick and consistent way to customize the look of ProgressBars throughout an app.
-
diff --git a/docs/docs/components/radio-button.md b/docs/docs/components/radio-button.md
index 59977f777..72f4c6afe 100644
--- a/docs/docs/components/radio-button.md
+++ b/docs/docs/components/radio-button.md
@@ -32,10 +32,10 @@ Use a [`RadioButtonGroup`](/docs/components/radiobuttongroup) to manage a set of
Radio buttons can utilize the ```setText(String text)``` method, which will be positioned near the radio button according to the built-in `Position`.
Radio buttons have built-in functionality to set text to be displayed either to the right or left of the component. By default, the text will be displayed to the right of the component. Positioning of the horizontal text is supported by use of the `HorizontalAlignment` enum class. Show below are the two settings:
-
@@ -43,10 +43,10 @@ height="120px"
Radio buttons can be controlled using two types of activation: manual activation and auto activation. These dictate when a `RadioButton` will change its state.
-
### Manual activation {#manual-activation}
@@ -72,10 +72,10 @@ The default activation value is **`MANUAL`** activation.
A `RadioButton` can also be set to display as a switch provides which provides alternative visual representation for selecting options. Normally, radio buttons are circular or rounded in shape and indicate a single choice from a group of options.
-
A `RadioButton` can be transformed into a switch that resembles a toggle switch or slider using one of two methods:
diff --git a/docs/docs/components/radio-group.md b/docs/docs/components/radio-group.md
index 70cc340a6..006bc1db1 100644
--- a/docs/docs/components/radio-group.md
+++ b/docs/docs/components/radio-group.md
@@ -19,10 +19,10 @@ The `RadioButtonGroup` component doesn't render an HTML element. It only provide
Create individual `RadioButton` components and pass them to the `RadioButtonGroup` constructor. Only one button in the group can be selected at a time.
-
@@ -72,8 +72,8 @@ group.onChange(e -> changeEvent());
The following sample from [Drawer Placement](/docs/components/drawer#placement) uses the `RadioButtonGroupChangeEvent` to automatically change the placement of the `Drawer` component:
diff --git a/docs/docs/components/refresher.md b/docs/docs/components/refresher.md
index 6382ecc40..0d88ccb03 100644
--- a/docs/docs/components/refresher.md
+++ b/docs/docs/components/refresher.md
@@ -20,12 +20,13 @@ Add a `Refresher` by instantiating it and registering a refresh listener. When r
To activate the `Refresher`, **click and drag downward** from the top of the scrollable area. While this gesture is familiar on mobile, it's less common on desktop—make sure to hold and pull with your mouse.
:::
-
This approach is commonly used to refresh paginated lists or restart infinite scroll loading.
@@ -40,24 +41,26 @@ Each state label can also be localized using the `RefresherI18n` object. The thr
This allows multilingual support and branding adjustments as needed.
-
## Icon customization {#icon-customization}
You can change the [`Icons`](../components/icon) used for the `pull`/`release` and `refreshing` stages using either a predefined [`Icon`](../components/icon) or an [Icon URL](../managing-resources/assets-protocols). These are useful when you want to apply branding or a custom animation.
-
## Pull behavior configuration {#pull-behavior-configuration}
@@ -109,12 +112,13 @@ The `Refresher` component supports multiple themes to visually distinguish diffe
The following sample cycles through all available themes each time you pull to refresh, giving you a live preview of how the `Refresher` looks across different themes:
-
\ No newline at end of file
diff --git a/docs/docs/components/slider.md b/docs/docs/components/slider.md
index f9a0f7fd6..bcf102111 100644
--- a/docs/docs/components/slider.md
+++ b/docs/docs/components/slider.md
@@ -18,10 +18,10 @@ The `Slider` is designed to work right out of the box, requiring no additional s
Here’s an example of a `Slider` that allows users to adjust volume levels within a predefined range:
-
## `Slider` value {#slider-value}
@@ -56,10 +56,10 @@ These intervals are evenly distributed along the slider track, with their spacin
Below is an example of creating a `Slider` with a custom range:
-
## Tick configuration {#tick-configuration}
@@ -98,10 +98,10 @@ slider.setSnapToTicks(true); // Enable snapping
Here’s an example of a fully configured `Slider` showing major and minor tick settings along with the snapping capability for precise adjustments:
-
## Orientation and inversion {#orientation-and-inversion}
@@ -115,10 +115,10 @@ In addition to orientation, the `Slider` can also be inverted. By default:
When inverted, this direction is reversed. Use the `setInverted(true)` method to enable inversion.
-
## Labels {#labels}
@@ -154,10 +154,10 @@ slider.setLabelsVisible(true);
Whether you're using default or custom labels, you can control their visibility with `setLabelsVisible(true)` or hide them with `setLabelsVisible(false)`.
-
## Tooltips {#tooltips}
@@ -202,10 +202,10 @@ slider.setTooltipText("x + ' units'");
The `Slider` comes with 6 themes built in for quick styling without the use of CSS. Theming is supported by use of a built-in enum class.
Shown below are sliders with each of the supported Themes applied:
-
\ No newline at end of file
diff --git a/docs/docs/components/spinner.md b/docs/docs/components/spinner.md
index 677c9060b..47f133994 100644
--- a/docs/docs/components/spinner.md
+++ b/docs/docs/components/spinner.md
@@ -16,10 +16,10 @@ The `Spinner` component provides a visual indicator that indicates ongoing proce
To create a `Spinner`, you can specify the theme and expanse. The basic syntax involves creating a `Spinner` instance and defining its appearance and behavior through methods such as `setTheme()` and `setExpanse()`.
-
## Managing speed and pausing {#managing-speed-and-pausing}
@@ -53,10 +53,10 @@ spinner.setPaused(false); // Resume the spinner
This example shows how to go about setting the speed and how to pause/resume the `Spinner`:
-
## Spin direction {#spin-direction}
@@ -70,10 +70,10 @@ spinner.setClockwise(true); // Rotates clockwise
This option visually indicates a special state or serves as a unique design choice. Changing the spin direction can help differentiate between types of processes, such as progress vs. reversal, or provide a distinct visual cue in specific contexts.
-
## Styling {#styling}
@@ -100,20 +100,20 @@ You can apply these themes programmatically to the spinner, providing visual cue
You can specify this behavior using the `setTheme()` method.
-
### Expanses {#expanses}
You can adjust the size of the spinner, known as **expanse**, to fit the visual space you need. The spinner supports various sizes including `Expanse.SMALL`, `Expanse.MEDIUM`, and `Expanse.LARGE`.
-
diff --git a/docs/docs/components/splitter.md b/docs/docs/components/splitter.md
index f1847fcef..252aaaa3d 100644
--- a/docs/docs/components/splitter.md
+++ b/docs/docs/components/splitter.md
@@ -16,11 +16,13 @@ The `Splitter` component, designed to divide and resize content within your app,
Create a `Splitter` by passing two components to its constructor. The first becomes the master panel and the second becomes the detail panel.
-
@@ -34,11 +36,13 @@ The `setMasterMinSize(String masterMinSize)` method specifies the minimum size f
You can specify sizes using any valid CSS units, as shown below:
-
@@ -48,11 +52,13 @@ You can configure orientation in the `Splitter` component, allowing you to creat
To configure the orientation, use the supported orientations Enum to specify whether the `Splitter` should render horizontally or vertically:
-
@@ -60,11 +66,13 @@ height='300px'
To set the initial position of the divider bar in the `Splitter` component, use `setPositionRelative`. This method takes a numeric value from `0` to `100` representing the percentage of the given space in the `Splitter`, and displays the divider at the given percentage of total width:
-
@@ -74,11 +82,13 @@ Splitter nesting allows you to create complex layouts with levels of resizable p
To nest Splitter components, instantiate new `Splitter` instances and add them as children to existing `Splitter` components. This hierarchical structure allows for the creation of multi-level layouts with flexible resizing capabilities. The program below demonstrates this:
-
@@ -92,11 +102,13 @@ When you set the auto-save configuration, the `Splitter` component automatically
To programmatically revert the `Splitter` back to default settings and dimensions, call the `cleanState()` method to remove any saved state data related to the `Splitter` component from the local storage of the web browser.
-
diff --git a/docs/docs/components/tabbed-pane.md b/docs/docs/components/tabbed-pane.md
index 6d9425c69..60278f811 100644
--- a/docs/docs/components/tabbed-pane.md
+++ b/docs/docs/components/tabbed-pane.md
@@ -126,10 +126,10 @@ The `TabbedPane` supports navigating through the various tabs via swiping. This
The `Tabs` within a `TabbedPane` can be placed in various positions within the component based on the application developers preference. Provided options are set using the provided enum, which has the values of `TOP`, `BOTTOM`, `LEFT`, `RIGHT`, or `HIDDEN`. The default setting is `TOP`.
-
### Alignment {#alignment}
@@ -138,10 +138,10 @@ In addition to changing the placement of the `Tab` elements within the `TabbedPa
The other options are `START`, `END`, `CENTER`, and `STRETCH`. The first three describe the position relative to the component, with `STRETCH` making the tabs fill the available space.
-
### Border and activity indicator {#border-and-activity-indicator}
@@ -158,10 +158,10 @@ This border doesn't apply to the entirety of the `TabbedPane` component, and mer
To set the visibility of the active indicator, the `setHideActiveIndicator(boolean)` method can be used. Passing `true` to this method will hide the active indicator beneath an active `Tab`, whereas `false`, the default, keeps the indicator displayed.
-
### Activation modes {#activation-modes}
@@ -172,10 +172,10 @@ For more fine-grained control over how the `TabbedPane` behaves when being navig
- **`Manual`**: When set to manual, the tab will receive focus but will not show until the user presses space or enter.
-
### Removal options {#removal-options}
@@ -190,10 +190,10 @@ Individual `Tab` elements can be set to be closable. Closable tabs will have a c
The `TabbedPane` can be rendered as a segment control by enabling the `segment` property with `setSegment(true)`. In this mode, tabs are displayed with a sliding pill indicator that highlights the active selection, providing a compact alternative to the standard tabbed interface.
-
## Styling {#styling}
@@ -202,10 +202,10 @@ height="250px"
The `TabbedPane` comes with built-in `Expanse` and `Theme` options similar to other webforJ components. These can be used to quickly add styling that conveys various meaning to the end user without needing to style the component with CSS.
-
diff --git a/docs/docs/components/table/overview.md b/docs/docs/components/table/overview.md
index c0f185155..0db8992fb 100644
--- a/docs/docs/components/table/overview.md
+++ b/docs/docs/components/table/overview.md
@@ -16,9 +16,9 @@ The `Table` class is a versatile component designed for presenting tabular infor
## Creating a `Table` {#creating-a-table}
-
@@ -83,11 +83,13 @@ Alternatively, the `setItems()` method can be passed any valid Java collection,
Below is an example of the above steps implemented to create a basic `Table` component:
-
diff --git a/docs/docs/components/table/table_column_groups.md b/docs/docs/components/table/table_column_groups.md
index 8da66e334..0c3adcc75 100644
--- a/docs/docs/components/table/table_column_groups.md
+++ b/docs/docs/components/table/table_column_groups.md
@@ -11,11 +11,13 @@ Column groups let you organize related columns under shared, multi-row headers.
Create a group with the `ColumnGroup.of()` factory method, then chain `add()` calls to populate it with column references, other groups, or a mix of both. Apply the groups to a `Table` with `setColumnGroups()`.
-
@@ -23,11 +25,13 @@ height='600px'
When groups are set, the `Table` renders a multi-row header where each group label spans across its child columns. The nesting depth determines how many header rows appear. A flat group adds one extra row, while a two-level nesting adds two, and so on.
-
@@ -64,11 +68,13 @@ Visual order: Number, Title, Artist, Genre, Label, Cost
The following demo illustrates this behavior. `Number` and `Label` aren't referenced in any group, but they retain their natural positions based on the order they were added to the `Table`.
-
@@ -111,11 +117,13 @@ ColumnGroup idInfo = ColumnGroup.of("id-info", "ID Info")
Ungrouped columns retain their own pin direction from their column definition.
-
@@ -144,12 +152,14 @@ Group headers and columns expose CSS parts for styling via `::part()`. The follo
| `cell-label-group-{ID}` | Label within a group header |
-
@@ -197,11 +207,13 @@ dwc-table::part(cell-group-depth-1) {
Hidden columns are excluded from the visual order and the header layout. If a group contains a mix of visible and hidden columns, only the visible ones appear and the group `colspan` adjusts accordingly. If every column in a group is hidden, the group header isn't rendered at all.
-
\ No newline at end of file
diff --git a/docs/docs/components/table/table_columns.md b/docs/docs/components/table/table_columns.md
index cfd2144a5..7ac030a08 100644
--- a/docs/docs/components/table/table_columns.md
+++ b/docs/docs/components/table/table_columns.md
@@ -73,11 +73,13 @@ After establishing a column’s identity, the next step is to control how its co
Setting a column’s alignment lets you create organized tables, which can help users identify the different sections in the `Table`.
-
@@ -95,11 +97,13 @@ In the preceding example, the final column for `Cost` has been right-aligned to
Column pinning is a feature that allows users to affix or "pin" a column to a specific side of the `Table`. This is useful when certain columns, such as identifiers or essential information, need to remain visible while scrolling horizontally through a table.
-
@@ -190,11 +194,13 @@ Key flex behaviors:
- **Respects constraints**: Works with minimum width/maximum width constraints. Without minimum width, flex columns can shrink to 0.
-
@@ -237,11 +243,13 @@ Auto-sizing methods return `PendingResult` because they require client-sid
:::
-
diff --git a/docs/docs/components/table/table_dynamic_styling.md b/docs/docs/components/table/table_dynamic_styling.md
index cf8c443ae..075f90914 100644
--- a/docs/docs/components/table/table_dynamic_styling.md
+++ b/docs/docs/components/table/table_dynamic_styling.md
@@ -22,10 +22,12 @@ For more on how shadow parts work and how to define and target them, see the [St
:::
-
@@ -35,10 +37,12 @@ The `setCellPartProvider()` method styles individual cells based on both the dat
Like row parts, cell parts are defined by a name and targeted using the `::part()` selector.
-
@@ -48,10 +52,12 @@ If your app modifies data programmatically, such as updating a user's age, the t
In this demo, cells in the Age column are styled based on a threshold: ages over 30 appear green, while ages 30 and under appear red. Clicking the button toggles Alice's age between 28 and 31, triggering the `setCellPartProvider` to reapply the appropriate style when the data is committed.
-
@@ -78,9 +84,9 @@ table.setBordersVisible(EnumSet.noneOf(Table.Border.class));
The demo below showcases a simple way to align your `Table's` visual appearance with the rest of your app using `setStriped()` and `setBordersVisible()`.
-
diff --git a/docs/docs/components/table/table_edit_refresh.md b/docs/docs/components/table/table_edit_refresh.md
index fb936fc76..a2df0aefb 100644
--- a/docs/docs/components/table/table_edit_refresh.md
+++ b/docs/docs/components/table/table_edit_refresh.md
@@ -6,10 +6,12 @@ slug: refreshing
Editing data within the `Table` works via interaction with the `Repository` containing the data for the `Table`. The `Repository` serves as a bridge between the `Table` and the underlying dataset, offering methods for data retrieval, modification, and refreshing. Below is an example which implements behavior to edit the "Title" of a desired row based.
-
diff --git a/docs/docs/components/table/table_filtering.md b/docs/docs/components/table/table_filtering.md
index b865ec1cf..a1ba20419 100644
--- a/docs/docs/components/table/table_filtering.md
+++ b/docs/docs/components/table/table_filtering.md
@@ -10,10 +10,12 @@ The following example uses a user-defined criteria from the search field and the
diff --git a/docs/docs/components/table/table_large_data.md b/docs/docs/components/table/table_large_data.md
index 5601f661c..275c13a54 100644
--- a/docs/docs/components/table/table_large_data.md
+++ b/docs/docs/components/table/table_large_data.md
@@ -25,10 +25,12 @@ The main advantage of virtual scrolling is improved performance, especially when
The below `Table` shows all olympic winners - a large dataset that benefits greatly from the table's virtual scrolling functionality:
diff --git a/docs/docs/components/table/table_rendering.md b/docs/docs/components/table/table_rendering.md
index e26659f1f..d47cb14e1 100644
--- a/docs/docs/components/table/table_rendering.md
+++ b/docs/docs/components/table/table_rendering.md
@@ -97,9 +97,11 @@ The following example shows conditional rendering applied to an invoice status c
@@ -108,10 +110,12 @@ It also works well for numeric thresholds. This server dashboard uses `Condition
@@ -160,8 +164,8 @@ The employee directory below uses a `CompositeRenderer` on the *Employee* column
@@ -268,8 +272,8 @@ When `setLazyRender(true)` is set on a column, cells display a lightweight anima
@@ -286,10 +290,12 @@ webforJ ships with a comprehensive set of renderers for the most common use case
diff --git a/docs/docs/components/table/table_selection.md b/docs/docs/components/table/table_selection.md
index 7f7772432..c5e778aed 100644
--- a/docs/docs/components/table/table_selection.md
+++ b/docs/docs/components/table/table_selection.md
@@ -38,11 +38,13 @@ The `TableItemSelectEvent` and `TableItemDeselectEvent` are not triggered when m
In the example below, a `TableItemSelectEvent` event will be fired whenever a user selects a row. The event can be handled by adding a listener to the table using the `onItemSelect()` method.
-
@@ -52,11 +54,13 @@ Checkbox selection is enabled when the selection mode is `MULTI`, and allows use
By using the `setCheckboxSelection(boolean checkboxSelection)` method, checkboxes can be configured to be displayed next to each row, allowing users to select items. The program below shows multiple selection and checkbox selection enabled:
-
diff --git a/docs/docs/components/table/table_sorting.md b/docs/docs/components/table/table_sorting.md
index e053cdc15..5e1b442f7 100644
--- a/docs/docs/components/table/table_sorting.md
+++ b/docs/docs/components/table/table_sorting.md
@@ -10,11 +10,13 @@ Sorting lets users arrange data in columns by order, making information easier t
For information on how to use the `Repository` pattern to manage and query collections, see the [Repository articles](/docs/advanced/repository/overview).
:::
-
@@ -38,11 +40,13 @@ table.setMultiSorting(true);
With multi-sorting enabled, clicking multiple column headers will sort them sequentially. The sorting priority is visually indicated in the table UI.
-
@@ -58,11 +62,13 @@ ageColumn.setSortOrder(2);
Unless `setSortOrder()` is used, the table defaults to sorting by the order in which columns are declared.
:::
-
@@ -142,11 +148,13 @@ The `Column` component allows developers to use Java `Comparators` for dynamic a
To leverage `Comparator` sorting in a `Column`, you can use the `setComparator()` method. This method allows you to define a custom `Comparator` function that dictates the sorting logic.
-
diff --git a/docs/docs/components/terminal.md b/docs/docs/components/terminal.md
index e04e078b5..38b00d5a1 100644
--- a/docs/docs/components/terminal.md
+++ b/docs/docs/components/terminal.md
@@ -27,19 +27,19 @@ To use the `Terminal` component in your app, ensure that you include the followi
The following example builds an interactive command shell with typed commands, history navigation, and custom output.
-
@@ -155,9 +155,9 @@ pty.onData(chunk -> {
});
```
-
@@ -199,9 +199,9 @@ theme.setBackground("#1e1e1e");
theme.setForeground("#cccccc");
terminal.setTheme(theme);
```
-
diff --git a/docs/docs/components/textarea.md b/docs/docs/components/textarea.md
index 53e43ddd2..e5f5971d3 100644
--- a/docs/docs/components/textarea.md
+++ b/docs/docs/components/textarea.md
@@ -16,10 +16,10 @@ The `TextArea` component provides a multi-line text input field where users can
Create a `TextArea` by passing a label to its constructor. Properties like placeholder text, character limits, and wrapping behavior can be configured through setter methods.
-
## Managing paragraphs {#managing-paragraphs}
@@ -64,10 +64,10 @@ The `TextArea` component supports two complementary types of validation: structu
The following demo allows users to adjust validation limits—such as maximum character count, paragraph length, and line count—in real time and see how the `TextArea` responds.
-
## Word wrap and Line wrapping {#word-wrap-and-line-wrapping}
@@ -80,10 +80,10 @@ To further refine how wrapping behaves, `setWrapStyle()` lets you choose between
These wrapping options work hand-in-hand with structural constraints like line count and paragraph length limits. While wrapping determines *how* text flows within the available space, the structural limits define *how much* space text is allowed to occupy. Together, they help maintain both visual structure and user input boundaries.
-
## Predicted text {#predicted-text}
@@ -94,11 +94,13 @@ Predictions can be accepted by pressing the `Tab` or `ArrowRight` key, inserting
This predictive behavior enhances both speed and accuracy, especially in repetitive input scenarios or applications where consistency of phrasing is important.
-
:::info
@@ -115,10 +117,10 @@ A **disabled** text area, on the other hand, blocks all interaction—including
Use read-only mode when the content is relevant but immutable, and disabled mode when the input isn't currently applicable or should be temporarily inactive.
-
## Styling {#styling}
diff --git a/docs/docs/components/toast.md b/docs/docs/components/toast.md
index 7c1ce9dda..d0ac13472 100644
--- a/docs/docs/components/toast.md
+++ b/docs/docs/components/toast.md
@@ -28,10 +28,12 @@ Toast toast = new Toast("Operation completed successfully!", 3000, Theme.SUCCESS
toast.open();
```
-
@@ -93,9 +95,9 @@ toast.setPlacement(Toast.Placement.TOP_LEFT);
toast.open();
```
-
@@ -109,9 +111,9 @@ The `Toast` component can display multiple notifications simultaneously, stackin
Although `Toast` notifications don't require user interaction by default, webforJ allows you to add buttons or other interactive elements to make them more useful than simple notifications.
-
@@ -140,10 +142,12 @@ To add a custom theme to a `Toast`, you can define custom CSS variables, which m
Since the `Toast` isn't located in a specific position in the DOM, you can target it using CSS variables. These variables make it easy to apply consistent custom styles across all Toast notifications.
:::
-
diff --git a/docs/docs/components/toolbar.md b/docs/docs/components/toolbar.md
index cbfaf075a..e42aa3aea 100644
--- a/docs/docs/components/toolbar.md
+++ b/docs/docs/components/toolbar.md
@@ -26,11 +26,13 @@ Each slot has a method for adding components: `addToStart()`, `addToTitle()`, `a
The following demo shows how to add a `Toolbar` to an [AppLayout](./app-layout) and utilize all supported slots effectively.
To read more about implementing toolbars within an `AppLayout`, see [Sticky toolbars](./app-layout#sticky-toolbars) and [Mobile navigation layout](./app-layout#mobile-navigation-layout).
-
## Compact mode {#compact-mode}
@@ -42,8 +44,10 @@ Toolbar toolbar = new Toolbar();
toolbar.setCompact(true);
```
-
## `ProgressBar` in toolbars {#progressbar-in-toolbars}
@@ -52,8 +56,10 @@ A `ProgressBar` serves as a visual indicator for ongoing processes, such as load
You can combine it with other components in the toolbar like buttons or labels without disrupting the layout.
-
## Styling {#styling}
@@ -62,10 +68,10 @@ javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/head
`Toolbar` components include seven built-in themes for quick visual customization:
-
diff --git a/docs/docs/components/tree.md b/docs/docs/components/tree.md
index 820b0c7b3..fea952409 100644
--- a/docs/docs/components/tree.md
+++ b/docs/docs/components/tree.md
@@ -39,9 +39,9 @@ tree.add(parent);
Attempting to assign the same node to more than one parent will result in an exception being thrown. This safeguard ensures the tree maintains a proper hierarchy by preventing nodes from having multiple parents, which would break the integrity of the structure and cause unexpected behavior.
:::
-
@@ -59,10 +59,12 @@ Each node supports storing additional information on the server side using `setU
In the demo, double-click a node to open an editor for its text. Enter the new text and save it to update the node’s label in the tree.
:::
-
@@ -109,9 +111,9 @@ tree.setGroupIconsVisible(false);
tree.setLeafIconsVisible(false);
```
-
@@ -146,9 +148,9 @@ The tree supports lazy loading of node children by reacting to expand events. Wh
Use the `onExpand` event to detect when a node is expanded. Inside the handler, check if the node’s children are placeholders (for example, a spinner or empty node) and replace them with actual data once loaded.
-
@@ -207,9 +209,9 @@ Object selectedKey = tree.getSelectedKey();
List