Widget-Uebersetzungen

Das Widget-Uebersetzungsverwaltungssystem ermoeglicht es Ihnen, mehrsprachige Widgets zu erstellen, die Inhalte automatisch in der bevorzugten Sprache des Benutzers anzeigen. Dieses umfassende Uebersetzungssystem bietet eine tabellenbasierte Oberflaeche zur einfachen Verwaltung von Uebersetzungen ueber mehrere Sprachen hinweg.

Ueberblick

Widget-Uebersetzungen ermoeglichen Ihnen:

• Uebersetzungsschluessel und -werte fuer mehrere Sprachen zu definieren
• Eine tabellenbasierte Oberflaeche mit Inline-Bearbeitung zu nutzen
• Effizient mit Tastenkuerzeln (Tab/Enter) zu navigieren
• Uebersetzungsschluessel, die in Ihrem Widget-Layout verwendet werden, automatisch zu erkennen
• Beliebige Sprachcodes zu unterstuetzen (z. B. en, de, fr, es)

Zugriff auf den Uebersetzungen-Tab

1. Navigieren Sie zu Ihrem Widget-Editor
2. Klicken Sie auf den Tab Uebersetzungen
3. Beginnen Sie damit, Ihre erste Sprache hinzuzufuegen

Sprachen verwalten

Eine Sprache hinzufuegen

1. Klicken Sie auf die Schaltflaeche Sprache hinzufuegen
2. Waehlen Sie eine Sprache aus dem Dropdown (z. B. Englisch, Deutsch, Franzoesisch, Spanisch)
3. Oder geben Sie einen benutzerdefinierten Sprachcode ein (z. B. pt-BR fuer brasilianisches Portugiesisch)
4. Klicken Sie auf Hinzufuegen, um die Sprachspalte zu erstellen

Eine Sprache entfernen

1. Klicken Sie auf die Sprachcode-Ueberschrift in der Tabelle
2. Waehlen Sie Sprache loeschen aus dem Dropdown-Menue
3. Bestaetigen Sie die Loeschung

warnung

Das Loeschen einer Sprache entfernt alle Uebersetzungen fuer diese Sprache. Diese Aktion kann nicht rueckgaengig gemacht werden.

Uebersetzungsschluessel verwalten

Einen Uebersetzungsschluessel hinzufuegen

Sie koennen Uebersetzungsschluessel auf zwei Arten hinzufuegen:

Methode 1: Manuelle Eingabe

1. Klicken Sie in das Feld "Klicken zum Hinzufuegen" am unteren Rand der Tabelle
2. Geben Sie Ihren Uebersetzungsschluessel ein (z. B. greeting, button.submit, error.message)
3. Druecken Sie Enter, um den Schluessel zu erstellen
4. Klicken Sie auf die Zellen, um Uebersetzungen fuer jede Sprache hinzuzufuegen

Methode 2: Aus Layout-Erkennung

Das System erkennt automatisch Uebersetzungsschluessel, die in Ihrem Widget-Layout verwendet werden, mittels Handlebars AST-Parsing. Fehlende Schluessel werden am oberen Rand der Tabelle bernsteinfarben hervorgehoben:

1. Im Layout erkannte Schluessel erscheinen mit bernsteinfarbenem Hintergrund
2. Klicken Sie auf eine beliebige Zelle, um eine Uebersetzung hinzuzufuegen
3. Verwenden Sie die Schaltflaeche +, um den Schluessel fuer alle Sprachen gleichzeitig hinzuzufuegen

Namenskonvention fuer Schluessel

Verwenden Sie beschreibende, hierarchische Schluesselnamen:

• greeting - Einfache Schluessel
• button.submit - Verschachtelte Schluessel mit Punkt-Notation
• error.notFound - Kategorisierte Schluessel

Uebersetzungen bearbeiten

1. Klicken Sie auf eine beliebige Zelle, um die Bearbeitung zu starten
2. Geben Sie Ihren Uebersetzungstext ein
3. Druecken Sie Enter oder Tab, um zu speichern und zum naechsten Feld zu wechseln
4. Druecken Sie Escape, um die Bearbeitung abzubrechen

