Benutzerhandbuch Abbrechen

Erstellen von benutzerdefinierten Komponenten: Beispiele

Suchen

Zuletzt aktualisiert am 24. Mai 2023

Lesen Sie diesen Artikel, um ein Beispiel einer benutzerdefinierten HTML5-Komponente zu verstehen.

In diesem Artikel wird beschrieben, wie Sie benutzerdefinierte Komponenten erstellen. Das erste Beispiel beschreibt die Bildkomponente (die auch im Lieferumfang von Animate enthalten ist) und erläutert das Framework sowie den Entwicklungsprozess. Im zweiten Beispiel wird beschrieben, wie Sie eine vorhandene Benutzeroberflächen-Komponente (z. B. jQueryUI) verpacken und in Animate importieren können.

Erstellen einer DOM-Bildkomponente

Erstellen Sie eine Kategorie mit der Bezeichnung Meine Komponenten.

a. Erstellen Sie unter dem Ordner <HTML5Components> einen Ordner namens meinekomponenten

b. Laden Sie die angehängte Datei myimage.zip herunter und extrahieren Sie den Inhalt im Ordner

meinekomponenten.

Herunterladen

Datei abrufen
Klicken Sie hier, um die Datei „myimage.zip“ herunterzuladen.

c. Starten Sie Animate.

Ordnerstruktur innerhalb des Ordners „meinekomponenten“

In dem Komponentenordner können Sie nun eine neue Kategorie mit dem Namen „Meine Komponenten“ sowie darunter eine neue Komponente mit dem Namen „Mein Bild“ sehen. Sie können die Drag-and-Drop-Funktion zur Anpassung der Anzeige verwenden, die Bildquelleneigenschaft festlegen sowie den Film veröffentlichen, um die benutzerdefinierte Komponente anzeigen zu lassen.

Komponente Metadaten - components.js

Bitte beachten Sie, dass die Kategorie KATEGORIE_MEINE_KOMPONENTEN eingestellt ist. Für die Namen jeder dieser Eigenschaften werden ähnliche Schlüssel verwendet. Das ist der Schlüssel für den lokalisierten String für den Kategorienamen. Wenn Sie „strings.json“ im lokalen Ordner öffnen, werden Sie die folgenden Einträge sehen.

Der am häufigsten auftretende Fehler während der Bearbeitung dieser Datei ist ein überflüssiges Komma für das letzte Element im Array.

Der Wert im Symbolfeld ist auf Symbol Sp_Image_Sm festgelegt. Wenn Sie den Elemente-Ordner öffnen, sehen Sie die zwei PNG-Dateien mit dem Präfix Sp_Image_Sm.

Dies sind die Symbole für dunkle und helle Benutzeroberflächen (UI).

Der Wert des Feldes „Quelle“ im components.json wird auf den Wert „src/myimage.js“ festgelegt.

(function($) {    

// Register a component with the className: my.Image,
 // and prototype with the following overrides 
 // getCreateOptions
 // getCreateString
 // getProperties
 // getAttributes
    $.anwidget(&quot;my.Image&quot;, {
         options: {
   'visible': true,
   'position': 'absolute'
         },
  _props: [&quot;left&quot;, &quot;top&quot;, &quot;width&quot;, &quot;height&quot;, &quot;position&quot;, &quot;transform-origin&quot;, &quot;transform&quot;],
  
_attrs: [&quot;id&quot;, &quot;src&quot;, &quot;alt&quot;, &quot;class&quot;, &quot;border&quot;],
  
// Return a unique ID with the prefix image
  // _widgetID is a global declared in anwidget
  // This id is used only if the user has not set any instance ID for the component in Animate
  // Otherwise the user configured name is used
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': &quot;image&quot; + _widgetID++ });
  },
  
// Return the string for creating the DOM element
  // For image we just need to create the <img> tag
  getCreateString: function() {
   return &quot;<img>&quot;;
  },
  
// Set of configurable properties
  getProperties: function() {
   return this._props;
  },
  
// Set of configurable attributes
  getAttributes: function() {
   return this._attrs;
  }    
 });   
})(jQuery);

Zum besseren Verständnis können Sie die Kommentaren im Code befolgen.

Bitte schauen Sie sich auch Quelle für die anderen Komponenten an, die in Animate bereitgestellt werden. In den meisten Fällen können Sie eine dieser Komponenten als Ausgangspunkt verwenden und sie dann Ihren eigenen Anforderungen entsprechend konfigurieren.

