如何使用Wicket正确建模子面板?(How do I model subpanels correctly using Wicket?)

编程入门 行业动态 更新时间:2024-10-22 18:46:04
如何使用Wicket正确建模子面板?(How do I model subpanels correctly using Wicket?)

我有一个面板(见下面的BasePanel),它有一个项目列表和一个“动作”栏,其中放置按钮。 单击这些按钮可以通过模型更改列表中的项目。

现在我想要相同的面板,但使用稍微不同的按钮(请参阅下面的CustomPanelA和CustomPanelB)。 我有三个面板按钮的配置。

我该如何建模呢? 我以为使用wicket:child但由于按钮位于另一个无法使用的wicket组件内。

BasePanel.java

class BasePanel extends Panel { public BasePanel(String id) { super(id); // note: I need this container for refreshing using AJAX WebMarkupContainer outer = new WebMarkupContainer("outerContainer"); outer.setOutputMarkupId(true); add(outer); // ... create listview outer.add(new ListView("items") { /* implementation of listview */ }; // This container is necessary to show/hide the buttons WebMarkupContainer actionbar = new WebMarkupContainer("outerContainer"); actionbar.setOutputMarkupId(true); // ... create default buttons actionbar.add(new Link("add") { /* implementation of link */ ); } }

BasePanel.html

<html> <wicket:panel> <div wicket:id="outerContainer"> <div wicket:id="actionbar" > <a wicket:id="add">Add</a> </div> <div wicket:id="items"> <!-- ... markup for items is here --> </div> </div> </wicket:panel> </html>

CustomPanelA.java

class CustomPanelA extends BasePanel { public CustomPanelA (String id) { super(id); // add additional buttons only actionbar.add(new Link("actionA1") { /* implementation of link */ ); actionbar.add(new Link("actionA2") { /* implementation of link */ ); } }

CustomPanelA.html

<html> <wicket:extend> <a wicket:id="actionA1">ActionA1</a> <a wicket:id="actionA2">ActionA2</a> </wicket:extend> </html>

CustomPanelB.java

class CustomPanelB extends BasePanel { public CustomPanelB (String id) { super(id); // add additional buttons only actionbar.add(new Link("action_b1") { /* implementation of link */ ); actionbar.add(new Link("action_b2") { /* implementation of link */ ); } }

CustomPanelB.html

<html> <wicket:extend> <a wicket:id="action_b1">Action b1</a> <a wicket:id="action_b2">Action b2</a> </wicket:extend> </html>

I have a panel (see BasePanel below) that has a list of items and an "action"-bar where buttons are placed. Clicking these buttons makes changes to the items in the list via models.

Now I want the same panel but with slightly different buttons (see CustomPanelA and CustomPanelB below). I have about three configurations for the buttons in the panel.

How can I model this? I thought to use wicket:child but since the buttons are inside another wicket component that did not work.

BasePanel.java

class BasePanel extends Panel { public BasePanel(String id) { super(id); // note: I need this container for refreshing using AJAX WebMarkupContainer outer = new WebMarkupContainer("outerContainer"); outer.setOutputMarkupId(true); add(outer); // ... create listview outer.add(new ListView("items") { /* implementation of listview */ }; // This container is necessary to show/hide the buttons WebMarkupContainer actionbar = new WebMarkupContainer("outerContainer"); actionbar.setOutputMarkupId(true); // ... create default buttons actionbar.add(new Link("add") { /* implementation of link */ ); } }

BasePanel.html

<html> <wicket:panel> <div wicket:id="outerContainer"> <div wicket:id="actionbar" > <a wicket:id="add">Add</a> </div> <div wicket:id="items"> <!-- ... markup for items is here --> </div> </div> </wicket:panel> </html>

CustomPanelA.java

class CustomPanelA extends BasePanel { public CustomPanelA (String id) { super(id); // add additional buttons only actionbar.add(new Link("actionA1") { /* implementation of link */ ); actionbar.add(new Link("actionA2") { /* implementation of link */ ); } }

CustomPanelA.html

<html> <wicket:extend> <a wicket:id="actionA1">ActionA1</a> <a wicket:id="actionA2">ActionA2</a> </wicket:extend> </html>

CustomPanelB.java

class CustomPanelB extends BasePanel { public CustomPanelB (String id) { super(id); // add additional buttons only actionbar.add(new Link("action_b1") { /* implementation of link */ ); actionbar.add(new Link("action_b2") { /* implementation of link */ ); } }

CustomPanelB.html

<html> <wicket:extend> <a wicket:id="action_b1">Action b1</a> <a wicket:id="action_b2">Action b2</a> </wicket:extend> </html>

最满意答案

您的问题有很多解决方案。 我会告诉你其中的一个。

正如你提到<wicket:child/> -based的方法,那么我会根据它做出我的决定。 你的BasePanel将是抽象类,除了动作链接之外,它将包含已经在其中的所有组件。 它将提供一个抽象方法,例如addActionLinks :

class abstract BasePanel extends Panel { public BasePanel(String id) { super(id); //...your code. WebMarkupContainer actionBar = ...; //call this abstract method to add links in actionBar. addActionLinks( actionBar ); } public abstract void addActionLinks( WebMarkupContainer container ); }

HTML:

<wicket:panel>
    ...
     <div wicket:id="actionbar" >
        <wicket:child/>
     </div>
    ...
</wicket:panel>
 

对于其他面板,您只需实现addActionLinks方法:

class CustomPanelA extends BasePanel { public CustomPanelA (String id) { super(id); } protected void addChildren ( WebMarkupContainer container ) { actionbar.add(new Link("actionA1") { /* implementation of link */ ); actionbar.add(new Link("actionA2") { /* implementation of link */ ); } }

和HTML:

<wicket:extend>
    <a wicket:id="actionA1">ActionA1</a>
    <a wicket:id="actionA2">ActionA2</a>
</wicket:extend>
 

当然,您需要使用BasePanel操作链接来实现另一个面板,并从我的实现中移除(例如,创建DefaultBasePanel类)。

此外,您可以在BasePanel为操作链接创建另一个ListView ,并从一个方法中获取它们,并由子类重写。

此外,也许,使用片段也可以解决您的问题。 你可以在这里看到更多关于片段的信息。

我认为,还有更多的方法,但出于某种原因,我想到了这个问题。 希望这可以帮助。

There are plenty of solutions of your issue. I will show you one of them.

As you mentioned <wicket:child/>-based approach, then I will build my decision on it. Your BasePanel will be abstract class, which will hold all your components that already in it, except action links. It will provide one abstract method, called, for example addActionLinks:

class abstract BasePanel extends Panel { public BasePanel(String id) { super(id); //...your code. WebMarkupContainer actionBar = ...; //call this abstract method to add links in actionBar. addActionLinks( actionBar ); } public abstract void addActionLinks( WebMarkupContainer container ); }

HTML:

<wicket:panel>
    ...
     <div wicket:id="actionbar" >
        <wicket:child/>
     </div>
    ...
</wicket:panel>
 

And for other panels you just implement addActionLinks method:

class CustomPanelA extends BasePanel { public CustomPanelA (String id) { super(id); } protected void addChildren ( WebMarkupContainer container ) { actionbar.add(new Link("actionA1") { /* implementation of link */ ); actionbar.add(new Link("actionA2") { /* implementation of link */ ); } }

And HTML:

<wicket:extend>
    <a wicket:id="actionA1">ActionA1</a>
    <a wicket:id="actionA2">ActionA2</a>
</wicket:extend>
 

Of course you need to implement another panel with your BasePanel action link, removed from my implementation (create DefaultBasePanel class for example).

Also, you can create another ListView for action links in your BasePanel and also fetch them from one method, overriden by subclasses.

Also, maybe, using fragments could solve your issue too. You can look here to learn more about fragments.

I think, that there are more approaches, but for some reason this one came to my mind. Hope this helps.

更多推荐

本文发布于:2023-08-01 04:53:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1353863.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:建模   如何使用   面板   正确   Wicket

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!