通过中继器添加的样式检票口组件答案

【问题标题】：Styling wicket components that are added via a repeater通过中继器添加的样式检票口组件
【发布时间】：2012-05-23 21:32:25
【问题描述】：

我正在使用一个应用程序，在该应用程序中，我需要将一组子面板添加到属于页面一部分的其他包含父面板。

一次可以有 1 到 3 个父面板，父面板之间总共可以有 7 个子面板。

我把它放到了所有东西都被正确添加的地方，但是当尝试对通过检票口中继器添加的这些面板进行样式设置时，我的正常方法都不起作用。

我已经尝试覆盖 ListView 的 populateItem 方法，如下所示：https://cwiki.apache.org/WICKET/listview-and-other-repeaters.html 和 https://cwiki.apache.org/WICKET/page-with-dynamic-components.html

        add(new ListView<ParentPanel>("parentPanels", panels) {

        @Override
        protected void populateItem(ListItem<ParentPanel> item) {

            ParentPanel temp = (ParentPanel) item.getModelObject();

            temp.add(new AttributeAppender("class", new Model<String>("panelClass"), ""));

            item.add(temp);
        }

    });

...或在标记中：

        <wicket:container wicket:id="listOfPanels">
            <wicket:panel wicket:id="panelClass"/>
        </wicket:container>

...甚至在要添加的面板的构造函数中添加一个属性修饰符。

所有这些似乎都被忽略了。我错过了一些基本的东西吗？如果我不必计算要添加的面板的数量和类型，这将不是问题，但是使用中继器会删除样式吗？

【问题讨论】：

您是否还在使用呈现的 html 实体？（不确定这是否有效？）应该在最终的 html 输出中被忽略，所以如果你改变它的类也没关系。如果重复项是“真正的 html”（div，...）实体，您是否看到任何变化？
您不能为面板内的面板设置 html 样式吗？或者您是否尝试根据中继器中的位置应用不同的类？
是的，我正在根据处理来自转发器的项目时使用的逻辑应用样式。我的问题的根源是我肯定使用了错误的标签。现在效果很好。 =/

标签： wicket

【解决方案1】：

将您的属性修饰符添加到 Item 并将 Item 附加到呈现为 div 而不是未呈现的 wicket:container 的 html 标记。

您还可以在 Item 子类中添加该类并覆盖转发器的 newItem() 方法以返回您自己的。以 OddEvenListItem 为例。

【讨论】：

是的，从没想过要检查...只是根据我自己的需要从这些站点中剪切和篡改示例。一会儿回去发现错误。感谢您的回答。
检查 OddEvenListItem 给了我足够的工作，谢谢！

【解决方案2】：

我不认为将面板作为模板提供给 ListView 是一种好习惯。这样可能更方便

       add(new ListView<Object>("parentPanels", panels) {

    @Override
    protected void populateItem(ListItem<Object> item) {

        ParentPanel temp = new ParentPanel("panelClass",item.getModelObject());
        //ParentPanel temp = (ParentPanel) item.getModelObject();

        temp.add(new AttributeAppender("class", new Model<String>("myPanel"), ""));

        item.add(temp);
    }

});

也可以试试这样的 HTML

    <div wicket:id="listOfPanels">
        <div wicket:id="panelClass"></div>
    </div>

这将使用名为 myPanel 的 CSS 类生成。

您还需要将 css 类添加到面板的 html 及其组件中。

【讨论】：

谢谢，我用过这样的东西。我不知道这种情况的最佳实践，主要是我在原始问题中链接的那两个网站。是的，问题的核心是 html。

【解决方案3】：

For simple styles, try something like following

    item.add(new AttributeAppender("style", Model.of("padding-top:23px;padding-left:5px")));

【讨论】：