在 wicket 中，如何创建未由组件层次结构/布局定义的 RadioGroup？

Posted 2023-03-05

【中文标题】在 wicket 中，如何创建未由组件层次结构/布局定义的 RadioGroup？

【英文标题】：In wicket, how can I create RadioGroups that are not defined by component hierarchy/layout?

【发布时间】：2011-05-03 16:59:11

【问题描述】：

我正在使用 Wicket，并希望使用 html 创建一个单选按钮网格，如下所示（外部列表将垂直显示，内部列表将水平显示）。

组的数量是可变的 - 可以是 ABC、ABCD、ABCDE 等。

我想要垂直分组的单选按钮。

<ul>
  <li>
    <ul>
       <li><input type="radio" name="A"></li>
       <li><input type="radio" name="B"></li>
       <li><input type="radio" name="C"></li>
    </ul>
  </li>
  <li>
    <ul>
       <li><input type="radio" name="A"></li>
       <li><input type="radio" name="B"></li>
       <li><input type="radio" name="C"></li>
    </ul>
  </li>
  <li>
    <ul>
       <li><input type="radio" name="A"></li>
       <li><input type="radio" name="B"></li>
       <li><input type="radio" name="C"></li>
    </ul>
  </li>
</ul>

不幸的是，RadioGroup 似乎只允许根据布局定义的分组对单选按钮进行分组。

例如：

RadioGroup group = new RadioGroup("radioGroupA");

group.add( new Radio("myradio", new Model(1)) ;

这样做的问题是我不能按照我想要的方式布置项目。

还有其他方法吗？手动指定名称并收集结果？

更新：我注意到Radio 可以将RadioGroup 作为参数。因此，可以执行以下操作：

// create some groups
for (0..n) 
  RadioGroup group = new RadioGroup("myRadioGroup", new Model  ..  );
  groupArray.add(group)


//create a ListView for the RadioGroups so we can attach them to page
ListView radioListView = ListView("radioGroupList")  populate from groupArray 
add(radioListView);

// create our grid of radio buttons
// outer -> rows 
for (0..x) 
  // inner -> columns
  for (0..n)
    // supply group from our groupArray
    add( new Radio("myradio", new Model(1), groupArray.get(n) ));
  

然后我可以独立于布局将Radios 和RadioGroups 添加到表单中，这在分组方面具有预期的效果。

<form>
  <span wicket:id="radioGroupList">
     <span wicket:id="radioGroup"/>
  </span>
  <ul> 
    <li><radio wicket:id="myradio"/></li>

但是现在，当我提交时，我收到以下错误：

WicketMessage：为 RadioGroup 组件 [2:tContainer:list:2:tPanel:myForm:orderedRadioGroupList:0:orderedRadioGroup] 提交的 http post 值 [radio33] 是非法的，因为它不包含 Radio 组件的相对路径。因此，RadioGroup 组件无法解析非法值指向的选定 Radio 组件。一个可能的原因是组件层次结构在渲染和表单提交之间发生了变化。

知道这意味着什么吗？

拼写错误的单词“componment”表明它不常出现。

我正在使用 Wicket 1.4.12。

我发现了这张看起来相关的 Apache 票证：https://issues.apache.org/jira/browse/WICKET-1055

【参考方案1】：

您的组件层次结构错误。正如他们的 javadoc 所说，Radio 组件必须在无线电组组件内部。由于您嵌套无线电组，因此您必须确保您添加的 Radio 组件放置在 inner-most RadioGroup 实例中。因此，您的标记应如下所示：

<span wicket:id="group1">
    <span wicket:id="group2">
        <span wicket:id="group3">
            <ul>
                <li><input wicket:id="radio" type="radio"/>
                ...

您当前代码的问题是您正在使用 ListView 从 RadioGroups 中创建一个平面列表，而不是 嵌套 列表。而且，您正在将您的收音机添加到组的层次结构之外。

【讨论】：

如果组数是可变的，你如何为此创建嵌套的 HTML 标记？即可能有 3,4,5,6,7.. 组。

您可以使用嵌套面板或片段来做到这一点。这是一个简单的面板示例： 然后创建嵌套您可以继续将一个面板嵌套在另一个面板中到“内部”标签中。最后，您将 WebMarkupContainer 添加到内部标签中，并将其他所有内容添加到该标签中。

啊啊啊——好吧——我没想到。谢谢，我会拍的。不过，这似乎有点不必要。

是的。这是radiogroup/radio设计的一个缺点。 radiogroup 不应该成为一个组件，而应该只是一个由 radios 引用的对象。在 1.6 版本中要重构的东西。

我听从了你的建议，谢谢。不幸的是，我现在在嵌套片段周围有相当多的代码气味。对我来说，改用下拉菜单可能更有意义，但至少我在这个过程中学到了一些东西。

【参考方案2】：

我尝试了一下，得出了这个简单的解决方案： 干杯，安德烈

JAVA代码：

RadioChoice<String> choice = new RadioChoice<>(
    "logger", new PropertyModel<>(model, "impl"), dao.getAvailableLoggers()
);
choice.setSuffix("\n");
form.add(choice);

检票标记代码：

<style type="text/css">
    .nowrap, .nowrap label 
        display: inline-block;
    
</style>

<div class="nowrap">
    <wicket:container wicket:id="logger">x</wicket:container>
</div>