button 按钮

在线示例

用户点击 button - 按钮 执行操作。

  • XML 元素：button

  • Java 类：JmixButton

基本用法

按钮上可以有标题、图标或者两者皆有：

button 1

下面是定义带有标题、图标以及从 消息包 中获取文本显示到按钮提示的示例：

<button id="toolsButton"
        text="Tools"
        title="msg://toolsButton.title"
        icon="TOOLS"/>

在视图类中订阅 ClickEvent 事件可以处理按钮点击：

@Subscribe("toolsButton")
public void onToolsButtonClick(ClickEvent<Button> event) {
    // ...
}

样式版本

使用 themeNames 属性可以为按钮设置某个预定义的样式版本。

  • 表示重要：

    button variant 1 
    <button text="Primary" themeNames="primary"/>
<button text="Secondary"/>
<button text="Tertiary" themeNames="tertiary"/>

  • 表示危险或错误：

    button variant 2 
    <button text="Primary" themeNames="primary error"/>
<button text="Secondary" themeNames="error"/>
<button text="Tertiary" themeNames="tertiary error"/>

  • 表示成功：

    button variant 3 
    <button text="Primary" themeNames="primary success"/>
<button text="Secondary" themeNames="success"/>
<button text="Tertiary" themeNames="tertiary success"/>

  • 高对比：

    button variant 4 
    <button text="Primary" themeNames="primary contrast"/>
<button text="Secondary" themeNames="contrast"/>
<button text="Tertiary" themeNames="tertiary contrast"/>

  • 不同大小：

    button variant 5 
    <button text="Large" themeNames="large"/>
<button text="Normal"/>
<button text="Small" themeNames="small"/>

  • 内嵌样式，按钮文字外部无任何空白：

    button variant 6 
    <button text="Tertiary inline" themeNames="tertiary-inline"/>

样式版本的名称定义在 ButtonVariant 类中。参阅 Vaadin Docs 了解更多关于按钮样式的内容。

操作

除了创建 ClickEvent handler 之外，还可以将按钮与一个 操作 进行关联。

如果操作在视图中定义，可以在按钮的 action 属性中指定操作的 id：

<actions>
    <action id="helloAction" text="Say Hello"/>
</actions>
<layout>
    <button id="helloButton" action="helloAction"/>

如果操作是某个组件定义的，例如 dataGrid，则需在按钮的 action 属性中同时指定组件 id 和操作 id，以 "." 分隔：

<button id="createButton" action="usersTable.create"/>

<dataGrid id="usersTable" dataContainer="users">
    <actions>
        <action id="create" type="list_create"/>
    </actions>

XML 属性

autofocus - action - alignSelf - classNames - disableOnClick - enabled - height - icon - iconAfterText - id - maxHeight - maxWidth - minHeight - minWidth - text - themeNames - title - visible - whiteSpace - width

disableOnClick

如果 disableOnClick 属性设置成 true，这个按钮在点击之后就自动禁用，主要用来防止（意外的）多次点击。之后可以通过调用 setEnabled(true) 把按钮恢复成可点击状态。

icon

Vaadin

支持设置按钮的 Icon 组件。默认提供 2 组图标集：

  • Lumo 图标。可以在视图类中设置：

    @ViewComponent
protected JmixButton lumoBtn;

@Subscribe
public void onInit(InitEvent event) {
    Icon lumoIcon = new Icon("lumo", "photo");
    lumoBtn.setIcon(lumoIcon);
}

  • Vaadin 图标。这些图标定义了常量。可以在视图类中设置：

    @ViewComponent
protected JmixButton vaadinBtn;

@Subscribe
public void onInit(InitEvent event) {
    Icon vaadinIcon = new Icon(VaadinIcon.PHONE);
    vaadinBtn.setIcon(vaadinIcon);
}

    或者在 XML 描述中：

    <button id="vaadinBtn" icon="ALARM"/>

iconAfterText

Vaadin

如果设置 iconAfterText 属性为 true，按钮的图标会在文字后面显示。

whiteSpace

MDN

定义组件的 white-space 样式值。支持：

  • NORMAL

  • NOWRAP

  • PRE

  • PRE_WRAP

  • PRE_LINE

  • BREAK_SPACES

  • INHERIT

  • INITIAL

事件和处理器

AttachEvent - BlurEvent - ClickEvent - DetachEvent - FocusEvent

在 Jmix Studio 生成处理器桩代码时，可以使用 Jmix UI 组件面板的 Handlers 标签页或者视图类顶部面板的 Generate Handler 添加，也可以通过 Code → Generate 菜单（Alt+Insert / Cmd+N）生成。

ClickEvent

com.vaadin.flow.component.ClickEvent 当用户点击按钮时发送。

@Subscribe("helloButton") (1)
public void onHelloButtonClick(ClickEvent<Button> event) {
    Button button = event.getSource(); (2)
    // ...
}
1 @Subscribe 注解将处理方法与组件通过组件 id 进行关联。
2 如果需要，可以从 event 对象中获取点击的按钮。

如需通过编程的方式注册事件处理器，可以使用组件的 addClickListener() 方法。

XML 内部元素

tooltip

参考

Vaadin 文档。