Erstellen Sie eine benutzerdefinierte Komponente

Hinweis: Dieses Handbuch wurde aktualisiert, um der neuen Spezifikation „Custom Elements Version 1" zu entsprechen. Sie können die Spezifikation einsehen und mehr darüber erfahren .

Ab Juli 2021 werden veraltete benutzerdefinierte Komponenten in Google Web Designer nicht mehr unterstützt. Informationen zum Aktualisieren Ihrer benutzerdefinierten Komponenten finden Sie im Upgrade-Leitfaden .

Erfahrene Webentwickler können ihre eigenen benutzerdefinierten Komponenten für Google Web Designer schreiben, die entweder vorhandene Komponenten erweitern oder von Grund auf neue erstellen. Andere Benutzer können diese benutzerdefinierten Komponenten installieren, um ihren Projekten Funktionen hinzuzufügen, ohne Code bearbeiten zu müssen.

Ein gültiges Komponentenpaket besteht aus einer ZIP-Datei, die eine JSON-Manifestdatei enthält. Das Paket kann auch andere Dateien enthalten, beispielsweise eine JavaScript-Datei, die ein benutzerdefiniertes HTML-Element definiert, oder andere notwendige JavaScript- und CSS-Dateien.

1. Definieren Sie ein benutzerdefiniertes Element

Benutzerdefinierte Komponenten werden in Google Web Designer als benutzerdefinierte Elemente implementiert.

Ein benutzerdefiniertes Element ist ein HTML-Elementtyp, den Sie mit JavaScript-Code definieren und dem Sie einen benutzerdefinierten Tag-Namen geben. Sobald Sie ein benutzerdefiniertes Element definiert haben, können Sie es wie jedes Standardelement verwenden. Die DOM-APIs, die mit nativen HTML-Elementen arbeiten, funktionieren auch mit benutzerdefinierten Elementen.

Erfahren Sie mehr über benutzerdefinierte Elemente in der HTML-Spezifikation bei WHATWG.

Befolgen Sie diese Richtlinien für benutzerdefinierte Elemente in Google Web Designer:

Der Tag-Name für benutzerdefinierte Elemente muss einen Bindestrich ( - ) enthalten, z. B. x-panel oder expand-button .
Der gwd- Namespace wird von Google Web Designer beansprucht und kann nicht in Ihren benutzerdefinierten Elementen verwendet werden.

Sehen Sie sich ein Beispiel für einen benutzerdefinierten Elementcode an

2. Erstellen Sie alle zusätzlich erforderlichen JavaScript- und CSS-Dateien

Schreiben Sie das JavaScript und CSS, das die gewünschte Funktionalität und das gewünschte Design bietet.

Es ist möglich, JavaScript- und CSS-Dateien von einem externen Server bereitzustellen, anstatt diese Dateien in das Paket aufzunehmen. Fügen Sie Verweise auf externe Dateien in das JSON-Manifest ein.

3. Transpilieren Sie Ihren Code nach ES5 (optional)

Für maximale Browserkompatibilität empfehlen wir Ihnen, Ihren Komponentencode zu transpilieren, um die JavaScript ES5-Syntax zu verwenden. Dadurch wird sichergestellt, dass Ihre Komponente in älteren Browsern ordnungsgemäß ausgeführt wird.

Gehen Sie zu Babel, einem JavaScript-Compiler, unter https://babeljs.io/repl .
Wählen Sie im Abschnitt „Voreinstellungen" die Option „es2015" aus.
Kopieren Sie den JavaScript-Code Ihrer Komponente und fügen Sie ihn in den linken Bereich ein. Im rechten Bereich wird eine übersetzte Version des Codes angezeigt, die Sie für Ihre Komponente verwenden können.

4. Erstellen Sie ein JSON-Manifest der Komponentendateien

Für benutzerdefinierte Komponenten ist eine Manifestdatei im JSON-Format mit dem Namen manifest.json erforderlich, die Google Web Designer über die Komponente informiert. Befolgen Sie das unten beschriebene Schema. Zu den bemerkenswerten Eigenschaften gehören:

type – Erforderlich.
version – Erforderlich. Erhöhen Sie die Versionsnummer, wenn Sie eine benutzerdefinierte Komponente aktualisieren.
customElementsVersion – Erforderlich für neue Komponenten, die der Custom Elements v1-Spezifikation entsprechen.
files – Listet andere Dateien auf, die im benutzerdefinierten Komponentenpaket enthalten sind.
externalScripts – Geben Sie externe Skriptabhängigkeiten an. Diese Skripte werden automatisch in einem <script> -Block zum <head> des Dokuments hinzugefügt.
dependencies – Geben Sie alle Komponentenabhängigkeiten an. Hierbei handelt es sich um vorhandene Komponenten mit JavaScript- oder CSS-Dateien, die Ihre Komponente verwendet.
attributes – Benutzer sehen Attribute im Eigenschaftenbereich.
events – Benutzer sehen Ereignisse im Ereignisdialog.
methods – Benutzer sehen Methoden als Aktionen im Ereignisdialog.

