API-Aufrufe

Einleitung

Das Blocs Die Entwickler-API bietet eine Reihe von Routinen und Protokollen, mit denen Sie mit einem benutzerdefinierten Benutzer interagieren können Brics Benutzeroberfläche, HTML-Ausgabe und verschiedene andere Aspekte der Blocs Designumgebung.

Aufrufe werden über benutzerdefinierte Bric-Javascript-Funktionen getätigt, Funktionen können in jedem JS-Format, jQuery 2, jQuery 3 usw. geschrieben werden.

Alle API-Aufrufe werden mit dem verarbeitet WebKit-Nachrichtenhandler und sollte einen einzelnen Datensatz in Form eines JSON-Wörterbuchs oder einer Zeichenfolge übergeben. Ein API-Aufrufdatenwert sollte innerhalb des platziert werden POST-Meldung Klammern.

Ejemplo:
window.webkit.messageHandlers.API_CALL.postMessage("VALUE");

UI-Anrufe

Wenn ein benutzerdefinierter Bric ausgewählt ist, füllt die Seitenleiste die UI-Werte automatisch basierend auf dem benutzerdefinierten Brics aktuelle Werte. Wenn mit einem UI-Element der Seitenleiste interagiert wird, wird der Status dieses Elements automatisch aktualisiert. Die folgenden API-Aufrufe ermöglichen Ihnen jedoch, andere UI-Elemente und deren Werte für diesen benutzerdefinierten Bric zu bearbeiten. Wenn Sie beispielsweise ein Kontrollkästchen aktivieren, kann dies dazu führen, dass einem Dropdown-Menü ein weiteres Menüelement hinzugefügt wird. Wenn Sie das Kontrollkästchen deaktivieren, kann das zusätzliche Element aus dem Dropdown-Menü entfernt werden.

API-Aufrufe der Benutzeroberfläche erfordern ein JSON-Wörterbuch, das das Attribut und den Wert des Ziel-UI-Elements angibt.

setUIVal - Legen Sie den Wert für ein Seitenleisten-UI-Element fest. Alle Werte sollten als Zeichenfolgen übergeben werden, einschließlich Ganzzahlen und Bools.

Dropdown-Beispiel:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"dropdown-data","value":"1","sync":"false"}');

Kontrollkästchen Beispiel:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"checkbox-data","value":"1","sync":"false"}');

Eingabefeld Beispiel:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"field-data","value":"Hello World","sync":"false"}');

Beispiel für die Aligment-Kontrolle:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"align-data","value":"2","sync":"false"}');

setUIState - Legen Sie den Status (aktiviert / deaktiviert) eines UI-Elements in der Seitenleiste fest.

Ejemplo:
window.webkit.messageHandlers.setUIState.postMessage('{"attr":"my-name-data","enable":"false"}');

setUIBearbeitbar - Legen Sie fest, ob der Inhalt eines UI-Elements bearbeitet werden kann.

Ejemplo: window.webkit.messageHandlers.setUIEditable.postMessage('{"attr":"my-name-data","editable":"true"}');

setUIHidden - Legen Sie fest, ob ein UI-Element ausgeblendet ist.

Ejemplo: window.webkit.messageHandlers.setUIHidden.postMessage('{"attr":"my-name-data","hidden":"true"}');

popUIMenu - Füllen Sie einen Dropdown-Menüpunkt mit Optionen.

Ejemplo:
window.webkit.messageHandlers.popUIMenu.postMessage('{"attr":"dropdown-data","items":"item 1,item 2,*seperator*,item 3", "value":"0"}');

Projektaufrufe

Manchmal müssen Sie einem Projekt, das Ihren benutzerdefinierten Bric enthält, zusätzliche Ressourcen hinzufügen. Mit den folgenden API-Aufrufen können Sie zusätzliche Projektressourcen hinzufügen.

