[ Impressum ]

Lokale Installation von Zebra

www.Rozek.de > Zebra > Installation
Zebra [1] kann zunächst einmal auch ohne lokale Installation eingesetzt werden. Möchte man aber von der Erreichbarkeit des Zebra-Servers (repo.zebkit.org) unabhängig sein oder Zebra gar individuell konfigurieren, empfiehlt sich eine Installation auf dem lokalen Rechner.

Benötigte Dateien

Neben der mittels <script>-Direktive eingebundenen Datei (meist zebra.js oder zebra.min.js) sind noch weitere Dateien erforderlich, die von Zebra zur Laufzeit nachgeladen werden [2]. Eine vollständige Installation umfasst die folgenden Dateien und Verzeichnisse:
  • zebra.js und/oder zebra.min.js
  • zebra.canvas.js und/oder zebra.canvas.min.js
  • zebra.io.js und/oder zebra.io.min.js
  • canvas.json
  • commands.json und/oder commands.osx.json
  • ui.json
  • rs/*
Die .js-Dateien enthalten den eigentlichen Zebra-Quelltext, die .json-Dateien dienen der anfänglichen Konfiguration von Zebra-Komponenten und das Verzeichnis rs umfasst eine Reihe von GIF-Dateien, die von Zebra an verschiedenen Stellen benötigt werden.

Diese Dateien (und das Verzeichnis) können von GitHub heruntergeladen und anschließend in ein beliebiges Verzeichnis kopiert werden - sofern sie dort für Web-Anwendungen erreichbar sind.

Ein lokaler Server für Zebra

Da Zebra zur Laufzeit (mithilfe eines XMLHTTPRequest) Dateien nachlädt, kann eine Zebra-Anwendung derzeit nicht von einem Dateisystem (d.h. über eine "file://"-URL) aus aufgerufen sondern muss zwingend von einem Web-Server ausgeliefert werden.

Einfache HTTP-Server gibt es zuhauf - ich persönlich bevorzuge Node.js mit dem npm-Paket "http-server" (weil ich ohnehin mit Node.js und Node-Webkit arbeite). Ein solcher Server kann für Zebra wie folgt aufgesetzt werden:
  • installieren Sie Node.js für Ihre Plattform;
  • erstellen Sie ein Verzeichnis, von dem aus Sie Ihre Zebra-Anwendungen ausliefern wollen (z.B. zebra);
  • öffnen Sie ein Kommandozeilen-Fenster und wechseln Sie in dieses Verzeichnis;
  • installieren Sie das npm-Paket "http-server":
npm install http-server

Für dieses Kommando ist eine funktionierende Internet-Verbindung erforderlich. Am Ende finden Sie innerhalb des zebra-Verzeichnisses ein neues Verzeichnis namens node_modules mit weiteren Unterverzeichnissen - dorthinein wurde der HTTP-Server installiert.
  • legen Sie in Ihrem zebra-Verzeichnis ein neues Unterverzeichnis namens js an (der Name ist willkürlich, orientiert sich aber an der Konvention, dass JavaScript-Dateien für Web-Seiten und -Anwendungen innerhalb eines js-Verzeichnisses abgelegt werden);
  • kopieren Sie die im vorherigen Abschnitt aufgeführten Dateien (und das Verzeichnis) in das gerade angelegte js-Verzeichnis;
  • starten Sie den frisch installierten Server (aus dem zebra-Verzeichnis heraus!) z.B. mittels
node_modules/http-server/bin/http-server

Durch den Start aus dem zebra-Verzeichnis heraus wird dieses automatisch zum Basis-Verzeichnis des Web-Servers.

Um den Server zu testen, schreiben Sie folgende Zeilen in eine Datei namens HelloZebra.html und legen diese im zebra-Verzeichnis ab:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'/>


<title>Hello, Zebra!</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="Hello Zebra"/>


<script type="text/javascript" src="js/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>

Anschließend öffnen Sie einen Browser und besuchen folgende Seite:

127.0.0.1:8080/HelloZebra.html

Sofern alles ordnungsgemäß funktioniert, sollten Sie nun Ihre erste lokal installierte Zebra-Anwendung sehen...

Da die gezeigte Zebra-"Anwendung" für mobile Endgeräte konzipiert ist, können Sie sie auch auf einem Smartphone oder einem Tablet betrachten.

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 - was aber nicht funktionieren könnte - und Ihnen eine leere Seite anzeigen)

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
Resources and configuration
Zebra kann von Anfang an und in relativ großem Umfang mithilfe von JSON-Dateien konfiguriert werden. Diese Seite erklärt, wo die betreffenden Dateien liegen und erläutert zudem das Zebra-eigene JSON-Format.