Anatomia di un blocco

Questo documento esplora le diverse parti di un blocco.

Connessioni

Le connessioni definiscono dove possono connettersi i blocchi e a quali tipi di blocchi possono connettersi.

Termine chiave: il termine connessione normalmente si riferisce a una relazione tra due cose. In Blockly, di solito significa connettore, come una spina o una presa. Pertanto, quando colleghi due blocchi, le loro connessioni si incastrano.

Esistono quattro tipi di connessioni:

Tipo di connessione	Immagine
Connessione di output
Connessione di ingresso
Connessione precedente
Prossima coincidenza

Le connessioni di output e di input possono essere collegate tra loro, così come le connessioni successive e precedenti. Puoi limitare ulteriormente le connessioni con i controlli della connessione.

Puoi personalizzare le forme delle connessioni utilizzando un renderer personalizzato.

Connessioni di primo livello

I blocchi hanno tre connessioni il cui utilizzo è facoltativo.

Un blocco può avere una singola connessione di output, rappresentata come un connettore a incastro maschio sul bordo anteriore di un blocco. Una connessione di output passa il valore (espressione) di un blocco a un altro blocco. Un blocco con una connessione di output è chiamato blocco di valori.

Un blocco può avere una connessione precedente nella parte superiore (rappresentata da una tacca) e una connessione successiva nella parte inferiore (rappresentata da una scheda). Questi consentono di impilare i blocchi verticalmente, rappresentando una sequenza di istruzioni. Un blocco senza una connessione di output è chiamato blocco istruzione e di solito ha connessioni precedenti e successive.

Per saperne di più, vedi Connessioni di primo livello.

Campi

I campi definiscono la maggior parte degli elementi della UI all'interno di un blocco. Questi includono etichette stringa, menu a discesa, caselle di controllo, immagini e input per dati letterali come stringhe e numeri. Ad esempio, questo blocco loop utilizza campi etichetta, un campo a discesa e campi numerici.

Blockly fornisce una serie di campi integrati, tra cui input di testo, selettori di colore e immagini. Puoi anche creare i tuoi campi.

Per ulteriori informazioni, vedi Campi.

Input

Gli input sono container per campi e connessioni. Un blocco viene creato visualizzando i relativi input in una o più righe come mattoni.

Termine chiave: il termine input ha diversi significati in Blockly. Il significato più comune è quello descritto qui: un contenitore per campi e connessioni. Meno comunemente, significa inserire un valore o si riferisce a un valore che è stato inserito.

Esistono quattro diversi tipi di input, tutti possono contenere campi (incluse le etichette) e due contengono una singola connessione. Puoi anche creare input personalizzati, che supportano il rendering personalizzato.

Tipo di input	Tipo di connessione	Immagine
Input fittizio	Nessuno
Input di fine riga	Nessuno
Input del valore	Connessione di ingresso
Input dell'estratto conto	Prossima coincidenza

Introdurremo questi input attraverso una serie di esempi. Per informazioni sulla definizione degli input, delle connessioni e dei campi che compongono un blocco, consulta Struttura del blocco in JSON e Struttura del blocco in JavaScript.

Input fittizi

Un input fittizio è solo un contenitore per i campi, non ha una connessione. Ad esempio, il seguente blocco numerico ha un singolo input fittizio che contiene un singolo campo numerico.

Come esempio più complesso, considera un blocco che somma due numeri. Questo può essere creato da un singolo input fittizio con tre campi (numero, etichetta, numero):

o tre input fittizi, ciascuno con un solo campo:

Input di fine riga

Blockly utilizza l'euristica per decidere se eseguire il rendering di tutti gli input in una singola riga o di ogni input nella propria riga. Se vuoi assicurarti che un input inizi una nuova riga, utilizza un input di fine riga come input precedente.

Come gli input fittizi, gli input di fine riga possono contenere campi, ma non hanno una connessione. Ad esempio, ecco il blocco di aggiunta creato da un input di fine riga con due campi e un input fittizio con un campo. L'input di fine riga forza il rendering dell'input fittizio in una nuova riga.

Input dei valori

I campi hanno limiti di accettazione. Ad esempio, i campi numerici accettano solo numeri. Ma cosa succede se vuoi sommare due variabili? Oppure aggiungere il risultato di una chiamata di procedura al risultato di un calcolo diverso? Per risolvere questo problema, utilizza le connessioni di input anziché i campi. In questo modo gli utenti possono utilizzare i blocchi di valori come valori di input.

Un input di valore contiene zero o più campi e termina con una connessione di input. Il seguente blocco sostituisce i campi numerici nel blocco di addizione con connessioni di input. È composto da due input di valori: il primo non contiene campi e il secondo contiene un campo etichetta. Entrambi terminano con connessioni di ingresso.

Input dell'estratto conto

L'ultimo tipo di input è un input di istruzione, che contiene zero o più campi e termina con una connessione successiva. La connessione successiva ti consente di nidificare una pila di blocchi di istruzioni all'interno del blocco. Ad esempio, considera il seguente blocco di ripetizione. La seconda riga di questo blocco è costituita da un input di istruzione con un singolo campo etichetta e una connessione successiva.

Gli input dell'istruzione vengono sempre visualizzati nella propria riga. Puoi vederlo nel seguente blocco if-then-else, che ha un input di valore nella prima riga e input di istruzione nelle due righe successive.

Input in linea e input esterni

Gli input possono essere visualizzati in linea o esternamente. Questo controllo determina se i connettori per gli input dei valori vengono visualizzati all'interno del blocco (in linea) o sul bordo esterno (esterno), nonché se gli input vengono visualizzati nella stessa riga o in righe diverse.

Quando crei un blocco personalizzato, puoi specificare quale utilizzare o lasciare che Blockly decida per te. Per saperne di più, consulta Input incorporati ed esterni.

Vai a giocare!

Il modo migliore per scoprire di più su input, campi e connessioni è creare blocchi in Blockly Developer Tools e scegliere impostazioni diverse per il menu a discesa inputs (automatic, external, inline).

Icone

Oltre a input, connessioni e campi, i blocchi possono avere una o più icone. Questi hanno una serie di utilizzi, ad esempio la visualizzazione di avvisi, l'inserimento di commenti a livello di blocco o la visualizzazione dell'interfaccia utente di modifica. Ad esempio, ecco un blocco con un'icona di commento e il relativo editor.

Per ulteriori informazioni, consulta la sezione Icons.

Blocchi e oggetti JavaScript

Blocchi, input, connessioni, campi e icone sono tutti oggetti JavaScript.

Componente Blockly	Classe base	Sottoclassi
Blocca	Block	BlockSvg
Input	Input	DummyInput
		EndRowInput
		ValueInput
		StatementInput
		input personalizzato
Connessione	Connection	RenderedConnection
Campo	Field	FieldTextInput
		FieldNumber
		FieldLabel
		campo personalizzato
		e così via
Icona	Icon	CommentIcon
		MutatorIcon
		WarningIcon
		icona personalizzata

Gli oggetti in un blocco formano un oggetto a forma di albero. Comprendere in che modo la rappresentazione grafica di un blocco corrisponde a questo albero è utile quando scrivi codice per manipolare i blocchi in modo programmatico. Ad esempio, un blocco controls_for:

corrisponde al seguente albero di oggetti 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'
      ],
    },
  ]
}