Die Einbindung von WBMP-Graphiken in WML

Geschrieben von: Christian Holm
Kategorie: WAP

Da Sie vielleicht nach dem Lesen des Artikels WBMP - Das Grafikformat für WAP schon wissen, wie man Grafiken für die Einbindung in WML vorbereitet, wollen Sie jetzt sicher auch die Einbindung in den WML-Sourcecode lernen. Prinzipiell ist die Einbindung von Grafiken in WML der Kodierung in HTML ähnlich. Jedoch sind einige Unterschiede zu HTML zu beachten, die wir hier besprechen wollen.

Zum Ausprobieren der Sourcecode-Beispiele benötigen Sie einen Emulator bzw. WML-tauglichen Browser. Hier einige Links, wo Sie solchen Browser beziehen können:

• WinWap 2.3 Light
• Wapalizer
• Wapman
• NOKIA WAP Toolkit 1.2 (SDK)

Der <img>-Tag

Der <img>-Tag muß immer innerhalb eines Card-Blocks (<card id="CARDID" ... </card>) stehen. Dieser Tag wird nicht wie üblich durch einen Abschluß-Tag (z.B. </tag>), sondern wird nach den Attributen am Ende durch einen Schrägstrich "/" geschlossen.

<img src="BILD.WBMP" alt="ALTERNATIV TEXT"
	vspace="VERTIKALER ABSTAND" 
	hspace="HORIZONTALER ABSTAND"
	align="AUSRICHTIUNG" height="BILDHÖHE"    
	width="BILDBREITE"/>

Die Attribute im Detail

src="BILD.WBMP" gibt den Pfad bzw. die URL wo das Bild physikalisch gespeichert ist an. Richtlinien für die WBMP-Grafik Erstellung siehe WBMP - Das Grafikformat für WAP.

alt="ALTERNATIV TEXT" gibt einen alternativen Text aus für den Fall, daß der WML-Browser keine Bilder darstellen kann. Hier sind Leerzeichen zwischen Worten erlaubt.

vspace="VERTIKALER ABSTAND" Hier können Sie den vertikalen Abstand des Bildes ober- und unterhalb von Objekten in Pixeln angeben.

hspace="HORIZONTALER ABSTAND" Hier können Sie den horizontalen Abstand des Bildes links und rechts von Objekten in Pixeln angeben.

align="AUSRICHTIUNG" Definiert die Ausrichtung der Grafik innerhalb der Card. Gültige Werte hierfür sind:

• align="middle" mittige Ausrichtung
• align="top" Ausrichtung an der Oberkante
• align="bottom" Ausrichtung an der Unterkante

height="BILDHÖHE" bestimmt die Höhe des eingefügten Bildes in Pixel.

width="BILDBREITE" bestimmt die Breite des eingefügten Bildes in Pixel.

Sehen wir uns die Verwendung des Tags in einem kleinen Beispiel an

Beispiel

In diesem Beispiel demonstriere ich daß vspace (oben/unten) bzw. hspace (links/rechts) symmetrische Abstände bewirken (siehe Bild).

Der Sourcecode, um dieses Display zu erzeugen, sieht wie folgt aus:

1: <?xml version="1.0"?> 
2:<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"  
  "http://www.wapforum.org/DTD/wml_1.1.xml">
3:<wml>
4:	<card id="card1" title="ASPHeute.com">
5:		<p>
6:		<img src="ASPH.WBMP" alt="ASPHeute Logo"
7:           vspace="3" hspace="5" align="top"
8:  			 height="15" width="30"/>
9:		</p>
10:	</card>
11:</wml>

Das Attribut vspace="3" in Zeile 7 bedeutet, daß der Abstand ober- und unterhalb des Bildes zu anderen Objekten 3 Pixel betragen soll. Der linke und rechte Abstand des Bildes zu anderen Objekten wird mit hspace="5" auf 5 Pixel gesetzt. Die Ausrichtung an der Oberkante der Card erledigt das Statement align="top".

Als Abschluß dieses Artikels noch ein kleines Beispiel, das die WML-Site interessanter macht - ein Beispiel mit ASP.

WBMP-Bilder zufällig anzeigen

Für den Fall, daß Sie wechselnde WBMP-Bilder auf Ihrer WML-Site anzeigen wollen, gibt es eine Möglichkeit mit Hilfe von ASP (Active Server Pages). Die ASP-Datei wählt zufällig aus einer beliebigen Anzahl von Bildern eines aus. Bei jedem Sitebesuch wird nun ein anderes angezeigt.

Wie das geht? - Ganz einfach:

Zuerst erstellen Sie ein neues Verzeichnis auf Ihrem Webserver (z.B. ..\images). Danach kopieren Sie Ihre zuvor erstellten WBMP-Grafiken in dieses Verzeichnis. Wie man WBMP-Grafiken erstellen lesen Sie hier.

