1. Inicio
  2. Desarrolladores
  3. Introducción a la API para desarrolladores

Introducción a la API para desarrolladores

Introducción

La Blocs La API de desarrollador permite a terceros crear Brics que se puede utilizar dentro del Blocs entorno de diseño. Los componentes centrales de una costumbre Bric se crean utilizando HTML, JS y CSS (puede leer más sobre los datos y la estructura de archivos aquí). Hay varios protocolos API a los que se puede acceder a través de cualquier lenguaje basado en javascript.

Tenga en cuenta: el Blocs La API del desarrollador se encuentra actualmente en su fase Alfa inicial, por lo que algunas características y documentación pueden cambiar.

Bric Astillero

Blocs viene con una herramienta de desarrollo llamada Bric Constructor que está diseñado para ayudar con el desarrollo y creación de diseños personalizados. Brics. Se puede acceder a través de Desarrollador> Bric Astillero en el menú principal. los Bric Builder es la forma más sencilla de empezar a crear Brics, se recomienda que siga esta guía básica para crear su primera Bric.
 

Interfaces de construcción

La interfaz de usuario para una Bric debe ser creado usando el Bric Herramienta de construcción. Debajo de la pestaña de interfaz hay varios campos y controles para agregar y administrar la interfaz de usuario para su bric.

Agregar un artículo

Para agregar un nuevo componente de interfaz de usuario, haga clic en el + ubicado en la parte superior derecha del árbol de capas de la interfaz de usuario y seleccione el tipo de componente de interfaz que desea agregar.

Reordenar artículos

Los elementos de la interfaz de usuario se pueden reordenar arrastrando y soltando la capa correspondiente en el árbol de capas.

Duplicar elementos

Los elementos de la interfaz de usuario se pueden duplicar simplemente Hacer clic derecho la capa correspondiente en el árbol de capas y seleccionando Duplicar desde el menú contextual.

¡Consejo para principiantes!

También es posible duplicar todo personalizado Brics by Hacer clic derecho las Bric en la lista principal en el lado izquierdo de la Bric Constructor y seleccionando Duplicar desde el menú contextual.

Componentes de UI disponibles

Título - Un título es un componente de texto visual que no llama a una función.

Etiqueta de varias líneas - Una etiqueta de varias líneas es un componente de texto visual que no llama a una función.

Campo de texto - Un campo de texto pasa un valor de cadena a su función de edición asignada.

Campo paso a paso - Un campo de texto con control paso a paso pasa un valor entero a su función de edición asignada.

Área de texto - Un área de texto pasa un valor de cadena a su función de edición asignada.

Imagen bien - Una imagen pasa bien una ruta de archivo a su función de edición asignada.

Menú desplegable - Un menú desplegable pasa el índice entero seleccionado y el valor de la cadena del elemento a su función de edición asignada.

Caja - Una casilla de verificación pasa un valor bool a su función de edición asignada.

Botón - Un botón llama a su función de edición asignada cuando se hace clic en él.

Selector de fuentes - Un menú desplegable que pasa una selección de fuente a su función de edición asignada.

Selector de página - Un menú desplegable que pasa una ID de página, un nombre, un atributo y el índice entero del elemento seleccionado a su función de edición asignada. Los ID de página se intercambian por URL de página reales en la exportación siempre que el ID se almacene en el atributo de datos datos-blocs-página.

Selector de ID - Un menú desplegable que pasa un ID a su función de edición asignada. Este menú se completa automáticamente con todos los ID de elementos de la página actual.

Selector de bombo - Un menú desplegable que pasa el nombre de un proyecto publicitario a su función de edición asignada. Este menú se llena automáticamente con todos .hiperrecursos directorios agregados al proyecto actual.

Color bien - Un pozo de color pasa un valor hexadecimal a su función de edición asignada.

Slider - Un control deslizante pasa un valor entero a su función de edición asignada.

Control de alineación horizontal - Un control segmentado de alineación pasa un valor entero a su función de edición asignada (0 = Izquierda | 1 = Centro | 2 = Derecha).

Control de alineación vertical - Un control segmentado de alineación pasa un valor entero a su función de edición asignada (0 = Superior | 1 = Medio | 2 = Inferior).

Control de alineación de texto - Un control segmentado de alineación pasa un valor entero a su función de edición asignada (0 = Izquierda | 1 = Centro | 2 = Derecha | 3 = Justificar).

Control de selección de dispositivo – Un control segmentado de dispositivo pasa un valor entero a su función de edición asignada (1 = Escritorio | 2 = Tableta | 3 = Paisaje móvil | 4 = Móvil).

Control de selección de borde – Un control segmentado de selección de borde pasa un valor entero a su función de edición asignada (0 = Izquierda | 1 = Superior | 2 = Derecha | 3 = Inferior).

Control de selección de dirección – Un control de dirección segmentada pasa un valor entero a su función de edición asignada (0 = Izquierda | 1 = Arriba | 2 = Derecha | 3 = Abajo).

Divisor - Un divisor es un componente visual que no llama a una función.

Atributos de datos de componentes de la interfaz de usuario

Cada componente de la interfaz de usuario tiene varios atributos de datos que se utilizan para establecer características de interacción clave, como la función a la que se llama cuando se interactúa con un componente o la información sobre herramientas que se muestra cuando el usuario mueve el cursor sobre un componente.

Título - El título del elemento de la interfaz. Normalmente se muestra en el lado izquierdo de la barra lateral.

Función - El nombre de la función que se llama cuando se interactúa con este elemento de interfaz. Solo incluya el nombre de la función, no incluya ().

Atributo - El nombre de atributo utilizado para almacenar el valor de los datos para este elemento de interfaz.

Valor - El valor de datos de atributo inicial de este elemento de interfaz.

información sobre herramientas - El texto de información sobre herramientas que se muestra cuando el cursor está sobre el componente.

Funciones de escritura

Para manipular el HTML de un personalizado Bric, primero deberá escribir su propia funcionalidad de edición (basada en javascript). Estas funciones de edición están diseñadas para su uso en Blocs entorno de diseño y no se utilizan cuando su personalización Bric se incluye dentro de un proyecto exportado. Todas estas funciones de edición deben colocarse dentro de un solo archivo JS que se carga en el encabezado de su personalizado Brics index.html expediente. Las funciones de edición están vinculadas a un componente de la interfaz de usuario a través de los componentes de la interfaz de usuario. atributo de datos de función.

Cuando se interactúa con un componente de la interfaz de usuario, llamará a la función de edición designada y le pasará un valor junto con el atributo de destino al que se le asigna el valor. La carga útil de datos para la función de edición dependerá del tipo de componente de interfaz de usuario que se esté utilizando para llamarlo. Se debe escribir una función de edición para que declare la variable de carga útil correctamente. En el siguiente ejemplo, la función de edición utilizada por una casilla de verificación se establece para recibir una carga útil BOOL primero y el valor de la cadena de atributo de destino en segundo lugar.

Ejemplo:
function myCheckbox(isChecked,targetAttr)
{
if(isChecked)
{
// checkbox is checked
}
}

Depuración personalizada Brics

Blocs viene con algunas funciones útiles integradas para ayudar con la depuración personalizada Brics. Puede obtener más información sobre estas funciones de depuración integradas para aquí.

Actualizado el 23 de enero de 2023

¿Le resultó útil este artículo?

Artículos Relacionados