wicket控件的隐藏和显示

 在一个项目，页面经常要显示和隐藏一些控件，用wicket来控制显示和隐藏控件相当的方便。

1、最简单的隐藏和显示方法:

wicket的控件大部分都有setVisible(...)方法，用这个方法就可以隐藏和显示大部分的控件。

如
view plaincopy to clipboardprint?
Button addSpNumButton = new Button("addSpNum") {  
            @Override 
            public void onSubmit() {  
                addEntSpNumPanel.setVisible(true);  
                showSpNumUsePanel.setVisible(false);  
                this.setVisible(false);//隐藏控件本身  
            }  
        }; 
Button addSpNumButton = new Button("addSpNum") {
   @Override
   public void onSubmit() {
    addEntSpNumPanel.setVisible(true);
    showSpNumUsePanel.setVisible(false);
    this.setVisible(false);//隐藏控件本身
   }
  };

2、通过ajax方式隐藏控件

这个可以说wicket一个做的不大好的地方。通过ajax方式隐藏控件要分两种情况分析。
 （1）隐藏单一控件：

如果只是要隐藏一个控件，就比较容易做，比如，通过下拉框的ajax方式隐藏一个下拉框控件:

 

actTypeChoice是一个下拉框控件，当控件的值改变时，触发onUpdate(..)事件。在这里也要注意，target.addComponent(dataGroupChoice)中的控件dataGroupChoice必须设置一个属性才能正常隐藏显示，否则会报异常。属性如下：

  view plaincopy to clipboardprint?
dataGroupChoice.setOutputMarkupId(true); 
dataGroupChoice.setOutputMarkupId(true); 

（2）隐藏一个以上的控件

如果你要隐藏一个以上的控件，比如要隐藏一个表格，那么就最好把这个表格放在一个WebMarkupContainer里面，这样隐藏的时候只要控制这个WebMarkupContainer控件就可以了。看例子：
view plaincopy to clipboardprint?
<span wicket:id="addEntSpNumPar"> 
<span wicket:id="addEntSpNum"> 
        <table cellspacing="0" cellpadding="0" width="100%"> 
          <tr> 
            <th align="right" style="width: 60px;">测试: </th> 
            <td style="width: 60%"> 
              <input type="text" wicket:id="spNum"/> 
            </td> 
          </tr> 
          <tr> 
            <th align="right" style="width: 60px;">测试2: </th> 
            <td style="width: 60%"> 
              <input type="text" wicket:id="spNum2"/> 
            </td> 
          </tr> 
        </table> 
</span> 
</span> 
<span wicket:id="addEntSpNumPar">
<span wicket:id="addEntSpNum">
        <table cellspacing="0" cellpadding="0" width="100%">
          <tr>
            <th align="right" style="width: 60px;">测试: </th>
            <td style="width: 60%">
              <input type="text" wicket:id="spNum"/>
            </td>
          </tr>
          <tr>
            <th align="right" style="width: 60px;">测试2: </th>
            <td style="width: 60%">
              <input type="text" wicket:id="spNum2"/>
            </td>
          </tr>
        </table>
</span>
</span>

view plaincopy to clipboardprint?
WebMarkupContainer addEntSpNumPanelPar = new WebMarkupContainer("addEntSpNumPar");  
WebMarkupContainer addEntSpNumPanel = new WebMarkupContainer("addEntSpNum");  
addEntSpNumPanel.setOutputMarkupId(true);  
addEntSpNumPanelPar.add(addEntSpNumPanel);  
TextField spNumText = new TextField("spNum", new Model());  
addEntSpNumPanel.add(spNumText);  
TextField spNumText2 = new TextField("spNum2", new Model());  
addEntSpNumPanel.add(spNumText2); 
WebMarkupContainer addEntSpNumPanelPar = new WebMarkupContainer("addEntSpNumPar");
WebMarkupContainer addEntSpNumPanel = new WebMarkupContainer("addEntSpNum");
addEntSpNumPanel.setOutputMarkupId(true);
addEntSpNumPanelPar.add(addEntSpNumPanel);
TextField spNumText = new TextField("spNum", new Model());
addEntSpNumPanel.add(spNumText);
TextField spNumText2 = new TextField("spNum2", new Model());
addEntSpNumPanel.add(spNumText2);

改变事件：

view plaincopy to clipboardprint?
actTypeChoice.add(new AjaxFormComponentUpdatingBehavior("onchange") {  
    @Override 
    protected void onUpdate(AjaxRequestTarget target) {  
        addEntSpNumPanel.setVisible(false);  
        target.addComponent(addEntSpNumPanelPar);  
    }