Dojo Bootstrap Modal, qui a besoin de popups

ReneRubalcava

<\/HEAD>

<\/P>

Il y a quelque temps, j'ai fait un article sur mon propre blog<\/A> sur l'utilisation de Dojo Bootstrap avec l'API ArcGIS pour JavaScript<\/A>. J'ai montré comment vous pouvez l'incorporer pour faire une recherche autocomplete qui fonctionne assez bien et a une belle apparence. J'ai utilisé Dojo Bootstrap<\/A> assez largement dans le développement de mes applications et j'ai trouvé quelques bizarreries<\/EM> qui nécessitent un peu de travail de ma part. Si vous organisez votre HTML avec les balises d'attributs de propriété et chargez la bibliothèque, vous ne devriez pas avoir de vrais problèmes au-delà d'une petite courbe d'apprentissage. J'ai constaté que j'ai dû faire quelques contournements<\/EM> lorsque je voulais créer des éléments en tant que widgets de manière programmatique. Une démonstration facile de cela peut être vue lors de la création d'un Modal<\/A>.<\/P>

<\/P>

Modals, à votre façon<\/H2>Je veux généralement traiter mes popups Modal comme un widget et cela signifie que je peux vouloir personnaliser un peu l'apparence du Modal. Dans l'exemple que je vais montrer, c'est le modèle que j'utilise pour le 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>Beaucoup de cela est assez standard, mais je voulais définir dynamiquement le titre<\/STRONG> et ajouter un point d'attache bodyNode<\/STRONG> auquel je pourrais ajouter le contenu. Au lieu d'interagir directement avec le module Modal, je l'encapsule dans un widget séparé qui me permet de faire des choses comme définir le titre et mettre à jour le contenu. Ce widget personnalisé pour le Modal ressemble à ceci.<\/P>var Popup = declare([_WidgetBase, _TemplatedMixin, Evented], {
  templateString: tpl,
  loaded: false,
  constructor: function() {
    this.set('content', '');
    this.set('title', 'Fenêtre 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>Donc ce qui se passe ici est que vous créez un nouveau Modal en utilisant le domNode<\/STRONG> du widget comme cible. Vous configurez un observateur (watcher)<\/A> pour quand le Modal est caché et propagez cet événement depuis le widget. Cela a nécessité de regarder les tests pour le Modal<\/A> pour trouver les noms des événements, car certains documents sont encore en cours de mise à jour. Ensuite, vous configurez des observateurs pour le titre et le contenu, ce dernier étant converti en élément DOM<\/A> et ajouté au bodyNode<\/STRONG> du widget.<\/P><\/P>Le résultat ressemblera à ceci.<\/P><\/P>Pour démontrer cela, j'ai simplement pris un exemple existant d'InfoWindow et l'ai modifié dans ce JSBin.<\/P>Exemple Dojo Bootstrap<\/A><\/P>

<\/P>

Il ne se passe pas grand-chose dans cette fenêtre Modal, mais pensez à ce que vous pourriez faire avec cet espace supplémentaire. Vous pourriez

afficher des pièces jointes d'image<\/A>, ou fournir des détails bien formatés des données ou des données tabulaires associées<\/A>. Vous auriez même la place pour ajouter d'autres widgets afin d'afficher de beaux graphiques dans la fenêtre. J'utilise cela pour fournir des formulaires complets avec de gros boutons agréables et même d'autres popups Modal comme listes déroulantes. Le pouvoir est entre vos mains<\/EM>.<\/P><\/P>

Hack and slash<\/H2>Cela n'est peut-être pas révolutionnaire ici, mais ajouter de petites touches comme déplacer le contenu InfoWindow vers un popup Modal sont les types de choses qui ajoutent un peu de style à vos applications. Vous pourriez aussi utiliser dijit/Dialog<\/_A> et ajuster également le style si vous voulez, l'idée est de tester ce type d'interaction et voir si cela offre une expérience plus fluide pour vos utilisateurs. Vous pourriez même styliser les popups Modal pour qu'ils occupent toute la page et fournir de belles transitions sur un appareil mobile. Vous écrivez le code, faites-le vôtre. Un grand merci à 22Tom Wayson2220pour m'avoir aidé à plonger dans les entrailles de Dojo Bootstrap pour accomplir les choses.<\/_p>Pour plus d'astuces geodev, consultez 22mon blog2220et hackez vos cartes.<\/_p>

MichaelJenkins

Cool idea, I  like it!