wicket 如何更新 modal<T> 的 header

Question

我正在使用 wicket 创建一个页面。主页由一个显示发票信息的 table 组成。在 table 的最后一列中，每张发票都有一个 link，通过打开模式显示该发票的完整信息。我正在使用 de.agilecoders.wicket.core.markup.html.bootstrap.dialog.Modal

我的目标是当我打开模态时，模态的 header 显示打开的发票的发票编号。

我只能在刷新页面后才能得到它，如果我打开另一张发票的模式，header 不会更新，它会显示上一张发票的编号。我必须重新刷新页面。

我不知道如何在不刷新页面的情况下打开在 header 中显示相应发票编号的模式。

在主页的标记下方。

<wicket:extend>
        <div class="page-header">
            <h2>
                <wicket:message key="invoices-welcome">[Welcome message]</wicket:message>
            </h2>
        </div>
        <div>
            <span wicket:id="navigator">[dataview navigator]</span>
        </div>
        <div>
            <table cellspacing="0" class="table table-condensed">
                <tr>
                    <th>Status</th>
                    <th>Invoice number</th>
                    <th>Supplier</th>
                    <th>Customer</th>
                    <th>Amount</th>
                    <th>Actions</th>
                </tr>
                <tr wicket:id="rows">
                    <td><span wicket:id="status">[status]</span></td>
                    <td><span wicket:id="invoiceN">[invoiceN]</span></td>
                    <td><span wicket:id="supplier">[supplier]</span></td>
                    <td><span wicket:id="customer">[customer]</span></td>
                    <td><span wicket:id="amount">[amount]</span></td>
                    <td><a wicket:id="showModal">View</a></td> 
                </tr>
            </table>
        </div>
        <div wicket:id="modal"></div>
    </wicket:extend>

Java主页代码

package nl.riskco.liberobc.web.pages.invoices;

import java.util.List;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.AjaxLink;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.navigation.paging.PagingNavigator;
import org.apache.wicket.markup.repeater.Item;
import org.apache.wicket.markup.repeater.data.DataView;
import org.apache.wicket.markup.repeater.data.ListDataProvider;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.Model;
import org.apache.wicket.request.mapper.parameter.PageParameters;

import nl.riskco.liberobc.client.business.model.InvoiceDomain;
import nl.riskco.liberobc.client.business.services.IInvoiceService;
import nl.riskco.liberobc.client.business.services.InvoiceServiceMocked;
import nl.riskco.liberobc.web.pages.BasePage;

//@AuthorizeInstantiation("VIEWER")
public class InvoicesPage extends BasePage {
   private static final long serialVersionUID = 1L;
   private InvoiceModalAgile modal2;

   public InvoicesPage(PageParameters parameters) {
    super(parameters);

    IInvoiceService service = new InvoiceServiceMocked();
    List<InvoiceDomain> invoicesToTest2;
    invoicesToTest2 =service.getInvoices(1, 30);

    modal2 = new InvoiceModalAgile("modal", Model.of(new InvoiceDomain()));
    modal2.addCloseButton();
    modal2.setOutputMarkupId(true);
    add(modal2);

    DataView<InvoiceDomain> dataview = new DataView<InvoiceDomain>("rows",
            new ListDataProvider<InvoiceDomain>(invoicesToTest2)) {

        private static final long serialVersionUID = 1L;

        @Override
        protected void populateItem(Item<InvoiceDomain> item) {

            // TODO Auto-generated method stub
            InvoiceDomain invoice = item.getModelObject();

            item.add(new Label("status", invoice.getStatus()));
            item.add(new Label("invoiceN", String.valueOf(invoice.getInvoiceGUID())));
            item.add(new Label("supplier", invoice.getSupplier()));
            item.add(new Label("customer", invoice.getCustomer()));
            item.add(new Label("amount", String.valueOf(invoice.getAmount())));

            item.add(new AjaxLink("showModal") {
                private static final long serialVersionUID = 1L;

                @Override
                public void onClick(AjaxRequestTarget target) {
                    modal2.setInvoiceModel(Model.of(invoice), target);
                    modal2.show(target);
                }
            }); 
        }
    };

    dataview.setItemsPerPage(10L);
    add(dataview);
    add(new PagingNavigator("navigator", dataview));
}

@Override
protected void onDetach() {
    // TODO Auto-generated method stub
    super.onDetach();
}

}

模态标记

<wicket:extend>
<div class="panel panel-default">
  <div class="panel-heading">Invoice details</div>
     <div class="panel-body">
        <table class="table table-bordered">
            <tr>
                <th><wicket:message key="invoice-id">[invoice-id]</wicket:message></th>
                <td><div wicket:id="invoiceN"></div></td>
            </tr>
            <tr>
                <th><wicket:message key="invoice-status">[invoice-status]</wicket:message></th>
                <td><div wicket:id="status"></div></td>
            </tr> 
            <tr>
                <th><wicket:message key="invoice-customer">[invoice-customer]</wicket:message></th>
                <td><div wicket:id="customer"></div></td>               
            </tr>
            <tr>
                <th><wicket:message key="invoice-supplier">[invoice-supplier]</wicket:message></th>
                <td><div wicket:id="supplier"></div></td>
            </tr>
            <tr>
                <th><wicket:message key="invoice-ibanSupplier">[invoice-ibanSupplier]</wicket:message></th>
                <td><div wicket:id="iban"></div></td>
            </tr>
            <tr>
                <th><wicket:message key="invoice-amount">[invoice-amount]</wicket:message></th>
                <td><div wicket:id="amount"></div></td>
            </tr>
            <tr>
                <th>Approved</th>
                <td><form wicket:id="form"><input type="checkbox"  wicket:id="checkbox1"></form></td>
            </tr>
            <tr>
                <th>Early payment</th>
                <td><form wicket:id="form2"><input type="checkbox"  wicket:id="checkbox2"></form></td>
            </tr>
            <tr>
                <th>Paid (by customer)</th>
                <td><form wicket:id="form3"><input type="checkbox"  wicket:id="checkbox3"></form></td>
            </tr>
        </table>
   </div>
 </div>