ProjektRessource – Fügen Sie einem Projekt zusätzliche benutzerdefinierte Bric-Ressourcen hinzu. Nach dem Hinzufügen werden diese in den Projektanhängen unter den Projekteinstellungen angezeigt. Derzeit werden JS-, CSS-, PHP- und HTML-Dateien sowie Verzeichnisse unterstützt. Angehängte JS-Dateien werden im Verzeichnis export /js abgelegt, CSS-Dateien im Verzeichnis export /css und PHP-Dateien im Verzeichnis export /includes. Innerhalb eines Seitencodes werden die CSS-Ressourcen vor dem schließenden Head-Tag und die JS-Ressourcen vor dem schließenden Body-Tag platziert. Alle zusätzlichen Ressourcen, auf die Ihr benutzerdefiniertes Bric verweist, sollten in Ihrem benutzerdefinierten Bric enthalten sein. Brics Ressourcenverzeichnis.

Ejemplo:
window.webkit.messageHandlers.projectResource.postMessage('{"action":"add","name":"my-brics-assets-folder"}');

Seitenaufrufe

Manchmal müssen Sie einer Seite, die Ihren benutzerdefinierten Bric enthält, zusätzliche Ressourcen hinzufügen. Mit den folgenden API-Aufrufen können Sie zusätzliche Seitenressourcen hinzufügen und ein Seitenexportsuffix steuern.

Ressourcen – Fügen Sie einer Seite zusätzliche benutzerdefinierte Bric-Ressourcen hinzu. Nach dem Hinzufügen werden diese in den Seitenanhängen unter den Seiteneinstellungen angezeigt. Derzeit werden JS-, CSS- und PHP-Dateien unterstützt. Angehängte JS-Dateien werden im Verzeichnis export /js abgelegt, CSS-Dateien im Verzeichnis export /css und PHP-Dateien im Verzeichnis export /includes. Alle Ressourcen, auf die Ihr benutzerdefiniertes Bric verweist, sollten in Ihrem benutzerdefinierten Bric enthalten sein. Brics Ressourcenverzeichnis.

Ejemplo:
window.webkit.messageHandlers.resource.postMessage('{"action":"add","name":"my-custom-resource.js"}');

SeitenSuffix - Stellen Sie das aktuelle Seitensuffix ein, z. B. HTML, PHP.

Ejemplo:
window.webkit.messageHandlers.pageSuffix.postMessage("php");

Vorlagenaufrufe

Es kann vorkommen, dass Sie benutzerdefinierte Werte in zusätzliche Dateien aufnehmen müssen, die in der exportierten Site enthalten sind. Mit dem folgenden API-Aufruf können Sie dies tun.

shopCustomBricTemplateVal – Speichern Sie einen benutzerdefinierten Wert, der in eine benutzerdefinierte Bric-Vorlagendatei aufgenommen wird. Vorlagendateien können CSS, JS, JSON und PHP sein und sollten dem benutzerdefinierten Bric-Inhalt in einem Verzeichnis namens hinzugefügt werden. Vorlagen.

Ejemplo:
window.webkit.messageHandlers.storeCustomBricTemplateVal.postMessage('{"attr":"my-attr","value":"Hello World","template":"custom-bric-js.js","force-newfile":"no"}');

Schlüsselwerte:
Das shopCustomBricTemplateVal Der API-Aufruf sollte die folgenden Schlüsselwerte enthalten:

attr - Der Attributwert wird verwendet, um die Bereiche zu identifizieren, die beim Export in der Vorlagendatei ersetzt werden. Wenn dieses Attribut in einer Vorlagendatei verwendet wird, sollte es in% eg% my-attr% eingeschlossen werden.
Wert - Der Wert, der das Attribut in der Vorlagendatei ersetzt.
Vorlage - Der Name der Vorlagendatei. Diese Datei sollte sich in einem Verzeichnis mit dem Namen befinden Vorlagen in deinem Brics Inhalt.
Force-Newfile - Wenn zwei Brics Wenn unterschiedliche Werte in dieselbe Vorlagendatei geschrieben werden und diese auf YES gesetzt ist, wird eine weitere Vorlagendatei erstellt, z.bric-js-1.js.

