Anatomía de un bloque

En este documento, se exploran las diferentes partes de un bloque.

Conexiones

Las conexiones definen dónde se pueden conectar los bloques y a qué tipo de bloques se pueden conectar.

Existen cuatro tipos de conexiones:

Tipo de conexión Imagen
Conexión de salida una conexión de salida
Conexión de entrada una conexión de entrada
Conexión anterior una conexión anterior
Próxima conexión una conexión siguiente

Las conexiones de salida y las de entrada se pueden conectar entre sí, y las conexiones siguientes y las anteriores también. Puedes restringir aún más las conexiones con las verificaciones de conexión.

Puedes personalizar las formas de las conexiones con un renderizador personalizado.

Conexiones de nivel superior

Los bloques tienen tres conexiones cuyo uso es opcional.

Un bloque puede tener una sola conexión de salida, representada como un conector de rompecabezas macho en el borde frontal de un bloque. Una conexión de salida pasa el valor (expresión) de un bloque a otro. Un bloque con una conexión de salida se denomina bloque de valor.

Un bloque math_number.

Un bloque puede tener una conexión anterior en la parte superior (representada como una muesca) y una conexión siguiente en la parte inferior (representada como una pestaña). Estos permiten que los bloques se apilen verticalmente y representen una secuencia de instrucciones. Un bloque sin una conexión de salida se denomina bloque de sentencia y, por lo general, tiene conexiones anteriores y siguientes.

Un bloque variables_set.

Para obtener más información, consulta Conexiones de nivel superior.

Campos

Los campos definen la mayoría de los elementos de la IU dentro de un bloque. Estos incluyen las etiquetas de cadenas, los menús desplegables, las casillas de verificación, las imágenes y las entradas para datos literales, como cadenas y números. Por ejemplo, este bloque de bucle usa campos de etiqueta, un campo desplegable y campos numéricos.

Es un bloque con varios campos.

Blockly proporciona una serie de campos integrados, incluidos selectores de color, entradas de texto y imágenes. También puedes crear tus propios campos.

Para obtener más información, consulta Campos.

Entradas

Las entradas son contenedores de campos y conexiones. Para compilar un bloque, se renderizan sus entradas en una o más filas como ladrillos.

Existen cuatro tipos diferentes de entradas, todos los cuales pueden contener campos (incluidas las etiquetas) y dos de los cuales contienen una sola conexión. También puedes crear entradas personalizadas, que admiten la renderización personalizada.

Tipo de entrada Tipo de conexión Imagen
Entrada simulada Ninguno entrada simulada
Entrada de fin de fila Ninguno entrada de fin de fila
Entrada de valor Conexión de entrada entrada de valor
Entrada de sentencia Próxima conexión entrada de sentencia

Presentaremos estas entradas a través de una serie de ejemplos. Para obtener información sobre cómo definir las entradas, las conexiones y los campos que conforman un bloque, consulta Estructura de bloques en JSON y Estructura de bloques en JavaScript.

Entradas simuladas

Una entrada simulada es solo un contenedor para campos, no tiene una conexión. Por ejemplo, el siguiente bloque numérico tiene una sola entrada ficticia que contiene un solo campo numérico.

Un bloque numérico con una entrada simulada y un campo numérico

Como ejemplo más complejo, considera un bloque que suma dos números. Esto se podría compilar a partir de una sola entrada ficticia con tres campos (número, etiqueta y número):

Un bloque de adición creado a partir de una entrada ficticia con tres campos.

o tres entradas simuladas, cada una con un solo campo:

Un bloque de adición creado a partir de tres entradas simuladas, cada una con un solo campo.

Entradas de fin de fila

Blockly usa heurísticas para decidir si renderizar todas las entradas en una sola fila o renderizar cada entrada en su propia fila. Si quieres asegurarte de que una entrada comience una fila nueva, usa una entrada de fin de fila como la entrada anterior.

Al igual que las entradas simuladas, las entradas de fin de fila pueden contener campos, pero no tienen una conexión. Por ejemplo, este es el bloque de adición creado a partir de una entrada de fin de fila con dos campos y una entrada ficticia con un campo. La entrada de fin de fila obliga a que la entrada ficticia se renderice en una fila nueva.

Un bloque de adición dividido en dos filas por una entrada de fin de fila.

Entradas de valor

