Dojo Bootstrap Modal, quién necesita popups

ReneRubalcava

<\/HEAD>

<\/P>

Hace un tiempo hice una publicación en mi propio blog<\/A> sobre el uso de Dojo Bootstrap con la ArcGIS API para JavaScript<\/A>. Mostré cómo puedes incorporarlo para hacer una búsqueda de autocompletado que funciona bastante bien y se ve bien. He usado Dojo Bootstrap<\/A> bastante extensamente en el desarrollo de mis aplicaciones y he encontrado algunos quirks<\/EM> que requieren un poco de trabajo de mi parte. Si diseñas tu HTML con las etiquetas de atributos de propiedad y cargas la biblioteca, no deberías tener problemas reales más allá de una pequeña curva de aprendizaje. He descubierto que he tenido que hacer un par de work-arounds<\/EM> cuando quería crear elementos programáticamente como widgets. Una demostración fácil de esto se puede ver al crear un Modal<\/A>.<\/P>

<\/P>

Modals, a tu manera<\/H2>Típicamente quiero tratar mis popups Modal como un widget y eso significa que puedo querer personalizar un poco la apariencia del Modal. En el ejemplo que mostraré, esta es la plantilla que uso para el widget.<\/P>var tpl = [
  '<div class="modal fade popup-container" id="myModal" tabindex="-1" role="dialog"',
  'data-dojo-type="Modal" data-dojo-props="header:My Modal, modalClass: fade"',
  'aria-labelledby="myModalLabel" aria-hidden="true" data-dojo-attach-point="modalNode">',
  '<div class="modal-dialog">',
    '<div class="modal-content" data-dojo-attach-point="contentNode">',
      '<div class="modal-header">',
        '<h4 id="myModalLabel"><\/h4>',
        '<span data-dojo-attach-point="labelNode">${title}<\/span>',
        '<a href="javascript:void(0)" class="glyphicon glyphicon-remove pull-right popup-close" data-dismiss="modal" aria-hidden="true"><\/a>',
      '<\/div>',
      '<div data-dojo-attach-point="bodyNode" class="modal-body">',
      '<\/div>',
    '<\/div>',
  '\/div>',
'<\/div>'
].join("");<\/PRE><\/P>Mucho de esto es bastante estándar, pero quería establecer dinámicamente el title<\/STRONG> y agregar un punto de unión bodyNode<\/STRONG> al que pudiera añadir el contenido. En lugar de interactuar directamente con el módulo Modal, lo envuelvo en un widget separado que me permite hacer cosas como establecer el título y actualizar el contenido. Este widget personalizado para el Modal se ve así.<\/P>var Popup = declare([_WidgetBase, _TemplatedMixin, Evented], {
  templateString: tpl,
  loaded: false,
  constructor: function() {
    this.set('content', '');
    this.set('title', 'Ventana Popup');
  },
  postCreate: function() {
    this.modal = new Modal(this.domNode);
    var watchContent = this.watch('content', function(_, __, value) {
      domConstruct.empty(this.bodyNode);
      this.bodyNode.appendChild(domConstruct.toDom(value));
    }.bind(this));
    var watchTitle = this.watch('title', function(_, __, value) {
      this.labelNode.innerHTML = value;
    }.bind(this));
    var onHide = on(this.modal.domNode, 'hide.bs.modal', function() {
      this.emit('hide', {});
    }.bind(this));
    this.own(watchContent, watchTitle, onHide);
    this._init();
  },
  show: function() {
    this.modal.show();
  },
  hide: function() {
    this.modal.hide();
  },
  _init: function() {
    this.set('loaded', true);
    this.emit('loaded', true);
  }
});<\/PRE><\/P>Entonces lo que sucede aquí es que creas un nuevo Modal usando el domNode<\/STRONG> del widget como objetivo. Configuras un observador (watcher)<\/A> para cuando el Modal se oculta y propagas ese evento desde el widget. Esto requirió mirar las pruebas para el Modal<\/A> para encontrar los nombres de eventos, ya que algunos documentos aún están siendo actualizados. Luego configuras observadores para el título y el contenido, este último siendo convertido a un elemento DOM<\/A> y añadido al bodyNode<\/STRONG> del widget.<\/P><\/P>El resultado se verá similar a esto.<\/P><\/P>Para demostrar esto, simplemente tomé un ejemplo existente de InfoWindow y lo modifiqué en este JSBin.<\/P>Ejemplo Dojo Bootstrap<\/A><\/P>

<\/P>

No hay mucho sucediendo en esa ventana Modal, pero piensa en lo que podrías hacer con ese espacio extra. Podrías

mostrar archivos adjuntos de imagen<\/_a>, o proporcionar detalles bien formateados de los datos o datos relacionados en tablas<\/_a>. Tendrías espacio incluso para agregar otros widgets allí para mostrar gráficos agradables en la ventana. Uso esto para proporcionar formularios completos de edición con botones grandes y hasta otros popups Modal como listas desplegables. El poder está en tus manos<\EM>.<\p><\p>

Hack and slash<\h2>Esto puede no ser trabajo revolucionario aquí, pero agregar pequeños toques como mover contenido de InfoWindow a un popup Modal son los tipos de cosas que añaden un poco de estilo a tus aplicaciones. También podrías usar dijit/Dialog<\a> y ajustar el estilo si quieres, la idea es probar este tipo de interacción y ver si proporciona una experiencia más fluida para tus usuarios. Incluso podrías estilizar los popups Modal para ocupar toda la página y proporcionar transiciones agradables en un dispositivo móvil. Tú escribes el código, hazlo tuyo. Muchas gracias a Tom Wayson<\a> por ayudarme a profundizar en las entrañas de Dojo Bootstrap para lograrlo.<\p>

<\p>

Para más consejos y trucos geodev, visita

mi blog<\a> y hackea tus mapas.<\p><\BODY><\HTML>

MichaelJenkins

Cool idea, I  like it!