<?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>igniti GmbH &#187; PNG</title>
	<atom:link href="http://www.igniti.de/tag/png/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.igniti.de</link>
	<description>Internet- und E-Commerce Spezialist</description>
	<lastBuildDate>Mon, 21 Jun 2010 09:18:07 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>GWT 1.5 und transparente PNG Images im IE6</title>
		<link>http://www.igniti.de/2009/02/18/gwt-15-und-transparente-png-images-im-ie6/</link>
		<comments>http://www.igniti.de/2009/02/18/gwt-15-und-transparente-png-images-im-ie6/#comments</comments>
		<pubDate>Wed, 18 Feb 2009 10:58:30 +0000</pubDate>
		<dc:creator>frank</dc:creator>
				<category><![CDATA[Eclipse]]></category>
		<category><![CDATA[GWT]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[PNG]]></category>

		<guid isPermaLink="false">http://www.igniti.de/blog/?p=172</guid>
		<description><![CDATA[Bekanntermassen hat der IE6 ein Problem bei PNG Images die Transparenz korrekt zu rendern,
die Transparenz wird im IE6 fälschlicherweise grau dargestellt.
Als Fix gibt es die Möglichkeit den Alpha-Image Loader einzusetzen,
der Image-Tag wird durch ein &#60;div&#62; und ein &#60;span&#62; ersetzt.
&#60;div&#62;
&#60;span style=&#8221;display:inline-block; width:100px; height:100px; ilter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=&#8217;myImage.png&#8217;, sizingMethod=&#8217;scale&#8217;)&#8221;&#62;
&#60;/span&#62;
&#60;/div&#62;
Wichtig ist hier ist, dass die Maße des Bildes als Parameter [...]]]></description>
			<content:encoded><![CDATA[<p>Bekanntermassen hat der IE6 ein Problem bei PNG Images die Transparenz korrekt zu rendern,<br />
die Transparenz wird im IE6 fälschlicherweise grau dargestellt.</p>
<p>Als Fix gibt es die Möglichkeit den Alpha-Image Loader einzusetzen,<br />
der Image-Tag wird durch ein <strong>&lt;div&gt;</strong> und ein<strong> &lt;span&gt;</strong> ersetzt.</p>
<p><strong>&lt;div&gt;<br />
&lt;span style=&#8221;display:inline-block; width:100px; height:100px; ilter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=&#8217;myImage.png&#8217;, sizingMethod=&#8217;scale&#8217;)&#8221;&gt;<br />
&lt;/span&gt;<br />
&lt;/div&gt;</strong></p>
<p>Wichtig ist hier ist, dass die Maße des Bildes als Parameter mitgeliefert werden müssen.<br />
Einige Javscript Frameworks nehmen sich dem IE6-PNG Problem bereits an und lösen das Problem für den Entwickler transparent.</p>
<p>Auch für das <a href="http://code.google.com/intl/de-DE/webtoolkit/">GWT </a>gibt es eine Möglichkeit:<br />
Für das GWT Version 1.4 hat <a href="http://roberthanson.blogspot.com/">Robert Hanson</a> die <a href="http://gwt-widget.sourceforge.net">GWT-Widget Library</a> erstellt, in dem Zusammenhang sein auch auf das Buch dazu verwiesen: <a href="http://www.amazon.de/GWT-Einsatz-Ajax-Anwendungen-entwickeln-Toolkit/dp/3446412417">GWT im Einsatz: Ajax-Anwendungen entwickeln mit dem Google Web Toolkit</a> (Gebundene Ausgabe)<a href="http://www.amazon.de/GWT-Einsatz-Ajax-Anwendungen-entwickeln-Toolkit/dp/3446412417"><br />
</a></p>
<p>In der GWT-Widget Library gibt es eine Klasse <strong>PNGImage</strong>, diese erbt von <strong>Image</strong> und stellt für den IE6 eine separate Implementierung mit dem Alpha-Image Loader bereit (welche natürlich mittels Replace-Regel in der GWT Konfigurationsdatei benannt werden muss).</p>
<p>Leider funktioniert diese Klasse mit dem GWT 1.5  nicht mehr. Der Grund ist, dass die <strong>PNGImage</strong>-Klasse von <strong>Image</strong> abgeleitet ist und diese die <strong>setElement()</strong> Methode bereits im Konstruktor aufruft. Seit GWT 1.5 ist es aber nicht mehr zulässig <strong>setElement()</strong><em> </em>für ein Element mehr als einmal aufzurufen. Die Klasse kompiliert zwar, die Verarbeitung  wird aber bei <strong>setElement()</strong> mit einer Exception abgebrochen.</p>
<p>Die Alternative von <a href="http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/ImageBundle.html">GWT Image Bundles</a> funktioniert nur für statische PNGs, da diese bereits beim Kompilieren eingebunden werden. Dynamisch erzeugte oder zu ladende Bilder sind somit mit dieser Lösung nicht möglich.</p>
<p>Ich selber habe via google keine Lösung des Problems gefunden.<br />
Falls die PNG Images aber lediglich angezeigt werden sollen, kann ein Lösungsansatz aber wie folgt sein:<br />
Die Klasse <strong>PNGImage </strong>ist insoweit zu Patchen, dass statt von <strong>Image</strong> von <strong>Widget </strong>geerbt wird.<br />
Hiermit wird das Problem mit <strong>setElement() </strong>und der Exception behoben, da das Widget im Konstruktor nicht <strong>setElement()</strong> aufruft.</p>
<p>Ein weiteres Problem ist die methode <strong>setURL()</strong> welche im Moment per default eine Exception liefert, diese kann insofern ignoriert werden, als dass man das Bild über einen anderen Weg dynamisch erzeugt. Das <strong>PGNImage </strong>wird nochmals in ein <strong>Panel </strong>eingebunden und anstelle von <strong>setURL() </strong>wird das <strong>Panel </strong>beräumt und ein neues Objekt vom Typ <strong>PNGImage </strong>erzeugt.</p>
<p>Es bleibt also eine schlanke Klasse <strong>PNGImage </strong>welche PNG-Images transparent anzeigt.<br />
Natürlich hat man nun nicht die Methoden der Image Klasse verfügbar, diese wären bei Bedarf dann zusätzlich in die <strong>PNGImage</strong>-Klasse zu implementieren.</p>
<p>Ich freue ich mich hier sehr über ein Feedback,<br />
sicherlich hat jemand bessere oder gar fertige Lösungen zur Hand! </p>
]]></content:encoded>
			<wfw:commentRss>http://www.igniti.de/2009/02/18/gwt-15-und-transparente-png-images-im-ie6/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
