1

我正在尝试创建一个链接来隐藏或显示我的页面的一部分。该链接应该是可重复使用的，并根据状态显示两个图像之一。

在我使用链接的每个页面上添加两个子组件有点笨拙，所以我想创建一个行为类似于链接的组件，同时自动添加其内容。

这是链接组件：

public class ToggleVisibilityLink extends AjaxFallbackLink<Boolean>
{
  public ToggleVisibilityLink(final String id, final IModel<Boolean> model)
  {
    super(id, model);

    setOutputMarkupId(true);

    add(new Image("collapseImage")
    {
      @Override
      public boolean isVisible()
      {
        return !getModelObject();
      }
    });
    add(new Image("expandImage")
    {
      @Override
      public boolean isVisible()
      {
        return getModelObject();
      }
    });
  }

  @Override
  public void onClick(final AjaxRequestTarget target)
  {
    setModelObject(!getModelObject());
    if (target != null)
    {
      target.add(this);
      send(this.getParent(), Broadcast.EXACT, target);
    }
  }
}

这就是我目前在 HTML 中使用它的方式（这被添加到我使用链接的页面或面板中）：

<a href="#" wicket:id="collapseExpandLink" class="collapseExpandLink">
  <wicket:link>
    <img src="collapse.png" wicket:id="collapseImage" class="collapseExpandImage collapse">
  </wicket:link>
  <wicket:link>
    <img src="expand.png" wicket:id="expandImage" class="collapseExpandImage expand">
  </wicket:link>
</a>

以及相应的 Java 调用：

add(new ToggleVisibilityLink("collapseExpandLink", new PropertyModel(this, "hidden")));

但我希望能够跳过链接内的正文，因为必须了解 ToggleVisibilityLink 的内部结构。我尝试了 IMarkupResourceStreamProvider，使用Wicket 中的动态标记作为起点。通过谷歌搜索，我发现了另一个例子，海报只能在使用 Panel时让它工作，我也能做到这一点。但我真的很想保留链接而不是将其打包在面板中，因为我无法在标记中设置链接的样式。

我也对封装链接及其正文的替代方案持开放态度。

4

1 回答 1

1

我能够使用 setBody() 让它工作，即使我试图严重破坏自己（我有重复的库、我自己的不兼容的 jQuery 库导入和自定义资源版本控制策略）。

这是当前的 ToggleVisibilityLink：

public class ToggleVisibilityLink extends AjaxFallbackLink<Boolean>
{
  static {
    Application.get().getSharedResources().add("ToggleVisibilityLinkCollapse",
                                               new MyPackageResource(ToggleVisibilityLink.class, "collapse.png"));
    Application.get().getSharedResources().add("ToggleVisibilityLinkExpand",
                                               new MyPackageResource(ToggleVisibilityLink.class, "expand.png"));
  }

  public ToggleVisibilityLink(final String id, final IModel<Boolean> model)
  {
    super(id, model);

    setOutputMarkupId(true);
    setEscapeModelStrings(false);

    setBody(new BodyModel(model));
  }

  @Override
  public void onClick(final AjaxRequestTarget target)
  {
    setModelObject(!getModelObject());
    if (target != null)
    {
      target.add(this);
      send(this.getParent(), Broadcast.EXACT, target);
    }
  }

  private static final class BodyModel extends AbstractReadOnlyModel<String>
  {
    private final IModel<Boolean> model;

    private BodyModel(final IModel<Boolean> model)
    {
      this.model = model;
    }

    @Override
    public String getObject()
    {
      return this.model.getObject() ?
              "<img src=\""
            + RequestCycle.get().urlFor(new SharedResourceReference("ToggleVisibilityLinkExpand"), null)
            + "\" class=\"collapseExpandImage expand\">"
              :
              "<img src=\""
            + RequestCycle.get().urlFor(new SharedResourceReference("ToggleVisibilityLinkCollapse"), null)
            + "\" class=\"collapseExpandImage collapse\">";
    }
  }
}

（为什么该构造函数受保护？）MyPackageResource的简单实现在哪里。PackageResource

然后可以简单地将其添加ToggleVisibilityLink到容器中：

super.add(new ToggleVisibilityLink("collapseExpandLink", new PropertyModel(this, "hidden")));

和

<a wicket:id="collapseExpandLink" class="collapseExpandLink"></a>

并在单击链接时通过事件获得通知。

于 2012-11-01T12:52:57.677 回答