Einführung in die Entwickler-API

Einleitung

Das Blocs Mit der Entwickler-API können Drittanbieter benutzerdefinierte Dateien erstellen Brics das kann innerhalb der verwendet werden Blocs Designumgebung. Die Kernkomponenten eines Customs Bric werden mit HTML, JS und CSS erstellt (Sie können mehr über Daten und Dateistruktur lesen hier). Es gibt verschiedene API-Protokolle, auf die über jede auf Javascript basierende Sprache zugegriffen werden kann.

Bitte beachten Sie: die Blocs Die Entwickler-API befindet sich derzeit in der ersten Alpha-Phase, daher können sich einige Funktionen und Dokumentationen ändern.

Bric Baumeister

Blocs kommt mit einem Entwicklertool namens Bric Builder, der bei der Entwicklung und Erstellung von benutzerdefinierten Funktionen helfen soll Brics. Es kann über zugegriffen werden Entwickler> Bric Baumeister im Hauptmenü. Das Bric Builder ist der einfachste Weg, um mit dem Erstellen von benutzerdefinierten Elementen zu beginnen BricsEs wird empfohlen, diese grundlegende Anleitung zum Erstellen Ihrer ersten benutzerdefinierten Datei zu befolgen Bric.
 

Schnittstellen erstellen

Die Benutzeroberfläche für eine benutzerdefinierte Bric sollte mit dem erstellt werden Bric Builder-Tool. Auf der Registerkarte Benutzeroberfläche befinden sich verschiedene Felder und Steuerelemente zum Hinzufügen und Verwalten der Benutzeroberfläche für Ihre benutzerdefinierten Benutzeroberflächen bric.

Hinzufügen eines Elements

Klicken Sie auf, um eine neue Benutzeroberflächenkomponente hinzuzufügen + Klicken Sie oben rechts im UI-Ebenenbaum auf die Schaltfläche und wählen Sie den Typ der hinzuzufügenden Schnittstellenkomponente aus.

Artikel nachbestellen

Elemente der Benutzeroberfläche können durch Ziehen und Ablegen der entsprechenden Ebene in der Ebenenstruktur neu angeordnet werden.

Elemente duplizieren

Elemente der Benutzeroberfläche können einfach dupliziert werden Rechtsklick die relevante Ebene im Ebenenbaum und Auswahl Duplikat in dem Kontextmenü.

Verfügbare UI-Komponenten

Titel - Ein Titel ist eine visuelle Textkomponente, die keine Funktion aufruft.

Mehrzeiliges Etikett - Eine mehrzeilige Beschriftung ist eine visuelle Textkomponente, die keine Funktion aufruft.

Textfeld - Ein Textfeld übergibt einen Zeichenfolgenwert an die zugewiesene Bearbeitungsfunktion.

Schrittfeld - Ein Textfeld mit Schrittsteuerung übergibt einen ganzzahligen Wert an die zugewiesene Bearbeitungsfunktion.

Textbereich - Ein Textbereich übergibt einen Zeichenfolgenwert an die zugewiesene Bearbeitungsfunktion.

Bild gut - Eine Bildvertiefung übergibt einen Dateipfad an die zugewiesene Bearbeitungsfunktion.

Dropdown-Menü - Ein Dropdown-Menü übergibt den ausgewählten Ganzzahlindex und den Wert der Elementzeichenfolge an die zugewiesene Bearbeitungsfunktion.

Checkbox - Ein Kontrollkästchen übergibt einen Bool-Wert an die zugewiesene Bearbeitungsfunktion.

Taste - Eine Schaltfläche ruft beim Klicken die zugewiesene Bearbeitungsfunktion auf.

Schriftartenauswahl - Ein Dropdown-Menü, das eine Schriftartenauswahl an die zugewiesene Bearbeitungsfunktion übergibt.

Seitenauswahl - Ein Dropdown-Menü, das eine Seiten-ID, einen Namen, ein Attribut und den ausgewählten Element-Ganzzahlindex an die zugewiesene Bearbeitungsfunktion übergibt. Seiten-IDs werden beim Export gegen tatsächliche Seiten-URLs ausgetauscht, solange die ID unter dem Datenattribut gespeichert ist Daten-blocs-Seite.

ID-Selektor – Ein Dropdown-Menü, das eine ID an die zugewiesene Bearbeitungsfunktion übergibt. Dieses Menü wird automatisch mit allen Element-IDs aus dem aktuelle Seite.

Hype-Selektor - Ein Dropdown-Menü, das einen Hype-Projektnamen an die zugewiesene Bearbeitungsfunktion übergibt. Dieses Menü wird automatisch mit allen gefüllt .Hyperressourcen Verzeichnisse zum aktuellen Projekt hinzugefügt.

Farbe gut - Ein Farbschacht übergibt einen Hex-Wert an seine zugewiesene Bearbeitungsfunktion.

