Question

我有一个AjaxTabbedPanel，每个标签可能包含无效的内容。我想通过使用红色背景突出显示有错误的选项卡向用户指出这一点。

作为实验，我实现了选项卡式面板的newLink()方法，正如您所看到的，onClick()方法迭代父面板的所有选项卡链接，并附加CSS类属性值以呈现红色背景。

但我的标签都没有突出显示。

我找不到这样做的相关示例，但有可能有人做过类似的事情，并且可以提供一些建议。

@SuppressWarnings("unchecked")
@Override
protected WebMarkupContainer newLink(String linkId, final int index)
{
    return new IndicatingAjaxFallbackLink(linkId)
    {
        private static final long serialVersionUID = 1L;

        @Override
        public void onClick(AjaxRequestTarget target)
        {
            setSelectedTab(index);
            if (target != null)
            {
                target.add(IndicatingAjaxTabbedPanel.this);

                int tabIndex = 0;
                for (ITab tab : (List<ITab>)getTabs()) {
                    Component link = IndicatingAjaxTabbedPanel.this.get("tabs-container:tabs:" + tabIndex++ + ":link");
                    if (link != null) {
                        link.add(AttributeAppender.append("class", "invalidValue"));
                        target.add(link);
                    }
                }
            }
        }
    };
}

Answer 1

以下是我的工作。它依赖于您提供AbstractTab实现类，该类实现标记接口

public interface IValidatingTab {
    public boolean valid();

    public void setValid(boolean valid);
}


/** 
    My Tab implementation
**/
public class SiteConfigTab extends AbstractTab implements IValidatingTab {

    private boolean valid;

    ...

    @Override
    public Panel getPanel(String panelId) {
        // Return your Panel (containing all the UI components of the tab)
    }

    public void setValid(boolean valid) {
        this.valid = valid;
    }

    public boolean valid() {
        return valid;
    }
}

因此，每个选项卡上的组件（文本字段，复选框等）将进行某种验证，并在选项卡上设置有效性标记。

现在，我已经扩展AjaxTabbebPanel并实施了newLink()方法，如下所示。 onComponentTag()负责检查选项卡的有效性标志，并设置CSS类如果无效。

@SuppressWarnings("unchecked")
@Override
protected WebMarkupContainer newLink(String linkId, final int index)
{

        IndicatingAjaxFallbackLink link = new IndicatingAjaxFallbackLink(linkId)
        {
            private static final long serialVersionUID = 1L;

            @Override
            public void onClick(AjaxRequestTarget target)
            {
                setSelectedTab(index);
                if (target != null)
                {
                    target.add(IndicatingAjaxTabbedPanel.this);

                }


                onAjaxUpdate(target);
            }


            @Override
            protected void onComponentTag(final ComponentTag tag)
            {
                super.onComponentTag(tag);

                ITab tabPanel = (ITab)getTabs().get(index);
                String cssClass = tag.getAttribute("class");

                if (cssClass == null) {
                    cssClass = " ";
                }

                if (tabPanel instanceof IValidatingTab) {
                    if (!((IValidatingTab)tabPanel).valid()) {
                        cssClass += " invalidValue";
                    }
                }


                tag.put("class", cssClass.trim());
            }
        };

        return link;
}

Wicket：需要实现带有制表符错误指示符的AjaxTabbedPanel

1 个答案: