AjaxLazyLoadPanelのビジーインジケータを中央に配置する方法

Question

3つの異なるパネルを連続して表示するモーダルがあります（ユーザーの選択と一致します）。

このモダールの2番目のパネルはAjaxLazyLoadPanelであり、表示されたときは、下の図に示すように、左揃えであり、中央揃えではありません。 Modal showing the busy indicator 1 どのようにビジーインジケータを中央に配置できますか？以下は

モーダル

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

あなたは、そのメソッドを上書きし、例えば、いくつかの追加のCSSを持ってdivタグでimgタグを囲むことができます：

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

もちろん、完全なカスタムWicketパネルを返すこともできます。このパネルは、テキスト、グラフィック、色などの複雑なビジーインジケータを表示できます。