Dojo Bootstrap Modal, quem precisa de popups

ReneRubalcava

<\/HEAD>

<\/P>

Há algum tempo, fiz uma postagem no meu próprio blog<\/A> sobre o uso do Dojo Bootstrap com a ArcGIS API para JavaScript<\/A>. Mostrei como você pode incorporá-lo para fazer uma busca autocomplete que funciona muito bem e tem boa aparência. Eu usei o Dojo Bootstrap<\/A> extensivamente no desenvolvimento dos meus aplicativos e encontrei algumas peculiaridades<\/EM> que exigem um pouco de trabalho da minha parte. Se você estruturar seu HTML com as tags de atributo de propriedade e carregar a biblioteca, não deverá ter problemas reais além de uma pequena curva de aprendizado. Descobri que tive que fazer alguns contornos<\/EM> quando quis criar elementos programaticamente como widgets. Uma demonstração fácil disso pode ser vista ao criar um Modal<\/A>.<\/P>

<\/P>

Modals, do seu jeito<\/H2>Normalmente, quero tratar meus popups Modal como um widget e isso significa que posso querer personalizar um pouco a aparência do Modal. No exemplo que vou mostrar, este é o template que uso para o 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>Muito disso é bastante padrão, mas eu queria definir dinamicamente o title<\/STRONG> e adicionar um ponto de anexo bodyNode<\/STRONG> ao qual eu pudesse adicionar o conteúdo. Em vez de interagir diretamente com o módulo Modal, eu o envolvo em um widget separado que me permite fazer coisas como definir o título e atualizar o conteúdo. Este widget personalizado para o Modal fica assim.<\/P>var Popup = declare([_WidgetBase, _TemplatedMixin, Evented], {
  templateString: tpl,
  loaded: false,
  constructor: function() {
    this.set('content', '');
    this.set('title', 'Janela 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>Então, o que está acontecendo aqui é que você cria um novo Modal usando o domNode<\/STRONG> do widget como alvo. Você configura um observador (watcher)<\/A> para quando o Modal for ocultado e propaga esse evento a partir do widget. Isso exigiu olhar os testes do Modal<\/A> para encontrar os nomes dos eventos, já que alguns dos documentos ainda estão sendo atualizados. Então você configura observadores para o título e para o conteúdo, este último sendo convertido em um elemento DOM<\/A> e adicionado ao bodyNode<\/STRONG> do widget.<\/P><\/P>O resultado será semelhante a este.<\/P><\/P>Para demonstrar isso, peguei apenas um exemplo existente de InfoWindow e modifiquei neste JSBin.<\/P>Exemplo Dojo Bootstrap<\/A><\/P>

<\/P>

Não há muita coisa acontecendo nessa janela Modal, mas pense no que você poderia fazer com esse espaço extra. Você poderia

exibir anexos de imagem<\/A>, ou fornecer detalhes bem formatados dos dados ou dados relacionados da tabela<\/A>. Você teria espaço até para adicionar outros widgets ali para exibir gráficos bonitos na janela. Eu uso isso para fornecer formulários completos de edição com botões grandes e até outros popups Modal como listas de seleção. O poder está em suas mãos<\/EM>.<\/P><\\/P>

48ack and slash3C/H23EThis may not be groundbreaking work here, but adding little touches like moving InfoWindow content to a Modal popup are the types of things that add a bit of flair to your applications. You could use dijit/Dialog as well and tweak the styling as well if you like, the idea is to test this type of interaction out and see if it provides a more fluid experience for your users. You could even style the Modal popups to take up the whole page and provide some nice looking transitions on a mobile device. You're writing the code, make it you own. Big thanks to Tom Wayson for helping me dig into the Dojo Bootstrap guts to get things done.For more geodev tips and tricks, check out my blog and hack your maps.

MichaelJenkins

Cool idea, I  like it!