Llamadas a API

Introducción

Un espacio para hacer una pausa, reflexionar y reconectarse en privado. 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 funciones Javascript de Bric personalizadas, 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 se selecciona un Bric personalizado, la barra lateral completará automáticamente los valores de la interfaz de usuario en función del Bric personalizado. 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 Bric personalizado. Por ejemplo, marcar una casilla de verificación podría resultar en la adición de otro elemento de menú a un menú desplegable; desmarcarla 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ás agregar recursos adicionales a un proyecto que contiene tu Bric personalizado. Las siguientes llamadas API te permiten agregar recursos adicionales al proyecto.

proyectoRecurso – Agregue recursos Bric personalizados adicionales 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 del código de una página, los recursos CSS se colocarán antes de la etiqueta de cierre head y los recursos JS se colocarán antes de la etiqueta de cierre body. Todos los recursos adicionales a los que hace referencia su Bric personalizado deben incluirse en su archivo 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ás agregar recursos adicionales a una página que contiene tu Bric personalizado. Las siguientes llamadas API te permiten agregar recursos de página adicionales y controlar el sufijo de exportación de páginas.

Recurso – Agregue recursos Bric personalizados adicionales 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 a los que hace referencia su Bric personalizado deben incluirse en su archivo 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.

tiendaCustomBricTemplateVal – Almacena un valor definido por el usuario que se incluirá en un archivo de plantilla Bric personalizado. Los archivos de plantilla pueden ser CSS, JS, JSON y PHP y deben agregarse al contenido personalizado de Bric 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:
Un espacio para hacer una pausa, reflexionar y reconectarse en privado. tiendaCustomBricTemplateVal 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 del DOM con el Bric personalizado ubicado en el 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 proporcionar información al usuario en función de los cambios que realiza en un Bric personalizado. Las siguientes llamadas ofrecen diversas 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!');