--------------------- 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}  ","" + "<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!!!  </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); } }
Solved! Go to Solution.
dojo.connect(infoWindow,'onShow',function(){ dijit.byId("myTabCont").resize(); }); dojo.connect(infoWindow._toggleButton,'onclick',function(){ dijit.byId("myTabCont").resize(); });
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; }
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}  ","" + "<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!!!  </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.
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});
dojo.connect(infoWindow,'onShow',function(){ dijit.byId("myTabCont").resize(); }); dojo.connect(infoWindow._toggleButton,'onclick',function(){ dijit.byId("myTabCont").resize(); });
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; }