InfoWindow + TabContainer

[BorjaSancho]

Hi all,

I'm trying to use a TabContainer in my own InfoWindow and it doesn't work. I'll show my code. I'm using dojo toolkit 1.6

--------------------- My InfoWindow.js----------------------
dojo.provide("gvdi.InfoWindow");

dojo.require("esri.InfoWindowBase");
dojo.require("dojo.fx");
/***************
 * MyInfoWindow
 ***************/
dojo.declare("gvdi.InfoWindow", [ esri.InfoWindowBase ], {
    
    
  constructor: function(parameters) {
    dojo.mixin(this, parameters);
    
    isContentShowing: false;

    isContentShowing: true;
    isMouseOver: false;
    isMouseClick: false;
    dojo.addClass(this.domNode, "myInfoWindow");

    this._closeButton = dojo.create("div", { "class": "close", title: "Cerrar" }, this.domNode);
    this._title = dojo.create("div", { "class": "title" }, this.domNode);
    this._content = dojo.create("div", { "class": "content" }, this.domNode);
    
    this._toggleButton = dojo.create("div",{"class": "toggleOpen", title:"Expandir"},this.domNode);
    
      var toggler = new dojo.fx.Toggler({
        node: this._content,
        showFunc: dojo.fx.wipeIn,
        hideFunc: dojo.fx.wipeOut
      });
      toggler.hide();

    this._eventConnections = [
      dojo.connect(this._closeButton, "onclick", this, function(){
        this.hide();
        //hide the content when the window is closed so it displays in closed state next time it opens.
        if(this.isContentShowing){
          toggler.hide();
          this.isMouseOver = false;
          this.isMouseClick = false;
          this.isContentShowing = false;
          dojo.removeClass(this._toggleButton);
          dojo.addClass(this._toggleButton,"toggleOpen");
        }
      }),
      
      
      dojo.connect(this._toggleButton,"onclick",this,function(){
        //animate the display of content
        if(this.isContentShowing){
          toggler.hide();
          this.isContentShowing = false;
          dojo.removeClass(this._toggleButton);
          dojo.addClass(this._toggleButton,"toggleOpen");
        }else{
          toggler.show();
          this.isContentShowing=true;
          dojo.removeClass(this._toggleButton);
          dojo.addClass(this._toggleButton,"toggleClose");          
        }

      })
    ];

    // Hidden initially
    esri.hide(this.domNode);            
    this.isShowing = false;
  },
  
  /*****************************************
   * Override and implement methods defined  
   * by the base class: InfoWindowBase
   *****************************************/

  setMap: function(map) {
    // Run logic defined in the base class
    this.inherited(arguments);
    
    //  hide the info window when the user is focusing elsewhere.
    this._eventConnections.push(dojo.connect(map, "onPanStart", this, this.hide));
    this._eventConnections.push(dojo.connect(map, "onZoomStart", this, this.hide));
  },
  
  setTitle: function(title) {
    this.place(title, this._title);
  },
  
  setContent: function(content) {
    this.place(content, this._content);
  },
  

  
  show: function(location) {
    // Is location specified in map coordinates?
    if (location.spatialReference) {
      location = this.map.toScreen(location);
    } 
    // Position 10x10 pixels away from the 
    // requested location
    dojo.style(this.domNode, {
      left: (location.x + 16) + "px",
      top: (location.y + 16) + "px"
    });
    
    // Display
    esri.show(this.domNode);
    this.isShowing = true;
    this.onShow();
  },
  hide: function() {
    esri.hide(this.domNode);
    this.isMouseClick = false;
    this.isShowing = false;
    this.onHide();
  },
  
  resize: function(width, height) {
    dojo.style(this._content, {
      width: width + "px",
      height: height + "px"
    });
    dojo.style(this._title,{
      width: width + "px"
    });
  },
  
  /************************************
   * Defining some methods specific to
   * my info window
   ************************************/
  
  destroy: function() {
    dojo.forEach(this._eventConnections, dojo.disconnect);
    dojo.destroy(this.domNode);
    this.isMouseClick = false;
    this._closeButton = this._title = this._content = this._eventConnections = null;
  },
  
  mostrarExtendido: function(){
 esri.show(this._content);
    this.isContentShowing=true;
    dojo.removeClass(this._toggleButton);
    dojo.addClass(this._toggleButton,"toggleClose"); 
  },
  
  
  setMouseOver: function(mouseOver) {
   this.isMouseOver = mouseOver;
  },
  getMouseOver: function() {
   return this.isMouseOver;
  },
  setMouseClick: function(mouseClick) {
   this.isMouseClick = mouseClick;
  },
  getMouseClick: function() {
   return this.isMouseClick;
  },
  
  mostrarReducido: function(){
 esri.hide(this._content);
 this.isContentShowing=false;
 dojo.removeClass(this._toggleButton);
    dojo.addClass(this._toggleButton,"toggleOpen");
  }
  
});

