Dojo Bootstrap Modal, wie heeft er popups nodig

ReneRubalcava

<\/HEAD>

<\/P>

Een tijdje geleden schreef ik een bericht op mijn eigen blog<\/A> over het gebruik van Dojo Bootstrap met de ArcGIS API voor JavaScript<\/A>. Ik liet zien hoe je het kunt integreren om een autocomplete zoekfunctie te maken die behoorlijk goed werkt en er goed uitziet. Ik heb Dojo Bootstrap<\/A> vrij uitgebreid gebruikt in mijn app-ontwikkeling en ik heb een paar eigenaardigheden<\/EM> gevonden die wat werk van mijn kant vereisen. Als je je HTML opmaakt met de property attribute tags en de bibliotheek laadt, zou je geen echte problemen moeten hebben behalve een kleine leercurve. Ik heb gemerkt dat ik een paar work-arounds<\/EM> moest doen wanneer ik programmatic elementen als widgets wilde creëren. Een eenvoudige demonstratie hiervan is te zien bij het maken van een Modal<\/A>.<\/P>

<\/P>

Modals, jouw eigen manier<\/H2>Ik wil mijn Modal popups meestal behandelen als een widget en dat betekent dat ik het uiterlijk van de Modal een beetje wil aanpassen. In het voorbeeld dat ik zal laten zien, is dit de template die ik gebruik voor de 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>Veel hiervan is vrij standaard, maar ik wilde dynamisch de titel<\/STRONG> instellen en een bodyNode<\/STRONG> attach-point toevoegen waar ik de inhoud aan kon toevoegen. In plaats van direct met de Modal module te werken, wikkel ik het in een aparte widget die me toestaat dingen te doen zoals de titel instellen en de inhoud bijwerken. Deze aangepaste widget voor de Modal ziet er zo uit.<\/P>var Popup = declare([_WidgetBase, _TemplatedMixin, Evented], {
  templateString: tpl,
  loaded: false,
  constructor: function() {
    this.set('content', '');
    this.set('title', 'Popup Window');
  },
  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>Wat hier gebeurt is dat je een nieuwe Modal maakt met behulp van de domNode<\/STRONG> van de widget als doelwit. Je stelt een watcher<\/A> in voor wanneer de Modal wordt verborgen en verspreidt dat event vanuit de widget naar boven. Dit vereiste het bekijken van de tests voor de Modal<\/A> om eventnamen te vinden, aangezien sommige documentatie nog wordt bijgewerkt. Vervolgens stel je watchers in voor de titel en de inhoud, waarbij laatstgenoemde wordt omgezet naar een DOM-element<\/A> en toegevoegd aan de bodyNode<\/STRONG> van de widget.<\/P><\/P>Het resultaat zal er ongeveer zo uitzien.<\/P><\/P>Om dit te demonstreren heb ik gewoon een bestaand InfoWindow voorbeeld genomen en aangepast in deze JSBin.<\/P>Dojo Bootstrap Voorbeeld<\/A><\/P>

<\/P>

Er gebeurt niet veel in dat Modal venster, maar denk eens na over wat je zou kunnen doen met die extra ruimte. Je zou

afbeeldingsbijlagen kunnen weergeven<\/A>, of mooi geformatteerde details van de data of gerelateerde tabelgegevens<\/A>. Je zou zelfs ruimte hebben om andere widgets toe te voegen om mooie grafieken in het venster weer te geven. Ik gebruik dit om volledige bewerkingsformulieren te bieden met mooie grote knoppen en zelfs andere Modal popups als keuzelijsten. De kracht ligt in jouw handen<\/EM>.<\/P><\\/P>

Hack and slash<\\/H2>Dit is misschien geen baanbrekend werk hier, maar kleine toevoegingen zoals het verplaatsen van InfoWindow-inhoud naar een Modal popup zijn het soort dingen die wat flair aan je applicaties toevoegen. Je zou ook dijit/Dialog kunnen gebruiken en ook de styling aanpassen als je wilt, het idee is om dit soort interacties uit te proberen en te zien of het een vloeiendere ervaring biedt voor je gebruikers. Je zou zelfs de Modal popups kunnen stylen zodat ze de hele pagina innemen en mooie overgangen bieden op een mobiel apparaat. Jij schrijft de code, maak het eigen. Grote dank aan Tom Wayson00c voor zijn hulp bij het doorgronden van Dojo Bootstrap guts om dingen gedaan te krijgen.<\\/P><\\/P>Voor meer geodev tips en trucs, bekijk mijn blog en hack je kaarten.<\\/BODY><\\/HTML>

MichaelJenkins

Cool idea, I  like it!