Progmar Marcin Załęczny

Tworzenie przeglądarki internetowej

Zacznijmy od przygotowania interfejsu programu

Otwórzmy program glade i utwórzmy w nim nowe okno. Ponieważ okno umożliwia dodanie wyłącznie jednego widgetu będziemy musieli zacząć od dodania do niego pojemnika typu box pozwalającego dodawać nowe widgety w pionie lub w poziomie.Widget ten znajduje się w sekcji Containers:

Box container

Kliknijmy więc w ten widget w przyborniku a następnie kliknijmy w obszar okna. Pojawi się okienko dialogowe, w którym należy podać liczbę pozycji. Każda z tych pozycji będzie mogła zawierać jeden komponent:

Box container - config dialog

Okienko nasze będzie zawierało: menu główne, toolbar, pasek z adresem URL, okno przeznaczone na przeglądarkę oraz statusbar. Wpiszmy więc 5 i kliknijmy przycisk Utwórz. Zobaczymy, że w oknie pojawi się box zawierający 5 pozycji:

Window with vertical box

Zacznijmy więc dodawać nasze kontrolki. Kontrolki dodajemy do pojemnika klikając jej ikonę w przyborniku a następnie w pozycję boksa na formularzu. Zacznijmy od menu:

Menu główne w przyborniku Menu główne aplikacji

Następnie toolbar:

Menu główne w przyborniku Menu główne aplikacji

Następnie pasek z adresem URL. Będzie on zawierał etykietę Adres, pole tekstowe przeznaczone do wpisywania URL-i oraz przycisk Przejdź. W tym celu w trzeciej pozycji boksa pionowego musimy utworzyć 3-elementowy box poziomy. Kliknij ikonkę Box w zakładce Containers a nstępnie kliknij w trzeci obszar boksa pionowego i zaakceptuj domyślną wartość 3. Po dodaniu boksa do formularza zmień jego właściwość Ułożenie z Vertical na Horizontal. Po tej operacji nasze okno będzie wyglądało jak na rysunku poniżej:

Box poziomy

Zapisz projekt pod nazwą main_window.ui i dodaj do boksu poziomego następujące komponenty: Etykietę, Pole tekstowe i Przycisk. Etykiecie we właściwości Etykieta wpisz tekst Adres:

Etykieta, textentry, button    Etykieta, textentry, button na formularzu

Kliknij teraz wolne miejsce boksu poziomego i przypisz jego atrybutowi Odstępy wartość 10.

Box odstępy

Następnie kliknij pole tekstowe i w zakładce Ogólne nadaj mu nazwę edtURL. Przejdź do zakładki Pakowanie i tam właściwości Rozszerzanie przypisz wartość TAK. Po tej operacji pole tekstowe rozszerzy się na całą dostępną w poziomie szerokość:

Box rozszerzanie

Przejdź do zakładki Wspólne i właściwości Przyjmuje zaznaczenie przypisz wartość TAK:

Box przyjmuje zaznaczenie

Dzięki temu pole będzie edytowalne.

Na koniec kliknij w przycisk i nadaj mu nazwę btnGo (Zakładka Ogólne, właściwość Nazwa) oraz etykietę Przejdź (Zakładka Ogólne, właściwość Etykieta). Po tej operacji nasz formularz powinien prezentować się następująco:

Formularz

Pozostało jeszcze dodać komponent Scrolled Window do pozycji czwartej naszeg pudełka pionowego oraz widgeta StatusBar do pozycji piątej:

Okno przewijane Pasek statusu

Następnie kliknij w komponent scrolled window na formularzu i nadaj mu nazwę scrolledWindow oraz w zakładce Pakowanie właściwości Rozszerzenie nadaj wartość TAK.

Dodajmy teraz przyciski do naszego toolbara. W tym celu zaznacz komponent toolbar1 w hierarchicznym drzewie komponentów:

Zaznaczony toolbar

Kliknij na zaznaczonej pozycji prawym przyciskiem myszki i z menu, które się pojawi wybierz pozycję Edit. W wyświetlonym okienku przełącz się do zakładki Hierarchia:

Hierarchia toolbara

Aby dodać nowy przycisk kliknij w przycisk Dodaj. Następnie w sekcji element narzędziowy nadaj elementowi nazwę tbOpen oraz ustaw typ Przycisk:

Element narzędziowy

Następnie w sekcji Właściwości jako Tekst podpowiedzi wpisz wartość Otwórz lokację. Pojawi się on w dymku po najechaniu kursorem myszki na przycisk. Właściwości Jest ważna nadaj wartość TRUE, co spowoduje wyświetlenie na przycisku wartości pola Etykieta. Właściwości Etykieta nadaj wartość: Otwórz:

Właściwości przycisku Etykieta przycisku

Na koniec ustawmy ikonę przyciskowi. W tym celu w sekcji Modyfikacja obrazu kliknij w radio button obok właściwości Nazwa ikony a następnie kliknij w przycisk z trzema kropkami. Otworzy się dialog Wybór nazwanej ikony, w którym możemy wybrać standardową ikonę systemową. W naszym przypadku będzie to document-open:

Ikona przycisku

Nazwy ikon

Powyższe kroki powtórz dla następujących przycisków:

Nazwa Typ Tekst podpowiedzi Jest ważna Etykieta Nazwa ikony
tbHome Przycisk Strona domowa TAK Strona domowa go-home
tbClose Przycisk Zamknij program TAK Zamknij dialog-close
tbSeparator1 Separator        
tbAbout Przycisk O programie TAK O programie system-help

Na koniec zajmijmy się jeszcze oknem głównym. W zakładce Ogólne nadajmy mu nazwę: wndMainWindow, Tytuł okna: Webkit Internet Viewer, Pozycję okna: Center, Domyślną szerokość: 800, Domyślną wysokość: 600. Natomiast w zakładce Wspólne nadajmy mu Szerokość krawędzi: 4, dzięki czemu wokół ramki okna zostanie nadany 4-pikselowy margines.

Nasz projekt powinien się prezentować jak na rysunku poniżej:

Kompletny projekt