Hlavní navigace

Knihovna ClanLib (13)

Petr Kavánek

V dnešním dílu seriálu o multiplatformové knihovně ClanLib navážeme na díl předchozí. Budeme tedy pokračovat ve výkladu o tvorbě GUI. Konkrétně se zaměříme na možnosti nastavení komponent přímo v GDF. Podrobně se podíváme na tlačítka, popisky a okna.

Společné atributy komponent v GDF

V prvním dílu věnovaném tvorbě GUI jsme se seznámili se základními principy programování GUI využívajícími výhod GDF. Víme už, jaký mají GDF soubory formát, jak je načíst, jak přistupovat k jednotlivým komponentám a podobně.

Nyní už je myslím načase, abychom se podívali podrobně, jaké atributy můžeme u jednotlivých komponent nastavovat. Začneme s těmi, které jsou pro všechny komponenty společné.

Prvním takovým atributem je name, což je řetězec udávající jméno komponenty. Toto jméno využíváme přímo v kódu našeho programu například v situaci, kdy se snažíme získat ukazatel na tuto komponentu:

CL_Component* Komponenta = SpravceKomponenet.get_component("jmeno"); 

Zde „jmeno“ je právě onen řetězec zadaný v GDF jako atribut name=„jmeno“. Tento atribut tedy slouží k identifikaci komponent, a rozhodně bych proto doporučoval identifikovat komponenty unikátními jmény.

Defaultní hodnota je "", tedy prázdný řetězec. (Defaultní hodnotou se rozumí hodnota, kterou bude mít atribut, pokud žádnou jinou nezadáme.)

Dalšími atributy, které je možno zadat pro každou komponentu, jsou x, y a width, height. Jedná se samozřejmě o souřadnice v pixelech vzhledem k levému hornímu rohu nadřazené komponenty a o rozměry, tedy o šířku a výšku komponenty (taktéž v pixelech).

Defaultně je pro každý z těchto atributů nastavená hodnota „0“.

Atribut visible udává, zda je komponenta viditelná, nebo není. Příslušné hodnoty, které můžeme zadat, jsou „true“ a „false“. Defaultně je nastaveno „true“.

Atribut enabled říká, zda má komponenta reagovat na klávesnici, myš a podobně. Defaultní hodnota je opět „true“.

Posledním společným atributem je tab_id s defaultní hodnotou „0“. Přiznám se, že funkčnost jsem nikdy netestoval a nejsem si úplně jistý významem hodnot tohoto atributu. Domnívám se, že by měly udávat pořadí, v jakém dostávají komponenty zaměření po stisku tabulátoru. Určite se k tomuto atributu vrátím v ukázkovém příkladě nějakého GUI a v případě potřeby informace doplním. Pokud tab_id odzkoušíte dřív, můžete o tom poslat zprávu do diskuse.

Ještě bych rád připomenul, že pomocí metod třídy CL_Component popsaných minule již dokážeme tyto atributy získávat, případně i modifikovat za běhu programu.

CL_Button

CL_Button je třída reprezentující tlačítko. Oproti třídě CL_Component má tlačítko navíc tyto metody:

const std::string &get_text() const;
void set_text(const std::string &text);

Metoda get_text() vrací nápis, který je na tlačítku napsán. Tento nápis můžeme nastavit buď přímo v GDF pomocí atributu text, nebo v kódu metodou set_text().

bool is_down() const;

Vrací true nebo false podle toho, zda je tlačítko právě stisknuto.

CL_Signal_v0 &sig_clicked();
CL_Signal_v0 &sig_pressed();
CL_Signal_v0 &sig_released();

Třída CL_Button také vysílá signály specifické pro tlačítko. Pokud je tlačítko stisknuto a poté uvolněno, přičemž kurzor je stále nad tlačítkem, je vyslán signál sig_clicked. Již po pouhém stisknutí je vyslán signál sig_pressed. Podobně po uvolnění tlačítka je vyslán signál sig_released.

V GDF je možné tlačítku nastavit také jeho vzhledy pro různá životní stádia. Životní stáda jsou „stisknuto“, „nestisknuto“, „nestisknuto s myší nad sebou“ a „vypnuto“ (tj. když je nastaveno enabled jako „false“). Pro každé z těchto stádií je možné nastavit obrázek, kterým bude tlačítko reprezentováno. V praxi to vypadá asi nějak takto:

<surface name="button_up" file="button_up.tga" /> // nestisknuto
<surface name="button_down" file="button_down.tga" /> // stisknuto
<surface name="button_highlighted" file="button_highlighted.tga" /> // s mysi nad sebou
<surface name="button_disabled" file="button_disabled.tga" /> // vypnuto

<button
  x="10" y="20"
  surface_up="button_up"
  surface_down="button_down"
  surface_highlighted="button_highlighted"
  surface_disabled="button_disabled"
/> 

Možnost nastavení vzhledu tlačítka pomocí obrázků je jednou z věcí, kvůli kterým si člověk ClanLib oblíbí. Přestože se o ní v dokumentaci dočtete jen stěží (jak se zdá, autoři ClanLibu se zabývají spíše programováním a na tvorbu dokumentace zatím jaksi nezbývá dost času), funguje perfektně. Není nutné nijak synchronizovat údaje width, height s rozměry obrázků, vůbec je neuvádíme, ClanLib si je správně nastaví sám.

Asi nejúžasnější na tom všem je, že automaticky funguje i průhlednost. Mají-li tedy obrázky masku průhlednosti, budou dle potřeby průhledné, případně částečně průhledné. S tímto nástrojem jsme schopni vytvořit třeba kulaté tlačítko, tlačítko s dírou uprostřed a podobné věci. Troufám si tvrdit, že to se vám takhle lehce jen tak někde nepovede.

Pokud chceme v GDF zadat tlačítko klasického vzhledu, bude to vypadat třeba nějak takto:

<button name="tlacitko" x="10" y="50" width="100" height="20" text="napis" /> 

CL_Label

CL_Label je třída reprezentující popisek. Má následující specifické metody:

const std::string &get_text() const;

void set_text(const std::string &text);
void set_text(int number);
void set_text(double number);

Tyto metody umožňují stejně jako u tlačítka nastavit text popisku. Pro zpříjemnění práce je možné zadat popisek přímo jako int či double díky přetíženým variantám set_text(). Popisek pak zadané číslo zobrazí.

V GDF tomuto odpovídá opět atribut text.

void clear();

Tato metoda smaže text popisku. Jedná se tedy vlastně pouze o zkratku za set_text("").

V GDF může být label zadán například takto:

<label name="popisek" x="10" y="10" text="Toto je label." /> 

CL_Window

CL_Window reprezentuje okna GUI (hlavní okno programu je reprezentováno třídou CL_DisplayWindow).

U okna můžeme nastavit a získat titulek. V GDF to uděláme pomocí atributu title. Příslušné metody jsou:

const std::string &get_title() const;
void set_title(const std::string &text);

Příklad okna v GDF:

<window name="okno" x="10" y="10" width="200" height="300" title="Nase okno...">
  <components>
  ...
  </components>
</window> 

Závěr

Výčet komponent zde samozřejmě nekončí. Příště tedy budeme v tomto duchu pokračovat.

Našli jste v článku chybu?