- 18 Dec 2023
- 8 Minuten Lesezeit
- Drucken
Database integrieren
- Aktualisiert am 18 Dec 2023
- 8 Minuten Lesezeit
- Drucken
Die GFWizardBase ist die Schnittstelle zwischen dem Spot und allen Bereichen, in denen der Spot abgespielt und angezeigt wird. Dabei handelt es sich um eine JavaScript-Bibliothek, die Sie in HTML Wizard-Spots integrieren müssen, um sicherzustellen, dass der Spot im Grassfish-System ordnungsgemäß Functioniert.
Sie können die Datei GFWizardBase in Unterverzeichnissen verschachteln, aber nicht bearbeiten. Verwenden Sie ein <script> Tag, um die Datei in die Website einzufügen.
Hinweis
Sie dürfen nicht auf die Methoden der GFWizardBase zugreifen, bis die JavaScript-Datei initialisiert wurde.
Um auf die Methoden zuzugreifen, verwenden Sie die Methode body onload wie folgt:
<body onload="init()">
//gfWizardBase must be accessed globally!
var gfWizardBase = new GFWizardBase();
Function init()
{
//register all events
gfWizardBase.registerDataChangedHandler(onDataChanged);
//notify the container that you are ready
gfWizardBase.sendReady();
alert(gfWizardBase.getVersion());
}
Function onDataChanged(jsonData)
{
}
Spot initialisieren
Zunächst muss der Spot ein ready Event senden, damit die Container wissen, dass sie nun mit dem Spot kommunizieren können. Dieser Aufruf sieht wie folgt aus:
gfWizardBase.sendReady();
Sobald der Spot seine Bereitschaft gemeldet hat, erhält er seine JSON-Daten aus dem Container. Sobald die Daten festgelegt wurden, sendet der Spot automatisch ein InitComplete Ereignis an den Container, das an den Player weitergeleitet wird. Dadurch weiß der Spieler, dass er den Spot spielen kann.
Sie können InitComplete bei Bedarf verzögern, indem Sie sendReady einen wahren Parameter hinzufügen. Daher wird das InitComplete Ereignis nicht automatisch beim Festlegen der Daten ausgelöst, sondern muss manuell ausgelöst werden.
gfWizardBase.sendReady(true);
//do your asynchronous stuff, e.g. call a webservice
gfWizardBase.sendInitComplete();
Hinweis
Wenn Sie InitComplete manuell auslösen möchten, müssen Sie dies tun, da sonst während der Wiedergabe Fehler auftreten.
Wenn Sie die GFSpotBase auch in einem HTML Wizard-Spot verwenden, lösen Sie nur sendInitComplete() der GFWizardBase und nicht der GFSpotBase aus.
Daten empfangen
Damit der Spot von einem Benutzer eingegebene Daten empfangen kann, muss er sich für das dataChanged-Ereignis registrieren. Dies geschieht wie folgt:
gfWizardBase.registerDataChangedHandler(onDataChanged);
Function | Registriert eine RückrufFunction, die zunächst aufgerufen wird und wenn sich Daten im HTML Wizarden geändert haben. |
Parameter | Function(jsonData) jsonData die JSON-Daten, die vom HTML Wizard stammen (der geänderte Inhalt aus der Datei ascData.json) [string] |
Beispiele |
|
Player | Windows/Linux, Android |
Animationen starten und stoppen
Der Spot kann im HTML Wizarden mehrmals gestartet und gestoppt werden. Um die Animationen zu starten, sendet der Container per Callback einen Play-Befehl, zum Stoppen wird ein Stop-Callback ausgeführt.
gfWizardBase.registerPlayHandler(onPlay);
Function | Startet die Animationen an der Stelle. Dies wird vom Player, der Vorschau oder dem HTML Wizarden aufgerufen, wenn die Animationen im Spot starten sollen. Zuvor sollte der Spot keine Animationen abspielen. |
Parameter | Keine |
Beispiele | gfWizardBase.registerPlayHandler(startMyAnimations); |
Player | Windows/Linux, Android |
gfWizardBase.registerStopHandler(onStop);
Function | Stoppt die Animationen an der Stelle. Es wird vom Player, der Vorschau oder dem HTML Wizarden aufgerufen, wenn die Animationen im Spot anhalten sollen. Der Spot sollte alles auf den ursprünglichen Zustand zurücksetzen, da die Wiedergabe im HTML Wizarden erneut ausgeführt werden kann. |
Parameter | Keine |
Beispiele | gfWizardBase.registerStopHandler(resetMyAnimations); |
Player | Windows/Linux from global version 10.0 onwards Android from player version 8.1.0.2 onwards |
Nahrichten loggen
Es ist möglich, die Protokollausgabe auf dem Bildschirm anzuzeigen. Hier anzuzeigende Nachrichten müssen über sendLog an den Container gesendet werden. Sie können eine Verbindung zu diesen Protokollnachrichten herstellen, um über den Rückruf registerLogHandler weiterhin im Spot darauf zu reagieren.
gfWizardBase.sendLog("message");
Function | Protokolliert die Meldung im Bildschirmprotokoll der ASC-Schnittstelle. Das Protokoll muss in der ASC-Schnittstelle über den URL-Parameter &debug=true aktiviert werden. |
Parameter | message Die Nachricht, die gelogged werden soll. [string] |
Beispiele | gfWizardBase.sendLog("message"); |
Player | Windows/Linux |
gfWizardBase.registerLogHandler(onLog);
Function | Callback-Function für sendLog zur weiteren Verarbeitung vor Ort. |
Parameter | message Die Nachricht, die gelogged werden soll. [string] |
Beispiele |
|
Player | Windows/Linux |
Element auswählen
Im Wizard können Sie ein Element auswählen, das im Spot ein Ereignis auslöst. Darüber hinaus können Sie Elemente im Spot auswählen und ein Ereignis an den Wizard senden.
Sie können sich für die Function registerElementSelectedHandler registrieren, um auf Ereignisse durch im Wizard getroffene Auswahlen zu reagieren. Verwenden Sie die sendSelectElement-Function, um selbst ein Auswahlereignis auszulösen.
gfWizardBase.registerElementSelectedHandler(onElementSelected);
Function | Dieser Rückruf wird aufgerufen, wenn ein Element im Wizardbaum ausgewählt wurde. |
Parameter | Function(id) id Die ElementId des ausgewählten Elements aus den JSON-Daten. [string] |
Beispiele |
|
Player | Nicht relevant für Player. |
gfWizardBase.sendSelectElement("id");
Function | Diese Funktion teilt dem Wizard mit, dass ein Element im Baum ausgewählt werden soll. |
Parameter | id die ElementId eines aus den JSON-Daten auszuwählenden Elements. [String] |
Beispiele | gfWizardBase.sendSelectElement("id"); |
Player | Nicht relevant für Player. |
Tasks festlegen
Über die JSON-Konfiguration können Sie Aufgaben für HTML-Wizard-Spots festlegen, die dem Benutzer im Editor angezeigt werden.
Hinweis
Speichern Sie keine Spots mit unvollständigen Aufgaben und fügen Sie sie nicht zu Playlists hinzu. Sie können nicht abgespielt oder auf den Spieler übertragen werden.
Mit Tasks können Sie Abhängigkeiten zwischen einzelnen Konfigurationen herstellen. Es ist möglich, einen Pflichteintrag mit einer Bedingung zu verknüpfen. Die Eingabe eines SimpleText Elements ist nur dann obligatorisch, wenn ein verknüpftes Listenelement einen bestimmten Wert hat.
gfWizardBase.addTodo("id", "message");
Function | Mit dieser Funktion ist es möglich, eine Aufgabe zu registrieren. Dieser Aufgabe ist ein spezifisches Element zugeordnet, in dem die Aufgabe dargestellt und mit Text versehen wird, um die erforderliche Aktion zu beschreiben. Optional können Übersetzungen eingestellt werden, um den Text der Aufgabe in verschiedenen Sprachen anzuzeigen. Durch den Aufruf der Funktion wird ein entsprechender Aufgabentext für ein angegebenes Element registriert. Die Anzeige ist noch nicht erfolgt, was die Möglichkeit bietet, mehrere Aufgaben zu sammeln. Die Anzeige wird durch den Aufruf der sendTodo Funktion ausgelöst. |
Parameter | elementId Einmalige ID des Elements (ascData.json) [string] message Nachricht, die angezeigt werden soll. [string] translation Übersetzung im Format {"en": "translation"} [object] |
Beispiele | gfWizardBase.addTodo("id", "message", {"en": "translation"}); s |
Player | Nicht relevant für Player |
gfWizardBase.sendTodos();
Function | Diese Funktion überträgt alle zuvor gesammelten Aufgaben über die addTodo-Funktion an den Editor und zeigt sie an. Durch Aufrufen der sendTodo Funktion wird der Editor benachrichtigt, dass alle Aufgaben gesammelt und validiert wurden und zur Anzeige bereit sind. |
Parameter | Keine |
Beispiele |
|
Player | Nicht relevant für Player |
Beispiel: Definition von Tasks
In diesem Beispiel sollte der Editor ein Boolean und ein SimpleText Element haben.
Wenn das Boolean Element inaktiv ist, ist keine Validierung erforderlich und jedes SimpleText Element kann eingegeben werden.
Wenn das Boolean Element aktiviert ist, müssen genau zwei SimpleText Werte angegeben werden.
Wie üblich müssen Sie beide Elementeinträge über die Datei ascData.json setzen und haben daher zunächst keine logische Verbindung zueinander:
...
"Elements": [
{
"Id": "checkbox",
"DataType": "boolean",
"DisplayName": "Checkbox",
"Value": true
},
{
"Id": "text",
"DataType": "simpleText",
"DisplayName": "Text",
"Value": [
{
"Text": ""
}
],
"Options": {
"NumberOfInstances": 5
}
}
]
...
Durch die Definition einer Aufgabe können Sie die gewünschte Abhängigkeit anzeigen, während die erforderlichen Funktionen von der GFWizardBase-Bibliothek bereitgestellt werden. Implementieren Sie es wie folgt:
gfWizardBase.registerDataChangedHandler(Function(jsonData)
gfWizardBase.registerDataChangedHandler(Function(jsonData)
{
var spot = gfWizardBase.getChainedElementData();
// validate if checked
if (spot.checkbox.getValue())
{
// check length and both text fields valid
if (spot.text.getValues().length !== 2 ||
!spot.text.getValue(0) || !spot.text.getValue(1))
{
gfWizardBase.addTodo("text", "2 text values are mandatory");
}
}
// propagate todos
gfWizardBase.sendTodos();
});
Die Validierung erfolgt über die registrierte Callback-Funktion des dataChangedHandlers und wird über einen Eintrag im Editor aufgerufen, der eine Datenänderung impliziert.
Wenn die Checkbox aktiv ist, wird die Validierung durchgeführt und geprüft, ob zwei SimpleText Werte verfügbar sind. Zusätzlich zur Validierung der Länge des Arrays werden beide Werte überprüft.
Im Fehlerfall wird die Aufgabe über die addTodo Funktion registriert und über die sendTodo Funktion an den Editor zur Anzeige übergeben.
Hinweis
Es ist möglich, eine unbegrenzte Anzahl von Aufgaben mit entsprechenden Validierungen festzulegen. Diese müssen vor der eigentlichen Übergabe an den Herausgeber angemeldet bzw. durchgeführt werden. Das heißt vor der sendTodo Funktion.
Tasks im Editor
Wenn Sie den Editor in der IXM Plattform öffnen und der Spot ausstehende Aufgaben hat, sehen Sie die folgenden Symbole:
Klicken Sie auf das jeweilige Symbol, um mehr über die Aufgaben zu erfahren und diese zu erledigen.
Errors festlegen
Neben der Konfiguration über die JSON-Struktur können Sie auch Fehler in HTML-Wizard-Spots angeben. Beispielsweise sollten Abhängigkeiten zwischen Elementen, die ungültig sind, nicht als Einträge zugelassen werden.
Hinweis
Sie können keine Spots mit vorhandenen Fehlern speichern. Die Fehler müssen zunächst behoben werden.
Die Bedienung von Fehlern und Aufgaben ist identisch, Fehler werden jedoch über unterschiedliche Funktionen gesetzt und dem Redakteur weiter mitgeteilt.
gfWizardBase.addError("id", "message");
Function | Mit dieser Funktion kann ein Fehler registriert werden. Der Fehler wird einem bestimmten Element zugeordnet, in dem der Fehler angezeigt und mit einem Text versehen wird, der die erforderliche Korrektur beschreibt. Optional können Sie Übersetzungen für Fehlertexte in verschiedenen Sprachen angeben. Durch den Aufruf der Funktion wird für ein bestimmtes Element ein entsprechender Fehlertext registriert. Der Text wird noch nicht angezeigt und daher ist es möglich, dass mehrere Fehler gesammelt werden. Die Anzeige dieser Fehler wird direkt über die sendErrors-Funktion aufgerufen. |
Parameter | elementId Einmalige ID des Elements (ascData.json) [string] message Nachricht, die angezeigt wird. [string] translation Übersetzung im Format {"en": "translation"} [object] |
Beispiele | gfWizardBase.addError("id", "message", {"en": "translation"}); s |
Player | Nicht relevant für Player |
gfWizardBase.sendErrors();
Function | Mit dieser Funktion werden alle zuvor über die addTodo-Funktion gesammelten Aufgaben übertragen und im Editor angezeigt. Durch Aufrufen der sendErrors Funktion wird der Editor darüber informiert, dass alle Fehler gesammelt und validiert wurden und zur Anzeige bereit sind. |
Parameter | Keine |
Beispiele |
|
Player | Nicht relevant für Player |
Vorlagen verwenden
Verwenden Sie Vorlagen, um sich wiederholende Strukturen innerhalb der JSON-Konfiguration anzugeben, die dynamisch über den Editor eingebunden werden.
Dadurch kann die Komplexität der Struktur reduziert werden. Sie können eine verfügbare Vorlage beliebig oft verwenden, was die Flexibilität erhöht.
Beispiel: Vorlagen verwenden
Über den Editor können Sie eine Liste mit Teaminformationen pflegen. Einzelne Benutzer erhalten einen Eintrag für den Namen, die Funktion und ein Foto.
Ohne Vorlagen müssen Sie für jeden Mitarbeiter eine Gruppe mit zwei SimpleText-Elementen für den Namen und die Funktion sowie einem Medienelement für das Foto erstellen. Sie müssen diese Gruppe für jeden Mitarbeiter kopieren und die Identifikation (Id) der einzelnen Elemente bearbeiten. Dies bringt zwei Nachteile mit sich:
Die Anzahl der Mitarbeiter ist festgelegt und kann nur durch Bearbeiten der JSON-Dateien geändert werden.
Ändert sich die Mitarbeiterstruktur, beispielsweise durch ein zusätzliches Attribut für E-Mails, müssen Sie alle Vorfälle bearbeiten. Abhängig von der Anzahl der Einträge kann dies eine sehr mühsame und fehleranfällige Aufgabe sein.
Mit einer Vorlage müssen Sie die Mitarbeiterstruktur nur einmal als Vorlage in der JSON-Datei angeben. Über einen Platzhalter kann es beliebig oft im Editor eingebunden werden. Mit zusätzlichen Optionen ist es möglich, weitere Eigenschaften für den Platzhalter festzulegen:
Auswahl der gewünschten Vorlage (z. B. Unterscheidung zwischen operativen und leitenden Positionen)
Die Anzahl der Mitarbeiter kann begrenzt werden
Hinweis
Beispiele für den Einsatz von Vorlagen und verschachtelten Vorlagen finden Sie auf der Trainingwebsite.