A grafikus felhasználói felületek elemeit angolul widget-nek szokták nevezni. Ezek egyrészt különbözőek működésükben: a csúszka aktívan reagál a kattintásra (megváltozik a tárolt érték), a színes téglalap nem csinál semmit. Másrészt hasonlítanak is egymásra, abban, hogy van egy pozíciójuk és egy méretük a képernyőn. Bizonyos szempontból rokonok.
A hasonlóságaik:
- Mindegyiknek van helye (x, y) és mérete (szélesség, magasság) a képernyőn.
- Mindegyiknek van egy sötét színű kerete, és egy árnyékolt háttere.
- Mindegyikről meg kell tudnia mondani a programnak, hogy arra kattintott-e a felhasználó.
A különbségek:
- A színes téglalap megjelenít egy színt, de nem reagál a kattintásra.
- A csúszkák reagálnak a kattintásra, és mindegyik ugyanúgy működik.
- A gombokon felirat van, de a feliratok különbözőek. Ugyancsak, a kattintás hatására eltérő dolog történik.
- Gombokon kívül is lehetnek feliratok.
Az előadáson szerepelt, hogy eltérő típusú adatokat tárolni ugyanazon az adatterületen
union segítségével lehet. Ez nagyon C-s. Valami ilyesmit csinálhatunk:
/* egy widget, az altalanos es a specialis adatokkal */
typedef struct Widget Widget;
struct Widget {
int x, y, szeles, magas; /* pozicio es meret */
enum WidgetTipus { /* ilyen típusú lehet */
gomb, gorditosav, szinesteglalap, felirat
} tipus;
union {
struct {
char felirat[20]; /* a gomb szövege */
} gomb;
struct {
double jelenlegi; /* erteke; 0.0-1.0 */
} gorditosav;
struct {
unsigned char r, g, b; /* szin */
} szinesteglalap;
struct {
char szoveg[20];
} felirat;
} adat;
};
A megadott típus alapján ki tudjuk választani, hogy egy bizonyos Widget
típusú struktúra milyen fajta adatait tárolja; és az alapján tudunk választani a
union-ben lévő adatok közül a megfelelő struktúrát. Ugyancsak, ha
megírjuk a különböző függvényeket, amelyek egy gombot, vagy egy csúszkát
rajzolnak ki a képernyőre, akkor ki tudjuk választani egy widgethez a megfelelőt.
Ehhez azonban minden egyes helyen, ahol rajzolást kell csinálni, egy switch()
kellene; ezt elkerülendő, inkább minden egyes elemben tároljunk el egy pointert is,
amely az elemnek a saját kirajzoló függvényére mutat. Vagyis legyen még
egy ilyen adattag is a struktúrában:
void (*rajzolo_fv)(Widget *widget);Bár különfélék, a union használata miatt a Widget struktúra
egységes C típus minden fajta elemhez. Ez azért jó, mert berakhatjuk ezeket az elemeket egy
tömbbe (a tömb ugyebár egyforma típusú elemek tárolója); ha a felhasználó kattint egyet valahova
(x, y koordináta), akkor a tömbben lévő összes elem mérete és pozíciója alapján el tudjuk
dönteni, hogy konkrétan melyikre. Mivel ennek eldöntéséhez csak azt kell tudni, hogy melyik
widget hol van az ablakban, azt nem, hogy mi az, az ezt kezelő programrész egységes lehet. Egy
egyszerű for() ciklust kapunk! Bár a tömb számunkra eltérő típusú elemeket
tartalmaz, a ciklus közösen tudja kezelni őket, a közös tulajdonságaik alapján.
Nézzük meg a csúszkát közelebbről! Ha egy ilyenre kattint a felhasználó, akkor be tud állítani
egy színkomponenst. Ha a bal szélére kattint, akkor minimális lesz, ha a jobb szélére, akkor
maximális. Ezt egy 0 és 1 közötti double értékkel tárolható. Minden csúszka
ugyanúgy viselkedik, és mindegyiknek a kattintás koordinátáit is kell tudnia (mert látniuk kell,
melyik részük fölött volt az egérmutató). Írni kell tehát egy függvényt, amelyik egy csúszkán
belüli kattintást dolgoz fel. Az x és y relatív koordináták, a csúszka bal
felső sarkához képest:
void csuszka_kattintas(Widget *csuszka, int x, int y) {
csuszka->adat.csuszka.jelenlegi=(double) (x-1)/(csuszka->szeles);
csuszka_rajzol(csuszka);
}A kirajzolása pedig így nézhet ki. Először meghívja a widget_alap_rajzol()
függvényt, amelyik amúgy mindegyik típusra működik; ez rajzolja a keretet az adott widget köré, és a
színátmenetet háttérnek. Ehhez azért van külön függvény, mert mindegyikre közös. Ha azt
változtatjuk, így majd az összes widget egységesen vált kinézetet. A csúszka ezután kirajzolja
a saját belsejét; ami egyszerűen egy színes csík:
void csuszka_rajzol(Widget *csuszka) {
widget_alap_rajzol(csuszka);
boxColor(renderer, csuszka->x, csuszka->y,
csuszka->x+csuszka->szeles * csuszka->adat.csuszka.jelenlegi,
csuszka->y+csuszka->magas-1, csuszkaszin);
}