--------------------------- End InfoWindow.js--------------------------

function insertIncident(id,tactica,xPos,yPos,estado,areaOp){
 
 var geo = new esri.geometry.Point(xPos,yPos,new esri.SpatialReference({ wkid: 25830 }));
 var ip = new esri.Graphic(geo, null);
 
 var attr = {"xPos":xPos,"yPos":yPos,"id":id,"tactica":tactica,"estado":estado,"areaOp":areaOp};
 
 ip.setAttributes(attr);
 
 var infoTemplate = new esri.InfoTemplate("${id}           &nbsp","" +
       "<strong>ID:</strong>    ${id}<br/>" +
       "<strong>Tactica:</strong>    ${tactica}<br/>" + 
       "<strong>Area op:</strong>    ${areaOp}<br/>");   
 
 ip.setInfoTemplate(infoTemplate);
 
 //TODO: cambiar la gestion del icono a constantes java
 var icon = "";
 if (estado == "ACT")
  icon = "./images/icons/incidverde.png";
 else if (estado == "TACT")
  icon = "./images/icons/incidgris.png";
 else if (estado == "APER")
  icon = "./images/icons/incidrojo.png";
 
 
 //Comprobamos si existe un punto con las mismas coordenadas para crear un InfoWindow normal o multiple
 if(xyPointExists(xPos,yPos)){
  icon = "./images/icons/bancosbn.png";
  
  var template = new esri.InfoTemplate();

         template.setTitle("<b>  TITULO!!!           &nbsp</b>");
         template.setContent(getWindowContent());
         ip.setInfoTemplate(template);
  
  myMultipleInfoWindowXY(ip,icon);
 }else{
  ....
 }
  ...
 
}


function getWindowContent(){
 
 var tc = new dijit.layout.TabContainer({
  style: "height: 100%; width: 150px;"
 }, dojo.create("div"));
 
 var cp1 = new dijit.layout.ContentPane({
        title: "Details",
        content: "sdafsadf<br>2355345<br>"
      });
 
 var cp2 = new dijit.layout.ContentPane({
        title: "Details",
        content: "34523453<br>2355345<br>"
      });
 
   tc.addChild(cp1);
      tc.addChild(cp2);

   return tc.domNode;
}

function myMultipleInfoWindowXY(elemento,icono){
 try{
  var imageSymbol = new Image();
  var point;
  
  imageSymbol.src = icono;
  
  gvdiDefaultMap.graphics.add(elemento.setSymbol(esri.symbol.PictureMarkerSymbol(icono,imageSymbol.width,imageSymbol.height)));
   
  dojo.connect(gvdiDefaultMap.graphics, "onClick", function(evt) {
           var g = evt.graphic;
           gvdiDefaultMap.infoWindow.setMouseOver(false);
           gvdiDefaultMap.infoWindow.setMouseClick(true);
           
           //gvdiDefaultMap.infoWindow.setContent(g.getContent());     //Also tried this
           gvdiDefaultMap.infoWindow.setContent(getWindowContent());
           
           gvdiDefaultMap.infoWindow.setTitle(g.getTitle());
           gvdiDefaultMap.infoWindow.show(evt.screenPoint,gvdiDefaultMap.getInfoWindowAnchor(evt.screenPoint));
         });
  
  dojo.connect(gvdiDefaultMap.graphics, "onMouseMove", function(evt) {
   if(!gvdiDefaultMap.infoWindow.getMouseClick()){
           var g = evt.graphic;
           gvdiDefaultMap.infoWindow.setMouseOver(true);
           gvdiDefaultMap.infoWindow.setContent(g.getContent());
           gvdiDefaultMap.infoWindow.setTitle(g.getTitle());
           gvdiDefaultMap.infoWindow.show(evt.screenPoint,gvdiDefaultMap.getInfoWindowAnchor(evt.screenPoint));
   }  
     });
  
  dojo.connect(gvdiDefaultMap.graphics, "onMouseOut", function() {
   if(gvdiDefaultMap.infoWindow.getMouseOver() && !gvdiDefaultMap.infoWindow.getMouseClick())
    gvdiDefaultMap.infoWindow.hide();
   
  } );
   
 }catch(error){
  mostrarError("gvdiApEstDivMedShowInfoWindowXY "+error);
 }
}

