使用 ajax 在不同的面板中刷新 listView

Question

大家好，我是 Wicket 的新手，我开始玩这个框架了。我知道这将是一个非常无用的例子，但我尝试用它来学习检票口基础知识。这是我的情况：

我得到一个页面 IndexPage.java 基本上由 2 个面板组成，第一个是 ListCheesePanel.java （它基本上显示了一个带有价格等的奶酪列表和一个用于将所选奶酪添加到购物车的按钮）第二个是 CartPanel.java 本质上是一个购物车中包含所有选定的奶酪，您可以继续结帐。

我基本上会使用 ajax 行为将列表中的奶酪添加到购物车：

ListCheesePanel.java

public abstract class ListCheesePanel extends GenericPanel<List<Cheese>>{

    private static final long serialVersionUID = 1L;

    public ListCheesePanel(String id,final IModel<List<Cheese>> listCheeseModel) {
        super(id,listCheeseModel);
        PageableListView<Cheese> cheeses = new PageableListView<Cheese>("cheeses", listCheeseModel, 4) {

            private static final long serialVersionUID = 1L;

            @Override
            protected void populateItem(final ListItem<Cheese> item) {

                Cheese cheese = (Cheese) item.getModelObject();
                item.addOrReplace(new Label("name", Model.of(cheese.getName())));
                item.addOrReplace(new Label("description", Model.of(cheese.getDescription())));
                item.addOrReplace(new Label("price", Model.of("$ " + cheese.getPrice())));
                item.addOrReplace(new AjaxFallbackLink<Cheese>("add",item.getModel()) {

                    private static final long serialVersionUID = 1L;

                    @Override
                    public void onClick(AjaxRequestTarget target) {
                        elementClicked(target, item.getModelObject());
                    }
                });
            }
        };
        addOrReplace(cheeses);
        addOrReplace(new PagingNavigator("navigator", cheeses));
    }

    protected abstract void elementClicked(AjaxRequestTarget target,Cheese cheese);
}

elementClicked 是一个必须覆盖的方法，以指示奶酪和目标。

CartPanel.java

public abstract class CartPanel extends GenericPanel<Cart>{

    private static final long serialVersionUID = 1L;

    private WebMarkupContainer cartContainer;
    private ListView<Cheese> cheesesList;   
    private Link<Cart> checkOutLink;
    private boolean checkOutButtonVisibility;

    public CartPanel(String id,final IModel<Cart> cartModel,final boolean checkOutButtonVisibility) {
        super(id,cartModel);
        this.checkOutButtonVisibility=checkOutButtonVisibility;
        cartContainer = new WebMarkupContainer("cartContainer");
        cartContainer.setOutputMarkupId(true);
        addOrReplace(cartContainer);
        cheesesList = new ListView<Cheese>("cart" , getModelObject().getCheeses()){

            private static final long serialVersionUID = 1L;

            @Override
            protected void populateItem(final ListItem<Cheese> item) {
                Cheese cheese = item.getModelObject();
                item.addOrReplace(new Label("name",cheese.getName()));
                item.addOrReplace(new Label("price",cheese.getPrice()));
                item.addOrReplace(new Link<Cheese>("remove",item.getModel()) {

                    private static final long serialVersionUID = 1L;

                    @Override
                    public void onClick() {
                        removeElement(item.getModelObject());
                    }
                });
            }
        };

        cheesesList.setOutputMarkupId(true);        
        cartContainer.addOrReplace(cheesesList);
        cartContainer.addOrReplace(new Label("total",new PropertyModel<Long>(cartModel.getObject(), "total")));

        checkOutLink = new Link<Cart>("checkOut",getModel()){

            private static final long serialVersionUID = 1L;

            @Override
            public void onClick() {
                setResponsePage(new CheckOutPage(getModel()));
            }

            @Override
            protected void onConfigure() {
                super.onConfigure();
                Cart cart = cartModel.getObject();
                List<Cheese> cheeseList = cart.getCheeses();
                setVisible(isCheckOutButtonVisibility() && !cheeseList.isEmpty());
            }

       };    

       addOrReplace(checkOutLink);
    }

    protected abstract void removeElement(Cheese modelObject);

    /* Getters and Setters */

    public boolean isCheckOutButtonVisibility() {
        return checkOutButtonVisibility;
    }
}

