In questo documento, spiegheremo come utilizzare JavaScript per definire gli input e i campi (incluse le etichette) nel blocco. Se non hai familiarità con questi termini, consulta Anatomia di un blocco prima di procedere.
Puoi anche definire input, campi e connessioni in JSON.
Aggiungi input
L'API JavaScript include un append metodo per ogni input
tipo:
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 identificatore, utilizzata dai generatori di codice per recuperare il codice del blocco collegato all'input. I generatori di codice raramente fanno riferimento agli input fittizi e di fine riga, quindi in genere non è necessario assegnare loro un identificatore.
L'API JavaScript include anche un metodo appendInput generico per aggiungere
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 (sia generici che non generici) restituiscono l'oggetto di input in modo che possano essere configurati ulteriormente utilizzando l'incatenamento dei metodi. Esistono tre metodi integrati utilizzati per la configurazione degli input.
Aggiungi 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 prevede l'utilizzo di 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 l'etichetta possa essere stilizzata utilizzando una regola CSS.
Controlli di connessione
JavaScript
init: function() {
// ...
this.appendValueInput('NUM')
.setCheck('Number');
}
Il metodo setCheck viene utilizzato per il controllo dei tipi di connessioni. Se viene fornito un argomento null, il valore predefinito, questo input può essere collegato a qualsiasi blocco.
Per i dettagli, consulta Controlli
diconnessione.
Allinea 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), sinistra e destra vengono invertite. Pertanto, Blockly.inputs.Align.RIGHT allineerebbe i campi a sinistra.