Wicket, wie die Kopfzeile von Modal <T>

Question

aktualisieren Ich mache eine Seite mit Wicket. Die Hauptseite besteht aus einer Tabelle mit Rechnungsinformationen. In der letzten Spalte der Tabelle befindet sich eine Verknüpfung für jede Rechnung, die die vollständigen Informationen für diese Rechnung anzeigt, indem ein Modal geöffnet wird. Ich benutze de.agilecoders.wicket.core.markup.html.bootstrap.dialog.Modal

Mein Ziel ist, wenn ich das modale öffnen, zeigt die Kopfzeile des modalen die Rechnungsnummer der Rechnung, die geöffnet wurde .

Ich kann es erst nach dem Aktualisieren der Seite erhalten, und wenn ich das Modal einer anderen Rechnung öffne, wird die Kopfzeile nicht aktualisiert, es zeigt die Nummer der vorherigen Rechnung an. Ich muss die Seite erneut auffrischen.

Ich weiß nicht, wie man ein Modal öffnet, das in der Kopfzeile die Nummer der jeweiligen Rechnung anzeigt, ohne die Seite zu aktualisieren.

unter dem Markup der Hauptseite.

<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-Code der Hauptseite

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(); 
} 

} 

Markup der modalen

<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-Code des modalen

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

Das Problem besteht darin, dass Sie das Modellobjekt des leeren Modells verwenden, das Sie bei Modal Construction übergeben. Sie müssen dynamische Modelle für die Eigenschaften verwenden.

Statisch/einfaches Modell:

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

Hier wird das Etikett für jede Folge, daß die Namen der aktuellen Person verwenden.

Dynamisches Modell:

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

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

Sie sehen, dass die dynamische Version liest personModel Namen lazily und es wird bei jeder Wiedergabe des Etikett genannt. Auf diese Weise wird der Name der Person gelesen, auch wenn Sie eine neue Person in das Label-Modell einfügen.

In Ihrem Fall müssen Sie so etwas wie:

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

Für weitere Informationen lesen: https://cwiki.apache.org/confluence/display/WICKET/Working+with+Wicket+models