Einleitung
Die Blocs Mit der Entwickler-API können Drittanbieter benutzerdefinierte Dateien erstellen Brics das kann innerhalb der verwendet werden Blocs Designumgebung. Die Kernkomponenten eines benutzerdefinierten Bric werden mit HTML, JS und CSS erstellt (mehr über Daten- und Dateistruktur erfahren Sie hier). 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-Baukasten
Blocs wird mit einem Entwicklertool namens Bric Builder geliefert, das bei der Entwicklung und Erstellung benutzerdefinierter Brics. Es kann über zugegriffen werden Entwickler > Bric Builder im Hauptmenü. Der Bric Builder ist der einfachste Weg, um mit der Erstellung von benutzerdefinierten Brics, es wird empfohlen, dass Sie dieser grundlegenden Anleitung zum Erstellen Ihres ersten benutzerdefinierten Bric folgen.
Schnittstellen erstellen
Die Benutzeroberfläche für einen benutzerdefinierten Bric sollte mit dem Bric Builder-Werkzeug. 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 im Kontextmenü.
Es ist auch möglich, den gesamten Benutzer zu duplizieren Brics by Rechtsklick den Bric in der Hauptliste auf der linken Seite des Bric Builders und wählen Sie Duplikat im 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
Um das HTML eines benutzerdefinierten Bric zu bearbeiten, müssen Sie zunächst Ihre eigene (auf JavaScript basierende) Bearbeitungsfunktion schreiben. Diese Bearbeitungsfunktionen sind für die Verwendung innerhalb des Blocs Designumgebung und werden nicht verwendet, wenn Ihr benutzerdefiniertes Bric in ein exportiertes Projekt aufgenommen wird. Diese Bearbeitungsfunktionen sollten alle in einer einzigen JS-Datei platziert werden, die in den Header Ihres benutzerdefinierten 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.