界面组件

在 ChatGPT 中打开

在 webforJ 中，应用程序是使用被称为组件的模块化单元创建的，这些组件促进了快速高效的 UI 开发。该框架提供了一系列基本组件，如按钮、输入元素和布局容器。在掌握基础知识后，您可以参考 JavaDocs 获取所有组件及其功能的详细概述。

布局

布局组件为用户界面的结构提供基础，使开发人员能够高效地组织内容。这些组件提供多种方式来控制子组件的排列，无论是简单还是复杂的布局。

以下布局组件旨在处理广泛的用例，从响应式设计到高级内容管理。

AppLayout

一个容器组件，为顶级应用程序导航和内容组织提供结构化布局。

Toolbar

一个水平容器组件，包含一组操作按钮、图标或其他控件，通常用于执行与当前上下文相关的任务。

FlexLayout

一个布局组件，使用灵活盒子（flexbox）规则排列其子项，以实现响应式设计和对齐。

ColumnsLayout

一个布局组件，将其子项排列成多个垂直列，适用于创建表单和网格状结构。

Splitter

一个布局组件，在两个子组件之间划分可用空间，让用户通过拖动分隔条来调整大小。

Drawer

一个滑动面板组件，通常用于侧边导航或容纳可以显示或隐藏的附加内容。

Dialog

一个模态窗口组件，覆盖内容以显示重要信息或提示用户交互，通常需要用户采取行动才能关闭。

Login

一个提供用户身份验证的预构建 UI 的组件，通常包括用户名和密码字段以及提交按钮。

Accordion

一组纵向堆叠的可折叠面板，每个面板都有一个可单击的标题，可以切换其主体内容的可见性。

TabbedPane

一个容器组件，将内容组织成多个选项卡，允许用户在不同视图或部分之间切换。

Card

一个表面，分组相关内容和操作，包含媒体、标题、主体内容和页脚区域。

数据输入

数据输入组件提供捕获用户输入和管理应用交互的基本工具。这些组件具有灵活性，便于构建交互式表单并收集各种类型的数据。

TextField

用于输入和编辑文本数据的单行输入组件。

MaskedTextField

一个文本输入组件，将用户输入限制为特定格式或模式，通常用于电话号码、日期或信用卡号码等字段。

NumberField

一个组件，提供默认的基于浏览器的输入字段用于输入数值，内置控制用于增减值。

MaskedNumberField

一个数值输入组件，将用户输入限制为特定的数值格式或模式，确保有效的数字输入，如货币、百分比或其他格式化数字。

PasswordField

一个单行输入组件，用于安全地输入并遮掩密码数据。

DateField

一个组件，提供默认的基于浏览器的日期选择器，通过输入字段选择日期。

MaskedDateField

一个日期输入组件，强制执行特定的日期格式或模式，确保用户根据定义的掩码输入有效日期。

TimeField

一个组件，提供默认的基于浏览器的时间选择器，通过输入字段选择时间值。

MaskedTimeField

一个时间输入组件，强制执行特定的时间格式或模式，确保用户根据定义的掩码输入有效时间。

DateTimeField

一个组件，提供默认的基于浏览器的日期和时间选择器，通过单个输入字段选择日期和时间。

ColorField

一个组件，提供默认的基于浏览器的颜色选择器，允许用户从输入字段中选择颜色。

TextArea

一个多行文本输入组件，允许用户输入或编辑较大块的文本。

CheckBox

一个组件，代表一个二元选项，允许用户在选中（真）或未选中（假）状态之间切换。

RadioButton

一个组件，允许用户从一组互斥的选择中选择一个选项。

Switch

一个切换组件，允许用户在两种状态之间切换，如开/关或真/假，并具有滑动操作。

ChoiceBox

一个组件，提供预定义选项的下拉列表，允许用户从列表中选择一个选项。

ComboBox

一个组件，结合下拉列表和可编辑的文本输入，允许用户从列表中选择一个选项或输入自定义值。

ListBox

