如何使 AjaxLazyLoadPanel 的忙碌指示器居中

Question

我有一个连续显示 3 个不同面板的模式（与用户的选择一致）。

此模式的第二个面板是 AjaxLazyLoadPanel，当它出现时，它是左对齐的，而不是居中对齐的，如下图所示。 Modal showing the busy indicator 1 如何让忙碌指示器居中？

下面是模态

的class

 public class DetailsModal2 extends Modal<IModel<PaymentDomain>> {

  @SpringBean
  private IService service;

  private Component noButton;
  private Component yesButton;
  private Component noButton;
  private String paymentId;
  private Panel replacedPanel;
  private IModel<PaymentDomain> model;

  public DetailsModal2(String id, IModel<PaymentDomain> model, String party) 
  {
   super(id);
   this.party = party;
   this.model = model;
   this.paymentId = model.getObject().getPaymentGUID();

   replacedPanel = new AreYouSure("replacedPanel");
   replacedPanel = panel1;
   replacedPanel.setOutputMarkupId(true);
   add(replacedPanel);


   addButton(yesButton = new BootstrapAjaxLink<String>("button", null, Buttons.Type.Warning, new ResourceModel("details")) {

private static final long serialVersionUID = 1L;

@Override
public void onClick(AjaxRequestTarget target) {

    addNewPanel(new AjaxLazyLoadPanel("replacedPanel") {
        @Override
        public Component getLazyLoadComponent(String markupId) {
            if (!condition)) {

                message = service.getPayment(paymentId);

                if (message == null) {
                    return new VotingResultPanel(markupId, true);
                } else 
                {
                    return new VotingResultPanel(markupId, false);
                }
            } // close if

            else if (condition)) {

                message = service.setPayment(paymentId);
                if (message == null) {
                    return new VotingResultPanel(markupId, true);

                } else {
                    System.out.println("" + message.getError());
                    return new VotingResultPanel(markupId, false);
                }
            }

            else {
                System.out.println("error");
            }
        }
    }, target);

    this.setOutputMarkupPlaceholderTag(true);
    this.setVisible(false);
    noButton.setOutputMarkupPlaceholderTag(true);
    noButton.setVisible(false);
    closeButton.setVisible(true);
    target.add(this, noButton, closeButton);
  }

  });

   noButton = new BootstrapAjaxLink<String>("button", null, Buttons.Type.Primary) {
private static final long serialVersionUID = 1L;

@Override
public void onClick(AjaxRequestTarget target){
    close(target);
}
}.setLabel(Model.of("No"));
addButton(noButton);

}

closeButton = new BootstrapAjaxLink<String>("button", null, 
Buttons.Type.Primary) {
    private static final long serialVersionUID = 1L;

    @Override
    public void onClick(AjaxRequestTarget target){
        addNewPanel(panel1,target);
        yesButton.setOutputMarkupId(true);
        yesButton.setVisible(true);
        noButton.setOutputMarkupId(true);
        noButton.setVisible(true);
        closeButton.setOutputMarkupId(true);
        closeButton.setOutputMarkupPlaceholderTag(true);
        closeButton.setVisible(false);
        target.add(yesButton,noButton,closeButton);
        close(target);

    }
}.setLabel(Model.of("Close"));
closeButton.setOutputMarkupPlaceholderTag(true);
closeButton.setVisible(false);
addButton(closeButton);
}


 public void addNewPanel(Panel addpanel, AjaxRequestTarget target) {
 Panel newPanel = null;
 newPanel = addpanel;
 newPanel.setOutputMarkupId(true);
 replacedPanel.replaceWith(newPanel);
 target.add(newPanel);
 replacedPanel = newPanel;
}
}// close class

Answer 1

看看方法AjaxLazyLoadPanel.getLoadingComponent(String)。这就是创建忙碌指示器的那个。

默认实现只是创建一个没有任何样式的 img 标签：

public Component getLoadingComponent(final String markupId)
{
    IRequestHandler handler = new ResourceReferenceRequestHandler(
        AbstractDefaultAjaxBehavior.INDICATOR);
    return new Label(markupId, "<img alt=\"Loading...\" src=\"" +
        RequestCycle.get().urlFor(handler) + "\"/>").setEscapeModelStrings(false);
}

您可以覆盖该方法，例如用 div 标签包围 img 标签，该标签具有一些额外的 CSS:

@Override
public Component getLoadingComponent(final String markupId)
{
    IRequestHandler handler = new ResourceReferenceRequestHandler(
        AbstractDefaultAjaxBehavior.INDICATOR);
    return new Label(markupId, "<div style=\"text-align: center\"><img alt=\"Loading...\" src=\"" +
        RequestCycle.get().urlFor(handler) + "\"/></div>").setEscapeModelStrings(false);
}

当然你也可以 return 一个完全自定义的 Wicket 面板，它可以显示一个更复杂的忙碌指示器，包括文本、图形、颜色等。

如何使 AjaxLazyLoadPanel 的忙碌指示器居中

how to centre the busy indicator of the AjaxLazyLoadPanel

ajax

wicket-1.6