And this is the result:

[ATTACH=CONFIG]13925[/ATTACH]

Need help please!!!

Thank a lot.

[danbecker]

Hi all,

I'm trying to use a TabContainer in my own InfoWindow and it doesn't work. I'll show my code. I'm using dojo toolkit 1.6

--------------------- My InfoWindow.js----------------------
dojo.provide("gvdi.InfoWindow");

dojo.require("esri.InfoWindowBase");
dojo.require("dojo.fx");
/***************
 * MyInfoWindow
 ***************/
dojo.declare("gvdi.InfoWindow", [ esri.InfoWindowBase ], {
    
    
  constructor: function(parameters) {
    dojo.mixin(this, parameters);
    
    isContentShowing: false;

    isContentShowing: true;
    isMouseOver: false;
    isMouseClick: false;
    dojo.addClass(this.domNode, "myInfoWindow");

    this._closeButton = dojo.create("div", { "class": "close", title: "Cerrar" }, this.domNode);
    this._title = dojo.create("div", { "class": "title" }, this.domNode);
    this._content = dojo.create("div", { "class": "content" }, this.domNode);
    
    this._toggleButton = dojo.create("div",{"class": "toggleOpen", title:"Expandir"},this.domNode);
    
      var toggler = new dojo.fx.Toggler({
        node: this._content,
        showFunc: dojo.fx.wipeIn,
        hideFunc: dojo.fx.wipeOut
      });
      toggler.hide();

    this._eventConnections = [
      dojo.connect(this._closeButton, "onclick", this, function(){
        this.hide();
        //hide the content when the window is closed so it displays in closed state next time it opens.
        if(this.isContentShowing){
          toggler.hide();
          this.isMouseOver = false;
          this.isMouseClick = false;
          this.isContentShowing = false;
          dojo.removeClass(this._toggleButton);
          dojo.addClass(this._toggleButton,"toggleOpen");
        }
      }),
      
      
      dojo.connect(this._toggleButton,"onclick",this,function(){
        //animate the display of content
        if(this.isContentShowing){
          toggler.hide();
          this.isContentShowing = false;
          dojo.removeClass(this._toggleButton);
          dojo.addClass(this._toggleButton,"toggleOpen");
        }else{
          toggler.show();
          this.isContentShowing=true;
          dojo.removeClass(this._toggleButton);
          dojo.addClass(this._toggleButton,"toggleClose");          
        }

      })
    ];

    // Hidden initially
    esri.hide(this.domNode);            
    this.isShowing = false;
  },
  
  /*****************************************
   * Override and implement methods defined  
   * by the base class: InfoWindowBase
   *****************************************/

  setMap: function(map) {
    // Run logic defined in the base class
    this.inherited(arguments);
    
    //  hide the info window when the user is focusing elsewhere.
    this._eventConnections.push(dojo.connect(map, "onPanStart", this, this.hide));
    this._eventConnections.push(dojo.connect(map, "onZoomStart", this, this.hide));
  },
  
  setTitle: function(title) {
    this.place(title, this._title);
  },
  
  setContent: function(content) {
    this.place(content, this._content);
  },
  

  
  show: function(location) {
    // Is location specified in map coordinates?
    if (location.spatialReference) {
      location = this.map.toScreen(location);
    } 
    // Position 10x10 pixels away from the 
    // requested location
    dojo.style(this.domNode, {
      left: (location.x + 16) + "px",
      top: (location.y + 16) + "px"
    });
    
    // Display
    esri.show(this.domNode);
    this.isShowing = true;
    this.onShow();
  },
  hide: function() {
    esri.hide(this.domNode);
    this.isMouseClick = false;
    this.isShowing = false;
    this.onHide();
  },
  
  resize: function(width, height) {
    dojo.style(this._content, {
      width: width + "px",
      height: height + "px"
    });
    dojo.style(this._title,{
      width: width + "px"
    });
  },
  
  /************************************
   * Defining some methods specific to
   * my info window
   ************************************/
  
  destroy: function() {
    dojo.forEach(this._eventConnections, dojo.disconnect);
    dojo.destroy(this.domNode);
    this.isMouseClick = false;
    this._closeButton = this._title = this._content = this._eventConnections = null;
  },
  
  mostrarExtendido: function(){
 esri.show(this._content);
    this.isContentShowing=true;
    dojo.removeClass(this._toggleButton);
    dojo.addClass(this._toggleButton,"toggleClose"); 
  },
  
  
  setMouseOver: function(mouseOver) {
   this.isMouseOver = mouseOver;
  },
  getMouseOver: function() {
   return this.isMouseOver;
  },
  setMouseClick: function(mouseClick) {
   this.isMouseClick = mouseClick;
  },
  getMouseClick: function() {
   return this.isMouseClick;
  },
  
  mostrarReducido: function(){
 esri.hide(this._content);
 this.isContentShowing=false;
 dojo.removeClass(this._toggleButton);
    dojo.addClass(this._toggleButton,"toggleOpen");
  }
  
});

