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 entrada y salida pueden conectarse entre sí, y las conexiones siguientes y anteriores también pueden conectarse entre sí. 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 macho de rompecabezas en el borde delantero del 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.

Es 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, lo que representa una secuencia de instrucciones. Un bloque sin una conexión de salida se denomina bloque de instrucción y, por lo general, tiene conexiones anterior y siguiente.

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 cadena, los menús desplegables, las casillas de verificación, las imágenes y las entradas para los datos literales, como cadenas y números. Por ejemplo, este bloque de bucle usa campos de etiqueta, un campo de menú desplegable y campos de número.

Es un bloque con varios campos.

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

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

Entradas

Los inputs son contenedores de campos y conexiones. Un bloque se compila renderizando sus entradas en una o más filas como ladrillos.

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

Tipo de entrada Tipo de conexión Imagen
Entrada ficticia Ninguno entrada de prueba
Entrada de final de fila Ninguno entrada de final de fila
Entrada de valor Conexión de entrada entrada de valor
Entrada de la instrucción Próxima conexión entrada de instrucción

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 componen un bloque, consulta Estructura de bloques en JSON y Estructura de bloques en JavaScript.

Entradas ficticias

Una entrada ficticia es solo un contenedor para los campos, no tiene una conexión. Por ejemplo, el siguiente bloque de números tiene una sola entrada ficticia que contiene un solo campo de número.

Un bloque de número con una entrada simulada y un campo de número.

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

Un bloque de suma creado a partir de una entrada simulada con tres campos.

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

Un bloque de suma creado a partir de tres entradas simuladas, cada una con un solo campo de peso.

Entradas de final 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 ficticias, las entradas de fin de fila pueden contener campos, pero no tienen una conexión. Por ejemplo, aquí se muestra el bloque de suma creado a partir de una entrada de final 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 suma dividido en dos filas por una entrada de fin de fila.

Entradas de valores

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 a un procedimiento al resultado de otro cálculo? Para resolver este problema, usa conexiones de entrada en lugar de campos. Esto permite que los usuarios usen bloques de valores 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 suma por conexiones de entrada. Se compila a partir de dos entradas de valores: la primera no contiene ningún campo y la segunda contiene un campo de etiqueta. Ambos terminan en conexiones de entrada.

Es un bloque de suma con dos entradas de valor.

Entradas de la instrucción

El último tipo de entrada es una entrada de instrucción, 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 instrucciones dentro de tu bloque. Por ejemplo, considera el siguiente bloque de repetición. La segunda fila de este bloque consta de una entrada de instrucción con un solo campo de etiqueta y una conexión siguiente.

Un bloque de repetición con una entrada de instrucción para anidar instrucciones repetidas.

Las entradas de la instrucción siempre se renderizan en su propia fila. Puedes ver esto en el siguiente bloque if-then-else, que tiene una entrada de valor en su primera fila y entradas de instrucciones en las dos filas siguientes.

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

Entradas intercaladas y externas

Las entradas se pueden renderizar en línea o de forma externa. Esto controla si los conectores para las entradas de valores se renderizan dentro del bloque (en línea) o en el borde exterior (externo), así como si las entradas se renderizan en la misma fila o en filas diferentes.

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

Cuando creas un bloque personalizado, puedes especificar cuál usar o dejar que Blockly decida por ti. Para obtener más información, consulta Entradas intercaladas frente a 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 una variedad de usos, como mostrar advertencias, ingresar comentarios a nivel de bloque o mostrar la IU del mutador. Por ejemplo, aquí se muestra 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 Icons.

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 se corresponde con 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 instrucción para instrucciones 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'
      ],
    },
  ]
}