Manifest-Schema

Manifest-Schema
{ „ name": {string} Der für Menschen lesbare Name der Komponente. „ description": {string} Eine prägnante, aber vollständige Beschreibung der Komponente. „ type": {string} Der Elementtyp, der einen Bindestrich (-) enthalten muss. Erforderlich. „ version": {number} Die Versionsnummer der Komponente, die bei jedem Update erhöht werden muss. Erforderlich. „customElementsVersion": {number} Die Versionsnummer der benutzerdefinierten Elementspezifikation, die für neu erstellte Komponenten auf 1 gesetzt werden sollte. Erforderlich für neue Komponenten. „ files": {Array.<FilesObject>} Die JavaScript- und CSS-Dateien für die Komponente. „ externalScripts": {Array.<string>} Die externen Skripte für die Komponente. „ externalStyles": {Array.<string>} Die externen Stylesheets für die Komponente. " dependencies": {Array.<string>} Andere Komponenten, von denen diese Komponente abhängt. " attributes": {Array.<Attribute>} Die Attribute der Komponente. " methods": {Array.<Method>} Die Methoden der Komponente. „ events": {Array.<Event>} Die von der Komponente gesendeten Ereignisse. „ metrics": {Array.<MetricEvent>} Die für die Komponente verfolgten Metriken. }

  {    „ name": {string} Der für Menschen lesbare Name der Komponente.    „ description": {string} Eine prägnante, aber vollständige Beschreibung der Komponente.    „ type": {string} Der Elementtyp, der einen Bindestrich (-) enthalten muss. Erforderlich.    „ version": {number} Die Versionsnummer der Komponente, die bei jedem Update erhöht werden muss. Erforderlich.    „customElementsVersion": {number} Die Versionsnummer der benutzerdefinierten Elementspezifikation, die für neu erstellte Komponenten auf 1 gesetzt werden sollte. Erforderlich für neue Komponenten.    „ files": {Array.<FilesObject>} Die JavaScript- und CSS-Dateien für die Komponente.    „ externalScripts": {Array.<string>} Die externen Skripte für die Komponente.    „ externalStyles": {Array.<string>} Die externen Stylesheets für die Komponente.    " dependencies": {Array.<string>} Andere Komponenten, von denen diese Komponente abhängt.    " attributes": {Array.<Attribute>} Die Attribute der Komponente.    " methods": {Array.<Method>} Die Methoden der Komponente.    „ events": {Array.<Event>} Die von der Komponente gesendeten Ereignisse.    „ metrics": {Array.<MetricEvent>} Die für die Komponente verfolgten Metriken.  }

FilesObject
{ „ js": {Array.<string>} Der Pfad zu JavaScript-Dateien, relativ zur Datei manifest.json . „ css": {Array.<string>} Der Pfad zu den CSS-Dateien, relativ zur Datei manifest.json . }

