Kapitel 7. Logisk interaktion mellan element i det grafiska användargränssnittet

Logik för grafiskt användargränssnitt

Alla grundkoncepten för att skapa ett insticksprogram för RKWard har beskrivits i de tidigare kapitlen. Grundkoncepten bör vara tillräckliga för många fall, kanske de allra flesta. Dock vill man ibland ha mer kontroll över hur insticksprogrammets grafiska användargränssnitt beter sig.

Antag exempelvis att du vill utöka t-test exemplet som används i den här dokumentationen för att både tillåta att en variabel jämförs med en annan variabel (som visas här), och jämföra en variabel mot ett konstantvärde. Ja, ett sätt att göra det skulle vara att lägga till en alternativknapp som byter mellan de två lägena och lägga till en nummerruta för att skriva in konstantvärdet att jämföra med. Betrakta det här förenklade exemplet:

<!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="compare"/>
                                <radio id="mode" label="Compare against">
                                        <option value="variable" checked="true" label="another variable (select below)"/>
                                        <option value="constant" label="a constant value (set below)"/>
                                </radio>
                                <varslot id="y" types="number" source="vars" required="true" label="variable" i18n_context="Noun; a variable"/>
                                <spinbox id="constant" initial="0" label="constant" i18n_context="Noun; a constant"/>
                        </column>
                </row>
        </dialog>
</document>
        

Så långt är allt gott och väl, men det finns ett antal problem med det här grafiska användargränssnitt. För det första visas både varslot elementet och nummerrutan, medan bara en av de två verkligen används. Vad värre är, varslot elementet kräver alltid ett giltigt val, även vid jämförelse med en konstant. Om vi skapar ett grafiskt användargränssnitt med flera syften, vill vi uppenbarligen ha mer flexibilitet. Lägg då till sektionen <logic> (infogad på samma nivå som <code>, <dialog> eller <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="T-Test">
        [...]
        

Den första raden inne i sektionen logic är taggen <convert>. Den tillhandahåller egentligen en ny Boolesk egenskap (på eller av, sann eller falsk), som kan användas senare. Egenskapen ("varmode") är sann så snart den övre alternativknappen är vald, och falsk så snart den nedre alternativknappen är vald. Hur görs det?

För det först listas källegenskaperna att arbeta med under sources (i detta fall bara en vardera, flera skulle kunna listas som sources="mode.string;någonting-annat", då skulle "varmode" bara vara sann om både "mode.string" och "någonting-annat" är lika med strängen "variable"). Observera att i detta fall skriver vi inte bara "mode" (som vi skulle göra i getString("mode")), utan "mode.string". Det är det faktiska interna sättet som en alternativknapp fungerar: Den har egenskapen string som innehåller dess strängvärde. getString("mode") är bara en kortform, och ekvivalent med getString("mode.string"). Se referensen för alla egenskaper hos de olika elementen i det grafiska användargränssnittet.

För det andra, ställer vi in konverteringens läge till mode="equals". Det betyder att vi vill kontrollera om källan eller källorna är lika med ett visst värde. Till sist är standard värdet att jämföra med, så med standard="variable" kontrollerar vi om egenskapen "mode.string" är lika med strängen "variable" (värdet av den övre alternativknappen). Om de är lika, är egenskapen varmode sann, annars är den falsk.

Nu till själva kärnan: Vi använder <connect> för att ansluta egenskapen "varmode" till y.visible, vilket bestämmer om varslot "y" visas eller inte. Observera att eventuella element som görs osynliga implicit inte krävs. Sålunda, om den övre alternativknappen väljes, krävs varslot "y" och är synlig. Annars krävs den inte och är dold.

För nummerrutan vill vi ha exakt det motsatta. Som tur är behöver vi inte ett annat <convert> för den: Booleska egenskaper kan enkelt negeras genom att lägga till modifieraren "not", så vi använder <connect> "varmode.not" för nummerrutans egenskap visibility. På så sätt krävs antingen elementet varslot och visas, eller krävs nummerrutan och visas, beroende på vilket alternativ som är valt av alternativknapparna. Det grafiska användargränssnittet ändras enligt alternativknapparna. Prova exemplet, om du har lust.

Se referenskapitlet för en fullständig lista över egenskaper. Ytterligare en egenskap är dock speciell på det sättet att alla element i det grafiska användargränssnittet har den: enabled. Den är något mindre drastisk än visible. Den visar eller döljer inte elementet i det grafiska användargränssnittet, utan bara aktiverar eller inaktiverar det. Inaktiverade element visas typiskt med grått, och reagerar inte på användarinmatning.

Notera

Förutom <convert> och <connect>, finns det flera ytterligare element att använda i sektionen <logic>. Villkorliga konstruktioner kan exempelvis också implementeras genom att använda elementet <switch>. Se referenskapitlet om logiska element för detaljerad information.