Capítulo 7. Interações lógicas entre elementos da GUI

Todos os conceitos básicos para a criação de um plugin para o RKWard foram descritos nos capítulos anteriores. Esses conceitos básicos devem ser suficientes para muitos casos, senão para a maioria. No entanto, às vezes você deseja mais controle sobre o comportamento da GUI do seu plugin.

Por exemplo, suponha que você queira estender o exemplo de teste t usado nesta documentação para permitir ambas as comparações: comparar uma variável com outra variável (como mostrado) e comparar uma variável com um valor constante. Uma maneira de fazer isso seria adicionar um botão de opção que alterna entre os dois modos e adicionar uma caixa de seleção para inserir o valor constante a ser comparado. Considere este exemplo simplificado:

<!DOCTYPE rkplugin>
<document>
        <code file="code.js"/>

        <dialog label="T-Test">
                <row>
                        <varselector id="vars"/>
                        <column>
                                <varslot id="x" types="number" source="vars" required="true" label="comparar"/>
                                <radio id="mode" label="Comparar contra">
                                        <option value="variable" checked="true" label="outra variável (selecionar abaixo)"/>
                                        <option value="constant" label="um valor constante (definir abaixo)"/>
                                </radio>
                                <varslot id="y" types="number" source="vars" required="true" label="variable" i18n_context="Nome; uma variável"/>
                                <spinbox id="constant" initial="0" label="constant" i18n_context="Nome; uma constante"/>
                        </column>
                </row>
        </dialog>
</document>
        

Até aqui tudo bem, mas existem alguns problemas com esta GUI. Primeiro, tanto o varslot quanto o spinbox são sempre exibidos, embora apenas um dos dois seja realmente usado. Pior ainda, o varslot sempre requer uma seleção válida, mesmo se você comparar com uma constante. Obviamente, se criarmos uma GUI multiuso como esta, queremos mais flexibilidade. Insira: a seção <logic> (inserida no mesmo nível que <code>, <dialog> ou <wizard>).

[...]
        <code file="code.js"/>

        <logic>
                <convert id="varmode" mode="equals" sources="mode.string" standard="variable" />

                <connect client="y.visible" governor="varmode" />
                <connect client="constant.visible" governor="varmode.not" />
        </logic>

        <dialog label="Teste t">
        [...]
        

A primeira linha dentro da seção de lógica é uma tag <convert>. Basicamente, isso fornece uma nova propriedade booleana (ligado ou desligado, verdadeiro ou falso), que pode ser usada posteriormente. Essa propriedade ("varmode") é verdadeira sempre que o botão de opção superior estiver selecionado e falsa sempre que o botão de opção inferior estiver selecionado. Como isso é feito?

Primeiro, em sources, as propriedades de origem para trabalhar são listadas (neste caso, apenas uma de cada; você poderia listar várias como sources="mode.string;somethingelse", então "varmode" seria verdadeiro apenas se "mode.string" e "somethingelse" forem iguais à string "variable"). Observe que, neste caso, não escrevemos apenas "mode" (como faríamos em getString("mode")), mas "mode.string". Na verdade, este é o funcionamento interno de um controle remoto: Ele possui uma propriedade `string`, que armazena seu valor de string. `getString("mode")` é apenas uma abreviação e equivalente a `getString("mode.string")`. Consulte a referência para ver todas as propriedades dos diferentes elementos da GUI.

Em segundo lugar, definimos o modo de conversão para mode="equals". Isso significa que queremos verificar se a(s) fonte(s) é(são) igual(is) a um determinado valor. Finalmente, o valor padrão é aquele com o qual comparar. Portanto, com standard="variable", verificamos se a propriedade "mode.string" é igual à string "variable" (o valor da opção de rádio superior). Se for igual, a propriedade varmode será verdadeira; caso contrário, será falsa.

Agora vamos ao que interessa: Nós <conect> (conectamos) a propriedade "varmode" à propriedade y.visible, que controla se o elemento "y" do varslot é exibido ou não. Observe que qualquer elemento que se torne invisível é implicitamente não obrigatório. Portanto, se a opção de rádio superior estiver selecionada, o elemento "y" do varslot será obrigatório e visível. Caso contrário, ele não será obrigatório e permanecerá oculto.

Para o spinbox, queremos exatamente o inverso. Felizmente, não precisamos de outro <convert> para isso: propriedades booleanas podem ser negadas facilmente adicionando o modificador "not", então <connect> "varmode.not" à propriedade visibility do spinbox. Na prática, ou o varslot é exibido e obrigatório, ou o spinbox é exibido e obrigatório - dependendo da opção selecionada no botão de opção. A GUI se altera de acordo com a opção do botão de opção. Experimente o exemplo, se quiser.

Para obter uma lista completa de propriedades, consulte a referência. No entanto, existe mais uma propriedade especial que todos os elementos GUI possuem: “enabled”. Esta é ligeiramente menos drástica do que “visible”. Ela não mostra/oculta o elemento GUI mas apenas o ativa/desativa. Elementos desativados são normalmente exibidos em cinza e não reagem à entrada do usuário.