</wicket:extend>

Java模态代码

package nl.riskco.liberobc.web.pages.invoices;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.CheckBox;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.Model;
import org.apache.wicket.model.StringResourceModel;

import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.BootstrapResourcesBehavior;
import de.agilecoders.wicket.core.markup.html.bootstrap.dialog.Modal;
import nl.riskco.liberobc.client.business.model.InvoiceDomain;


public class InvoiceModalAgile extends Modal<InvoiceDomain>{

private static final long serialVersionUID = 1L;
private Label labelGuid;
private Label status;
private Label customer;
private Label iban;
private Label amountLabel;
private Label supplierLabel;
private CheckBox approved;
private CheckBox earlyPayment;
private CheckBox customerPaid;
private Form form;
private Form form2;
private Form form3;
private WebMarkupContainer header;
private WebMarkupContainer footer;

public InvoiceModalAgile(String id , IModel<InvoiceDomain> model) {
    super(id, model);

    add(form = new Form<>("form"));
    add(form2 = new Form<>("form2"));
    add(form3 = new Form<>("form3"));

    status = (new Label("status",model.getObject().getStatus()));
    status.setOutputMarkupId(true);
    add(status);

    supplierLabel = (new Label("supplier",model.getObject().getSupplier()));
    supplierLabel.setOutputMarkupId(true);
    add(supplierLabel);


    labelGuid = new Label("invoiceN",model.getObject().getInvoiceGUID());
    labelGuid.setOutputMarkupId(true);
    add(labelGuid);

    customer = (new Label("customer",model.getObject().getCustomer()));
    customer.setOutputMarkupId(true);
    add(customer);

    iban = new Label("iban",model.getObject().getIBANsupplier());
    iban.setOutputMarkupId(true);
    add(iban);

    amountLabel = new Label("amount",model.getObject().getAmount());
    amountLabel.setOutputMarkupId(true);
    add(amountLabel);

    approved = new CheckBox("checkbox1");
    approved.setOutputMarkupId(true);
    approved.setEnabled(false);
    add(approved);
    form.setOutputMarkupId(true);
    add(form);
    form.add(approved);

    earlyPayment = new CheckBox("checkbox2");
    earlyPayment.setOutputMarkupId(true);
    earlyPayment.setEnabled(false);
    add(earlyPayment);
    form2.setOutputMarkupId(true);
    add(form2);
    form2.add(earlyPayment);

    customerPaid = new CheckBox("checkbox3");
    customerPaid.setOutputMarkupId(true);
    customerPaid.setEnabled(false);
    add(customerPaid);
    form3.setOutputMarkupId(true);
    add(form3);
    form3.add(customerPaid);

    BootstrapResourcesBehavior.addTo(this);
}


public void setInvoiceModel(IModel<InvoiceDomain> invoice, AjaxRequestTarget target){


this.labelGuid.setDefaultModel(Model.of(invoice.getObject().getInvoiceGUID()));
target.add(labelGuid);

this.amountLabel.setDefaultModel(Model.of(invoice.getObject().getAmount()));
target.add(amountLabel);

this.status.setDefaultModel(Model.of(invoice.getObject().getStatus()));
target.add(status);

this.customer.setDefaultModel(Model.of(invoice.getObject().getCustomer()));
target.add(customer);

this.supplierLabel.setDefaultModel(Model.of(invoice.getObject().getSupplier()));
target.add(supplierLabel);

this.iban.setDefaultModel(Model.of(invoice.getObject().getIBANsupplier()));
target.add(iban);

this.approved.setDefaultModel(Model.of(invoice.getObject().getApprovedFlag()));
target.add(approved);
this.earlyPayment.setDefaultModel(Model.of(invoice.getObject().getOptForEarlyPaymentFlag()));
target.add(earlyPayment);
this.customerPaid.setDefaultModel(Model.of(invoice.getObject().getHasCustomerPaidFlag()));
target.add(customerPaid);

this.header(Model.of(String.valueOf(invoice.getObject().getInvoiceGUID())));
}

@Override
protected void onDetach() {
   // TODO Auto-generated method stub
   super.onDetach();
}

}

Answer 1

问题是您使用了在 Modal 构造时传递的空模型的模型对象。您需要为属性使用动态模型。

Static/simple 型号：

label = new Label("staticValue", personModel.getObject().getName());

这里标签每次渲染都会使用当前人物的名字

动态模型：

label = new Label("staticValue", new AbstractReadOnlyModel<String>() {

   @Override public String getObject() { 
      return personModel.getObject().getName());
   }
}

您看到动态版本懒惰地读取 personModel 的名称，并在每次呈现 Label 时调用它。这样，即使您将新的人物放入标签的模型中，它也会读取人物的姓名。

在你的情况下，你需要这样的东西：

status = new Label("status", new PropertyModel(this, "model.object.status"));

阅读更多信息：https://cwiki.apache.org/confluence/display/WICKET/Working+with+Wicket+models

wicket 如何更新 modal<T> 的 header

wicket how to update the header of modal<T>

ajax

wicket

header