--------------------------- End InfoWindow.js--------------------------

function insertIncident(id,tactica,xPos,yPos,estado,areaOp){
 
 var geo = new esri.geometry.Point(xPos,yPos,new esri.SpatialReference({ wkid: 25830 }));
 var ip = new esri.Graphic(geo, null);
 
 var attr = {"xPos":xPos,"yPos":yPos,"id":id,"tactica":tactica,"estado":estado,"areaOp":areaOp};
 
 ip.setAttributes(attr);
 
 var infoTemplate = new esri.InfoTemplate("${id}           &nbsp","" +
       "<strong>ID:</strong>    ${id}<br/>" +
       "<strong>Tactica:</strong>    ${tactica}<br/>" + 
       "<strong>Area op:</strong>    ${areaOp}<br/>");   
 
 ip.setInfoTemplate(infoTemplate);
 
 //TODO: cambiar la gestion del icono a constantes java
 var icon = "";
 if (estado == "ACT")
  icon = "./images/icons/incidverde.png";
 else if (estado == "TACT")
  icon = "./images/icons/incidgris.png";
 else if (estado == "APER")
  icon = "./images/icons/incidrojo.png";
 
 
 //Comprobamos si existe un punto con las mismas coordenadas para crear un InfoWindow normal o multiple
 if(xyPointExists(xPos,yPos)){
  icon = "./images/icons/bancosbn.png";
  
  var template = new esri.InfoTemplate();

         template.setTitle("<b>  TITULO!!!           &nbsp</b>");
         template.setContent(getWindowContent());
         ip.setInfoTemplate(template);
  
  myMultipleInfoWindowXY(ip,icon);
 }else{
  ....
 }
  ...
 
}


function getWindowContent(){
 
 var tc = new dijit.layout.TabContainer({
  style: "height: 100%; width: 150px;"
 }, dojo.create("div"));
 
 var cp1 = new dijit.layout.ContentPane({
        title: "Details",
        content: "sdafsadf<br>2355345<br>"
      });
 
 var cp2 = new dijit.layout.ContentPane({
        title: "Details",
        content: "34523453<br>2355345<br>"
      });
 
   tc.addChild(cp1);
      tc.addChild(cp2);

   return tc.domNode;
}

