Logo Oracle Deutschland   Application Express Community
Icons des Application Builders in eigenen Anwendungen nutzen
oder: Wie funktionieren eigentlich CSS-Sprites ...?

Erscheinungsmonat APEX-Version Datenbankversion
Juli 2013 alle ab 10.2

Wenn man mit dem APEX Application Builder an seinen Anwendungen arbeitet, kommt oft der Gedanke, dass man die zahlreichen Symbole ja auch selbst gebrauchen könnte. Und das ist scheinbar auch sehr einfach. Man öffnet die Browser-Werkzeuge für Web-Entwickler (oder wie in Abbildung 1: Firebug-Plugin), fährt mit der Maus über das Bild und sieht dann unten das <img>-Tag mit dem Pfad zur Bilddatei.

Analyse des Oracle-Logos im Application Builder mit dem "Firebug"
Abbildung 1: Analyse des Oracle-Logos im Application Builder mit dem "Firebug"

Mit anderen Symbolen funktioniert das aber nicht mehr so gut ...

Analyse eines anderen Symbols im Application Builder mit dem "Firebug"
Abbildung 2: Analyse eines anderen Symbols im Application Builder mit dem "Firebug"

Zwar taucht auch hier ein <img>-Tag auch, schaut man sich das referenzierte Bild aber genauer an, so stellt man fest, dass für die verschiedenen Symbole immer das gleiche (/i/f_spacer.gif) verwendet wird - dieses ist nur ein Pixel groß und transparent. Im APEX Application Builder werden die Symbole also anders eingebunden.

In der Tat setzt das APEX Entwicklerteam mehr und mehr auf die Technologie der CSS-Sprites (Widipedia-Artikel). Ziel der CSS-Sprites ist es, die Ladezeiten für Webseiten (und damit auch für APEX-Anwendungsseiten) zu optimieren. Und schon vorab: Wenn Sie selbst viele Symbole auf Ihren APEX-Seiten verwenden, so sind CSS-Sprites ein hochinteressanter Ansatz zur Optimierung Ihrer Anwendung.

Der Gedanke dabei ist folgender: Arbeitet man "klassisch" mit <img> Tags, so wird jedes Symbol einzeln vom Server abgerufen. Denn der Browser lädt zuerst den HTML-Code der Seite - und sobald das <img> Tag verarbeitet wird, wird mit dem Inhalt des Attributs src ein neuer Request ausgelöst, der das Bild holt. Enthält eine Seite also 20 verschiedene Bilder, so werden auf diesem Wege mindestens 21 Anfragen an den Server gestellt - eine für den HTML-Code, 20 für die Bilddateien. Und da jede Netzwerk-Anfrage mit Latency verbunden ist, also der Zeit, die der Verbindungsaufbau braucht, ist das Reduzieren der Netzwerkanfragen ein sehr vielversprechender Optimierungsansatz - eine einzige Datei mit 10 KB ist schneller geladen als 10 Dateien zu je 1KB.

Zunächst muss also dafür gesorgt werden, dass alle Bilddateien auf einmal geladen werden können. CSS-Sprites sehen dazu vor, dass die vielen Einzelbilder mosaikartik zu einer Gesamtgrafik zusammengesetzt werden. Abbildung 3 zeigt eine der mit APEX ausgelieferten CSS-Spritedateien, welche übrigens eine ganz normale Bilddatei ist.

CSS-Spritedatei mit im APEX Application Builder verwendeten Symbolen
Abbildung 3: CSS-Spritedatei mit im APEX Application Builder verwendeten Symbolen

Das Laden dieser Datei macht also sehr viele Symbole auf einmal verfügbar. Nun stellt sich aber die Frage, wie man ein einzelnes Symbol daraus darstellen kann. Das geschieht mit verschiedenen CSS-Direktiven.

  • Zunächst muss die Bilddatei selbst angesprochen werden. Das geschieht mit background-image.
  • Das Symbol von Interesse beginnt im Mosaik an einer bestimmten Pixelposition; das wird mit background-position festgelegt. Dabei ist die linke obere Ecke der Ursprung des Koordiantensystems. CSS erwartet bei dieser Direktive außerdem negative Koordinaten (Grund ist, dass das Bild so "geschoben" wird, dass die gewünschte Startposition an den Ursprung des Koordinatensystems rückt).
  • Und schließlich hat das Symbol eine Breite und eine Höhe; das legen die Direktiven width und height fest.

Das Symbol wird also eigentlich als Hintergrund eines HTML-Elements eingebunden; damit erklärt sich auch, warum das per <img> eingebundene Bild f_spacer.gif transparent sein muss.

Möchte man also die Taschenlampe, die im Application Builder oben rechts dargestellt ist, verwenden, so braucht es dazu folgende CSS-Anweisungen.

