[ Impressum ]

Einbinden von Zebra in Web-Anwendungen

www.Rozek.de > Zebra > Skeleton
Zebra [1] lässt sich auch ohne lokale Installation problemlos in eine Web-Anwendung einbinden [2] - dazu ist dann allerdings eine funktionierende Internet-Verbindung erforderlich. Zudem muss der angesprochene Server (repo.zebkit.org) funktionieren und erreichbar sein.

Gerüst für eine Web-Anwendung mit Zebra

Eine einfache Web-Anwendung mit Zebra kann wie folgt aussehen [3]:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'/>


<title>(a simple Zebra WebApp Skeleton)</title>


<script type="text/javascript" src="http://repo.zebkit.org/latest/zebra.js"></script>
</head>
<body>
<script type="text/javascript">
zebra.ready(function() {
var Canvas = new zebra.ui.zCanvas('ZebraCanvas');
Canvas.root.properties({
layout : new zebra.layout.BorderLayout(8,8),
border : new zebra.ui.Border(),
padding: 8,
kids: {
CENTER: new zebra.ui.Label("Hello, Zebra!")
}
});
});
</script>
</body>
</html>

Den Quelltext 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)

Gerüst für eine mobile Web-Anwendung mit Zebra

Eine Web-Anwendung mit Zebra für mobile Endgeräte sollte ein paar weitere Zeilen enthalten [4] und sieht dann beispielsweise so aus:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'/>


<title>(a simple Zebra WebApp Skeleton)</title>

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>


<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="apple-mobile-web-app-title" content="Zebra Skeleton"/>


<script type="text/javascript" src="http://repo.zebkit.org/latest/zebra.js"></script>
</head>
<body>
<script type="text/javascript">
zebra.ready(function() {
var Canvas = new zebra.ui.zCanvas('ZebraCanvas');
Canvas.fullScreen();
Canvas.root.properties({
layout : new zebra.layout.BorderLayout(8,8),
border : new zebra.ui.Border(),
padding: 8,
kids: {
CENTER: new zebra.ui.Label("Hello, Zebra!")
}
});
});
</script>
</body>
</html>

Den Quelltext 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)

JSFiddle mit Zebra

Zebra kann problemlos auch mit JSFiddle [5] genutzt werden. Ein eigenes JSFiddle mit Zebra legt man z.B. wie folgt an:
  • der HTML-Bereich bleibt leer
  • in den CSS-Bereich schreibt man folgende Zeilen
</style><!-- suspends style definitions -->
<script type="application/javascript" src="http://repo.zebkit.org/latest/zebra.js"></script>
<style>/* resumes style definitions */

Die "CSS"-Zeilen muten vielleicht etwas ungewöhnlich an, sind aber erforderlich, um JSFiddle den Zebra-Import unterzuschieben.
  • der JavaScript-Bereich nimmt schließlich das eigentliche Programm auf
zebra.ready(function() {
var Canvas = new zebra.ui.zCanvas('ZebraCanvas');
Canvas.fullScreen();
Canvas.root.properties({
layout : new zebra.layout.BorderLayout(8,8),
border : new zebra.ui.Border(),
padding: 8,
kids: {
CENTER: new zebra.ui.Label("Hello, Zebra!")
}
});
});

Alternativ kann aber auch einfach nur das folgende JSFiddle (mittels "Edit in JSFiddle") bearbeitet werden.


Viel Spaß mit Zebra!

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.
[2]
Andrei Vishneuski
Get in
Diese Seite erklärt, wie man Zebra an eine Web-Seite anschließt und welche Umgebungsvariablen es bereitstellt.
[3]
Andrei Vishneuski
Result in 5 minutes
Diese Seite enthält eine Kurzanleitung für die Erstellung einer einfachen Zebra-Anwendung.
[4]
Andrei Vishneuski
Mobile Devices
Zebra funktioniert auch auf mobilen Geräten (wie z.B. Smartphones oder Tablets). Dabei sind allerdings ein paar Details zu beachten - diese Seite erläutert, welche.
[5]
Piotr Zalewa, Oskar Krawczyk
JSFiddle
JSFiddle ist so etwas wie eine Browser-gestützte Online-Entwicklungsumgebung für einfache JavaScript-Anwendungen, die ebenfalls innerhalb eines Browsers ausgeführt werden. Die erstellten Quelltexte sind öffentlich zugänglich und können durch simple Angabe einer URL bekannt gemacht werden.