Hlavní navigace

Základní widgety v Gtkmm

22. 10. 2010
Doba čtení: 6 minut

Sdílet

V tomto díle seriálu o gtkmm si popíšeme základní widgety. Budou to: Entry, Button, … Zkrátka všechny, které jsou potřeba k vytvoření jednoduché kalkulačky. Kalkulačka by také měla mít nějakou rozumnou klávesnici, ne takovou, která bude zabírat celý displej. Uživatelé Eclipse si také přijdou na své.

Překlad v Eclipse

Kdosi do diskuze napsal, že mu v Eclipse nejde program přeložit. Rozhodl jsem se tedy ještě popsat práci v tomto IDE.

Stažení a spuštění

První je potřeba stáhnout verzi pro vývoj v C++. Pokud si vyberete binárku pro 32bitový Linux, budete mít v počítači .tar.gz archiv. Ten se rozbalí (např. pomocí příkazu tar -xf eclipse-cpp-helios-SR1-linux-gtk.tar.gz) a ve složce eclipse se objeví stejnojmenný spustitelný soubor eclipse. Po svém spuštění se zeptá na pracovní adresář a naběhne IDE.

Vytvoření nového projektu

My si vytvoříme nový C++ projekt (File->New->C++ Project). Objeví se dialog, který se dotáže na název projektu (třebas Kalkulacka) a pár dalších věcí, které pro nás však zatím nejsou podstatné. Po kliknutí na tlačítko Finish Eclipse vytvoří v pracovním adresáři složku s názvem Kalkulacka. Do projektu je ještě třeba dodat zdrojový soubor (File->New->Source File->vyplnit formulář->Finish). Pak stačí zavřít záložku Welcome a vložit kód. Pokud bychom teď projekt přeložili (např. klávesovou zkratkou Ctrl+B), překladač by vypsal asi 9 chyb.

Nastavení projektu

Není třeba si s nimi příliš lámat hlavu. Spraví se to správným nastavením projektu v Eclipse. Všechno provedeme v Project->Properties. Vlevo je takové menu. První je potřeba rozkliknout C/C++ Build. Z nově zobrazené nabídky vybereme Settings. Více vpravo se objeví další nabídka. Je třeba zvolit GCC C++ Compiler->Includes. Přidáme adresář s hlavičkovými soubory gtkmm v systému. Tlačítko pro přidání adresáře najdete na screenshotu (je v červeném rámečku). V mém případě to je /usr/include/gtkmm-2.4.

Místo Includes je teď potřeba vybrat Miscellaneous a k „Other flags“ připojit pkg-config --cflags gtkmm-2.4 .

U Miscellaneous zůstaneme, ale tentokrát se to bude týkat linkeru. Do pole s názvem „Linker flags“ je potřeba připojit řetězec pkg-config --libs gtkmm-2.4 .

Nyní stačí projekt přeložit (Ctrl+B) a spustit (Ctrl+F11).

Potřebné znalosti

Protože kalkulačka má displej a tlačítka, bude se potřeba naučit nové widgety. A aby ty widgety nebyly rozházené, musí se seskupovat. V programu se objeví metoda set_size_request(). Ta očekává dva parametry typu int: šířku a výšku.

Widgety

Ještě jsem pořádně nevysvětlil, co to vlastně widget je. Slovo widget se dá přeložit jako udělátko, věcička. Běžně se používá pojem udělátko a myslí se tím ovládací prvek. Je to jakákoli věc v okně – tlačítko, karta, posuvník, vstupní pole, … a dokonce samotné okno. V podstatě vše, co je vidět. Widgety použité v naší kalkulačce budou tyto: Button, Frame, LinkButton, Image a Entry. Všechny si postupně popíšeme.

Button

Button představuje běžné tlačítko. Jedná se o třídu Gtk::Button. Zřejmě nejčastěji se používá její metoda set_label(„Tla­čítko“), která nastaví popisek tlačítka. Na tlačítko můžeme dát také obrázek, to si ale ukážeme někdy příště.

Entry

Entry je vstupní pole. Slouží tedy k zadání informací, textového řetězce, programu. Vstupní pole nemusí být hned prázdné. To se zajistí metodou set_text(„Já jsem pole s textem!“). Metoda set_max_length(int max) nastaví maximální počet znaků v poli.

Frame

Frame je okrasný rámeček, který může mít i popisek. Jedná se vlastně o kontejner. K nastavení popisku slouží již známá metoda set_label(). Můžeme jej předat také konstruktoru.

Image

Image, neboli obrázek. Který obrázek má zobrazit, dáte najevo tomuto widgetu třeba takto: set(„obrazek.png“).

LinkButton

