Llamadas a API

Introducción

El Blocs La API del desarrollador proporciona un conjunto de rutinas y protocolos que se pueden utilizar para interactuar con un Brics interfaz de usuario, salida HTML y varios otros aspectos de la Blocs entorno de diseño.

Las llamadas se realizan a través de un BricLas funciones de Javascript, las funciones se pueden escribir en cualquier formato JS, jQuery 2, jQuery 3, etc.

Todas las llamadas a la API se procesan mediante el Controlador de mensajes de WebKit y debe pasar un único conjunto de datos en forma de diccionario JSON o una cadena. Se debe colocar un valor de datos de llamadas a la API dentro del Publicar mensaje soportes.

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

Llamadas a la interfaz de usuario

Cuando una costumbre Bric está seleccionado, la barra lateral completará automáticamente los valores de la interfaz de usuario según el Brics valores actuales. Cuando se interactúa con un elemento de la interfaz de usuario de la barra lateral, el estado de ese elemento se actualizará automáticamente; sin embargo, las siguientes llamadas a la API le permiten manipular otros elementos de la interfaz de usuario y sus valores para ese elemento personalizado. Bric. Por ejemplo, marcar una casilla de verificación podría resultar en agregar otro elemento de menú a un menú desplegable, desmarcarlo podría eliminar el elemento adicional del menú desplegable.

Las llamadas a la API de la interfaz de usuario requieren un diccionario JSON que especifique el valor y el atributo del elemento de la interfaz de usuario de destino.

establecerUIVal - Establecer el valor de un elemento de la interfaz de usuario de la barra lateral. Todos los valores deben pasarse como cadenas, incluidos enteros y bools.

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

Ejemplo de casilla de verificación:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"checkbox-data","value":"1","sync":"false"}');

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

Ejemplo de control de alineación:
window.webkit.messageHandlers.setUIVal.postMessage('{"attr":"align-data","value":"2","sync":"false"}');

establecerUIState - Establecer el estado (habilitado / deshabilitado) de un elemento de la interfaz de usuario de la barra lateral.

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

setUIEditable - Establecer si se puede editar el contenido de los elementos de la interfaz de usuario.

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

establecerUIOculto - Establecer si un elemento de la IU está oculto.

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

popUIMenú - Complete un elemento del menú desplegable con opciones.

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

Convocatorias de proyectos

Hay ocasiones en las que necesitará agregar recursos adicionales a un proyecto que contiene su Bric. Las siguientes llamadas a la API le permiten agregar recursos de proyecto adicionales.

proyectoRecurso - Agregar personalizado adicional Bric recursos a un proyecto. Una vez agregados, estos se mostrarán en los archivos adjuntos del proyecto en la configuración del proyecto. Actualmente se admiten archivos JS, CSS, PHP y HTML, así como directorios. Los archivos JS adjuntos se colocan en el directorio export / js, los archivos CSS se colocan en el directorio export / css y los archivos PHP se colocan en el directorio export / includes. Dentro de un código de páginas, los recursos CSS se colocarán antes de la etiqueta de cierre de la cabeza y los recursos de JS se colocarán antes de la etiqueta de cierre del cuerpo. Todos los recursos adicionales a los que hace referencia su cliente Bric, debe incluirse en su personalizado Brics directorio de recursos.

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

Llamadas de página

Hay ocasiones en las que necesitará agregar recursos adicionales a una página que contiene su Bric. Las siguientes llamadas a la API le permiten agregar recursos de página adicionales y controlar un sufijo de exportación de páginas.

Recurso - Agregar personalizado adicional Bric recursos a una página. Una vez agregados, estos se mostrarán en los archivos adjuntos de la página en la configuración de la página. Actualmente se admiten archivos JS, CSS y PHP. Los archivos JS adjuntos se colocan en el directorio export / js, los archivos CSS se colocan en el directorio export / css y los archivos PHP se colocan en el directorio export / includes. Todos los recursos referenciados por su clientela Bric, debe incluirse en su personalizado Brics directorio de recursos.

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

sufijo de página - Establecer el sufijo de la página actual, por ejemplo, HTML, PHP.

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

Llamadas de plantilla

En ocasiones, es posible que deba incluir valores definidos por el usuario en archivos adicionales que se incluyen con el sitio exportado. La siguiente llamada a la API le permite hacer esto.

tiendaPersonalizadaBricPlantillaVal - Almacene un valor definido por el usuario que se incluirá dentro de un personalizado Bric archivo de plantilla. Los archivos de plantilla pueden ser CSS, JS, JSON y PHP y deben agregarse al archivo personalizado. Bric contenidos en un directorio llamado plantillas.

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

Valores clave:
El tiendaPersonalizadaBricPlantillaVal La llamada a la API debe incluir los siguientes valores clave:

attr - El valor del atributo se utiliza para identificar las áreas que se reemplazarán en el archivo de plantilla al exportarse. Cuando este atributo se utiliza dentro de un archivo de plantilla, debe incluirse en%, por ejemplo,% my-attr%.
propuesta de - El valor que reemplazará al atributo en el archivo de plantilla.
plantilla - El nombre del archivo de la plantilla. Este archivo debe estar ubicado en un directorio llamado plantillas dentro de tu Brics contenido.
forzar-nuevoarchivo - Si dos Brics con diferentes valores escribir en el mismo archivo de plantilla y este se establece en SÍ, se creará otro archivo de plantilla, por ejemplo, personalizadobric-js-1.js.

Códigos cortos
También vale la pena señalar que códigos cortos también se puede utilizar en archivos de plantilla.

Cambios DOM

Personalizado Brics se manipulan fuera del entorno de diseño principal, este método ofrece a los desarrolladores total libertad para manipular los Brics 'DOM' (Document Object Model) de cualquier manera, con cualquier tipo de lenguaje basado en JS. Después de que una función haya realizado cambios en la Brics DOM, deberá llamar al sincronizar protocolo para sincronizar los cambios DOM a la costumbre Bric ubicado en la principal Blocs lienzo de diseño.

sincronizar - Una vez realizada la manipulación del DOM, la llamada de la API de sincronización sincronizará los cambios con la Blocs lienzo de diseño. No hay preprocesamiento ni renderizado durante la sincronización, todo sucede instantáneamente. También es importante considerar que el sincronizar El protocolo también creará un estado de deshacer en el documento actual, por lo que solo utilice esta llamada si se han realizado cambios; de lo contrario, se crearán estados de deshacer innecesarios.

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

Llamadas de retroalimentación

Hay ocasiones en las que es importante enviar información al usuario en función de los cambios que están realizando en una Bric. Las siguientes llamadas ofrecen una variedad de formas de hacerlo.

. - Muestra una notificación en la aplicación que no block acceso completo a la interfaz de usuario. Cada tipo de notificación debe tener su propio valor de ID, ya que una vez que el usuario descarta una ID de notificación, no se volverá a mostrar si se llama.

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

También es posible restablecer una notificación Al utilizar el atributo de reinicio, el atributo ID se puede utilizar para enviar una única ID o una serie de ID de notificación.

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

alerta - Publicar una alerta (blocks aplicaciones de interfaz de usuario completa hasta que se descarte).

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

Alerta de devolución de llamada - Publicar una alerta (blocks apps full UI hasta que se descarte) que requiere que el usuario tome una decisión. La elección del usuario se devolverá a la función como un valor BOOL.

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

URL abierta - Abra una URL en el navegador web de los usuarios.

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

Miscelánea

Varias convocatorias utilizadas para el desarrollo.

depurar - Publique un mensaje de depuración que se mostrará en el ventana de la consola del desarrollador.

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