Модальный диалог для гобеленов

Так как Tapestry не предоставляет диалоговое окно, давайте посмотрим, насколько сложно (или просто) создать его самостоятельно. Мы будем использовать ModalBox, поскольку он имеет лицензию MIT и написан в прототипе (скоро это не будет критерием для выбора скрипта, так как Tapestry будет независимым от прототипа). Скрипт ModalBox очень прост в использовании. Существует метод ModalBox.show (), который отображает диалоговое окно. Он принимает элемент dom и параметры конфигурации в качестве параметров. Если вы хотите создать мастера, просто продолжайте использовать тот же метод в диалоговом окне. Существует также метод ModalBox.hide (), чтобы скрыть диалог.

Наш скрипт — это больше, чем просто вызов ModalBox.show (). Он должен вызвать обработчик события, используя URL-адрес события, и использовать ответ для создания элемента, который будет отображаться в диалоговом окне. Он также предоставляет возможность обновить зону после закрытия диалогового окна.

Tapestry.Initializer.setupModalDialog = function(params)
{
   // Setup zone
   var element = $(params.id);
   $T(element).zoneId = params.zone;

   var showModalbox = function()
   {
         var loadContentWithScripts = function(transport)
         {
            var node = new Element('div').update(transport.responseJSON.content);
            params.options.onContentLoaded = function()
            {
               Tapestry.loadScriptsInReply(transport.responseJSON, function() {});
            };

            params.options.afterHide = function()
            {
               if(params.zone)
               {
                  var zoneManager = Tapestry.findZoneManager(element);
                  zoneManager.updateFromURL(params.closeLink);
               }
            };

            Modalbox.show(node, params.options);
         };

         Tapestry.ajaxRequest(params.openLink, {
            method : 'get',
            onSuccess : loadContentWithScripts
         });
   };

   Event.observe($(params.id), params.event, showModalbox);

};

Функция сценария принимает следующие параметры

• id: идентификатор элемента
• событие: клиентское событие на элементе, который будет вызывать событие
• openLink: ссылка для вызова диалогового окна
• closeLink: ссылка вызывается после закрытия диалога
• зона: зона, которая будет обновлена ​​после закрытия диалога
• параметры: другие параметры, которые должны быть переданы в ModalBox.show (), например ширина, высота, заголовок

Сценарий связывает клиентское событие элемента с методом, который делает запрос на основе ajax для получения содержимого диалогового окна с сервера, а затем вызывает функцию Tapestry.loadScriptsInReply () для загрузки любых встроенных сценариев.

Параметры передаются в сценарий нашим классом компонентов ModalDialog.

@SupportsInformalParameters
@Import(library = {
      "modalbox/builder.js",
      "modalbox/effects.js",
      "modalbox/modalbox.js",
      "modalbox/modalboxinit.js"
      } , 

      stylesheet = "modalbox/modalbox.css"
)
@Events({TawusAddonsEventConstants.SHOW_DIALOG})
public class ModalDialog implements ClientElement
{
   /**
    * Javascript id, if not supplied is auto-generated
    */
   @Parameter(value = "prop:componentResources.id", defaultPrefix = BindingConstants.LITERAL, allowNull = false)
   private String clientId;

   /**
    * Client event that will trigger the modal dialog
    */
   @Parameter(value = "click", defaultPrefix = BindingConstants.LITERAL, allowNull = false)
   private String clientEvent;

   /**
    * Zone to update when dialog is closed
    */
   @Parameter(defaultPrefix = BindingConstants.LITERAL)
   private String zone;

   /**
    * Context to be passed to the page
    */
   @Parameter
   private Object[] context;

   @Environmental
   private JavaScriptSupport javaScriptSupport;

   @Inject
   private ComponentResources resources;

   private String assignedClientId;

   public ModalDialog()
   {

   }

   ModalDialog(JavaScriptSupport javaScriptSupport,
         ComponentResources resources)
   {
      this.javaScriptSupport = javaScriptSupport;
      this.resources = resources;
   }

   void setupRender()
   {
      assignedClientId = javaScriptSupport.allocateClientId(clientId);
   }

   void beginRender(MarkupWriter writer)
   {
      writer.element("a", "href", "#", "id", getClientId());
   }

   void afterRender(MarkupWriter writer)
   {
      writer.end();
   }

   @AfterRender
   void addJavaScript()
   {
      JSONObject params = new JSONObject();

      params.put("id", getClientId());
      params.put("event", clientEvent);
      params.put("openLink", getPageLink());
      params.put("closeLink", getCloseLink());
      params.put("zone", zone);
      params.put("options", getInformalParametersAsJSON());

      javaScriptSupport.addInitializerCall("setupModalDialog", params);
   }

   private JSONObject getInformalParametersAsJSON()
   {
      JSONObject modalboxOptions = new JSONObject();
      for(String parameter : resources.getInformalParameterNames())
      {
         modalboxOptions.put(parameter,
           resources.getInformalParameter(parameter, String.class));
      }
      return modalboxOptions;
   }

   private Object getPageLink()
   {
      Link link = resources.createEventLink(TawusAddonsEventConstants.SHOW_DIALOG, context);
      return link.toAbsoluteURI();
   }

   private String getCloseLink()
   {
      return resources.createEventLink(
         TawusAddonsEventConstants.CLOSE_DIALOG).toAbsoluteURI();
   }

   public String getClientId()
   {
      return assignedClientId;
   }
}

public class TawusAddonsEventConstants
{
   public static final String SHOW_DIALOG = "showDialog";

   public static final String CLOSE_DIALOG = "closeDialog";
}

<a t:type='tawus/modaldialog' t:zone='closeZone'>Open Dialog</a>
<div t:type='zone' t:id='closeZone'>Call this zone on closure</div>

<t:block t:id='modaldialogContents'>
Some content
</t:block>

@Inject
private Block modalDialogContents;

public Block onShowDialog()
{
   return modalDialogContents;
}

public Zone onCloseDialog()
{
   return closeZone;
}