AnsweredAssumed Answered

InfoWindow + TabContainer

Question asked by bsancho on Apr 30, 2012
Latest reply on May 2, 2012 by dbecker88
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.

Attachments

Outcomes