Appels API

Introduction

Vue d'ensemble Blocs Developer API fournit un ensemble de routines et de protocoles qui peuvent être utilisés pour interagir avec un Brics interface utilisateur, sortie HTML et divers autres aspects de la Blocs environnement de conception.

Les appels sont effectués via des fonctions Javascript personnalisées de Bric, les fonctions peuvent être écrites dans n'importe quel format JS, jQuery 2, jQuery 3 etc.

Tous les appels d'API sont traités à l'aide du Gestionnaire de messages WebKit et doit transmettre un seul ensemble de données sous la forme d'un dictionnaire JSON ou d'une chaîne. Une valeur de données d'appels API doit être placée dans le Publier un message supports.

Mise en situation :
window.webkit.messageHandlers.API_CALL.postMessage("VALUE");

Appels de l'interface utilisateur

Lorsqu'un Bric personnalisé est sélectionné, la barre latérale remplira automatiquement les valeurs de l'interface utilisateur en fonction de la personnalisation. Brics valeurs actuelles. Lorsqu'un élément d'interface utilisateur de la barre latérale est utilisé, l'état de cet élément est automatiquement mis à jour. Cependant, les appels d'API suivants vous permettent de manipuler d'autres éléments d'interface utilisateur et leurs valeurs pour ce Bric personnalisé. Par exemple, le fait de cocher une case peut entraîner l'ajout d'un autre élément de menu à un menu déroulant, tandis que le fait de la décocher peut entraîner la suppression de l'élément supplémentaire du menu déroulant.

Les appels d'API de l'interface utilisateur nécessitent un dictionnaire JSON qui spécifie l'attribut et la valeur de l'élément d'interface utilisateur cible.

ensemble - Définissez la valeur d'un élément de l'interface utilisateur de la barre latérale. Toutes les valeurs doivent être transmises sous forme de chaînes, y compris les entiers et les booléens.

Exemple de liste déroulante:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"dropdown-data","value":"1","sync":"false"}');

Exemple de case à cocher:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"checkbox-data","value":"1","sync":"false"}');

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

Exemple de contrôle d'alignement:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"align-data","value":"2","sync":"false"}');

setUISstate - Définissez l'état (activé / désactivé) d'un élément de l'interface utilisateur de la barre latérale.

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

setUIModifiable - Définissez si le contenu d'un élément de l'interface utilisateur peut être modifié.

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

setUIHidden - Définissez si un élément de l'interface utilisateur est masqué.

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

popUIMenu - Remplissez un élément de menu déroulant avec des options.

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

Appels de projet

Il peut arriver que vous ayez besoin d'ajouter des ressources supplémentaires à un projet contenant votre Bric personnalisé. Les appels d'API suivants vous permettent d'ajouter des ressources de projet supplémentaires.

projetResource – Ajoutez des ressources Bric personnalisées supplémentaires à un projet. Une fois ajoutées, elles apparaîtront dans les pièces jointes du projet sous les paramètres du projet. Les fichiers JS, CSS, PHP et HTML sont actuellement pris en charge, ainsi que les répertoires. Les fichiers JS joints sont placés dans le répertoire export /js, les fichiers CSS sont placés dans le répertoire export /css et les fichiers PHP sont placés dans le répertoire export /includes. Dans le code d'une page, les ressources CSS seront placées avant la balise de fermeture de la tête et les ressources JS seront placées avant la balise de fermeture du corps. Toutes les ressources supplémentaires référencées par votre Bric personnalisé doivent être incluses dans votre Bric personnalisé. Brics répertoire des ressources.

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

Appels de page

Il peut arriver que vous ayez besoin d'ajouter des ressources supplémentaires à une page contenant votre Bric personnalisé. Les appels d'API suivants vous permettent d'ajouter des ressources de page supplémentaires et de contrôler le suffixe d'exportation d'une page.

ressource – Ajoutez des ressources Bric personnalisées supplémentaires à une page. Une fois ajoutées, elles s'afficheront dans les pièces jointes de la page sous les paramètres de la page. Les fichiers JS, CSS et PHP sont actuellement pris en charge. Les fichiers JS joints sont placés dans le répertoire export /js, les fichiers CSS sont placés dans le répertoire export /css et les fichiers PHP sont placés dans le répertoire export /includes. Toutes les ressources référencées par votre Bric personnalisé doivent être incluses dans votre Bric personnalisé Brics répertoire des ressources.

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

