[ Impressum ]

Zebra

www.Rozek.de > Zebra
Zebra [1] ist eine noch relativ neue JavaScript-Bibliothek für grafische Benutzeroberflächen in Web-Anwendungen.

Im Gegensatz zu vielen anderen Alternativen baut Zebra eine GUI nicht mithilfe von <div>-Elementen auf, sondern zeichnet sie direkt in ein HTML5 Canvas. Die Herangehensweise ähnelt stark derjenigen, die bereits vom Java AWT und von Java Swing her bekannt ist (Zebra bildet sogar Teile der Java-OOP-Mechanismen in JavaScript nach), Java-Programmierer sollten sich folglich recht schnell in Zebra zurecht finden.

Der aktuelle Entwicklungsstand erlaubt bereits sehr eindrucksvolle Oberflächen [2], allerdings sind an vielen Stellen noch Verbesserungen erforderlich. Meine Notizen zu Zebra enthalten deshalb nicht nur eine Reihe von Quelltexten und Ressourcen für neue Zebra-Anwendungen, sondern werfen auch einen tieferen Blick in die Bibliothek selbst, um auf diese Weise Möglichkeiten zur Anpassung und Erweiterung zu erhalten.

Übersicht

  • Experimente mit Zebra
  • Zebra auf dem Desktop (z.B. mit Node-Webkit)
  • Zebra auf mobilen Geräten
    • Geräte-Ausrichtung
    • Retina-Bildschirme
    • Offline-Anwendungen
       
    • Apple IOS
    • Apple IOS 7
    • Google Android
    • Amazon Kindle Fire OS
  • Zebra und PhoneGap
  • Zebra-Ergänzungen
    • CenteredLayout - zentriert die Inhalte eines Panel im verfügbaren Bereich
    • GridBagLayout - von Java her bekanntes Tabellen-artiges Layout
       
    • Color - nützliche Funktionen für die Handhabung von Farben
    • PictureSliced3x1 - zeichnet ein horizontal unterteiltes Rasterbild
    • PictureSliced3x3 - zeichnet ein zwei-dimensional unterteiltes Rasterbild
    • PictureSliced1x3 - zeichnet ein vertikal unterteiltes Rasterbild
  • iWebKit Control Kit
  • iPhone Control Kit
  • iPad Control Kit
  • Android Control Kit
  • FireOS Control Kit

Hello, Zebra!

Das nachstehende JavaScript "fiddle" [3] zeigt ein einfaches "Hello, World!" auf Zebra-Basis. Den Quelltext sehen Sie, sobald Sie zur "JavaScript"-Seite des JSFiddle wechseln. Auf der "CSS"-Seite sehen Sie, wie Zebra in eine Web-Anwendung geladen werden kann - lassen Sie sich dabei nicht von den </style>- und <style>-Direktiven stören: diese sind nur erforderlich, um JSFiddle den Zebra-Import "unterzuschieben".



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
Zebra Rich UI Live Demo
Diese Seite demonstriert viele Zebra-Elemente und -Mechanismen auf einer einzigen Web-Seite - JavaScript sollte allerdings aktiviert sein, wenn Sie den Link ansteuern.
[3]
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.