Los campos tienen limitaciones en cuanto a lo que pueden aceptar. Por ejemplo, los campos numéricos solo aceptan números. Pero ¿qué sucede si quieres sumar dos variables? ¿O agregar el resultado de una llamada de procedimiento al resultado de un cálculo diferente? Para resolver este problema, usa conexiones de entrada en lugar de campos. Esto permite que los usuarios usen bloques de valor como valores de entrada.

Una entrada de valor contiene cero o más campos y termina en una conexión de entrada. El siguiente bloque reemplaza los campos numéricos del bloque de adición por conexiones de entrada. Se compila a partir de dos entradas de valor: la primera no contiene ningún campo y la segunda contiene un campo de etiqueta. Ambos terminan en conexiones de entrada.

Un bloque de suma con dos entradas de valor.

Entradas de instrucciones

El último tipo de entrada es una entrada de sentencia, que contiene cero o más campos y termina con una conexión siguiente. La siguiente conexión te permite anidar una pila de bloques de sentencias dentro de tu bloque. Por ejemplo, considera el siguiente bloque de repetición. La segunda fila de este bloque consta de una entrada de sentencia con un campo de etiqueta única y una conexión siguiente.

Un bloque de repetición con una entrada de sentencia para anidar sentencias repetidas

Las entradas de sentencia siempre se renderizan en su propia fila. Puedes ver esto en el siguiente bloque si-entonces-sino, que tiene una entrada de valor en su primera fila y entradas de sentencia en las siguientes dos filas.

Un bloque if-then-else con entradas de instrucciones separadas para las instrucciones then y else.

Entradas intercaladas en comparación con entradas externas

Las entradas se pueden renderizar en línea o externamente. Esto controla si los conectores para las entradas de valor se renderizan dentro del bloque (incorporados) o en el borde exterior (externos), así como si las entradas se renderizan en las mismas filas o en filas diferentes.

El mismo bloque renderizado una vez con entradas intercaladas y una vez con entradas externas

Cuando creas un bloque personalizado, puedes especificar cuál usar o dejar que Blockly lo decida por ti. Para obtener más información, consulta Entradas intercaladas frente a entradas externas.

¡A jugar!

La mejor manera de aprender sobre las entradas, los campos y las conexiones es construir bloques en las Herramientas para desarrolladores de Blockly y elegir diferentes parámetros de configuración para el menú desplegable inputs (automatic, external, inline).

Íconos

Además de las entradas, las conexiones y los campos, los bloques pueden tener uno o más íconos. Estos tienen varios usos, como mostrar advertencias, ingresar comentarios a nivel del bloque o mostrar la IU del modificador. Por ejemplo, este es un bloque con un ícono de comentario y su editor asociado.

Un bloque con un ícono de comentario y un editor de comentarios abierto.

Para obtener más información, consulta Íconos.

Bloques y objetos de JavaScript

Los bloques, las entradas, las conexiones, los campos y los íconos son todos objetos de JavaScript.

Componente de Blockly Clase base Subclases
Bloquear Block BlockSvg
Entrada Input DummyInput
EndRowInput
ValueInput
StatementInput
entrada personalizada
Conexión Connection RenderedConnection
Campo Field FieldTextInput
FieldNumber
FieldLabel
campo personalizado
etc.
Ícono Icon CommentIcon
MutatorIcon
WarningIcon
ícono personalizado

Los objetos de un bloque forman un objeto con forma de árbol. Comprender cómo la representación gráfica de un bloque corresponde a este árbol es útil cuando escribes código para manipular bloques de forma programática. Por ejemplo, un bloque controls_for:

Un bloque de bucle con un campo de variable, entradas de valor para to, from y by, y una entrada de sentencia para sentencias repetidas.

corresponde al siguiente árbol de objetos JavaScript.

// <Object> means an instance of an Object.
{                                   // Block
  nextConnection: <Connection>,     // ConnectionType NEXT_STATEMENT
  outputConnection: null,
  previousConnection: <Connection>, // ConnectionType PREVIOUS_STATEMENT
  inputList: [                      // Array of Inputs in block
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [                   // Array of fields in Input
        <FieldLabel>,               // 'count with'
        <FieldVariable>,            // i
        <FieldLabel>,               // 'from'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'to'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'by'
      ],
    },
    {                               // StatementInput
      connection: <Connection>,     // ConnectionType NEXT_STATEMENT
      fieldRow: [
        <FieldLabel>,               // 'do'
      ],
    },
  ]
}