Eine jQuery-UI Komponente verpacken

In diesem Abschnitt erfahren Sie, wie Sie ein jQuery-UI-Widget verpacken und dieses in Animate verwenden können. Dieselbe Vorgehensweise kann zum Verpacken jeder anderen vorhandenen Komponente eines beliebigen UI-Frameworks verwendet werden.

Nachfolgend erfahren Sie mehr über die verpackte DatePicker-Komponente in Animate , bei der es sich um ein jQuery-Widget handelt. Laden Sie das folgende Archiv herunter und extrahieren Sie den Inhalt, um ihn als Referenz zu verwenden.

Herunterladen

Datei abrufen

Klicken Sie hier, um die Datei „datepicker.zip“ herunterzuladen.

Der Ordner mit der Bezeichnung „jquery-ui -1.12.0“ ist die Quelle für das jQuery-UI-Framework, die das ursprüngliche DatePicker-Widget sowie die zugehörigen Ressourcen (z. B. Bilder und CSS) beinhaltet, die wir wie jede andere HTML5-Komponente in Animate verpacken und verwenden können. Dies ist nur für die lokale Vorschau erforderlich. Wenn Sie in den Veröffentlichungseinstellungen „Gehostete Bibliotheken“ verwenden, haben Sie die Möglichkeit, das CDN (Content Delivery Network) zu nutzen, um die abhängigen Quellen herunterzuladen.

Es gibt zwei Standard-Abhängigkeiten, jQuery und anwidget.js. Da sich anwidget.js nicht auf dem CDN befindet, haben keinen Eintrag für das CDN.

Die nachfolgenden Einträge sind für die anderen Ressourcen, die zum Laden des DatePicker-Widgets von jQuery-UI erforderlich sind. Wenn Sie ein Widget aus einer anderen Bibliothek verpacken, können Sie dafür eine Gruppe von Abhängigkeiten festlegen. Diese Abhängigkeiten werden heruntergeladen, bevor die Komponente initialisiert wird.

Im Abschnitt Eigenschaften haben wir nur eine Eigenschaft namens „Label“ bereitgestellt, die an die „Label“-Eigenschaft der DatePicker-Komponente gebunden ist. Auf gleiche Weise können wir auch die anderen Eigenschaften festlegen, die der Benutzer in der Authoring-Umgebung von Animate konfigurieren kann. Zur Laufzeit wird jede dieser Komponenten für als Schlüssel-Wert-Paar im Array- Optionsdatenfeld verfügbar sein. Wir können den konfigurierten Wert extrahieren und während der Laufzeit ausführen.

Abschnitte, die sich vom Beispiel unterscheiden

getCreateString:

Das DatePicker-Widget vom jQuery-UI verwendet ein solches Eingabetextelement und konvertiert es in ein DatePicker-Element. Daher werden wir das DOM entsprechend initialisieren.
anhängen:

Wir müssen diese Funktion für dieses Widget überschreiben. Diese API wird aufgerufen, sobald das Element dem DOM angehängt wird. Aufgrund der Funktionsweise der zugrunde liegenden Laufzeit (in diesem Fall createjs), kann diese API während eines Bildbereichs mehrmals aufgerufen werden.

Wir müssen uns den angehängten Status des zugrunde liegenden Elements erinnern und anschließend die angehängte API der Basisklasse aufrufen (unter Verwendung von_superApply(arguments)). Wenn dies das erste Mal ist, dass das Element an das übergeordnete DOM angehängt wird, dann wird die zugrundeliegende jQuery-UI-Widget Funktion verwendet, um das DOM der Komponente in eine Datumsauswahl zu konvertieren. Weitere Informationen finden Sie unter https://jqueryui.com/datepicker/

Die meisten Javascript-Widgets funktionieren auf ähnliche Weise. Sie können dieselbe Vorgehensweise verwenden, um eine beliebige Komponente Ihrer Wahl zu verpacken und in Animate zu laden.
Aktualisierung: Wir überschreiben und aktualisieren die CSS-Eigenschaften und wenden sie auf den Div-Container und die Attribute auf dem realen DOM-Element an.

Wenn Sie z. B. APIs überschreiben wie z. B. anhängen, entfernen, oder aktualisieren, sollten Sie die Standardimplementierung der Basisklasse überprüfen und die Basisimplementierung zum angemessenen Zeitpunkt aufgerufen. Andernfalls kann die Komponenteninitialisierung möglicherweise fehlschlagen.

Mehr

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?