Database integrieren
  • 18 Dec 2023
  • 8 Minuten Lesezeit

Database integrieren


Artikel-Zusammenfassung

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

gfWizardBase.registerDataChangedHandler(onDataChanged);

Function onDataChanged(jsonData)
{
var elementData = gfWizardBase.getElementData();
document.getElementById("myElement").innerHTML = elementData["myJsonElement"].Value;
}

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

gfWizardBase.registerLogHandler(onLog);

Function onLog(message)
{
}

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

gfWizardBase.registerElementSelectedHandler(onElementSelected); 

Function onElementSelected(id)
{

}

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

gfWizardBase.addTodo("textElement1", "do something");

gfWizardBase.addTodo("textElement2", "do something else");

gfWizardBase.sendTodos();

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:

A picture containing text, screenshot, number, font  Description automatically generated

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

gfWizardBase.addError ("textElement1", "something happened");
gfWizardBase.addError ("textElement2", "another thing happened");

gfWizardBase.sendErrors();

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.


Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.