UI Components

In webforJ, applications are created using modular units known as Components, which facilitate quick and efficient UI development. The framework offers a range of essential components like buttons, input elements, and layout containers. After mastering the fundamentals, you can consult the JavaDocs for a detailed overview of all components and their functionalities.

Layouts

Layout components provide the foundation for structuring user interfaces, enabling developers to organize content efficiently. These components offer various ways to control the arrangement of child components, whether for simple or complex layouts.

The following layout components are designed to handle a wide range of use cases, from responsive design to advanced content management

AppLayout

A container component that provides a structured layout for top-level app navigation and content organization.

Toolbar

A horizontal container component that holds a set of action buttons, icons, or other controls, typically used for performing tasks related to the current context.

FlexLayout

A layout component that arranges its children using flexible box (flexbox) rules for responsive design and alignment.

ColumnsLayout

A layout component that arranges its children into multiple vertical columns, useful for creating forms and grid-like structures.

Splitter

A layout component that divides the available space between two child components, allowing users to resize them by dragging the splitter bar.

Drawer

A sliding panel component typically used for side navigation or housing additional content that can be shown or hidden.

Dialog

A modal window component that overlays content to display important information or prompt user interaction, often requiring user action to close.

Login

A component that provides a pre-built UI for user authentication, typically including fields for username and password along with a submit button.

TabbedPane

A container component that organizes content into multiple tabs, allowing users to switch between different views or sections.

Data entry

Data entry components provide essential tools for capturing user input and managing interactions within your app. These components are versatile, making it easy to build interactive forms and collect various types of data.

TextField

A single-line input component for entering and editing text data.

MaskedTextField

A text input component that restricts user input to a specific format or pattern, typically used for fields like phone numbers, dates, or credit card numbers.

NumberField

A component that provides a default browser-based input field for entering numeric values, with built-in controls for incrementing or decrementing the value.

MaskedNumberField

A numeric input component that restricts user input to a specific numeric format or pattern, ensuring valid number entry such as for currency, percentages, or other formatted numbers.

PasswordField

A single-line input component for securely entering and masking password data.

DateField

A component that provides a default browser-based date picker for selecting a date through an input field.

MaskedDateField

A date input component that enforces a specific date format or pattern, ensuring the user enters a valid date according to the defined mask

TimeField

A component that provides a default browser-based time picker for selecting a time value through an input field.

MaskedTimeField

A time input component that enforces a specific time format or pattern, ensuring the user inputs a valid time according to the defined mask

DateTimeField

A component that provides a default browser-based date and time picker for selecting both date and time through a single input field.

ColorField

A component that provides a default browser-based color picker, allowing users to select a color from an input field.

TextArea

A multi-line text input component that allows users to enter or edit larger blocks of text.

CheckBox

A component that represents a binary option, allowing users to toggle between a checked (true) or unchecked (false) state.

RadioButton

A component that allows users to select a single option from a group of mutually exclusive choices.

Switch

A toggle component that allows users to switch between two states, such as on/off or true/false, with a sliding action.

ChoiceBox

A component that provides a dropdown list of predefined options, allowing users to select one option from the list.

ComboBox

A component that combines a dropdown list with an editable text input, allowing users to either select an option from the list or enter a custom value.

ListBox

A component that displays a scrollable list of options, allowing users to select one or more items from the list.

Option dialogs

Option dialogs provide a way to present users with choices or prompt them for confirmation before proceeding with an action. These components are essential for creating interactive, decision-driven workflows, enabling users to confirm, cancel, or choose from various options in a clear and structured manner.

MessageDialog

A dialog component used to display informational messages or alerts to the user, typically with a single OK button to acknowledge the message.

ConfirmDialog

A dialog component that asks the user to confirm or cancel an action, typically providing Yes and No or OK and Cancel buttons.

InputDialog

A dialog component that prompts the user to input text or data, typically providing an input field along with action buttons like OK and Cancel.

FileChooserDialog

A dialog component that allows users to browse and select files from server filesystem.

FileUploadDialog

A dialog component that enables users to upload files from their local filesystem to the app.

Interaction and display

This category includes components that facilitate user interactions and visually display data or app states. These components help users navigate the app, trigger actions, and understand progress or results through dynamic visual elements.

Table

A component used to display data in a structured, tabular format with rows and columns, supporting features like sorting and pagination.

GoogleCharts

A component that integrates with Google Charts to display various types of charts and visual data representations in the app.

Button

A clickable component that triggers an action or event when pressed.

Toast

A lightweight, non-blocking notification component that briefly displays a message to the user before automatically disappearing.

Navigator

A customizable pagination component for navigating through data sets, supporting layouts with first, last, next, previous buttons, and quick jump fields.

ProgressBar

A component that visually represents the progress of a task or process, typically displayed as a horizontal bar that fills as progress is made.

Slider

A component that allows users to select a value from a defined range by dragging a handle along a track.

BusyIndicator

An app-wide visual indicator, typically a spinner, signaling that a global process is ongoing.

Loading

A scoped loading indicator that shows within a specific parent component, indicating that content or data is being loaded in that section.

Spinner

A component that displays a rotating animation, typically used to indicate that a process or action is in progress.

AppNav

A component that provides a navigation menu for the app, typically used for listing links or navigation items for switching between different sections or views.

Icon

A component that displays a graphical symbol or image, often used to represent an action, status, or category in the user interface.

Terminal

A component that simulates a command-line interface (CLI) within the app, allowing users to input and execute text-based commands.