Jena: Hamburg:

GWT 1.5 und transparente PNG Images im IE6

erstellt am: 18.02.2009 | von: frub | Kategorie(n): Eclipse

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 <div> und ein <span> ersetzt.

<div>
<span style=”display:inline-block; width:100px; height:100px; ilter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’myImage.png’, sizingMethod=’scale’)”>
</span>
</div>

Wichtig ist hier ist, dass die Maße des Bildes als Parameter mitgeliefert werden müssen.
Einige Javscript Frameworks nehmen sich dem IE6-PNG Problem bereits an und lösen das Problem für den Entwickler transparent.

Auch für das GWT gibt es eine Möglichkeit:
Für das GWT Version 1.4 hat Robert Hanson die GWT-Widget Library erstellt, in dem Zusammenhang sein auch auf das Buch dazu verwiesen: GWT im Einsatz: Ajax-Anwendungen entwickeln mit dem Google Web Toolkit (Gebundene Ausgabe)

In der GWT-Widget Library gibt es eine Klasse PNGImage, diese erbt von Image 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).

Leider funktioniert diese Klasse mit dem GWT 1.5  nicht mehr. Der Grund ist, dass die PNGImage-Klasse von Image abgeleitet ist und diese die setElement() Methode bereits im Konstruktor aufruft. Seit GWT 1.5 ist es aber nicht mehr zulässig setElement() für ein Element mehr als einmal aufzurufen. Die Klasse kompiliert zwar, die Verarbeitung  wird aber bei setElement() mit einer Exception abgebrochen.

Die Alternative von GWT Image Bundles 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.

Ich selber habe via google keine Lösung des Problems gefunden.
Falls die PNG Images aber lediglich angezeigt werden sollen, kann ein Lösungsansatz aber wie folgt sein:
Die Klasse PNGImage ist insoweit zu Patchen, dass statt von Image von Widget geerbt wird.
Hiermit wird das Problem mit setElement() und der Exception behoben, da das Widget im Konstruktor nicht setElement() aufruft.

Ein weiteres Problem ist die methode setURL() 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 PGNImage wird nochmals in ein Panel eingebunden und anstelle von setURL() wird das Panel beräumt und ein neues Objekt vom Typ PNGImage erzeugt.

Es bleibt also eine schlanke Klasse PNGImage welche PNG-Images transparent anzeigt.
Natürlich hat man nun nicht die Methoden der Image Klasse verfügbar, diese wären bei Bedarf dann zusätzlich in die PNGImage-Klasse zu implementieren.

Ich freue ich mich hier sehr über ein Feedback,
sicherlich hat jemand bessere oder gar fertige Lösungen zur Hand!