Der folgende Code sorgt für die zufällige Auswahl der Bilder:

 1: <%
 2: dim x(3)
 3: 
 4: 'Angabe des Verzeichnisses wo die bilder gespeichert sind 
 5: Const picpath="/images"
 6: 
 7: Set filesystem = CreateObject("Scripting.FileSystemObject")
 8: Set folder = filesystem.GetFolder(Server.MapPath(picpath))
 9: 
10: Set filecollection = folder.Files
11: 
12: 'mit Hilfe des FileSystemObjects alle Dateien einlesen
13: idx=0
14: For Each file in filecollection
15:   idx=idx+1
16:   x(idx)=file.name
17: Next
18: 
19: 'Auswahl eines Bildes
20: randomize timer
21: PicNo=int(rnd()*idx)+1
22: 
23: 'Ressourcen wieder freigeben
24: set filesystem=nothing
25: set folder=nothing
26: set filecollection=nothing
27: 
28: 'Ausgewähltes Bild Anzeigen
29: response.write "<img src=" & mypath  & "/" 
30: response.write x(PicNo)& " alt=" & x(PicNo)>"
31: %>    

In Zeile 2 wurde ein Array der Größe 3 erstellt, da hier 3 Beispiel WBMP-Grafiken vorhanden sind. Natürlich können Sie je nach Anzahl Ihrer Bilder die von Ihnen benötigte Größe des Arrays angeben (und natürlich auch dynamisch mit Redim).

Die Zeile 10 weist den Server an die Dateinamen aller Bilder die sich im Verzeichnis (z.B \images) befinden einzulesen (FileSystemObject). In der Zeile 14 bis 17 werden alle gefundenen Dateinamen im Verzeichnis, wo die Bilder gespeichert wurden, in das vorher definiert Array transferiert und gleichzeitig die Anzahl der vorhandenen Bilder ermittelt.

Die Randomize-Funktion (Zeile 20) generiert eine Zahl von 1 bis zu der gültigen Anzahl von vorhandenen Bildern. Diese ermittelte Nummer, welche als Index des definierten Arrays verwendet wird, wird in der Variable "PicNo" gespeichert.

In Zeile 24 bis 26 werden die verwendeten Ressourcen des FileSystemObjects wieder freigegeben.

Jetzt brauchen Sie noch eine Card Ihrer WML-Site erstellen, um die ASP-Datei darin einzubinden. Das könnte so aus sehen (Achtung: die Dateiendung WML muß auf die ASP Engine gemappt sein, damit das funktioniert!):

<?xml version="1.0"?> 
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" 
	"http://www.wapforum.org/DTD/wml_1.1.xml"> 
 
<wml> 
	<card id="card1" title="ASPHeute.com"> 
	<p> 
	Ein zufaellig ausgewaehltes Bild:
	<!-- #INCLUDE FILE="rndpic.asp"-->
	</p> 
	</card> 
</wml>

Schlußbemerkung

Mit diesem Artikel sollten Sie in der Lage sein, in Ihre WML-Site Grafiken einzubinden, und diese auch innerhalb ihrer Card nach Ihren Wünschen formatieren bzw. zu positionieren. Seien Sie nochmals darauf hingewiesen, daß die Grafiken im Moment nur 1 Bit Farbtiefe (schwarz/weiß) haben und die Auflösung noch mäßig ist. Obwohl die WBMP-Dateigröße gering ist, haben Decks mit vielen Grafiken lange Ladezeiten und die Cards müssen, um zu den Textinformationen zu gelangen, mühsam durchgescrollt werden.

Download des Codes

Klicken Sie hier, um den Download zu starten.

Verwandte Artikel

IIS Konfiguration für WAP
WBMP - Das Grafikformat für WAP

Links zu anderen Sites

Nokia WAP Developer Page

Wenn Sie jetzt Fragen haben...

Wenn Sie Fragen rund um die in diesem Artikel vorgestellte Technologie haben, dann schauen Sie einfach bei uns in den Community Foren der deutschen .NET Community vorbei. Die Teilnehmer helfen Ihnen gerne, wenn Sie sich zur im Artikel vorgestellten Technologie weiterbilden möchten.

Haben Sie Fragen die sich direkt auf den Inhalt des Artikels beziehen, dann schreiben Sie dem Autor! Unsere Autoren freuen sich über Feedback zu ihren Artikeln. Ein einfacher Klick auf die Autor kontaktieren Schaltfläche (weiter unten) und schon haben Sie ein für diesen Artikel personalisiertes Anfrageformular.

Und zu guter Letzt möchten wir Sie bitten, den Artikel zu bewerten. Damit helfen Sie uns, die Qualität der Artikel zu verbessern - und anderen Lesern bei der Auswahl der Artikel, die sie lesen sollten.