Hlavní navigace

Základní widgety v Gtkmm

Tomáš Velecký 22. 10. 2010

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:

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.

Našli jste v článku chybu?

8. 5. 2011 11:37

tom (neregistrovaný)

hned po spoštění se v konsoli msys zobrazí:
tom@home ~
$ ./program.exe

(program.exe:1716): Pango-WARNING **: Invalid UTF-8 string passed to pango_layou
t_set_text()

(program.exe:1716): Pango-WARNING **: Invalid UTF-8 string passed to pango_layou
t_set_text()

(program.exe:1716): Pango-WARNING **: Invalid UTF-8 string passed to pango_layou
t_set_text()

to v předchozím komentari se zobrazí po kliknuti na tlacitko s napisem root.cz






8. 5. 2011 11:34

tom (neregistrovaný)

Zkoušel jsem to zkompilovat v msys pro platformu win32, sice se to povedlo ale chybuje text, místo háček a čárek to napiše čtverečky (Super virtu[]ln[] kalkula[]ka), v konzoli msys to vypiše:
(program.exe:2892): Gtk-WARNING **: Unable to show 'http://www.ro­ot.cz/': Äßdnß
aplikace nenÝ zaregistrovßna k obsluze tohoto souboru



Měšec.cz: Nenechte se ošidit, když vám staví dům

Nenechte se ošidit, když vám staví dům

Měšec.cz: Zdravotní a sociální pojištění 2017: Připlatíte

Zdravotní a sociální pojištění 2017: Připlatíte

Vitalia.cz: Láska na vozíku: Přitažliví jsme pro tzv. pečovatelky

Láska na vozíku: Přitažliví jsme pro tzv. pečovatelky

Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

Měšec.cz: U levneELEKTRO.cz už reklamaci nevyřídíte

U levneELEKTRO.cz už reklamaci nevyřídíte

120na80.cz: Jak oddálit Alzheimera?

Jak oddálit Alzheimera?

120na80.cz: Pánové, pečujte o svoje přirození a prostatu

Pánové, pečujte o svoje přirození a prostatu

Podnikatel.cz: EET: Totálně nezvládli metodologii projektu

EET: Totálně nezvládli metodologii projektu

Vitalia.cz: Říká amoleta - a myslí palačinka

Říká amoleta - a myslí palačinka

DigiZone.cz: Flix TV má set-top box s HEVC

Flix TV má set-top box s HEVC

Vitalia.cz: Jmenuje se Janina a žije bez cukru

Jmenuje se Janina a žije bez cukru

Podnikatel.cz: Udávání kvůli EET začalo

Udávání kvůli EET začalo

Podnikatel.cz: Babiše přesvědčila 89letá podnikatelka?!

Babiše přesvědčila 89letá podnikatelka?!

DigiZone.cz: ČRa DVB-T2 ověřeno: Hisense a Sencor

ČRa DVB-T2 ověřeno: Hisense a Sencor

Lupa.cz: Insolvenční řízení kvůli cookies? Vítejte v ČR

Insolvenční řízení kvůli cookies? Vítejte v ČR

Měšec.cz: Finančním poradcům hrozí vracení provizí

Finančním poradcům hrozí vracení provizí

Podnikatel.cz: 1. den EET? Problémy s pokladnami

1. den EET? Problémy s pokladnami

Podnikatel.cz: Podnikatelům dorazí varování od BSA

Podnikatelům dorazí varování od BSA

Měšec.cz: Jak vymáhat výživné zadarmo?

Jak vymáhat výživné zadarmo?

Lupa.cz: Propustili je z Avastu, už po nich sahá ESET

Propustili je z Avastu, už po nich sahá ESET