[ Impressum ]

Einbetten von Zebra-Anwendungen in Web-Seiten

www.Rozek.de > Zebra > Embedding
Zebra-Anwendungen müssen nicht notwendigerweise das komplette Browser-Fenster füllen, sondern können auch in Web-Seiten integriert werden. Dies kann entweder in Form eines <iframe>-Elementes geschehen - oder man legt explizit ein <canvas>-Element an und teilt Zebra [1] die Id dieses Elementes mit. Beide Varianten sollen hier beschrieben werden.

Zebra in einem <canvas>-Element

Möchte man Zebra mit einem explizit vorgegebenen <canvas>-Element verknüpfen, sind mehrere Details zu beachten:
  • das <script>-Element für die Einbindung von Zebra selbst muss (z.B. im Kopfbereich) in das einbettende Dokument eingefügt werden;
  • das <canvas>-Element sollte angelegt (und mit einer eindeutigen Id versehen) werden, bevor die eigentliche Zebra-Anwendung beginnt (d.h. vor dem zugehörigen <script>-Element);
  • bei der Instanzierung des zebra.ui.zCanvas muss die Id des zugehörigen <canvas>-Elementes mitgegeben werden.
Ein minimales HTML-Dokument, welches diese Voraussetzungen erfüllt, könnte wie folgt aussehen:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'/>


<title>Zebra in a Canvas</title>


<script type="text/javascript" src="http://repo.zebkit.org/latest/zebra.js"></script>
</head>
<body>
<canvas id="ZebraCanvas" style="width:400px; height:200px; background:transparent">
</canvas>


<script type="text/javascript">
zebra.ready(function() {
var Canvas = new zebra.ui.zCanvas('ZebraCanvas');
Canvas.root.properties({
background: 'transparent',
layout : new zebra.layout.BorderLayout(8,8),
border : new zebra.ui.Border(),
padding: 8,
kids: {
CENTER: new zebra.ui.Label("Hello, Zebra!").properties({
color:'black'
})
}
});
});
</script>
</body>
</html>

und lieferte ungefähr folgende Ausgabe:



Um das Laden des gesamten HTML-Dokumentes nicht zu sehr zu behindern, empfiehlt es sich, nur das <canvas>-Element an der gewünschten Stelle auf der Seite anzulegen, die zugehörigen JavaScript-Dateien aber erst ganz am Ende des Dokumentes einzubinden.

Den Quelltext der oben gezeigten HTML-Datei können Sie hier herunterladen - klicken Sie dazu mit der rechten Maustaste auf den Link und wählen Sie aus dem Kontext-Menü die Funktion "Speichern unter" (anderenfalls würde Ihr Web-Browser die Datei direkt auswerten)

Zebra in einem <iframe>

<iframe>-Elemente blenden "fremde" Web-Seiten in ein HTML-Dokument ein - und eignen sich deshalb hervorragend für das Einbetten vollständiger Zebra-Anwendungen.

Die einzubettende Zebra-Anwendung muss dazu (üblicherweise) nicht angepasst werden. Der Code für das einbettende HTML-Dokument sieht dann ungefähr wie folgt aus:
<iframe
frameborder="0"
style="width:580px; height:300px"
src="http://www.rozek.de/Zebra/Embedding/HelloZebra.html">
</iframe>

Den Quelltext für eine HTML-Datei mit solch einem <iframe> können Sie hier herunterladen - klicken Sie dazu mit der rechten Maustaste auf den Link und wählen Sie aus dem Kontext-Menü die Funktion "Speichern unter" (anderenfalls würde Ihr Web-Browser die Datei direkt auswerten)

Wer mag, kann das <iframe> noch nach Belieben "dekorieren", wie das folgende Beispiel zeigt:


Hier der zugehörige Quelltext für die einbettende Datei:
<div style="width:600px; height:400px; background-image:url(/assets/Smartphone-Mask.png)">
<iframe
frameborder="0"
style="margin-left:45px; margin-top:30px; width:480px; height:320px; background:#202020"
src="HelloZebra.html">
</iframe>
</div>

Den Quelltext für die Anwendung selbst finden Sie in der Beschreibung des CenteredLayout.

Literaturhinweise

[1]
Andrei Vishneuski
HTML5 Rich UI JavaScript Library
Zebra ist eine noch relativ neue JavaScript-Bibliothek für grafische Benutzeroberflächen in Web-Anwendungen. Diese Seite ist der primäre Anlaufpunkt, wenn Sie sich für Zebra interessieren.