IndePage.java

public class IndexPage extends CheeseTemplate {

    private static final long serialVersionUID = 1L;
    private static List<Cheese> cheeses = Arrays.asList(
            new Cheese("Gouda", "Gouda is a yellowish Dutch[...]", 1.65),
            new Cheese("Edam", "Edam (Dutch Edammer) is a D[...]", 1.05),
            new Cheese("Maasdam", "Maasdam cheese is a Dutc[...]", 2.35),
            new Cheese("Brie", "Brie is a soft cows' milk c[...]", 3.15),
            new Cheese("Buxton Blue", "Buxton Blue cheese i[...]", 0.99),
            new Cheese("Parmesan", "Parmesan is a grana, a [...]", 1.99),
            new Cheese("Cheddar", "Cheddar cheese is a hard[...]", 2.95),
            new Cheese("Roquefort", "Roquefort is a ewe's-m[...]", 1.67),
            new Cheese("Boursin", "Boursin Cheese is a soft[...]", 1.33),
            new Cheese("Camembert", "Camembert is a soft, c[...]", 1.69),
            new Cheese("Emmental", "Emmental is a yellow, m[...]", 2.39),
            new Cheese("Reblochon", "Reblochon is a French [...]", 2.99));

    private IModel<List<Cheese>> allCheeseListModel;
    private IModel<Cart> cartModel;
    private Cart cart;

    public IndexPage() {
        super();
        allCheeseListModel = new ListModel<Cheese>(cheeses);
        cart=new Cart();
        cartModel = new Model<Cart>(cart);
    }

    public IndexPage(IModel<Cart> cartModel) {
        super();
        allCheeseListModel = new ListModel<Cheese>(cheeses);
        this.cartModel=cartModel;
    }

    @Override
    public Component getMainPanel() {
        System.out.println("getMainPanel started");

        return new ListCheesePanel(MAIN_PANEL_WICKET_ID,allCheeseListModel){

            private static final long serialVersionUID = 1L;

            @Override
            protected void elementClicked(AjaxRequestTarget target,Cheese cheese) {
                Cart cart = cartModel.getObject();
                cart.getCheeses().add(cheese);
                target.add(?????); // How can i get the cart container to update????
            }
        };
    }

    @Override
    public Component getRightMenuPanel() {
        CartPanel cartPanel = new CartPanel(RIGHT_MENU_PANEL_WICKET_ID,cartModel,true) {

            private static final long serialVersionUID = 1L;

            @Override
            protected void removeElement(Cheese cheese) {
                Cart cart = cartModel.getObject(); 
                cart.getCheeses().remove(cheese);
            }
        };
        cartPanel.setOutputMarkupId(true);
        return cartPanel;
    }

}

我的问题是：

如果这个组件位于另一个面板??

提前致谢

Answer 1

我真正喜欢做的是处理事件。

我这样定义全局 AjaxUpdateEvent：

AjaxUpdateEvent

public class AjaxUpdateEvent
{
    public AjaxRequestTarget target;

    public AjaxUpdateEvent( AjaxRequestTarget target )
    {
        this.target = target;

    }

    public AjaxRequestTarget getTarget()
    {
        return this.target;
    }

}

然后，我将我感兴趣的事件子类化，例如 CheeseAddedEvent extends AjaxUpdateEvent

然后，添加奶酪时需要做某事的所有组件都有 onEvent()

OnEvent

@Override
public void onEvent( IEvent<?> event )
{
    Object payload = event.getPayload();

    @SuppressWarnings( "rawtypes" )
    Class clazz = payload.getClass();

    //or use isAssignableFrom() or instanceof or any method you like
    if ( CheeseAddedEvent.class.equals( clazz ) )
    {
        CheeseAddedEvent e = ( (CheeseAddedEvent) payload );
        e.target.add( this );
    }
    super.onEvent(event);
}

用法

....
public void onClick(AjaxRequestTarget target)
{
    this.send( this.getPage(), Broadcast.BREADTH, new CheeseAddedEvent( target ) );
}
....

使用 ajax 在不同的面板中刷新 listView

wicket refresh listView in different panel using ajax

java

ajax

listview

wicket

panel

AjaxUpdateEvent

OnEvent

用法