一个组件，显示一个可滚动的选项列表，允许用户从列表中选择一个或多个项目。

Upload

一个内联文件选择器，允许用户从本地计算机选择一个或多个文件并上传到服务器，支持拖放、过滤器和每个文件事件跟踪。

选项对话框

选项对话框提供了一种向用户提供选择或在继续执行操作之前提示他们确认的方式。这些组件对于创建交互式、决策驱动的工作流程至关重要，使用户能够以明确且结构化的方式确认、取消或从各种选项中进行选择。

MessageDialog

一个对话框组件，用于向用户显示信息消息或警告，通常带有一个单独的 OK 按钮以确认消息。

ConfirmDialog

一个对话框组件，询问用户确认或取消一个操作，通常提供 是 和 否 或 确定 和 取消 按钮。

InputDialog

一个对话框组件，提示用户输入文本或数据，通常提供一个输入字段以及 确定 和 取消 等操作按钮。

FileChooserDialog

一个对话框组件，允许用户浏览并选择服务器文件系统中的文件。

FileUploadDialog

一个对话框组件，允许用户从本地文件系统上传文件到应用。

FileSaveDialog

一个对话框组件，允许用户将文件保存到服务器文件系统上的指定位置。

交互与展示

这一类别包括促进用户交互和以视觉方式展示数据或应用状态的组件。这些组件帮助用户导航应用、触发操作，并通过动态视觉元素理解进度或结果。

Table

一个用于以结构化的表格格式显示数据的组件，支持排序和分页等功能。

GoogleCharts

一个与 Google Charts 集成的组件，用于在应用中显示各种类型的图表和可视数据表示。

Button

一个可点击的组件，在按下时触发一个操作或事件。

Toast

一个轻量级的非阻塞通知组件，短暂地向用户显示一条消息，然后自动消失。

Alert

一个以显著格式显示重要消息或警告的组件，以吸引用户注意。

Badge

一个显示计数、状态或简短元数据的小标签组件，支持主题、尺寸和图标。

DesktopNotification

一个利用浏览器原生通知 API 的组件，用于通过自定义桌面通知警告用户。

Navigator

一个可定制的分页组件，用于在数据集之间导航，支持带有首页、末页、下一页、上一页按钮和快速跳转字段的布局。

ProgressBar

一个以视觉方式表示任务或过程进度的组件，通常显示为一个水平条，随着进度的推进而填充。

Slider

一个允许用户通过拖动手柄在定义的范围内选择值的组件。

BusyIndicator

一个应用范围内的视觉指示器，通常是一个旋转动画，表示全局过程正在进行中。

Loading

一个范围加载指示器，在特定的父组件内显示，指示该部分正在加载内容或数据。

Spinner

一个显示旋转动画的组件，通常用于指示过程或操作正在进行中。

AppNav

一个为应用提供导航菜单的组件，通常用于列出链接或导航项，以便在不同部分或视图之间切换。

Icon

一个显示图形符号或图像的组件，通常用于表示用户界面中的动作、状态或类别。

Terminal

一个在应用中模拟命令行界面（CLI）的组件，允许用户输入和执行基于文本的命令。

InfiniteScroll

一个在滚动时加载更多项目的组件，显示加载器，并跟踪所有内容何时被获取。

Refresher

一个允许在可滚动容器内进行下拉刷新交互的组件，非常适合动态数据加载。

Tree

一个显示层次数据的组件，允许用户展开、折叠和与嵌套项目进行交互。

Avatar

一个显示用户个人资料照片或首字母的组件，支持不同的尺寸、形状和主题。

MarkdownViewer

一个用于显示 markdown 内容的组件，具有逐渐的字符逐个渲染，非常适合 AI 聊天接口和流式文本。

继续学习

文章Java responsive web app layout: side navigation in webforJ文章webforJ Components: What Ships With the Framework文章Java file upload: build a web UI with the webforJ Upload文章Card component in Java: build dashboard cards with webforJ文章FlexWrap your mind around webforJ's FlexLayout文章Design Effective Forms Using the TextField