<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Flexmaniak.pl &#187; InfoWindow</title>
	<atom:link href="http://blog.flexmaniak.pl/tag/infowindow/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.flexmaniak.pl</link>
	<description>Flex, Papervision3D, PHP, Symfony</description>
	<lastBuildDate>Sun, 02 Oct 2011 08:36:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Flex i Google Maps API &#8211; okna informacjyne</title>
		<link>http://blog.flexmaniak.pl/flex-libraries/google-maps-api-flex/flex-i-google-maps-api-okna-informacjyne</link>
		<comments>http://blog.flexmaniak.pl/flex-libraries/google-maps-api-flex/flex-i-google-maps-api-okna-informacjyne#comments</comments>
		<pubDate>Wed, 09 Jun 2010 15:37:53 +0000</pubDate>
		<dc:creator>Piotr Wierzgała</dc:creator>
				<category><![CDATA[Google Maps API 1.18]]></category>
		<category><![CDATA[Google Maps API]]></category>
		<category><![CDATA[InfoWindow]]></category>
		<category><![CDATA[InfoWindowOptions]]></category>

		<guid isPermaLink="false">http://blog.flexmaniak.pl/?p=695</guid>
		<description><![CDATA[Okna informacyjne pozwalają wyświetlać dane w tak zwanych &#8220;dymkach&#8221; pojawiających na mapie po kliknięciu w marker. Spis treści Aplikacja Otwarcie okna informacyjnego Opcje okna informacyjnego Aplikacja Poniższa aplikacja pozwala na przetestowanie działania większości pól opcji okna informacyjnego. Dostęp do źródła można uzyskać poprzez kliknięcie prawym przyciskiem myszy w obszar aplikacji i wybranie opcji &#8220;View Source&#8221; [...]]]></description>
			<content:encoded><![CDATA[<p>Okna informacyjne pozwalają wyświetlać dane w tak zwanych &#8220;dymkach&#8221; pojawiających na mapie po kliknięciu w marker.</p>
<div style="width: 100%; text-align:center"><img src="http://blog.na14.pl/examples/GoogleMapsAPI/1.18/information_windows/information_window.jpg" alt="okno informacyjne"/></div>
<p><span id="more-695"></span></p>
<h3>Spis treści</h3>
<ul>
<li><a href="#aplikacja">Aplikacja</a></li>
<li><a href="#otwarcie">Otwarcie okna informacyjnego</a></li>
<li><a href="#opcje">Opcje okna informacyjnego</a></li>
</ul>
<h3><a name="aplikacja">Aplikacja</a></h3>
<p>Poniższa aplikacja pozwala na przetestowanie działania większości pól opcji okna informacyjnego. Dostęp do źródła można uzyskać poprzez kliknięcie prawym przyciskiem myszy w obszar aplikacji i wybranie opcji &#8220;View Source&#8221; z menu kontekstowego.<br />
<a href="http://blog.na14.pl/examples/GoogleMapsAPI/1.18/information_windows/application/application.html" target="_blank" alt="Kliknij aby otworzyć aplikację w osobnym oknie"><img src="http://blog.na14.pl/examples/GoogleMapsAPI/1.18/information_windows/application_thumb.jpg" /></a></p>
<h3><a name="otwarcie">Otwarcie okna informacyjnego</a></h3>
<p>Okno informacyjne nie posiada konstruktora. Jest tworzone jedynie poprzez wywołanie metody <strong>openInfoWindow</strong> klasy Marker. Na poniższym przykładzie przedstawiony jest sposób otwarcia okna informacyjnego w funkcji obsługującej zdarzenie kliknięcia w marker:</p>
<div class="codecolorer-container actionscript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="actionscript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #0066CC;">private</span> &nbsp;<span style="color: #000000; font-weight: bold;">function</span> marker_CLICK<span style="color: #66cc66;">&#40;</span>event:MapEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; event.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">openInfoWindow</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;<br />
<span style="color: #66cc66;">&#125;</span></div></div>
<p>Metoda openInfoWindow przyjmuje dwa opcjonalne parametry:</p>
<ul>
<li><strong>options</strong>: Obiekt klasy <strong>InfoWindowOptions</strong> definiujący właściwości okna informacyjnego.</li>
<li><strong>useSeparatePane</strong>: Wartość logiczna określająca czy okno informacyjne zostanie wygenerowane na własnej warstwie. Podczas korzystania z mapy 3D domyślnie okno informacyjne generowane jest na tej samej warstwie co marker dzięki czemu jest umieszczane w tej samej odległości od obserwatora co marker. Ustawienie tego parametru na <em>true</em> w przypadku korzystania z mapy 3D wymusi wygenerowanie okna informacyjnego na oddzielnej warstwie tak jak ma to miejsce w przypadku korzystania z mapy 2D.</li>
</ul>
<h3><a name="opcje">Opcje okna informacyjnego</a></h3>
<p>Za pomocą obiektu klasy InfoWindowOptions możemy ustawić następujące właściwości okna informacyjnego:</p>
<ul>
<li><strong>content</strong>: Treść pojawiająca się w oknie informacyjnym.</li>
<li><strong>contentFormat</strong>: Obiekt typu <a href="http://livedocs.adobe.com/flex/3/langref/flash/text/TextFormat.html">TextFormat</a> definiujący wygląd treści podanej w polu <em>content</em>.</li>
<li><strong>contentHTML</strong>: Treść pojawiająca się oknie informacyjnym zapisana w formacie HTML.</li>
<li><strong>contentStyleSheet</strong>: Obiekt typu <a href="http://livedocs.adobe.com/flex/3/langref/flash/text/StyleSheet.html">StyleSheet</a> definiujący arkusz stylów treści okna informacyjnego.</li>
<li><strong>cornerRadius</strong>: Stopień zaokrąglenia narożników okna informacyjnego.</li>
<li><strong>customCloseRect</strong>: Obiekt typu <a href="http://livedocs.adobe.com/flex/3/langref/flash/geom/Rectangle.html">Rectangle</a> określający obszar, w obrębie którego kliknięcie będzie zamykało okno informacyjne. W przypadku kiedy ustawiona jest własność <em>customContent</em> wtedy wyznaczony obszar zamykający okno nie będzie widoczny, ale pozostanie aktywny. Natomiast w przypadku kiedy własność <em>customContent</em> jest równa <em>null</em> wtedy obszar customCloseRect może zostać użyty do w celu narysowania przycisku zamykającego okno w wybranym miejscu.<br/><br/>
<p>		Poniższy rysunek pokazuje domyśle ustawienie przycisku zamykającego okno oraz jego przykładowe ustawienie za pomocą pola <em>customCloseRect</em>.</p>
<div style="width: 100%; text-align:center"><img src="http://blog.na14.pl/examples/GoogleMapsAPI/1.18/information_windows/customCloseRect.jpg" alt="customCloseRect"/></div>
</li>
<li><strong>customContent</strong>: Obiekt typu <a href="http://livedocs.adobe.com/flex/3/langref/flash/display/DisplayObject.html">DisplayObject</a>, który zostanie narysowany zamiast okna informacyjnego.
	</li>
<li><strong>customOffset</strong>: Obiekt typu Point określający przesunięcie obiektu zdefiniowanego w polu <em>customContent</em>. W przypadku kiedy pole <em>customContent</em> nie jest ustawione lub kiedy pole <em>drawDefaultFrame</em> posiada wartość <em>true</em> wtedy pole <em>customOffset</em> nie będzie brane pod uwagę podczas rysowania okna informacyjnego.</li>
<li><strong>drawDefaultFrame</strong>: Wartość logiczna określająca czy okno informacyjne mają być rysowane jako tło obiektu zdefiniowanego w polu <em>customContent</em>.<br/><br/>
<p>		Poniższy rysunek przedstawia zestawienie wyniku rysowania okna informacyjnego ze zdefiniowanym polem <em>customContent</em> przy włączonej i wyłączonej opcji <em>drawDefaultFrame</em>.</em>.</p>
<div style="width: 100%; text-align:center"><img src="http://blog.na14.pl/examples/GoogleMapsAPI/1.18/information_windows/drawDefaultFrame.jpg" alt="drawDefaultFrame"/></div>
</li>
<li><strong>fillStyle</strong>: Obiekt typu <a href="http://code.google.com/intl/pl/apis/maps/documentation/flash/reference.html#FillStyle">FillStyle</a> określający styl wypełnienia okna informacyjnego.</li>
<li><strong>hasCloseButton</strong>: Wartość logiczna określająca czy na oknie informacyjnym będzie rysowany przycisk zamykający.</li>
<li><strong>hasShadow</strong>: Wartość logiczna określająca czy okno informacyjne będzie rzucało cień na mapę.</li>
<li><strong>hasTail</strong>: Wartość logiczna określająca czy okno informacyjne będzie posiadać ogon.</li>
<li><strong>height</strong>: Wysokość okna informacyjnego.</li>
<li><strong>padding</strong>: Wielkość odstępu pomiędzy tytułem i treścią okna informacyjnego a jego obramowaniem.</li>
<li><strong>pointOffset</strong>: Obiekt typu <a href="http://livedocs.adobe.com/flex/3/langref/flash/geom/Point.html">Point</a> określający przesunięcie okna informacyjnego.</li>
<li><strong>strokeStyle</strong>: Obiekt typu <a href="http://code.google.com/intl/pl/apis/maps/documentation/flash/reference.html#StrokeStyle">StrokeStyle</a> określający styl obrysowania okna informacyjnego.</li>
<li><strong>tailAlign</strong>: Wyrównanie ogona okna informacyjnego. Dostępne wartości tego pola to:
<ul>
<li><em>InfoWindowOptions.ALIGN_LEFT</em>,</li>
<li><em>InfoWindowOptions.ALIGN_CENTER</em>,</li>
<li><em>InfoWindowOptions.ALIGN_RIGHT</em>.</li>
</ul>
</li>
<li><strong>tailHeight</strong>: Wysokość ogona okna informacyjnego.</li>
<li><strong>tailOffset</strong>: Obiekt typu <a href="http://livedocs.adobe.com/flex/3/langref/flash/geom/Point.html">Point</a> określający przesunięcie ogona okna informacyjnego.</li>
<li><strong>tailWidth</strong>: Szerokość ogona okna informacyjnego.</li>
<li><strong>title</strong>: Nagłówek okna informacyjnego.</li>
<li><strong>titleFormat</strong>: Obiekt typu <a href="http://livedocs.adobe.com/flex/3/langref/flash/text/TextFormat.html">TextFormat</a> definiujący wygląd napisu podanego w polu <em>title</em>.</li>
<li><strong>titleHTML</strong>: Nagłówek okna informacyjnego zapisany w formacie HTML.</li>
<li><strong>titleStyleSheet</strong>: Obiekt typu <a href="http://livedocs.adobe.com/flex/3/langref/flash/text/StyleSheet.html">StyleSheet</a> definiujący arkusz stylów tytułu okna informacyjnego</li>
<li><strong>width</strong>: Szerokość okna informacyjnego.</li>
</ul>
<p>Przykładowe zastosowanie:</p>
<div class="codecolorer-container actionscript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;height:100%;"><div class="actionscript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">var</span> infoWindowOptions:InfoWindowOptions = <span style="color: #000000; font-weight: bold;">new</span> InfoWindowOptions<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; fillStyle: <span style="color: #000000; font-weight: bold;">new</span> FillStyle<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">color</span>: 0xffffff, <br />
&nbsp; &nbsp; &nbsp; &nbsp; alpha: <span style="color: #cc66cc;">1</span><br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>,<br />
&nbsp; &nbsp; strokeStyle: <span style="color: #000000; font-weight: bold;">new</span> StrokeStyle<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #0066CC;">color</span>: 0x000000,<br />
&nbsp; &nbsp; &nbsp; &nbsp; alpha: <span style="color: #cc66cc;">1</span>,<br />
&nbsp; &nbsp; &nbsp; &nbsp; thickness: <span style="color: #cc66cc;">2</span><br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>,<br />
&nbsp; &nbsp; title: <span style="color: #ff0000;">&quot;Title&quot;</span>,<br />
&nbsp; &nbsp; hasTail: <span style="color: #000000; font-weight: bold;">true</span>,<br />
&nbsp; &nbsp; hasCloseButton: <span style="color: #000000; font-weight: bold;">true</span>,<br />
&nbsp; &nbsp; contentHTML: <span style="color: #ff0000;">&quot;&lt;b&gt;ContentHTML&lt;/b&gt;&quot;</span>,<br />
&nbsp; &nbsp; padding: <span style="color: #cc66cc;">10</span>,<br />
&nbsp; &nbsp; widht: <span style="color: #cc66cc;">320</span>,<br />
&nbsp; &nbsp; <span style="color: #0066CC;">height</span>: <span style="color: #cc66cc;">100</span>,<br />
&nbsp; &nbsp; tailOffset: <span style="color: #cc66cc;">20</span>,<br />
&nbsp; &nbsp; pointOffset: <span style="color: #000000; font-weight: bold;">new</span> Point<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span>,-<span style="color: #cc66cc;">60</span><span style="color: #66cc66;">&#41;</span>,<br />
&nbsp; &nbsp; drawDefaultFrame: <span style="color: #000000; font-weight: bold;">false</span>,<br />
&nbsp; &nbsp; hasShadow: <span style="color: #000000; font-weight: bold;">false</span>,<br />
&nbsp; &nbsp; cornerRadius: <span style="color: #cc66cc;">20</span><br />
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</div></div>
<p>Żeby zastosować tak stworzony obiekt klasy InfoWindowOptions przekazujemy go jako parametr metody <em>openInfoWindow</em> klasy Marker.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.flexmaniak.pl/flex-libraries/google-maps-api-flex/flex-i-google-maps-api-okna-informacjyne/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