Das Taschenlampen-Symbol soll in einer einfachen HTML-Seite verwendet werden
Abbildung 4: Das Taschenlampen-Symbol soll in einer einfachen HTML-Seite verwendet werden
  • Am besten definiert man eine CSS-Klasse, welche die Spritedatei lädt (hier ist die URL absolut angegeben. Diese Direktive muss in das <style> Tag innerhalb des HTML-Headers eingetragen werden.
    .sprite_apexui {background-image: url("http://apex.oracle.com/i/apex_ui/apex_ui.png");}
    
    Diese Klasse können Sie nun für alle Symbole aus dieser Spritedatei wiederverwenden.
  • Danach definieren Sie eine zweite Spritedatei, welche ganz konkret zur Taschenlampe "navigiert" (Achtung: Negative Koordinaten bei background-position) und diese ausschneidet. Auch diese Direktive gehört in das <style> Tag.
    .icon_taschenlampe {
      background-position: -140px -1000px; 
      width: 20px; 
      height: 20px;
    }
    
  • Schließlich können Sie das HTML-Tag erstellen, dem Sie einfach beide Klassen zuweisen.
    <html>
      <head>
        <style>
        .sprite_apexui {background-image: url("http://apex.oracle.com/i/apex_ui/apex_ui.png");}
        .icon_taschenlampe {
          background-position: -140px -1000px; 
          width: 20px; 
          height: 20px;
        }
        </style>
      </head>
      <body>
        <h1>SPRITETEST</h1>
        <p>
          <div style="float:left" class="sprite_apexui icon_taschenlampe"></div>
          <div style="float:left">Das ist die Taschenlampe</div>
        </p>
      </body>
    </html>
    

Das Bild ist, wie man sehen kann, erfolgreich eingebunden.

Verwenden des Taschenlampen-Symbols in einer einfachen HTML-Seite
Abbildung 5: Verwenden des Taschenlampen-Symbols in einer einfachen HTML-Seite

Seinen Vorteile spielt dieser Ansatz vor allem aus, wenn, wie gesagt, sehr viele verschiedene Symbole verwendet werden - denn dann werden viele HTTP-Anfragen auf eine reduziert. Die Seite wird schneller geladen - das Netzwerk und der Server werden entlastet.

Die APEX Spritedateien selbst sind nicht dokumentiert - für die Leser der deutschsprachigen APEX Community haben wir aber ein APEX Sprite Directory zusammengestellt. Darin sind - Stand heute - sieben APEX Spritedateien gelistet. Die Seite zeigt Ihnen die in der Datei enthaltenen Symbole an - wenn Sie auf eines der Symbole klicken, erhalten Sie in der Textbox die nötigen Anweisungen zur Defintion der CSS-Klassen und etwas HTML-Code, der zeigt, wie die CSS-Klassen verwendet werden. Am besten laden Sie die Spritedateien von dieser Seite herunter und dann in Ihre Anwendung zu den Gemeinsamen Komponenten und dort zu den Bildern hoch. Die Dateien Ihrer APEX-Installation sollten Sie nicht direkt referenzieren; schließlich könnten sie sich durch ein Upgrade ändern.

Das APEX Sprite Directory generiert den CSS-Code zur Verwendung der Sprites
Abbildung 6: Das APEX Sprite Directory generiert den CSS-Code zur Verwendung der Sprites

Eigene Spritedateien erzeugen

Der Ansatz, CSS-Sprites zu verwenden, ist also generell interessant. Auch wenn Sie eigene Symbole anstelle derer des Application Builders verwenden, kann es sinnvoll sein, CSS-Sprites zu verwenden. Dann müssen die Einzelbilder zu einem Mosaik zusammengesetzt werden; dabei sollte man sich Position, Höhe und Breite jedes Teilbildchens merken, um die CSS-Klassen erstellen zu können.

Im Grunde genommen, reicht ein sehr einfaches Bildbearbeitungsprogramm hierfür schon aus; allerdings kann die Arbeit damit sehr mühsam werden. Besser ist es sicherlich, fertige Werkzeuge zu verwenden. CSS-Sprites können von hochwertigeren Bildbearbeitungsprogrammen, aber auch von diversen Webseiten generiert werden - der Vorteil ist, dass diese Werkzeuge nicht nur das Mosaik zusammensetzen, sondern auch die CSS-Direktiven generieren. Da es mittlerweile sehr viele dieser Dienste gibt, hier nur eine kleine Auswahl, die keinerlei Anspruch auf Vollständigkeit erhebt.

  • Project Fondue CSS-Sprite Generator: Auf dieser Webseite können Sie ein ZIP-Archiv mit Symbolen hochladen; die Seite generiert das Mosaik und den CSS-Code für Sie. Den quelloffenen Code können Sie auch herunterladen.
  • CSS-Sprites: Eine weitere Webseite mit einem Spritegenerator.
  • SpritePad: Ein weiterer Dienst mit einer sehr intuitiven Benutzeroberfläche.

Fazit

Die Technik der CSS-Sprites kommt allmählich im Mainstream der Web-Entwicklung an: die Performance einer APEX-Anwendung lässt sich damit erhelblich verbessern; und flüssige Webseiten kommen beim Endanwender meist besser an. Mit dem APEX Sprite Directory können Sie die Symbole des APEX Application Builders einfach und elegant auch in eigenen Anwendungen nutzen - fortgeschrittene Entwickler können sich, basierend auf den APEX-Symbolen und eigenen Icons, selbst CSS-Sprites zusammensetzen und nutzen.

Zurück zur Community-Seite