WICKET：控制组件在更改 CheckBox 时的可见性

Posted 2023-02-23

【中文标题】WICKET：控制组件在更改 CheckBox 时的可见性

【英文标题】：WICKET: Control visibility of components on change CheckBox

【发布时间】：2014-10-14 20:16:46

【问题描述】：

我正在使用检票口框架。 有谁知道如何通过单击复选框组件来控制表单中组件的可见性，以及如何在提交表单时获取复选框状态的布尔值（真或假，取决于选中与否）。 我想做这样的事情：

TextField nameField = new TextField("name");

public StateDB() 
final AjaxCheckBox searchByFio = new AjaxCheckBox("searchByFio", new PropertyModel(this, "checkBoxValue")) 
            @Override
            protected void onUpdate(AjaxRequestTarget target) 
                nameField.setVisible(checkBoxValue);
                target.add(nameField);
            
        ;

Form form = new Form("form");

nameField.setOutputMarkupPlaceholderTag ( true );
form.add(nameField);
add(form);

但结果不是我所期望的。它只是像这样更改 html 元素 来自：

<input type="text" wicket:id="lastName" id="lastName" required="" value="" name="lastName">

致：

<input id="lastName" style="display:none">

反之亦然

【问题讨论】：

我错了，wicket 只是改变了组件的样式。但是使用这种样式的用户无法在页面上看到您的文本字段。这是隐藏组件的正常行为。 Wicket 必须知道你的对象下次必须出现在哪里，所以它只是改变它的样式。但是如果你真的想出于某种原因删除输入，那么你必须用 WebMarkupContiner 包装它或用另一个组件替换它，比如 EmptyPanel。如果你愿意，我可以教你怎么做。

是的，如果您展示如何使用 WebMarkupContiner 包装器，那就太好了。我还没有将我想通过复选框控制其可见性的组件分离到另一种形式。并控制该表单的可见性。但我认为这是错误的方式

已更新我的答案。

【参考方案1】：

要通过单击复选框来更新任何组件的可见性，您可以使用“AjaxCheckBox”，例如：

//somewhere in the class create model variable:
boolean checkBoxValue = true;

//this is your hideable component
Label someComponent;

...
//and add PropertyModel for checkbox:
AjaxCheckBox checkBox = new AjaxCheckBox("checkBox", new PropertyModel(this, "checkBoxValue")) 
        @Override
        protected void onUpdate(AjaxRequestTarget target) 
                //if checkbox is checked, then our component is shown
                someComponent.setVisible(checkBoxValue);
                target.add(someComponent);
        
;

...
//this is your component to update
someComponent = new Label("someComponent", "some text");

//this method allows you to hide/show component with ajax updates.
someComponent.setOutputMarkupPlaceholderTag ( true );

要在提交后获得复选框值 - 您可以检查您的 checkBoxValue 值。

更新

实际上你可以重写你的可隐藏组件方法onConfigure() 来根据'checkBoxValue'设置它的可见性（这只是获得它的另一种方法，可能更受欢迎）：

   someComponent = new Label("someComponent", "some text")
   
       @Override
       protected void onConfigure() 
          setVisible ( checkBoxValue ); 
       
   ;

如果你这样做，那么你可以从AjaxCheckBox#onUpdate()方法中删除someComponent.setVisible(checkBoxValue);代码

更新 2

Component WebMarkupContainer 允许你包装一些组件。而当它隐藏时——那么它们就真的从标记中删除了。但是容器的标记无论如何都会以display:hidden 样式存在。

在某处创建容器：

WebMarkupContainer container = new WebMarkupContainer ( "cont" );
//we will hide this container, so we can replace  someComponent.setOutputMarkupPlaceholderTag ( true ); by this
container.setOutputMarkupPlaceholderTag ( true );

将容器添加到表单中：

form.add(container);

将我们的someComponent 添加到此容器中：

container.add(someComponent);

并在AjaxCheckBox#onUpdate() 方法中使用ajax 更新容器：

protected void onUpdate(AjaxRequestTarget target) 
    //if checkbox is checked, then our component is shown
    container.setVisible(checkBoxValue);
    target.add(container);

在 html 代码中是这样的

  <div wicket:id="cont">
      <input type="text" wicket:id="someComponent"/>
  </div>

您可以将任意数量的组件添加到此类容器中，并且可以使用它来管理它们。

【讨论】：

我尝试处理第一个示例，但没有得到预期的结果。结果是：当我点击复选框时，它只是改变了文本字段元素的样式

你做错了什么。我已经用 TextField 尝试了这个例子，它也可以工作。用您实现的代码更新您的问题。

这是我的荣幸。我已经评论了你的问题。

Wicket 的一大缺点是通常会在标签内放置一个复选框以使其正确显示，但 wicket 不允许您向标签添加任何组件。