Tastaturnavigation

Die Uebersetzungstabelle unterstuetzt eine effiziente Tastaturnavigation:

Taste	Aktion
Tab	Aktuelle Zelle speichern und zur naechsten Zelle (rechts) wechseln
Shift + Tab	Aktuelle Zelle speichern und zur vorherigen Zelle (links) wechseln
Enter	Aktuelle Zelle speichern und zur naechsten Zeile nach unten wechseln
Escape	Bearbeitung abbrechen und Eingabe schliessen

Effizienter Arbeitsablauf

Wenn Sie Uebersetzungen Zeile fuer Zeile hinzufuegen, verwenden Sie Enter, um nach unten zu wechseln. Wenn Sie quer ueber Sprachen uebersetzen, verwenden Sie Tab, um nach rechts zu wechseln. In der letzten Zeile wird durch Druecken von Enter automatisch das Eingabefeld "Neuer Schluessel" fokussiert.

Uebersetzungsschluessel loeschen

1. Klicken Sie auf das Papierkorb-Symbol in der Aktionen-Spalte
2. Bestaetigen Sie die Loeschung
3. Der Schluessel wird aus allen Sprachen entfernt

Uebersetzungen in Ihrem Widget verwenden

Der t Handlebars Helper

Verwenden Sie den {{t 'key'}} Helper in Ihrem Widget-Layout, um uebersetzten Text anzuzeigen:

<!-- Simple translation -->
<h1>{{t "greeting"}}</h1>

<!-- Nested keys with dot notation -->
<button>{{t "button.submit"}}</button>

<!-- In attributes -->
<input placeholder="{{t 'form.email.placeholder'}}" />