Slider - Ein Schieberegler übergibt einen ganzzahligen Wert an seine zugewiesene Bearbeitungsfunktion.

Horizontale Ausrichtungssteuerung - Ein segmentiertes Steuerelement ausrichten übergibt einen ganzzahligen Wert an seine zugewiesene Bearbeitungsfunktion (0 = Links | 1 = Mitte | 2 = Rechts).

Vertikale Ausrichtungssteuerung - Ein segmentiertes Steuerelement zum Ausrichten übergibt einen ganzzahligen Wert an seine zugewiesene Bearbeitungsfunktion (0 = Oben | 1 = Mitte | 2 = Unten).

Textausrichtungssteuerung - Ein segmentiertes Steuerelement zum Ausrichten übergibt einen ganzzahligen Wert an seine zugewiesene Bearbeitungsfunktion (0 = Links | 1 = Mitte | 2 = Rechts | 3 = Ausrichten).

Geräteauswahlsteuerung – Ein segmentiertes Gerätesteuerelement übergibt einen ganzzahligen Wert an seine zugewiesene Bearbeitungsfunktion (1 = Desktop | 2 = Tablet | 3 = Mobile Landschaft | 4 = Mobile).

Kantenauswahlsteuerung – Ein segmentiertes Steuerelement zur Kantenauswahl übergibt einen ganzzahligen Wert an die zugeordnete Bearbeitungsfunktion (0 = Links | 1 = Oben | 2 = Rechts | 3 = Unten).

Richtungsauswahlsteuerung – Ein richtungssegmentiertes Steuerelement übergibt einen ganzzahligen Wert an seine zugewiesene Bearbeitungsfunktion (0 = Links | 1 = Aufwärts | 2 = Rechts | 3 = Abwärts).

Trennwand - Ein Teiler ist eine visuelle Komponente, die keine Funktion aufruft.

Attribute der UI-Komponentendaten

Jede Benutzeroberflächenkomponente verfügt über verschiedene Datenattribute, mit denen wichtige Interaktionseigenschaften festgelegt werden, z. B. die Funktion, die aufgerufen wird, wenn eine Komponente interagiert, oder der Tooltip, der angezeigt wird, wenn der Benutzer den Cursor über eine Komponente bewegt.

Titel - Der Titel für das Schnittstellenelement. Wird normalerweise auf der linken Seite der Seitenleiste angezeigt.

Funktion - Der Funktionsname, der aufgerufen wird, wenn mit diesem Schnittstellenelement interagiert wird. Nur Funktionsnamen einschließen, nicht einschließen ().

Attribut - Der Attributname, der zum Speichern des Datenwerts für dieses Schnittstellenelement verwendet wird.

Wert - Der anfängliche Attributdatenwert dieses Schnittstellenelements.

Tooltip - Der QuickInfo-Text, der angezeigt wird, wenn sich der Cursor über der Komponente befindet.

Schreibfunktionen

So bearbeiten Sie den HTML-Code eines benutzerdefinierten Benutzers Bricmüssen Sie zuerst Ihre eigene (Javascript-basierte) Bearbeitungsfunktion schreiben. Diese Bearbeitungsfunktionen sind für die Verwendung innerhalb der bestimmt Blocs Design-Umgebung und werden nicht verwendet, wenn Ihre benutzerdefinierte Bric ist in einem exportierten Projekt enthalten. Diese Bearbeitungsfunktionen sollten alle in einer einzelnen JS-Datei platziert werden, die in den Header Ihrer benutzerdefinierten Datei geladen wird Brics index.html Datei. Bearbeitungsfunktionen sind über die Benutzeroberflächenkomponenten an eine Benutzeroberflächenkomponente gebunden Funktionsdatenattribut.

Wenn mit einer Benutzeroberflächenkomponente interagiert wird, ruft sie die angegebene Bearbeitungsfunktion auf und übergibt ihr einen Wert zusammen mit dem Zielattribut, dem dieser Wert zugewiesen ist. Die Datennutzlast für die Bearbeitungsfunktion hängt vom Typ der Benutzeroberflächenkomponente ab, mit der sie aufgerufen wird. Eine Bearbeitungsfunktion sollte so geschrieben werden, dass sie die Nutzlastvariable korrekt deklariert. Im folgenden Beispiel wird die von einem Kontrollkästchen verwendete Bearbeitungsfunktion so eingestellt, dass zuerst eine BOOL-Nutzlast und dann der Wert der Zielattributzeichenfolge empfangen werden.

Beispiel:
function myCheckbox(isChecked,targetAttr)
{
if(isChecked)
{
// checkbox is checked
}
}


Benutzerdefiniertes Debuggen Brics

Blocs Es sind einige nützliche Funktionen enthalten, die beim Debuggen von benutzerdefinierten Funktionen hilfreich sind Brics. Weitere Informationen zu diesen integrierten Debugging-Funktionen für finden Sie hier hier.