[ Impressum ]

Eine Konsole für Experimente mit Zebra

www.Rozek.de > Zebra > Console
Der Einfachheit halber geben viele der auf diesen Seiten gezeigten Zebra-Experimente und -Studien ihre Ergebnisse in Form unformatierter Texte aus. Die vorliegende Notiz beschreibt deshalb eine einfache "Konsole" zur Ausgabe und Anzeige dieser Texte innerhalb einer Zebra-Anwendung.

Console

Da Zebra [1] bereits über Mechanismen zur Anzeige von unformatiertem Text verfügt, gestaltet sich die Implementierung einer Konsole recht einfach:
  • ein "Model" vom Typ zebra.data.Text hält den jeweiligen Konsolen-Inhalt vor,
  • ein "Renderer" vom Typ zebra.ui.TextRender übernimmt die eigentliche Textdarstellung,
  • mithilfe eines zebra.ui.ViewPan wird aus dem Renderer ein "echtes" GUI-Element,
  • und alles zusammen wird in ein zebra.ui.ScrollPan gepackt um auch Texte handhaben zu können, die die Grenzen der Anzeige sprengen.
Und fertig ist die gewünschte Komponente:
zebra.ui.Console = zebra.Class(zebra.ui.ScrollPan,[
function () {
this._Model = new zebra.data.Text(''); // holds the actual content


var View = new zebra.ui.TextRender(this._Model); // actual text display
View.setColor('green');
View.setFont('bold 14px Courier New, Courier, monospace');
var ViewPan = new zebra.ui.ViewPan();
ViewPan.setView(View);
this.$super(ViewPan); // important! invoke superclass constructor
},


function (Message) {
this.$this();
this.write(Message);
},


function clear () {
this._Model.setValue('');
},


function write (Message) {
this._Model.write(Message,this._Model.getTextLength());
},


function writeln (Message) {
this.write(Message + '\n');
}
]);

Die beiden Methoden write und writeln vereinfachen die Benutzung der Konsole - und sind der eigentliche Grund für die Entwicklung dieser Komponente..

Anwendungsbeispiele

Die Verwendung von zebra.ui.Console gestaltet sich denkbar einfach:
var ZebraCanvas = new zCanvas("ZebraCanvas");
var Console = new zebra.ui.Console('ready for operation\n');


ZebraCanvas.root.properties({
layout: new BorderLayout(),
kids: {
CENTER: Console.properties({
background: 'black',
padding: 4,
color: 'green',
font: 'bold 14px Courier New, Courier, monospace'
})
}
});
ZebraCanvas.fullScreen();


Console.write('Hello, ');
Console.writeln('Zebra!');

Die Konsole muss also zunächst instanziert werden - gleichzeitig sollte man sie einer lokalen oder globalen Variable zuweisen, um später wieder darauf zugreifen zu können. Anschließend bindet man sie als Komponente in eine Zebra-Oberfläche ein (im gezeigten Beispiel füllt die Konsole die gesamte Anzeige aus).

Von jetzt an kann mittels Console.write(...) ein neuer Text an die bisherige Ausgabe angehängt werden - Console.writeln(...) fügt zusätzlich noch einen Zeilenvorschub hinzu. Mittels Console.clear() läßt sich der Konsoleninhalt komplett löschen.

Ich persönlich vereinfache die Verwendung gerne noch weiter, indem ich folgende zwei Methoden definiere:
var say = function say (Message) {
if (Message === undefined) { Message = '' };
Console.write(Message);
};


var sayln = function sayln (Message) {
if (Message === undefined) { Message = '' };
Console.writeln(Message);
};

Die Namen say und sayln sind dabei eine Reminiszenz an die Skriptsprache REXX [2], mit der ich bereits in den 80er Jahren äußerst produktiv sein konnte.

Das folgende kleine JSFiddle demonstriert die zuvor beschriebene Komponente und ihre Verwendung:


Viel Spaß damit!

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]
(Wikipedia)
REXX
Von der Web-Seite: "REXX (Abkürzung für Restructured Extended Executor) ist eine von Mike Cowlishaw bei IBM entwickelte Skriptsprache. [...]"