<!-- In conditional blocks -->
{{#if error}}
  <p class="error">{{t "error.message"}}</p>
{{/if}}

Spracherkennung

Das Widget verwendet automatisch die passende Sprache basierend auf:

1. Staffbase Branch-Konfiguration - Die primaere Sprache, die in Ihrer Staffbase-Umgebung eingestellt ist
2. Browsersprache - Faellt auf die Browsersprache des Benutzers zurueck, falls konfiguriert
3. Standardsprache - Verwendet die erste Sprache in Ihren Uebersetzungen, wenn keine Uebereinstimmung gefunden wird

Beispiel fuer eine Uebersetzungskonfiguration

Hier ist ein vollstaendiges Beispiel fuer ein mehrsprachiges Widget:

Uebersetzungsschluessel:

Schluessel	Englisch (en)	Deutsch (de)	Franzoesisch (fr)
greeting	Hello!	Hallo!	Bonjour!
button.submit	Submit	Absenden	Soumettre
button.cancel	Cancel	Abbrechen	Annuler
message.success	Successfully saved!	Erfolgreich gespeichert!	Enregistre avec succes!

Widget-Layout:

<div class="widget">
  <h1>{{t "greeting"}}</h1>

  <form>
    <button type="submit">{{t "button.submit"}}</button>
    <button type="button">{{t "button.cancel"}}</button>
  </form>

  {{#if saved}}
    <p class="success">{{t "message.success"}}</p>
  {{/if}}
</div>

Automatische Layout-Schluessel-Erkennung

Das Uebersetzungssystem verwendet Handlebars AST (Abstract Syntax Tree) Parsing, um automatisch alle {{t 'key'}} Helper in Ihrem Widget-Layout zu erkennen.

So funktioniert es

1. Das System parst Ihr Handlebars Template
2. Identifiziert alle t Helper-Aufrufe
3. Extrahiert die Uebersetzungsschluessel
4. Hebt fehlende Schluessel bernsteinfarben am oberen Rand der Uebersetzungstabelle hervor

Anzeige fehlender Schluessel

Wenn Schluessel in Ihrem Layout erkannt werden, die nicht in Ihrer Uebersetzungstabelle vorhanden sind:

• Ein bernsteinfarbenes Warnbanner zeigt die Anzahl der fehlenden Schluessel an
• Jeder fehlende Schluessel erscheint als bernsteinfarbene Zeile am oberen Rand der Tabelle
• Sie koennen Uebersetzungen direkt hinzufuegen oder die Schaltflaeche + verwenden, um sie fuer alle Sprachen hinzuzufuegen

Layout-Scanning

Das System scannt Ihr Layout automatisch, wenn Sie zum Uebersetzungen-Tab wechseln oder Ihr Template aendern. Schluessel, die in Bedingungen {{#if}}, Schleifen {{#each}} und verschachtelten Helpern verwendet werden, werden alle erkannt.

Best Practices

Organisation

• Gruppieren Sie zusammengehoerige Schluessel mit Punkt-Notation (z. B. form.email.label, form.email.placeholder)
• Verwenden Sie einheitliche Namenskonventionen ueber Ihre Widgets hinweg
• Halten Sie Uebersetzungsschluessel beschreibend und selbstdokumentierend

Wartung

• Fuegen Sie alle Sprachen hinzu, bevor Sie mit den Uebersetzungen beginnen, um unvollstaendige Abdeckung zu vermeiden
• Ueberpruefen Sie regelmaessig auf fehlende Layout-Schluessel (bernsteinfarben hervorgehobene Zeilen)
• Verwenden Sie die Tastenkuerzel fuer eine schnellere Dateneingabe

Qualitaet

• Halten Sie Uebersetzungen praegnant, damit sie in Ihr Widget-Design passen
• Testen Sie Ihr Widget in allen unterstuetzten Sprachen
• Stellen Sie sicher, dass Uebersetzungen die gleiche Bedeutung und den gleichen Ton beibehalten

Leistung

• Das Uebersetzungssystem ist fuer Laufzeitperformance optimiert
• Uebersetzungen werden mit Ihrem Widget gebuendelt (keine zusaetzlichen API-Aufrufe)
• Mehrere Sprachen beeintraechtigen die Ladezeit des Widgets nicht

Haeufige Anwendungsfaelle

Mehrsprachige Formulare

<form>
  <label>{{t "form.name.label"}}</label>
  <input placeholder="{{t 'form.name.placeholder'}}" />

  <label>{{t "form.email.label"}}</label>
  <input placeholder="{{t 'form.email.placeholder'}}" />

  <button>{{t "form.submit"}}</button>
</form>

Fehlermeldungen

{{#if errors}}
  <div class="errors">
    {{#each errors}}
      <p>{{t this}}</p>
    {{/each}}
  </div>
{{/if}}

Dynamische Inhalte

<h2>{{t "welcome"}} {{user.firstName}}!</h2>
<p>{{t "notifications.count"}} {{notifications.length}}</p>

Fehlerbehebung

Schluessel werden nicht erkannt

Wenn Ihre Uebersetzungsschluessel nicht automatisch erkannt werden:

• Stellen Sie sicher, dass Sie die korrekte Syntax verwenden: {{t 'key'}}
• Ueberpruefen Sie, ob Ihr Layout keine Syntaxfehler enthaelt
• Vergewissern Sie sich, dass der Schluessel in einfache Anfuehrungszeichen eingeschlossen ist: 'key' nicht "key"

Uebersetzungen werden nicht angezeigt

Wenn Uebersetzungen in Ihrem Widget nicht angezeigt werden:

• Ueberpruefen Sie, ob der Schluessel in mindestens einer Sprache vorhanden ist
• Pruefen Sie die Browser-Konsole auf Fehler
• Stellen Sie sicher, dass Ihr Widget die neueste Version verwendet

Fehlende Uebersetzungen

Wenn eine Uebersetzung fuer eine bestimmte Sprache fehlt:

• Das System faellt auf die erste verfuegbare Sprache zurueck
• Erwaegen Sie, eine Standardsprache mit allen definierten Schluesseln hinzuzufuegen
• Ueberpruefen Sie die bernsteinfarben hervorgehobenen Zeilen auf fehlende Uebersetzungen

Weitere Ressourcen

• Widget Builder Layout-Dokumentation
• Handlebars Helpers Referenz

Brauchen Sie Hilfe?

Wenn Sie Probleme mit dem Uebersetzungssystem haben, kontaktieren Sie den Support oder lesen Sie die Widget Builder Dokumentation fuer detailliertere Beispiele.