Un campo colore memorizza una stringa come value
e una stringa come suo text
. value
è una stringa nel formato #rrggbb
, mentre text
può essere una stringa nel formato #rgb
, se possibile.
Campo del colore
Campo del colore con editor aperto
Campo colore su blocco compresso
Creazione
JSON
{
"type": "example_colour",
"message0": "colour: %1",
"args0": [
{
"type": "field_colour",
"name": "FIELDNAME",
"colour": "#ff4040",
"colourOptions":
['#ff4040', '#ff8080', '#ffc0c0',
'#4040ff', '#8080ff', '#c0c0ff'],
"colourTitles":
['dark pink', 'pink', 'light pink',
'dark blue', 'blue', 'light blue'],
"columns": 3
}
]
}
JavaScript
Blockly.Blocks['example_colour'] = {
init: function() {
this.appendDummyInput()
.appendField('colour:')
.appendField(new Blockly.FieldColour('#ff4040',
{
"colourOptions":
['#ff4040', '#ff8080', '#ffc0c0',
'#4040ff', '#8080ff', '#c0c0ff'],
"colourTitles":
['dark pink', 'pink', 'light pink',
'dark blue', 'blue', 'light blue'],
"columns": 3
}), 'FIELDNAME');
}
};
Il costruttore dei colori prende in considerazione quanto segue:
- un
value
facoltativo - Uno validator facoltativo
- una mappa facoltativa di opzioni, tra cui:
colourOptions
colourTitles
columns
value
deve essere una stringa nel formato #rrggbb
. Se non viene specificato alcun valore value
o se il valore value
non è valido, verrà utilizzata la prima voce nell'array di colori predefinito.
Le seguenti opzioni possono essere impostate anche in JSON:
colourOptions
colourTitles
columns
In alternativa, possono essere impostate utilizzando hook JavaScript.
Serializzazione
JSON
Il codice JSON per un campo colore ha il seguente aspetto:
{
"fields": {
"FIELDNAME": "#ff0000"
}
}
Dove FIELDNAME
è una stringa che fa riferimento a un campo colore e il valore è il valore da applicare al campo. Il valore segue le stesse regole del valore del costruttore.
XML
L'XML per un campo colore ha il seguente aspetto:
<field name="FIELDNAME">#ff0000</field>
L'attributo name
del nodo field
contiene una stringa che fa riferimento a un campo colore e il testo interno del nodo è il valore da applicare al campo. Il valore di testo interno segue le stesse regole del valore del costruttore.
Tieni presente che, dopo la deserializzazione e la riceralizzazione, tutti i valori di testo interni
saranno nel formato #rrggbb
. A volte è importante quando si
diffondono aree di lavoro.
Funzionalità di
Opzioni dell'editor
La funzione setColours
può essere utilizzata per impostare le opzioni di colore di un campo colore. Prevede un array di stringhe di colori, che devono essere definite nel formato #rrggbb
, e un array facoltativo di descrizioni comando. Se l'array della descrizione comando non viene fornito, verrà utilizzato
l'array della descrizione comando predefinito.
Le descrizioni comando e i colori vengono abbinati in base all'indice dell'array, non in base al valore. Se
l'array di colori è più lungo dell'array della descrizione comando, le descrizioni comando per i colori
aggiuntivi corrisponderanno al valore #rrggbb
.
La funzione setColumns imposta il numero di colonne nel selettore colori.
JSON
{
"type": "example_colour",
"message0": "colour: %1",
"args0": [
{
"type": "field_colour",
"name": "COLOUR",
"colour": "#ff4040"
}
],
"extensions": ["set_colours_extension"]
}
Blockly.Extensions.register('set_colours_extension',
function() {
var field = this.getField("COLOUR");
field.setColours(
['#ff4040', '#ff8080', '#ffc0c0',
'#4040ff', '#8080ff', '#c0c0ff'],
['dark pink', 'pink', 'light pink',
'dark blue', 'blue', 'light blue']);
field.setColumns(3);
});
Per farlo, usa un'estensione JSON.
JavaScript
Blockly.Blocks['example_colour'] = {
init: function() {
var field = new Blockly.FieldColour('#ff4040');
field.setColours(
['#ff4040', '#ff8080', '#ffc0c0',
'#4040ff', '#8080ff', '#c0c0ff'],
['dark pink', 'pink', 'light pink',
'dark blue', 'blue', 'light blue']);
field.setColumns(3);
this.appendDummyInput()
.appendField('colour:')
.appendField(field, 'COLOUR');
}
};
Facoltativamente, puoi eseguire l'override di colori, descrizioni comando e colonne predefiniti a livello globale. Ciò significa che avranno effetto su tutti i campi dei colori, piuttosto che su un campo specifico.
Blockly.FieldColour.COLOURS = [
'#ff4040', '#ff8080', '#ffc0c0',
'#4040ff', '#8080ff', '#c0c0ff'];
Blockly.FieldColour.TITLES = [
'dark pink', 'pink', 'light pink',
'dark blue', 'blue', 'light blue'];
Blockly.FieldColour.COLUMNS = 3;
Creazione di uno strumento di convalida dei colori
Il valore di un campo colore è una stringa di formato #rrggbb
, pertanto qualsiasi convalidatore deve accettare una stringa di formato #rrggbb
e restituire una stringa di formato #rrggbb
, null
o undefined
.
Ecco un esempio di uno strumento di convalida che cambia il colore del blocco in modo che corrisponda al colore del campo.
function(newValue) {
this.getSourceBlock().setColour(newValue);
return newValue;
}