Attribute
{ „ name": {string} Der Name des Attributs. „ label": {string} Der für Menschen lesbare Name des Attributs. „ type": {string} Der Datentyp des Attributs. „ description": {string} Eine kurze Beschreibung des Attributs. „ required": {boolean} Ob das Attribut erforderlich ist. „ defaultValue": {string\|boolean} Der Standardwert des Attributs. „ min": {number} Mindestwert für das Attribut, wenn das Attribut eine Zahl ist. „ max": {number} Maximalwert für das Attribut, wenn das Attribut eine Zahl ist. „ accept": {number} Akzeptierte Dateitypen , wenn das Attribut eine Datei ist. " gwdSpecific": { „ important": {boolean} Wenn „true", wird das Attribut in das Komponenten-Tag einbezogen. „ label": {string} Der Schlüssel in der Strings-Datei für die Übersetzung. „ advanced": {boolean} Ob dieses Attribut im Abschnitt „Erweiterte Eigenschaften" des Eigenschaftenfensters angezeigt wird. „ v1Name": {string} Der Name dieses Attributs in Version 1 von Google Web Designer. } „ bindable": {boolean} Wenn „true", wird das Attribut auf der Registerkarte „Bindungen" des Dialogfelds „Dynamische Eigenschaften" angezeigt. }

Attribute

  {    „ name": {string} Der Name des Attributs.    „ label": {string} Der für Menschen lesbare Name des Attributs.    „ type": {string} Der Datentyp des Attributs.    „ description": {string} Eine kurze Beschreibung des Attributs.    „ required": {boolean} Ob das Attribut erforderlich ist.    „ defaultValue": {string|boolean} Der Standardwert des Attributs.    „ min": {number} Mindestwert für das Attribut, wenn das Attribut eine Zahl ist.    „ max": {number} Maximalwert für das Attribut, wenn das Attribut eine Zahl ist.    „ accept": {number} Akzeptierte Dateitypen , wenn das Attribut eine Datei ist.    " gwdSpecific": {      „ important": {boolean} Wenn „true", wird das Attribut in das Komponenten-Tag einbezogen.      „ label": {string} Der Schlüssel in der Strings-Datei für die Übersetzung.      „ advanced": {boolean} Ob dieses Attribut im Abschnitt „Erweiterte Eigenschaften" des Eigenschaftenfensters angezeigt wird.      „ v1Name": {string} Der Name dieses Attributs in Version 1 von Google Web Designer.    }    „ bindable": {boolean} Wenn „true", wird das Attribut auf der Registerkarte „Bindungen" des Dialogfelds „Dynamische Eigenschaften" angezeigt.  }

Event
{ „ name": {string} Der Name des Ereignisses. „ label": {string} Der für Menschen lesbare Name des Ereignisses. „ description": {string} Ein paar Sätze, die das Ereignis beschreiben. " parameters": {Array.<string>} Die Parameter des Ereignisses; standardmäßig das Event-Objekt. }

Event

  {    „ name": {string} Der Name des Ereignisses.    „ label": {string} Der für Menschen lesbare Name des Ereignisses.    „ description": {string} Ein paar Sätze, die das Ereignis beschreiben.    " parameters": {Array.<string>} Die Parameter des Ereignisses; standardmäßig das Event-Objekt.  }

Method
{ „ name": {string} Der Name der Methode. „ label": {string} Der für Menschen lesbare Name der Methode. „ description": {string} Eine kurze Beschreibung der Methode. " parameters": {Array.<Parameter>} Die Parameter dieser Methode. }

Method

  {    „ name": {string} Der Name der Methode.    „ label": {string} Der für Menschen lesbare Name der Methode.    „ description": {string} Eine kurze Beschreibung der Methode.    " parameters": {Array.<Parameter>} Die Parameter dieser Methode.  }

Parameter
{ „ name": {string} Der Name des Parameters. „ label": {string} Der für Menschen lesbare Name des Parameters. „ type": {string} Der Datentyp des Parameters. „ optional": {boolean} Ob der Parameter optional ist. }

Parameter

  {    „ name": {string} Der Name des Parameters.    „ label": {string} Der für Menschen lesbare Name des Parameters.    „ type": {string} Der Datentyp des Parameters.    „ optional": {boolean} Ob der Parameter optional ist.  }

MetricEvent
{ „ eventName": {string} Das Ereignis, das für diese Metrik verfolgt wird. „ metric": {string} Der Text, der beim Melden des verfolgten Ereignisses verwendet wird. „ isCumulative": {boolean} Ob die Metrik kumulativ ist. „ exit": {string} Der mit dem Metrikereignis verknüpfte Exit. }

MetricEvent

  {    „ eventName": {string} Das Ereignis, das für diese Metrik verfolgt wird.    „ metric": {string} Der Text, der beim Melden des verfolgten Ereignisses verwendet wird.    „ isCumulative": {boolean} Ob die Metrik kumulativ ist.    „ exit": {string} Der mit dem Metrikereignis verknüpfte Exit.  }

Sehen Sie sich ein Beispiel für ein JSON-Manifest an

5. Packen Sie die benutzerdefinierten Komponentendateien

Wenn Sie mit dem Erstellen und Testen Ihrer benutzerdefinierten Komponente fertig sind, packen Sie sie für Google Web Designer, indem Sie die folgenden Schritte ausführen:

Verketten, minimieren und verschleiern Sie die JavaScript-Dateien (falls erforderlich).
Minimieren Sie optional das CSS.
Erstellen Sie eine ZIP-Datei, die alle Komponentendateien enthält, einschließlich des JSON-Manifests.

Sehen Sie sich ein Beispiel für ein benutzerdefiniertes Komponentenpaket an

Stellen Sie die ZIP-Datei den Nutzern von Google Web Designer zur Verfügung, die Ihre benutzerdefinierte Komponente installieren möchten.

Pc Support

Monday, July 24, 2023