O campo suspenso armazena uma string como seu valor e uma string como texto. O valor é uma chave de linguagem neutra que será usada para acessar o texto e não será traduzido quando o Blockly alternar entre idiomas. O texto é uma string legível que será exibida para o usuário.
Campo do menu suspenso
Campo do menu suspenso com o editor aberto
Campo suspenso em bloco recolhido
com base em trends
O construtor de menu suspenso usa um gerador de menu e um validator opcional. O gerador de menus tem muita flexibilidade, mas é essencialmente uma matriz de opções, cada uma contendo uma parte legível e uma string neutra de linguagem.
Menus suspensos de texto simples
JSON
{
"type": "example_dropdown",
"message0": "drop down: %1",
"args0": [
{
"type": "field_dropdown",
"name": "FIELDNAME",
"options": [
[ "first item", "ITEM1" ],
[ "second item", "ITEM2" ]
]
}
]
}
JavaScript
Blockly.Blocks['example_dropdown'] = {
init: function() {
this.appendDummyInput()
.appendField('drop down:')
.appendField(new Blockly.FieldDropdown([
['first item', 'ITEM1'],
['second item', 'ITEM2']
]), 'FIELDNAME');
}
};
Manter as informações legíveis separadas da chave de linguagem neutra
permite que a configuração do menu suspenso seja preservada entre idiomas. Por
exemplo, uma versão em inglês de um bloco pode definir [['left', 'LEFT'], ['right',
'RIGHT]], enquanto uma versão em alemão do mesmo bloco definiria [['links',
'LEFT'], ['rechts', 'RIGHT]].
Menus suspensos de imagens
As opções em um menu suspenso também podem ser imagens em vez de texto. Os objetos de imagem são
especificados com as propriedades src, width, height e alt.
Embora um menu suspenso possa ter uma combinação de opções de texto e imagem, uma opção individual não pode conter uma imagem e um texto no momento.
JSON
{
"type": "image_dropdown",
"message0": "flag %1",
"args0": [
{
"type": "field_dropdown",
"name": "FLAG",
"options": [
["none", "NONE"],
[{"src": "canada.png", "width": 50, "height": 25, "alt": "Canada"}, "CANADA"],
[{"src": "usa.png", "width": 50, "height": 25, "alt": "USA"}, "USA"],
[{"src": "mexico.png", "width": 50, "height": 25, "alt": "Mexico"}, "MEXICO"]
]
}
]
}
JavaScript
Blockly.Blocks['image_dropdown'] = {
init: function() {
var input = this.appendDummyInput()
.appendField('flag');
var options = [
['none', 'NONE'],
[{'src': 'canada.png', 'width': 50, 'height': 25, 'alt': 'Canada'}, 'CANADA'],
[{'src': 'usa.png', 'width': 50, 'height': 25, 'alt': 'USA'}, 'USA'],
[{'src': 'mexico.png', 'width': 50, 'height': 25, 'alt': 'Mexico'}, 'MEXICO']
];
input.appendField(new Blockly.FieldDropdown(options), 'FLAG');
}
};
Listas suspensas dinâmicas
JSON
{
"type": "dynamic_dropdown",
"message0": "day %1",
"args0": [
{
"type": "input_dummy",
"name": "INPUT"
}
],
"extensions": ["dynamic_menu_extension"]
}
Blockly.Extensions.register('dynamic_menu_extension',
function() {
this.getInput('INPUT')
.appendField(new Blockly.FieldDropdown(
function() {
var options = [];
var now = Date.now();
for(var i = 0; i < 7; i++) {
var dateString = String(new Date(now)).substring(0, 3);
options.push([dateString, dateString.toUpperCase()]);
now += 24 * 60 * 60 * 1000;
}
return options;
}), 'DAY');
});
Isso é feito usando uma extensão JSON.
JavaScript
Blockly.Blocks['dynamic_dropdown'] = {
init: function() {
var input = this.appendDummyInput()
.appendField('day')
.appendField(new Blockly.FieldDropdown(
this.generateOptions), 'DAY');
},
generateOptions: function() {
var options = [];
var now = Date.now();
for(var i = 0; i < 7; i++) {
var dateString = String(new Date(now)).substring(0, 3);
options.push([dateString, dateString.toUpperCase()]);
now += 24 * 60 * 60 * 1000;
}
return options;
}
};
Uma lista suspensa também pode ser fornecida com uma função em vez de uma lista de opções estáticas, o que permite que as opções sejam dinâmicas. A função precisa retornar uma
matriz de opções no mesmo formato [human-readable-value, language-neutral-key]
que as opções estáticas. Toda vez que o menu suspenso é clicado, a função é executada e as opções são recalculadas.
Serialização
JSON
O JSON de um campo suspenso tem esta aparência:
{
"fields": {
"FIELDNAME": "LANGUAGE-NEUTRAL-KEY"
}
}
Em que FIELDNAME é uma string que se refere a um campo de lista suspensa e o valor é o valor a ser aplicado ao campo. O valor precisa ser uma
chave de opção de linguagem neutra.
XML
O XML de um campo suspenso tem esta aparência:
<field name="FIELDNAME">LANGUAGE-NEUTRAL-KEY</field>
Onde o atributo name do campo contém uma string que se refere a um campo suspenso
e o texto interno é o valor a ser aplicado ao campo. O texto
interno precisa ser uma chave de opção válida de linguagem neutra.
Personalização
Seta da lista suspensa
A propriedade Blockly.FieldDropdown.ARROW_CHAR pode ser usada para mudar o
caractere Unicode que representa a seta suspensa.
A propriedade ARROW_CHAR é padronizada como \u25BC (▼) no Android e \u25BE (▾) caso contrário.
Essa é uma propriedade global, por isso, ela modificará todos os campos de menus suspensos quando definidos.
Altura do menu
A propriedade Blockly.FieldDropdown.MAX_MENU_HEIGHT_VH pode ser usada para mudar
a altura máxima do menu. Ela é definida como uma porcentagem da altura
da janela de visualização, que é a janela.
A propriedade MAX_MENU_HEIGHT_VH assume o valor padrão de 0,45.
Essa é uma propriedade global, por isso, ela modificará todos os campos de menus suspensos quando definidos.
Correspondência de prefixo/sufixo
Se todas as opções do menu suspenso compartilharem palavras comuns de prefixo e/ou sufixo, essas palavras serão fatoradas e inseridas automaticamente como texto estático. Por exemplo, aqui estão duas maneiras de criar o mesmo bloco (a primeira sem correspondência de sufixo e a segunda com):
Sem correspondência de sufixo:
JSON
{
"type": "dropdown_no_matching",
"message0": "hello %1",
"args0": [
{
"type": "field_dropdown",
"name": "MODE",
"options": [
["world", "WORLD"],
["computer", "CPU"]
]
}
]
}
JavaScript
Blockly.Blocks['dropdown_no_matching'] = {
init: function() {
var options = [
['world', 'WORLD'],
['computer', 'CPU']
];
this.appendDummyInput()
.appendField('hello')
.appendField(new Blockly.FieldDropdown(options), 'MODE');
}
};
Com correspondência de sufixo:
JSON
{
"type": "dropdown_with_matching",
"message0": "%1",
"args0": [
{
"type": "field_dropdown",
"name": "MODE",
"options": [
["hello world", "WORLD"],
["hello computer", "CPU"]
]
}
]
}
JavaScript
Blockly.Blocks['dropdown_with_matching'] = {
init: function() {
var options = [
['hello world', 'WORLD'],
['hello computer', 'CPU']
];
this.appendDummyInput()
.appendField(new Blockly.FieldDropdown(options), 'MODE');
}
};
Uma vantagem dessa abordagem é que o bloco é mais fácil de traduzir para
outros idiomas. O código anterior tem as strings 'hello', 'world' e
'computer', enquanto o código revisado tem as strings 'hello world' e
'hello computer'. Os tradutores têm muito mais facilidade para traduzir frases
do que palavras isoladas.
Outra vantagem dessa abordagem é que a ordem das palavras geralmente muda entre os idiomas. Imagine um idioma que usasse 'world hello' e 'computer hello'.
O algoritmo de correspondência de sufixo detectará o 'hello' comum e o exibirá após o menu suspenso.
No entanto, às vezes a correspondência de prefixo/sufixo falha. Em alguns casos,
duas palavras precisam sempre ficar juntas e o prefixo não deve ser considerado.
Por exemplo, 'drive red car' e 'drive red truck' podem ter considerado apenas
'drive', não 'drive red'. O espaço não interruptivo Unicode '\u00A0' pode ser usado em vez de um espaço regular para suprimir o correspondente de prefixo/sufixo. Assim, o exemplo acima pode ser corrigido com
'drive red\u00A0car' e 'drive red\u00A0truck'.
Outro lugar em que a correspondência de prefixo/sufixo falha é em idiomas que não separam palavras individuais com espaços. O chinês é um bom exemplo. A string
'訪問中國' significa 'visit China'. Observe a falta de espaços entre as palavras.
Coletivamente, os dois últimos caracteres ('中國') são a palavra para 'China',
mas, se divididos, eles significam 'centre' e 'country', respectivamente. Para que a correspondência de prefixo/sufixo funcione em idiomas como chinês, basta inserir um espaço onde a quebra deve estar. Por exemplo, '訪問 中國' e
'訪問 美國' resultariam em "visit [China/USA]", enquanto '訪問 中 國' e
'訪問 美 國' resultariam em "visit [centre/beautiful] country".
Como criar um validador de menu suspenso
O valor de um campo de menu suspenso é uma string de linguagem neutra. Portanto, todos os validadores precisam
aceitar uma string e retornar uma string que seja uma opção disponível, null ou
undefined.
Se o validador retornar qualquer outra coisa, o comportamento do Blockly será indefinido e o programa poderá falhar.
Por exemplo, você pode definir um campo de menu suspenso com três opções e um validador como este:
validate: function(newValue) {
this.getSourceBlock().updateConnections(newValue);
return newValue;
},
init: function() {
var options = [
['has neither', 'NEITHER'],
['has statement', 'STATEMENT'],
['has value', 'VALUE'],
];
this.appendDummyInput()
// Pass the field constructor the options list, the validator, and the name.
.appendField(new Blockly.FieldDropdown(options, this.validate), 'MODE');
}
validate sempre retorna o valor que foi transmitido, mas chama a função auxiliar updateConnection, que adiciona ou remove entradas com base no valor do menu suspenso:
updateConnections: function(newValue) {
this.removeInput('STATEMENT', /* no error */ true);
this.removeInput('VALUE', /* no error */ true);
if (newValue == 'STATEMENT') {
this.appendStatementInput('STATEMENT');
} else if (newValue == 'VALUE') {
this.appendValueInput('VALUE');
}
}
