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

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
.my-image-button { cursor： pointer; }

下面是来自Dashboard UI public Dashboard homeview(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。我建议采用另一种方法。使用按钮，并将按钮样式设置为无边框（显然你想要类似的东西。按钮的图标可以是使用主题资源的主题中的图像。“伪代码”是这样的：

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侦听器）向组件添加一个单击侦听器。每当用户在组件内单击时，都会调用该侦听器。根据内容，事件可能会被阻止，在这种情况下，不会触发任何事件。”

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

如果您想删除按钮的焦点高亮，应该可以通过以下CSS规则：

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

另外值得一提的是，图像不是可聚焦的，而按钮是。这意味着即使该图像也可以具有单击侦听器，它无法通过键盘导航到达，按钮可聚焦并通过选项卡等到达。因此，使用按钮而不是图像使您的应用程序更易于访问。