pageSuffixe - Définissez le suffixe de la page actuelle, par exemple HTML, PHP.

Mise en situation :
window.webkit.messageHandlers.pageSuffix.postMessage("php");

Appels de modèle

Il peut arriver que vous deviez inclure des valeurs définies par l'utilisateur dans des fichiers supplémentaires inclus avec le site exporté. L'appel API suivant vous permet de le faire.

magasinCustomBricTemplateVal – Stockez une valeur définie par l’utilisateur qui sera incluse dans un fichier de modèle Bric personnalisé. Les fichiers de modèle peuvent être CSS, JS, JSON et PHP et doivent être ajoutés au contenu Bric personnalisé dans un répertoire nommé modèles.

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

Valeurs clés:
Vue d'ensemble magasinCustomBricTemplateVal L'appel d'API doit inclure les valeurs clés suivantes:

attribut - La valeur d'attribut est utilisée pour identifier les zones qui seront remplacées dans le fichier modèle lors de l'exportation. Lorsque cet attribut est utilisé dans un fichier modèle, il doit être encapsulé dans% eg% my-attr%.
Plus-value - La valeur qui remplacera l'attribut dans le fichier modèle.
modèle - Le nom du fichier modèle. Ce fichier doit être situé dans un répertoire nommé modèles dans votre Brics Contenu.
forcer-nouveaufichier - Si deux Brics avec des valeurs différentes écrivent dans le même fichier de modèle et ceci est défini sur OUI, un autre fichier de modèle sera créé, par exemple personnalisé-bric-js-1.js.

Codes courts
Il est également intéressant de noter que codes courts peut également être utilisé dans les fichiers modèles.

Modifications DOM

Personnalisé Brics sont manipulés en dehors de l'environnement de conception principal, cette méthode donne aux développeurs une liberté totale pour manipuler les Brics 'DOM' (Document Object Model) de quelque manière que ce soit, avec n'importe quel type de langage basé sur JS. Après qu'une fonction a apporté des modifications à la personnalisation Brics DOM, il devra appeler le synchroniser protocole afin de synchroniser les modifications du DOM avec le Bric personnalisé situé sur le serveur principal Blocs toile de conception.

synchroniser - Une fois la manipulation du DOM effectuée, l'appel de l'API de synchronisation synchronisera les modifications avec le Blocs toile de conception. Il n'y a pas de prétraitement ni de rendu pendant la synchronisation, tout se passe instantanément. Il est également important de considérer que le synchroniser Le protocole créera également un état d'annulation dans le document actuel, utilisez donc cet appel uniquement si des modifications ont été apportées, sinon des états d'annulation inutiles seront créés.

Mise en situation :
window.webkit.messageHandlers.sync.postMessage("changes");

Appels de rétroaction

Il est parfois important de fournir des informations à l'utilisateur en fonction des modifications qu'il apporte à un Bric personnalisé. Les appels suivants proposent différentes manières de procéder.

déclaration - Afficher une notification dans l'application qui ne block accès complet à l'interface utilisateur. Chaque type de notification doit avoir sa propre valeur d'ID car une fois qu'un ID de notification est ignoré par l'utilisateur, il ne sera plus affiché s'il est appelé.

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

Il est également possible de réinitialiser une notification en utilisant l'attribut reset, l'attribut ID peut être utilisé pour soumettre un seul ID ou un tableau d'ID de notification.

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

alerter - Publier une alerte (blocks apps pleine UI jusqu'à ce qu'il soit rejeté).

Mise en situation :
window.webkit.messageHandlers.alert.postMessage('This is a basic alert');

alerte de rappel - Publier une alerte (blocks apps full UI jusqu'à ce qu'il soit rejeté) qui oblige l'utilisateur à faire un choix. Le choix de l'utilisateur sera renvoyé à la fonction sous la forme d'une valeur BOOL.

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

ouvrir le lien - Ouvrez une URL dans le navigateur Web des utilisateurs.

Mise en situation :
window.webkit.messageHandlers.openURL.postMessage('https://blocsapp.com/');

Divers

Divers appels utilisés pour le développement.

déboguer - Publiez un message de débogage qui s'affichera dans le fenêtre de la console du développeur.

Mise en situation :
window.webkit.messageHandlers.debug.postMessage('Hello World!');