Appels API

Introduction

La solution 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 un BricLes fonctions Javascript, 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

Quand une coutume Bric est sélectionné, la barre latérale remplira automatiquement les valeurs de l'interface utilisateur en fonction du paramètre personnalisé Brics valeurs actuelles. Lorsqu'un élément d'interface utilisateur de la barre latérale interagit avec, l'état de cet élément sera automatiquement mis à jour, cependant, les appels d'API suivants vous permettent de manipuler d'autres éléments d'interface utilisateur et leurs valeurs pour cet élément personnalisé. Bric. Par exemple, cocher une case peut entraîner l'ajout d'un autre élément de menu à un menu déroulant, le décocher, peut supprimer l'élément supplémentaire de la liste déroulante.

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"}');

setUIEditable - 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 y a des moments où vous devrez ajouter des ressources supplémentaires à un projet qui contient votre Bric. Les appels d'API suivants vous permettent d'ajouter des ressources de projet supplémentaires.

projetResource - Ajouter une personnalisation supplémentaire Bric ressources à un projet. Une fois ajoutés, ceux-ci 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 attachés 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 un code de pages, les ressources CSS seront placées avant la balise head de fermeture et les ressources JS seront placées avant la balise body de fermeture. Toutes les ressources supplémentaires référencées par votre coutume Bric, devrait être inclus dans votre coutume Brics répertoire des ressources.

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

Appels de page

Il y a des moments où vous devrez ajouter des ressources supplémentaires à une page qui contient votre Bric. Les appels d'API suivants vous permettent d'ajouter des ressources de page supplémentaires et de contrôler un suffixe d'exportation de pages.

ressource - Ajouter une personnalisation supplémentaire Bric ressources sur une page. Une fois ajoutés, ceux-ci apparaîtront 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 attachés 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 coutume Bric, devrait être inclus dans votre coutume 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.

magasinPersonnaliséBricModèleVal - Stocker une valeur définie par l'utilisateur qui sera incluse dans une personnalisation Bric fichier modèle. Les fichiers de modèle peuvent être CSS, JS, JSON et PHP et doivent être ajoutés à la personnalisation Bric contenu 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:
La solution magasinPersonnaliséBricModèleVal 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

Applications 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 situé sur la principale 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 ou de rendu pendant la synchronisation, tout se passe instantanément.

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

Appels de rétroaction

Il y a des moments où il est important de renvoyer des informations à l'utilisateur en fonction des modifications qu'il apporte à une personnalisation Bric. Les appels suivants offrent une variété de façons de le faire.

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!');