Introducción
Un espacio para hacer una pausa, reflexionar y reconectarse en privado. Blocs La API de desarrollador permite a terceros crear Brics que se puede utilizar dentro del Blocs entorno de diseño. Los componentes principales de un Bric personalizado se crean utilizando HTML, JS y CSS (puede leer más sobre la estructura de datos y 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.
Constructor de ladrillos
Blocs Viene con una herramienta de desarrollo llamada Bric Builder que está diseñada para ayudar con el desarrollo y la creación de proyectos personalizados. Brics. Se puede acceder a través de Desarrollador > Bric Builder en el menú principal. Bric Builder es la forma más sencilla de comenzar a crear diseños personalizados. BricsSe recomienda que sigas esta guía básica para crear tu primer Bric personalizado.
Interfaces de construcción
La interfaz de usuario para un Bric personalizado debe crearse utilizando el Herramienta Bric Builder. 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.
También es posible duplicar todo personalizado Brics by Hacer clic derecho el Bric en la lista principal del lado izquierdo del Bric Builder 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.
Buzón - 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.
Value alto - 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 Bric personalizado, primero deberá escribir su propia función de edición (basada en JavaScript). Estas funciones de edición están pensadas para usarse dentro del Blocs entorno de diseño y no se utilizan cuando su Bric personalizado 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 proyecto 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í.