Hoofdstuk 7. Logische interacties tussen GUI-elementen

GUI-logica

Alle basisconcepten voor het maken van een plugin voor RKWard zijn beschreven in de vorige hoofdstukken. Dit zou voldoende moeten zijn voor veel -- zo niet de meeste -- gevallen. Maar soms wilt u toch meer controle hebben over het gedrag van de GUI van uw plugin.

Bij voorbeeld, stel dat u het t-testvoorbeeld in deze documentatie wilt uitbreiden om beide mogelijk te maken: het vergelijken van een variabele met een andere variabele (zoals getoond), en het vergelijken van een variabele met een constante waarde. Nu, een manier is een radioknop toe te voegen die tussen beide mogelijkheden schakelt, of het toevoegen van een spinveld voor de invoer van de constante waarmee moet worden vergeleken. Zie dit vereenvoudigde voorbeeld:

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

        <dialog label="T-Test">
                <row>
                        <varselector id="vars"/>
                        <column>
                                <varslot id="x" types="getal" source="vars" required="true" label="vergelijken"/>
                                <radio id="mode" label="Vergelijken met">
                                        <option value="variabele" checked="true" label="een andere variabele (selecteer hieronder)"/>
                                        <option value="constante" label="een constante (hieronder instellen)"/>
                                </radio>
                                <varslot id="y" types="getal" source="vars" required="true" label="variable" i18n_context="Zelfst, nw.; een variabele"/>
                                <spinbox id="constante" initial="0" label="constante" i18n_context="Zelfst. nw.; een constante"/>
                        </column>
                </row>
        </dialog>
</document>
        

Nou, dat is dan mooi, maar er zijn met deze GUI wel een paar problemen. Ten eerste zijn de varslot en het spinveld altijd allebei zichtbaar, terwijl maar één ervan werkelijk wordt gebruikt. Erger is dat er voor de varslot altijd een geldige sectie aanwezig moet zijn, zelfs als er met een constante wordt vergeleken. Het is duidelijk, dat als we een voor meerdere doeleinden geschikte GUI willen maken, we wat meer flexibiliteit wensen. Dit leidt tot: de <logic> sectie (ingevoegd op het zelfde niveau als <code>, <dialog>, of <wizard>).

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

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

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

        <dialog label="T-Test">
        [...]
        

De eerste regel in de logische sectie is een <convert>- tag (conversie, omzetten). In principe geeft dit een nieuwe boolean (aan of uit, true of false) eigenschap, die later kan worden gebruikt. Deze eigenschap ("varmode") is waar wanneer de bovenste radioknop geselecteerd is, en false wanneer de onderste is geselecteerd. Hoe komt dat?

Ten eerste, onder sources, worden de broneigenschappen waarmee wordt gewerkt in een lijst genoemd (in dit geval voor elk een; u kunt meerderebronnen opnemen met sources="mode.string;ietsanders", dan is "varmode" alleen waar indien zowel "mode.string" als "ietsanders" gelijk zijn aan de "variable"). Merk op dat in dit geval we niet alleen "mode" schrijven (zoals in getString("mode")), maar "mode.string". Dit is in principe hoe een radioknop werkt: die heeft een eigenschap string, die zijn string-waarde bevat.getString("mode") is alleen maar korter, en gelijk aan getString("mode.string"). Zie ook de beschrijving van alle eigenschappen van de GUI-elementen.

Ten tweede, stellen we de conversiemodus in op mode="gelijk aan". Dit betekent dat we willen controleren of de bron(nen) gelijk is (zijn) aan een bepaalde waarde. Tenslotte, is standaard de waarde waarmee we willen vergelijken, dus met standard="variable" controleren we of de eigenschap "mode.string" gelijk is aan de string "variable" (de waarde van de bovenste radio-optie). Indien gelijk, is de eigenschap varmode true, en anders false.

Nu komt waar het allemaal om draait: We <connect> (verbinden) de eigenschap "varmode" met y.visible, die bepaalt of de varslot "y" visible (zichtbaar) is of niet. Merk op dat elk element dat onzichtbaar wordt gemaakt, impliciet niet vereist is. Dus als de bovenste radioknop wordt geselecteerd, is de varslot "y" vereist, en zichtbaar, en anders niet vereist en niet zichtbaar.

Voor het spinveld willen we precies het omgekeerde. Gelukkig hebben we hiervoor niet nog een <convert> nodig: Boolean eigenschappen kunnen zeer eenvoudig met "not" (dat is:niet), worden omgekeerd, dus <connect> (verbinden) we "varmode.not" met de zichtbaarheid-eigenschap van het spinveld. Hierdoor wordt of de varslot zichtbaar en vereist, of het spinveld - afhankelijk van welke optie werd gekozen met de radio-knoppen. De GUI past zichzelf aan afhankelijk van welke optie wordt gekozen. U kunt dit voorbeeld als u dit wilt, zelf uitproberen.

Voor een complete lijst van eigenschappen, zie de naslag. Er is echter nog een eigenschap, die alle GUI-elementen hebben: aangezet. Dit is iets minder drastisch dan zichtbaar. Het maakt het GUI-element niet zichtbaar of niet, maar zet het alleen maar aan of uit. Uitgezette elementen worden gewoonlijk grijs getoond, en reageren niet op acties van de gebruiker.

Opmerking

Behalve <convert> en <connect>, zijn er nog meer elementen die in de <logic> sectie kunnen worden gebruikt. Bijv. conditionele constructs kunnen ook worden geïmplementeerd met het <switch>-element. Zie de naslag voor logische elementen voor details.