In questo documento, illustreremo come utilizzare JavaScript per definire gli input e i campi (incluse le etichette) nel blocco. Se non hai familiarità con questi termini, consulta la sezione Anatomia di un blocco prima di procedere.
Puoi anche definire input, campi e connessioni in JSON.
Aggiungere input
L'API JavaScript include un metodo append per ogni tipo di input:
JavaScript
init: function() {
// ...
this.appendEndRowInput()
.appendField('for each')
.appendField('item')
.appendField(new Blockly.FieldVariable(), 'VAR');
this.appendValueInput('LIST')
.setCheck('Array')
.setAlign(Blockly.inputs.Align.RIGHT)
.appendField('in list');
this.appendStatementInput('DO')
.appendField('do');
this.appendDummyInput()
.appendField('end');
}
Ogni metodo appendInput può accettare una stringa di identificatore, utilizzata dai generatori di codice per recuperare il codice del blocco collegato all'input. I generatori di codice fanno raramente riferimento a input fittizi e di fine riga, pertanto in genere non è necessario assegnare loro un identificatore.
L'API JavaScript include anche un metodo appendInput generico per l'aggiunta di input personalizzati. Tieni presente che in questo caso l'identificatore deve essere passato direttamente al costruttore dell'input personalizzato.
JavaScript
init: function() {
// ...
this.appendInput(new MyCustomInput('INPUT_NAME'))
.appendField('an example label')
}
Tutti i metodi appendInput (generici e non generici) restituiscono l'oggetto input in modo che possano essere configurati ulteriormente utilizzando la catena di metodi. Esistono tre metodi integrati utilizzati per la configurazione degli input.
Aggiungere campi
Una volta creato un input e aggiunto a un blocco con appendInput, è possibile aggiungere facoltativamente un numero qualsiasi di campi all'input. Questi campi vengono spesso utilizzati come etichette per descrivere lo scopo di ogni input.
JavaScript
init: function() {
// ...
this.appendDummyInput()
.appendField('hello');
}
Il campo più semplice è un'etichetta. La convenzione di Blockly è utilizzare tutto il testo in minuscolo, ad eccezione dei nomi propri (ad es. Google, SQL).
Una riga di input può contenere un numero qualsiasi di campi. È possibile concatenare più chiamate appendField
per aggiungere in modo efficiente diversi campi alla stessa
riga di input.
JavaScript
init: function() {
// ...
this.appendDummyInput()
.appendField('hello')
.appendField(new Blockly.FieldLabel('Neil', 'person'));
}
La chiamata appendField('hello') è in realtà una scorciatoia per l'utilizzo di un costruttore FieldLabel esplicito: appendField(new Blockly.FieldLabel('hello')).
L'unico caso in cui è consigliabile utilizzare il costruttore è quando si specifica un nome di classe in modo che lo stile dell'etichetta possa essere impostato utilizzando una regola CSS.
Controlli di connessione
JavaScript
init: function() {
// ...
this.appendValueInput('NUM')
.setCheck('Number');
}
Il metodo setCheck viene utilizzato per il controllo del tipo di connessione. Se viene fornito un argomento nullo, il valore predefinito, questo input può essere collegato a qualsiasi blocco.
Per maggiori dettagli, consulta Controlli
della connessione.
Allinea i campi
JavaScript
init: function() {
// ...
this.appendValueInput('LIST')
.appendField('in list')
.setAlign(Blockly.inputs.Align.RIGHT);
}
Il metodo setAlign viene utilizzato per allineare i campi all'interno di un input. Esistono tre valori autodescrittivi che possono essere passati come argomento a questa funzione: Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT e Blockly.inputs.Align.CENTER.
Quando un blocco viene visualizzato in modalità da destra a sinistra (ad es. arabo ed ebraico), le direzioni sinistra e destra sono invertite. Pertanto, Blockly.inputs.Align.RIGHT allinea i campi a sinistra.