Progmar Marcin Załęczny

Interfejs użytkwnika programu Witaj świecie

Otwieramy program Glade

Aby otworzyć program Glade wciskamy przyciski Alt+F2 i w Dashu wpisujemy jego nazwę:

Opening Glade

Program po uruchomieniu jest pusty, gdyż domyślnie otwarty jest pusty projekt. Jego okno podzielone jest na trzy kolumny:

  • Lewą zawierającą dostępne komponenty (pogrupowane w zakładki: Actions, Toplevels, Containers, Control and Display, Composite Widgets, Miscellaneous, GTK+ Unix Print Toplevels).
  • Środkową zawierającą wygląd projektowanego okienka (o ile zostało już utworzone).
  • Prawą zawierającą pole wyszukiwania kontrolek-widgetów, pole poniżej zawierające widgety (o ile zostały już utworzone) pogrupowane w hierarchiczne drzewko, oraz pole pozwalające ustawiać właściwości widgetów.

Glade started

Tworzymy nasze pierwsze okienko

Pora utworzyć nasze pierwsze okienko - będzie ono zawierało etykietę "Witaj świecie". Na początku kliknij w widget Window znajdujący się w zakładce Toplevels:

Window widget

Spowoduje to dodanie okna do projektu. Samo okno bez obramowania zostanie wyświetlone w centralnej części aplikacji a po prawej stronie w hierarchicznej liście widgetów pojawi się wpis reprezentujący dodane okno. Wpis ten wskazuje, że okienko ma nazwę window1 oraz jest typu GtkWindow:

Window added

Zmieńmy więc nazwę okna na "wndHelloWorld" (Uwaga! Przyjmijmy konwencję, że nazwa widgetu nie zawiera spacji) wpisując tę nazwę w pole Nazwa: właściwości w zakładce Ogólne:

Window renamed

Dodajmy teraz etykietę do okienka. W tym celu kliknij na kontrolkę Label w sekcji komponentów Control and Display. Następnie przemieść kursor nad widok okna. Zmieni on kształt na znak plusa z dopiskiem label oznaczający, że dodajemy etykietę do okna. Kliknij. Etykieta zostanie dodana do okna i wypełni cały jego obszar zmieniając kolor na pomarańczowy. Pomarańczowy kolor oznacza aktualnie zaznaczonego widgeta:

Add label

Nadaj teraz etykiecie nazwę lblHelloWorld identycznie jak już to zrobiłeś dla okna. Następnie przewiń okno właściwości etykiety (zakładki Ogólne) w dół aż do właściwości Etykieta: i nadaj jej wartość "Witaj świecie". W miarę wpisywania możesz zaobserwować w części środkowej (widok okna) jak zmienia się w okienku wpisywany przez Ciebie tekst.

Label value

Teraz możemy zobaczyć preview naszego okienka. Aby to zrobić kliknij w ostatni przycisk (Preview snapshot) na pasku ikonek pod menu głównym:

Preview snapshot

Okno które się otworzy będzie strasznie małe: Default window. Dzieje się tak dlatego, gdyż manager layoutu okna domyślnie kurczy go do najmniejszego rozmiaru, który pomieści wszystkie widgety okna. Na szczęście możemy to zmienić przypisując własne wymiary okna. W liście hierarchii widgetów kliknij nasze okno, żeby je zaznaczyć. Następnie we właściwościach ogólnych okna znajdź pola Domyślna szerokość i Domyślna wysokość i nadaj im wymiary 350 i 200 odpowiednio (wcześniej należy zaznaczyć checkboxy przy tych właściwościach). Następnie przełącz się do zakładki Wspólne i nadaj identyczne wartości polom Żądanie ustalenia szerokości i Żądanie ustalenia wysokości tak jak to przedstawiono na rysunkach poniżej:

Window default sizes Window required sizes

Teraz po kliknięciu przycisku Preview snapshot zobaczymy okno o rozmiarach, które mu nadaliśmy:

Window preview finish

Pozostało zapisać projekt na dysku. W tym celu w katalogu domowym utwórz folder sources/gtk_tutorial/001_hello_world i w nim zapisz utworzony projekt pod nazwą main_window.ui.
Przejdźmy teraz do napisania kodu naszego programu.