Übersicht über benutzerdefinierte Widgets

Erstellen Sie Ihre eigenen Widgets in Tulip mit HTML, CSS und JavaScript

Custom Widgets Übersicht

Erstellen Sie Ihre eigenen Funktionen in Tulip mit Hilfe von HTML, CSS und JavaScript.
Widgets aus der Bibliothek sind hier verfügbar: https://tulip.co/library/?query=Widgets

Einführung

Die Elemente, die Sie per Drag-and-Drop in Ihre Anwendung ziehen, werden "Widgets" genannt. Das können Schaltflächen, Bilder, Eingabefelder und alles andere sein, was in der Symbolleiste verfügbar ist.

Mit benutzerdefinierten Widgets können Sie Ihren eigenen Code schreiben und Ihre eigenen Widgets erstellen, die Sie dann per Drag-and-Drop in Ihre Anwendung ziehen und damit interagieren können. Mit dieser Fähigkeit können Tulip-Benutzer die Grenzen dessen, was in Tulip möglich ist, erweitern.

In diesem Artikel geben wir Ihnen einen kurzen Überblick darüber, wie benutzerdefinierte Widgets funktionieren.

Benutzerdefinierte Widgets - Grundlagen

Der Bildschirm für die Verwaltung von benutzerdefinierten Widgets befindet sich auf der Seite mit den Einstellungen Ihres Kontos. Hier können Sie Widgets erstellen und löschen. Im Editor für benutzerdefinierte Widgets können Sie Ihren Widget-Code schreiben, Requisiten und Ereignisse erstellen und eine Vorschau Ihres Widgets anzeigen. Nachfolgend finden Sie ein Diagramm, das beschreibt, was Requisiten und Ereignisse sind:

Requisiten: Props sind Daten, die von benutzerdefinierten Widgets und Tulip-Anwendungen gemeinsam genutzt werden. Props werden im Anwendungseditor angezeigt und ermöglichen es den Anwendungseditoren, auszuwählen, welche Variablen, Tabellendatensätze oder andere Informationen mit dem Prop verknüpft werden sollen.

Ereignisse: Ereignisse sind Signale, die Ihr Widget an Ihre Anwendung senden kann. Ereignisse ermöglichen es Ihrer Anwendung, mit einem Auslöser zu reagieren und können Informationen mit sich führen.

Benutzerdefinierte Widgets sind im App-Editor über die Auswahlliste Benutzerdefiniert zugänglich.

Ein Widget erstellen

:::(Warnung) (Warnung)
Nur Benutzer mit Zugriff auf die Kontoeinstellungen (Kontobesitzer) können auf die Benutzeroberfläche zur Bearbeitung benutzerdefinierter Widgets zugreifen.
:::

Der Bildschirm des Widget-Editors ist in vier Abschnitte unterteilt. Der Code, den Sie im unteren linken Bereich eingeben, wird im Vorschaubereich angezeigt, sobald Sie in den Vorschaubereich klicken. Prop-Werte können zu Testzwecken direkt im Vorschaubereich geändert werden.

Spezielle Funktionen für die Interaktion mit Requisiten und Ereignissen.

Abrufen des Wertes von Requisiten

//Bestimmen des Wertes einer Requisite getValue('Meine Requisite');
//Requisite in einer Variablen speichern let myVariable = getValue('Meine Requisite');

//Was tun, wenn sich ein Requisitenwert ändert getValue('Meine Requisite', (internalVariable) => { doSomething(internalVariable); });

Den Wert einer Requisite setzen

**Setzen des Wertes** einer Requisite 
setValue('Meine Requisite', *value\_to\_set*); 


//Wert einer Text-Prop auf 'hallo!' setzen
setValue('Meine Text-Prop', 'hallo!');


//Wert eines Elements in einem Objekt setzen
setValue('Mein Objekt-Prop', { 'Schlüssel im Objekt': 'neuer Wert' });

Ein Ereignis auslösen

**Ein Ereignis aus** lösen 
fireEvent('Ereignis', *Nutzlast*); 


//Ereignis ohne Nutzdaten auslösen
fireEvent('Mein Ereignis');


//Ereignis mit Nutzlast abfeuern
fireEvent('Mein Ereignis', meineVariable);

Beispiel für den Aufbau des Widgets Video

Importieren/Exportieren von Apps

Exportieren

1. Wählen Sie in der Übersicht der benutzerdefinierten Widgets die 3 Punkte neben dem Widget, das Sie exportieren möchten.

1. Wählen Sie "Exportieren".

Importieren

1. Wählen Sie auf dem Übersichtsbildschirm für benutzerdefinierte Widgets die 3 Punkte am oberen Rand.

1. Wählen Sie "Importieren".

1. Suchen Sie die .json-Datei des benutzerdefinierten Widgets.

Aktivieren externer Bibliotheken

Externe Bibliotheken erweitern die Möglichkeiten von benutzerdefinierten Widgets. Externe Bibliotheken übernehmen einen Großteil der schmutzigen Arbeit, die beim Schreiben von HTML direkt in JavaScript anfällt. Externe Bibliotheken müssen für jedes Widget aktiviert werden, wenn Sie sie verwenden möchten.

1. Klicken Sie in Ihrem Widget auf das 3-Punkte-Menü in der Multifunktionsleiste.

1. Wählen Sie "Externe Bibliothek aktivieren".

1. Wählen Sie die Erweiterung, die Sie aktivieren möchten.

Hier ist eine grundlegende Beschreibung, was jede von ihnen tut, viele von ihnen zeichnen sich in vielen Bereichen, so fühlen sich frei zu erkunden.

• jQuery - ermöglicht eine effizientere Auswahl von HTML-Elementen sowie die Elementmanipulation.
• D3 - Der Goldstandard für die Visualisierung von Daten, eine steile Lernkurve, aber jede Menge Flexibilität.
• Google Visualization - Ein großartiges Tool, um, wie der Name schon sagt, Daten zu visualisieren.
• javaascript-Ip-solver - Ip solver ist eine externe Bibliothek, die komplexe Berechnungen zur Lösung von Gleichungen durchführen kann.
• Lodash - Lodash bietet eine Tonne von Werkzeugen, die die Arbeit mit javascript Datentypen einfacher zu machen.
• ChartJS - Über die einfachste grafische Bibliothek möglich mit Tonnen von Online-Ressourcen.
• Moment - Moment bietet Tonnen von Werkzeugen für die Arbeit mit Daten und Zeiten.