LinkButton představuje odkaz. Zprvu vypadá jako odkaz. Pokud na něj najedete myší, tak se jeho vzhled změní na vzhled tlačítka. Po kliknutí na něj se otevře prohlížeč s příslušnou stránkou. Konstruktoru předáváme většinou dva argumenty. Prvním z nich je URI a druhým popisek. O nastavení URI se postará metoda set_uri(„http://w­ww.root.cz/“).

Kontejnery

Kdybychom do okna všechny widgety narvali jen tak, bylo by neupravené, nepřehledné a pravděpodobně by se všechny udělátka ani nevešly na jednu obrazovku. Proto je dáváme do tzv. kontejnerů (boxů, jakýchsi krabiček, rámečků). Existuje jich několik. Dnes si popíšeme čtyři základní. Jsou to VBox, HBox, VButtonBox a HButtonBox. VBox a HBox se od sebe liší jen tím, že jeden v sobě řadí widgety vertikálně (pod sebe), a druhý horizontálně (za sebou). Který je který poznáte jednoduše – podle počátečních písmenek. Ty další dva jsou určeny, jak z názvu vyplývá, na tlačítka. Všechny objekty (widgety, další kontejnery) v kontejneru mají stejné rozměry.

Na obrázku vidíte schéma, které popisuje kontejnery klávesnice naší kalkulačky. Bleděmodrou plochou jsem znázornil HBox, zelenou VBox a modře jsou samotné widgety.

Kód ukázkového programu

Vše, co bylo potřeba vysvětlit mimo kód, už jsem snad vysvětlil. Zbytek tedy najdete v kódu jako komentáře.

#include <gtkmm.h>
class Kalkulacka : public Gtk::Window
{
    public:
        Kalkulacka();
    protected:
        Gtk::Button cisla[10]; // Pole s číselnými tlačítky
        Gtk::Button operace[4]; // Pole s tlačítky operací
        Gtk::Button vysledek; // Tlačítko "="
        Gtk::Entry displej; // Vstupní pole (displej)
        Gtk::Frame popis; // Informační text
        Gtk::Image panel; // Obrázek se solárním panelem
        Gtk::LinkButton odkaz; // Odkazové tlačítko na článek
        Gtk::VBox VRamStroj;
        Gtk::VBox VRamCisla;
        Gtk::VBox VRamOperace;
        Gtk::HBox HRamKlavesnice;
        Gtk::HBox HRam789;
        Gtk::HBox HRam456;
        Gtk::HBox HRam123;
        Gtk::HBox HRam0;
};
Kalkulacka::Kalkulacka()
: popis("Super virtuální kalkulačka na sluneční pohon"),
odkaz("http://www.root.cz/", "Root.cz")
{
    set_title("Kalkulačka"); // Nastavení titulku okna
    set_border_width(10); // Odstup od okraje nastavíme na 10 pixelů
    panel.set("panel.png");
    displej.set_text("0123456789"); // Displej nemusí být hned prázdný :)
    cisla[0].set_label("0"); // Nastavení popisků tlačítek s čísly
    cisla[1].set_label("1"); // ---//---
    cisla[2].set_label("2"); // ---//---
    cisla[3].set_label("3"); // ---//---
    cisla[4].set_label("4"); // ---//---
    cisla[5].set_label("5"); // ---//---
    cisla[6].set_label("6"); // ---//---
    cisla[7].set_label("7"); // ---//---
    cisla[8].set_label("8"); // ---//---
    cisla[9].set_label("9"); // ---//---
    operace[0].set_label("+"); // Nastavení popisků tlačítek s operacemi
    operace[1].set_label("-"); // ---//---
    operace[2].set_label("×"); // ---//---
    operace[3].set_label("÷"); // ---//---
    vysledek.set_label("="); // Nastavení popisku tlačítka na zobrazení výsledku
    add(popis);
    popis.add(VRamStroj);
        VRamStroj.pack_start(panel);
        VRamStroj.pack_start(displej);
        VRamStroj.pack_start(HRamKlavesnice);
            HRamKlavesnice.pack_start(VRamCisla);
                VRamCisla.pack_start(HRam789);
                    HRam789.pack_start(cisla[9]);
                    HRam789.pack_start(cisla[8]);
                    HRam789.pack_start(cisla[7]);
                VRamCisla.pack_start(HRam456);
                    HRam456.pack_start(cisla[6]);
                    HRam456.pack_start(cisla[5]);
                    HRam456.pack_start(cisla[4]);
                VRamCisla.pack_start(HRam123);
                    HRam123.pack_start(cisla[3]);
                    HRam123.pack_start(cisla[2]);
                    HRam123.pack_start(cisla[1]);
                VRamCisla.pack_start(HRam0);
                    HRam0.pack_start(cisla[0]);
                    HRam0.pack_start(vysledek);
            HRamKlavesnice.pack_start(VRamOperace);
                VRamOperace.pack_start(operace[0]);
                VRamOperace.pack_start(operace[1]);
                VRamOperace.pack_start(operace[2]);
                VRamOperace.pack_start(operace[3]);
        VRamStroj.pack_start(odkaz);
    show_all_children(); // Zobrazí všechny widgety
}
int main(int argc, char *argv[]){
    Gtk::Main kit(argc, argv);
    Kalkulacka okno;
    Gtk::Main::run(okno);
    return 0;
}

Domácí úkol

Pro toho, kdo si chce ověřit, že pochopil kontejnery, mám menší úkol: udělejte klávesnici tak, aby vypadala takto:

root_podpora

Pokračování

Jak sami vidíte, kalkulačka ještě nereaguje na stisknutí tlačítka. Příště tedy zveřejním řešení DÚ, přijdou na řadu další widgety, dialogová okna a hlavně signály, které naší kalkulačce vdechnou život.

Byl pro vás článek přínosný?