Funktionscodes
Es ist auch erwähnenswert, dass Funktionscodes kann auch in Vorlagendateien verwendet werden.

DOM-Änderungen

Maßgeschneidert Brics Wenn diese Methode außerhalb der Hauptentwurfsumgebung bearbeitet wird, können Entwickler die benutzerdefinierte Methode vollständig bearbeiten Brics 'DOM' (Document Object Model) in irgendeiner Weise mit jeder Art von JS-basierter Sprache. Nachdem eine Funktion Änderungen am Benutzerdefinierten vorgenommen hat Brics DOM, es muss das anrufen synchronisieren Protokoll, um die DOM-Änderungen mit dem benutzerdefinierten Bric auf dem Hauptserver zu synchronisieren. Blocs Design Leinwand.

synchronisieren - Nachdem die DOM-Manipulation stattgefunden hat, synchronisiert der Synchronisierungs-API-Aufruf die Änderungen mit dem Main Blocs Design-Leinwand. Während der Synchronisierung erfolgt keine Vorverarbeitung oder Wiedergabe, alles geschieht sofort. Es ist auch wichtig zu bedenken, dass die synchronisieren Das Protokoll erstellt auch einen Rückgängig-Zustand im aktuellen Dokument. Verwenden Sie diesen Aufruf daher nur, wenn Änderungen vorgenommen wurden. Andernfalls werden unnötige Rückgängig-Zustände erstellt.

Ejemplo:
window.webkit.messageHandlers.sync.postMessage("changes");

Feedback-Anrufe

Manchmal ist es wichtig, dem Benutzer Informationen zu den Änderungen zurückzugeben, die er an einem benutzerdefinierten Bric vornimmt. Die folgenden Aufrufe bieten verschiedene Möglichkeiten, dies zu tun.

Benachrichtigung - Zeigen Sie eine In-App-Benachrichtigung an, die dies nicht tut block vollständiger UI-Zugriff. Jeder Benachrichtigungstyp sollte einen eigenen ID-Wert haben. Sobald eine Benachrichtigungs-ID vom Benutzer verworfen wird, wird sie nicht mehr angezeigt, wenn sie aufgerufen wird.

Ejemplo:
window.webkit.messageHandlers.notification.postMessage('{"message":"Hey, this is a notification.","id":"my-bric-notification"}');

Das ist auch möglich Benachrichtigung zurücksetzen Mit dem Reset-Attribut kann das ID-Attribut verwendet werden, um eine einzelne ID oder ein Array von Benachrichtigungs-IDs zu übermitteln.

Ejemplo:
window.webkit.messageHandlers.notification.postMessage('{"reset":"true","id":"my-bric-notification-1,my-bric-notification-2"}');

alarmieren - Eine Warnung posten (blocks apps volle Benutzeroberfläche bis zur Entlassung).

Ejemplo:
window.webkit.messageHandlers.alert.postMessage('This is a basic alert');

RückrufAlert - Eine Warnung posten (blocks apps volle Benutzeroberfläche bis zur Entlassung), bei der der Benutzer eine Auswahl treffen muss. Die Benutzerauswahl wird als BOOL-Wert an die Funktion zurückgegeben.

Ejemplo:
window.webkit.messageHandlers.callbackAlert.postMessage('{"message":"Do you want to get a pizza?","function":"pizzaFunction"}');

Öffne URL - Öffnen Sie eine URL im Webbrowser des Benutzers.

Ejemplo:
window.webkit.messageHandlers.openURL.postMessage('https://blocsapp.com/');

Sonstiges

Verschiedene Anrufe, die für die Entwicklung verwendet werden.

debuggen - Veröffentlichen Sie eine Debug-Nachricht, die in der angezeigt wird Entwicklerkonsolenfenster.

Ejemplo:
window.webkit.messageHandlers.debug.postMessage('Hello World!');