Base64-kodierte Bilder
Wenn ein Bild als Base64-Text kodiert ist, kann es als Textinhalt eines XML-Element-Node gespeichert werden. Im Codefragment unten ist das Base64-kodierte Bild der Inhalt des Elements <png>.
<images><png>iVBORw0KGgoAAAANSUhEU...</png></images>
Um ein Base64-kodiertes Bild einzufügen, muss das Ergebnis des XPath-Ausdrucks der Eigenschaft Bildquelle des Bild-Steuerelements der Base64-kodierte Textstring des Bilds sein. Sie können auch einen XML-Node, der den Base64-kodierten Textstring des Bilds enthält, aus dem Fenster "Seitenquellen" auf das Bild-Steuerelement ziehen. Anhand des Beispiels unten wird gezeigt, wie Base64-kodierte Bilder in Designs verwendet werden können.
| Anmerkung: | Bilder in Seitenquellen-Nodes und Datenbanken werden als Base64-kodierte Bilder gespeichert. |
Beispieldatei: Base64Images.mtd
Die Designdatei Base64Images.mtd befindet sich in Ihrem Ordner (Eigene) Dokumente MobileTogether: MobileTogetherDesignerExamples\Tutorials\Images. Sie können diese Datei in MobileTogether Designer öffnen, Sie im Simulator ausführen (F5) und sich die Designdefinitionen ansehen.
In der Designdatei werden Base64-kodierte Bilder verwendet, die in der XML-Datei Base64Images.xml (ebenfalls im Ordner Tutorials) gespeichert sind. Die Struktur der XML-Datei sehen Sie in der Abbildung unten. Das Element images hat fünf Child-Elemente, von denen jedes ein als Base64-Textstring kodieres Bild eines anderen Formats enthält. In der Struktur $PERSISTENT werden die temporäre Benutzerauswahl (ComboBoxValue) und die Exif-Daten des ausgewählten Bilds, falls vorhanden, gespeichert.
Das Design (Abbildung unten) enthält eine Beschriftung für den Seitentitel und zwei Tabellen. Die erste Tabelle enthält eine Auswahlliste und ein Bild. Die zweite Tabelle enthält eine Beschriftung und ein Bearbeitungsfeld.
Wir wollen nun einen Bildtyp in der Auswahlliste auswählen (siehe Abbildung des Simulators unten). Anhand der in der Auswahlliste getroffenen Auswahl wird das anzuzeigende Base64-Bild (aus der XML-Datei) ausgewählt.
Beachten Sie bitte die folgenden Punkte:
•Das Ereignis BeimLadenDerSeite initialisiert den Node $PERSISTENT/ComboBoxValue mit dem Wert jpg.
•Die Auswahlliste ist (durch Ziehen des Node aus dem Fenster "Seitenquellen" auf die Auswahlliste) mit dem Node $PERSISTENT/ComboBoxValue verknüpft. Durch diese Verknüpfung wird der aktuelle Wert des Node in der Auswahlliste angezeigt und der Node wird durch die in der Auswahlliste getroffene Auswahl aktualisiert.
•Die Dropdown-Liste der Auswahlliste wurde mit einer einfachen Werteliste erstellt.
•Die Eigenschaft Art der Bildquelle des Bild-Steuerelements ist auf base64 gesetzt.
•Für die Eigenschaft Bildquelle des Bild-Steuerelements wurde der folgende XPath-Ausdruck definiert: $XML1/images/element()[local-name() eq $PERSISTENT/Root/ComboBoxValue]. Dieser Ausdruck wählt das Child-Element des Elements images, das einen Namen hat, der mit dem Inhalt des Node $PERSISTENT/ComboBoxValue identisch ist, aus. Kurz gesagt, wir wählen das Base64-kodierte Element image in der XML-Datei aus, deren Name mit dem Inhalt des Node $PERSISTENT/ComboBoxValue übereinstimmt.
•Wenn der Endbenutzer also einen Eintrag in der Auswahliste auswählt, wird der Wert dieses Eintrags in den Node $PERSISTENT/ComboBoxValue eingegeben. Anhand des Werts dieses Node wird daraufhin das richtige Base64-Bildelement in der XML-Datei ausgewählt. Wenn in der Auswahlliste z.B. png ausgewählt wird, so wird png als Wert des Node $PERSISTENT/ComboBoxValue eingegeben. Der XPath-Ausdruck der Eigenschaft Bildquelle wählt anschließend das png-Element der XML-Datei aus und zeigt seinen Inhalt (das Base64-kodierte PNG-Bild) als Bild an.
•Nun muss noch eine wichtige Aktion definiert werden. Wir müssen definieren, dass das Bild, jedes Mal, wenn in der Auswahlliste ein neuer Wert ausgewählt wird, neu geladen wird. Jedes Mal, wenn das Bild neu geladen wird, wird der Wert in $PERSISTENT/ComboBoxValue gelesen und das entsprechende Bild aus der XML-Datei aufgerufen.
•In der zweiten Tabelle wird der Bildtyp mit Hilfe der Altova XPath-Erweiterungsfunktion suggested-image-file-extension aus dem Base64-kodierten Textstring gelesen. Diese Funktion erhält einen String (das Base64-Bild) als Argument und ruft die Dateierweiterung aus dem String ab. Falls der Base64-String keine Dateierweiterungsinformationen enthält, wird ein leerer String zurückgegeben. Der XPath-Ausdruck dafür ist:
for $k
in suggested-image-file-extension($XML1/images/element()[local-name() eq $PERSISTENT/Root/ComboBoxValue])
return if ($k != '') then $k else "Data not available"
Der Ausdruck erstellt eine Variable ($k), die die von der Funktion suggested-image-file-extension zurückgegebene Dateierweiterung enthält. Wenn die Variable nicht leer ist, wird ihr Inhalt angezeigt; andernfalls wird eine entsprechende Meldung angezeigt.
Im nächsten Abschnitt Exchangeable Image File Format (Exif), wird der restliche Teil des Designs, in dem die Exif-Daten behandelt werden, beschrieben.