function myMultipleInfoWindowXY(elemento,icono){
 try{
  var imageSymbol = new Image();
  var point;
  
  imageSymbol.src = icono;
  
  gvdiDefaultMap.graphics.add(elemento.setSymbol(esri.symbol.PictureMarkerSymbol(icono,imageSymbol.width,imageSymbol.height)));
   
  dojo.connect(gvdiDefaultMap.graphics, "onClick", function(evt) {
           var g = evt.graphic;
           gvdiDefaultMap.infoWindow.setMouseOver(false);
           gvdiDefaultMap.infoWindow.setMouseClick(true);
           
           //gvdiDefaultMap.infoWindow.setContent(g.getContent());     //Also tried this
           gvdiDefaultMap.infoWindow.setContent(getWindowContent());
           
           gvdiDefaultMap.infoWindow.setTitle(g.getTitle());
           gvdiDefaultMap.infoWindow.show(evt.screenPoint,gvdiDefaultMap.getInfoWindowAnchor(evt.screenPoint));
         });
  
  dojo.connect(gvdiDefaultMap.graphics, "onMouseMove", function(evt) {
   if(!gvdiDefaultMap.infoWindow.getMouseClick()){
           var g = evt.graphic;
           gvdiDefaultMap.infoWindow.setMouseOver(true);
           gvdiDefaultMap.infoWindow.setContent(g.getContent());
           gvdiDefaultMap.infoWindow.setTitle(g.getTitle());
           gvdiDefaultMap.infoWindow.show(evt.screenPoint,gvdiDefaultMap.getInfoWindowAnchor(evt.screenPoint));
   }  
     });
  
  dojo.connect(gvdiDefaultMap.graphics, "onMouseOut", function() {
   if(gvdiDefaultMap.infoWindow.getMouseOver() && !gvdiDefaultMap.infoWindow.getMouseClick())
    gvdiDefaultMap.infoWindow.hide();
   
  } );
   
 }catch(error){
  mostrarError("gvdiApEstDivMedShowInfoWindowXY "+error);
 }
}

And this is the result:

[ATTACH=CONFIG]13925[/ATTACH]

Need help please!!!

Thank a lot.

Let me guess...you replaced the default infoWindow with an esri.dijit.popup, then tried adding tab to the dijit.popup?

I've been trying this for a month now to no avail.

By replacing infoWindow, I mean like this:

var popup = new esri.dijit.Popup({
          fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))
        }, dojo.create("div"));
map = new esri.Map("map", {extent: startExtent,infoWindow:popup});

[BorjaSancho]

First of all thanks for your reply,

i put my InfoWindow code before. I don't use the popup. This InfoWindow was provided by ESRI to us, im not sure if the original is similar.

My map has an applet and i call the 'insertIncident' function from JAVA application once the map has been intialized.

Thanks!

[JeffPace]

I couldnt get them working either, and ended up using jQuery tabs.

[KellyHutchins · Accepted solution]

Bsancho,

In the info window you are using the content area isn't visible when the tab container is rendered which can cause layout issues for the tab container widget.You can call the tab container resize method to properly render the tab container when the window is displayed or the toggle button is clicked. I added this code to the init function:

        dojo.connect(infoWindow,'onShow',function(){
            dijit.byId("myTabCont").resize();
        });
        
          dojo.connect(infoWindow._toggleButton,'onclick',function(){
           dijit.byId("myTabCont").resize();
          });

And here's the code that creates the tab container

    

 function getTextContent(graphic) {
      

        if(dijit.byId('myTabCont')){
            dijit.byId('myTabCont').destroy();
        }
        var tc = new dijit.layout.TabContainer({
            id:'myTabCont',
            style:'width:180px;height:150px;',
        },dojo.create('div'));
        var pane1 = new dijit.layout.ContentPane({
            title:'Pane 1',
            content:'Tree ID: ' + graphic.attributes.TreeID
        });
        var pane2 = new dijit.layout.ContentPane({
            title:'Pane 2',
            content:'<i>' + graphic.attributes.CommonName + ' , ' + graphic.attributes.qAddress + '</i>'
        });
        tc.addChild(pane1);
        tc.addChild(pane2);
        tc.startup();
        return tc.domNode;
      }

[BorjaSancho]

Thank you Kelly, it works!!!

[danbecker]

Thanks Kelly!! I've been searching for this answer for awhile!