<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri","sans-serif";
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:612.0pt 792.0pt;
margin:70.85pt 3.0cm 70.85pt 3.0cm;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=PT link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal>Hi Guys!<o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal><span lang=EN-US>I am starting on OpenLayers API and I have
two questions… <o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>I am studing the controls and I have
notice that, there’s no API methods or API properties in Control type.
That means the open layers developers can change it, without any advise. <o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>The way I am doing my controls is this:<o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";color:black;background:white;
mso-highlight:white'><o:p> </o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";color:black;background:white;
mso-highlight:white'>MyControl</span><span lang=EN-US style='font-size:10.0pt;
font-family:"Courier New";background:white;mso-highlight:white'> <span
style='color:#5C5C5C'>=</span> <span style='color:black'>OpenLayers</span><span
style='color:#5C5C5C'>.</span><span style='color:black'>Class</span><span
style='color:#5C5C5C'>(</span><span style='color:black'>OpenLayers</span><span
style='color:#5C5C5C'>.</span><span style='color:black'>Control</span><span
style='color:#5C5C5C'>,</span> <span style='color:#5C5C5C'>{</span></span><span
lang=EN-US style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> </span><span lang=EN-US style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <span style='color:green'>//Constructor</span></span><span
lang=EN-US style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <span style='color:black'>initialize</span><span style='color:
#5C5C5C'>:</span> <b><span style='color:#0000C0'>function</span></b><span
style='color:#5C5C5C'>(){</span></span><span lang=EN-US style='font-size:10.0pt;
font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <span style='color:black'>alert</span><span
style='color:#5C5C5C'>(</span><span style='color:#005C00'>"ctr"</span><span
style='color:#5C5C5C'>);</span></span><span lang=EN-US style='font-size:10.0pt;
font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <span style='color:#5C5C5C'>},</span></span><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> </span><span lang=EN-US style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <span style='color:green'>//called when the user adds the control
to the map. if the control wants to display information</span></span><span
lang=EN-US style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <span style='color:black'>draw</span><span style='color:#5C5C5C'>:</span>
<b><span style='color:#0000C0'>function</span></b><span style='color:#5C5C5C'>(){</span></span><span
lang=EN-US style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <span style='color:black'>OpenLayers</span><span
style='color:#5C5C5C'>.</span><span style='color:black'>Control</span><span
style='color:#5C5C5C'>.</span><span style='color:black'>prototype</span><span
style='color:#5C5C5C'>.</span><span style='color:black'>draw</span><span
style='color:#5C5C5C'>.</span><span style='color:black'>apply</span><span
style='color:#5C5C5C'>(</span><b><span style='color:#0000C0'>this</span></b><span
style='color:#5C5C5C'>);</span></span><span lang=EN-US style='font-size:10.0pt;
font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <b><span style='color:#0000C0'>var</span></b> <span
style='color:black'>div</span> <span style='color:#5C5C5C'>=</span> <span
style='color:black'>document</span><span style='color:#5C5C5C'>.</span><span
style='color:black'>createElement</span><span style='color:#5C5C5C'>(</span><span
style='color:#005C00'>"div"</span><span style='color:#5C5C5C'>);</span></span><span
lang=EN-US style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <span style='color:black'>div</span><span style='color:#5C5C5C'>.</span><span
style='color:black'>style</span><span style='color:#5C5C5C'>.</span><span
style='color:black'>width</span> <span style='color:#5C5C5C'>=</span> <span
style='color:#005C00'>"100px"</span><span style='color:#5C5C5C'>;</span></span><span
lang=EN-US style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <span style='color:black'>div</span><span style='color:#5C5C5C'>.</span><span
style='color:black'>style</span><span style='color:#5C5C5C'>.</span><span
style='color:black'>height</span> <span style='color:#5C5C5C'>=</span> <span
style='color:#005C00'>"100px"</span><span style='color:#5C5C5C'>;</span></span><span
lang=EN-US style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <span style='color:black'>div</span><span style='color:#5C5C5C'>.</span><span
style='color:black'>style</span><span style='color:#5C5C5C'>.</span><span
style='color:black'>background</span> <span style='color:#5C5C5C'>=</span> <span
style='color:#005C00'>"black"</span><span style='color:#5C5C5C'>;</span></span><span
lang=EN-US style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> </span><span lang=EN-US style='font-size:10.0pt;font-family:
"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <b><span style='color:#0000C0'>this</span></b><span
style='color:#5C5C5C'>.</span><span style='color:black'>div.appendChild(div)</span><span
style='color:#5C5C5C'>;</span></span><span lang=EN-US style='font-size:10.0pt;
font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <b><span style='color:#0000C0'>return</span></b> this.<span
style='color:black'>div</span><span style='color:#5C5C5C'>;</span></span><span
lang=EN-US style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <span style='color:#5C5C5C'>},</span></span><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> </span><span lang=EN-US style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <span style='color:green'>//called when the user removes the
control from the map</span></span><span lang=EN-US style='font-size:10.0pt;
font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <span style='color:black'>destroy</span><span style='color:#5C5C5C'>:</span>
<b><span style='color:#0000C0'>function</span></b><span style='color:#5C5C5C'>(){</span></span><span
lang=EN-US style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <span style='color:black'>OpenLayers</span><span
style='color:#5C5C5C'>.</span><span style='color:black'>Control</span><span
style='color:#5C5C5C'>.</span><span style='color:black'>prototype</span><span
style='color:#5C5C5C'>.</span><span style='color:black'>destroy</span><span
style='color:#5C5C5C'>.</span><span style='color:black'>apply</span><span
style='color:#5C5C5C'>(</span><b><span style='color:#0000C0'>this</span></b><span
style='color:#5C5C5C'>);</span></span><span lang=EN-US style='font-size:10.0pt;
font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <span style='color:black'>alert</span><span
style='color:#5C5C5C'>(</span><span style='color:#005C00'>"destroy"</span><span
style='color:#5C5C5C'>);</span></span><span lang=EN-US style='font-size:10.0pt;
font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <span style='color:#5C5C5C'>},</span> </span><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> </span><span lang=EN-US style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span lang=EN-US
style='font-size:10.0pt;font-family:"Courier New";background:white;mso-highlight:
white'> <span style='color:black'>CLASS_NAME</span><span style='color:
#5C5C5C'>:</span> <span style='color:#005C00'>"MYCONTROL"</span></span><span
lang=EN-US style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US style='font-size:10.0pt;font-family:"Courier New";
color:#5C5C5C;background:white;mso-highlight:white'>});</span><span lang=EN-US><o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>Is this the best way to implement custom
controls? Will OpenLayers developers change the not API methods, initialize,
draw, destroy or the div property defined at Control Class?<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>I need to know because I want to integrate
future releases.<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>The second question is: Why does Control.destroy
method exist? This is the description in the Control Class destroy method: <o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>Method: destroy<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US> * The destroy method is used to
perform any clean up before the control<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US> * is dereferenced. Typically this is
where event listeners are removed<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US> * to prevent memory leaks.<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>But it Is never called. The control is dereferenced
at Map.removeControl method, and this method does not call control.destroy
method…<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
<p class=MsoNormal><span lang=EN-US>Thanks.<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-US>André Matos<o:p></o:p></span></p>
</div>
</body>
</html>