Question

我正在构建一个Vaadin 8应用程序（第一个适用于我）。我正在使用设计器来生成UI。我已经在仪表板上添加了几个按钮，这些按钮在点击时会触发一个功能。出于某种原因，单击图像时不会触发任何内容。以下是所涉及的所有代码。谁能看到我做错了什么？

这是.html文件中的代码：

<vaadin-horizontal-layout responsive width-full margin>
    **<vaadin-image icon="theme://images/properties.png" style-name="my-image-button" responsive alt="" _id="imagePropertyInfo"></vaadin-image>**
    <vaadin-image icon="theme://images/occupants.png" responsive alt="" _id="imageOccupants"></vaadin-image>
    <vaadin-image icon="theme://images/vendors.png" responsive alt="" _id="imageVendors"></vaadin-image>
   </vaadin-horizontal-layout>

这是scss
。我的图像按钮 { 游标：指针; }

以下是仪表板UI中的代码 public DashboardHomeView（OnCallUI onCallUI） { this.onCallUI = onCallUI;

        // Make it disabled until a property is selected
        **imagePropertyInfo.setEnabled( false );
        imagePropertyInfo.setStyleName( "my-image-button" );**
        fetchPropertyBasicInfo();
    }

    protected void fetchPropertyBasicInfo()
    {
        List<PropertyProfileBasic> listOfPropertyProfiles = new ArrayList<PropertyProfileBasic>( OnCallUI.myStarService.fetchAllPropertyProfileBasicInformation() );
        comboBoxGeneric.setCaption( "Select a Property" );
        comboBoxGeneric.setItemCaptionGenerator( aProperty -> aProperty.toString() );
        comboBoxGeneric.setItems( listOfPropertyProfiles );
        comboBoxGeneric.addValueChangeListener( event -> fetchOccupantBasicInfo( event ) );
        comboBoxGeneric.focus();
    }

    protected void fetchOccupantBasicInfo( ValueChangeEvent<PropertyProfileBasic> event )
    {
        // Fetch all the occupants for the selected property
        if( event.getValue().getPropertyNo() != null )
        {
            //  Fetch a list of occupant basic info for the selected property
            List<OccupantProfileBasic> listOfOccupantProfiles = new ArrayList<OccupantProfileBasic>( OnCallUI.myStarService.fetchOccupantProfileBasicByPropertyNo( event.getValue().getPropertyNo() ) );
            //  Clear the existing grid et al
            gridContainer.removeAllComponents();
            //  Add the occupant grid
            occupantGrid = new OccupantProfileBasicGrid( listOfOccupantProfiles );
            //  Show the grid
            gridContainer.addComponents( new Label( "Occupants" ), occupantGrid );

            //  Set the dashboard buttons to enabled now a property is selected
            **imagePropertyInfo.setEnabled( true );
            // Add the property info button
            imagePropertyInfo.addClickListener( e -> fetchPropertyInformation() );**
        }
    }

    protected void fetchPropertyInformation()
    {
        Notification.show( "Yo!", "You clicked!", Notification.Type.HUMANIZED_MESSAGE );
    }

Answer 1

我假设您正在使用GridLayout。我建议采用另一种方法。使用Button，并将按钮样式设置为无边框（显然你想要这样的东西。按钮的图标可以是主题中的图像，使用ThemeResource。“伪代码”是这样的：

ThemeResource icon = new ThemeResource("/images/properties.png");
Button imagePropertyInfo = new Button(icon);
imagePropertyInfo.setStyleName(ValoTheme.BUTTON_BORDERLESS);
imagePropertyInfo.addClickListener( e -> fetchPropertyInformation() );

另请注意，Image组件的JavaDoc表示。

“public registration addClickListener（MouseEvents.ClickListener listener）向组件添加单击侦听器。只要用户在组件内部单击，就会调用侦听器。根据内容可能会阻止事件，在这种情况下不会触发任何事件。“

我认为它不喜欢你用主题设置图像的方式，而不使用资源。

如果要删除按钮的焦点突出显示，可以通过此CSS规则：

.v-button-link:after {
  content: none;
}

值得一提的是，Image不是Focusable，而Button是。这意味着即使该图像可以具有点击监听器，也不会通过键盘导航到达，按钮是可聚焦的，并且可以通过标签等来到达。因此使用按钮而不是图像可以使您的应用程序更易于访问。

Vaadin 8使用图像作为按钮。不会触发点击事件

1 个答案: