Блог

Я разрабатываю приложение wicket и хочу создать панель, для которой необходимо настроить ширину на основе другого элемента.

Разметка выглядит следующим образом:

 <div wicket:id="lazyPanel" style="float: left;"></div>
<div wicket:id="widthSpan" style="float: right; width: 30%;"></div>
  

и связанный Java-код является:

 final WebMarkupContainer widthSpan = new WebMarkupContainer("widthSpan");
add(widthSpan);
add(new AjaxLazyLoadPanel("lazyPanel") {
     public Component getLazyLoadComponent(String markupId) {
          // calculate the width based on widthSpan
          int width = 1000 - widthOf(sidebar);
          return new MyPanel(markupId, width);
     }
});
  

Я знаю, что могу использовать некоторый javascript для получения ширины боковой панели, но как я могу отправить его обратно в wicket?

Я нашел решение. Добавьте AJAX-поведение для widthSpan, например:

 widthSpan.add(new AbstractDefaultAjaxBehavior() {
     @Override
     protected CharSequence getCallbackScript() {
         return generateCallbackScript("wicketAjaxGet('"   getCallbackUrl()   
                      "amp;ExpectedWidth='   expectedWidth");
     }

     @Override
     public void renderHead(Component component, IHeaderResponse response) {
         super.renderHead(component, response);
         StringBuffer sb = new StringBuffer();
         sb.append("var expectedWidth = $('#")
           .append(getComponent().getMarkupId())
           .append("').width();");
         sb.append(getCallbackScript());
         response.renderOnDomReadyScript(sb.toString());
     }

     @Override
     protected void respond(AjaxRequestTarget target) {
         int width = RequestCycle.get().getRequest().getQueryParameters()
              .getParameterValue("ExpectedWidth").toInt(280);
         Component lazy = createComponent("lazyPanel", 1000 - width);
         target.add(lazy);
     }
 };
  

Здесь мы используем поведение для добавления параметра запроса ExpectedWidth, который будет получен из скрипта jquery, а в функции response мы создаем и добавляем фактическую панель.