Jak już zasygnalizowano wcześniej do wyboru mamy dwa obszary robocze: zintegrowany i klasyczny. Jeżeli praca w jednym z obszarów roboczych nie będzie odpowiadała użytkownikowi zawsze może go zmienić na drugi typ. Dokonuj e się tego z poziomu menu aplikacji: Help > Workspace View Selection … Który wybrać i dlaczego jeden jest lepszy od drugiego pozostawiamy użytkownikowi. Poniżej zamieszczono krótki opis obszarów roboczych. Klasyczny obszar roboczy – jego geneza sięga najstarszych wersji pakietu. Jak każde rozwiązanie ma on sporo zalet i wad. Jego zasadniczym atutem a może i wadą jest to że każde okno (interfejs użytkownika, kod C, główne okno projektu, formularze i kreatory) środowiska jest świetlane w osobnym oknie na ekranie komputera. Możemy szybko przechodzić do poszczególnych okien czy formularzy. Każde okno posiada swoje menu i przyciski szybkiego dostępu. W przypadku dużej ilości otwartych okien środowiska można się w pewnym momencie trochę pogubić. Jednakże gdy do dyspozycji mamy pojedynczy monitor lub niską rozdzielczość pozwala nam na swobodną pracę w oknie bez potrzeby ciągłego przewijania obszaru okna. Praca staje się całkiem przyjemna w przypadku posiadania dwóch monitorów gdzie można zdefiniować gdzie mają pojawiać się poszczególne okna.
Zintegrowany obszar roboczy – pojawił się od wersji 6.0 i przypomina inne środowiska programistyczne. W początkowej fazie raczej denerwował osoby które przyzwyczaiły się do obszaru roboczego w poprzednich wersjach pakietu. Zmianie uległy tez ikony na paskach co wprowadzało dodatkowy dyskomfort. Dla osób które zaczynają pracę w środowisku jest on zazwyczaj bardziej intuicyjny od klasycznego modelu gdyż nawiązuje do przyjętych standardów w innych pakietach programistycznych. Jego atutem jest to że obszar roboczy zawiera wszystkie okna (interfejs użytkownika, kod C, główne okno projektu, formularze i kreatory) dzięki czemu nie mamy otwartych dziesiątek okien na pulpicie komputera i pasku zadań. Menu i przyciski funkcyjne zmieniają się dynamicznie w trakcie wybierania odpowiedniego okna. W czasie korzystania z pakietu zaleca się aby wypróbować każdy z obszarów roboczych. Każdy użytkownik znajdzie coś co go zainteresuje i ułatwi mu pracę.
Stało się – jesteśmy szczęśliwymi posiadaczami frameworka Qt, zainstalowanego w naszym systemie operacyjnym (Jak to zrobić ?). Przyszedł więc czas na naszą pierwszą aplikację, która będzie korzystać z biblioteki Qt i posiadać graficzny interfejs użytkownika (ang. GUI, Graphical User Interface).
W tym miejscu krótka informacja – będziemy korzystać z QtCreator’a, zintegrowanego środowiska programistycznego, dostarczanego razem z biblioteką Qt. Qt Creator to świetne narzędzie – intuicyjne i zintegrowane ze wszystkimi funkcjonalnościami, dostarczanymi z framework’iem. Jednym słowem to najlepszy wybór, jeżeli piszemy aplikację wykorzystującą bibliotekę Qt.
Od czego zaczynamy ?
Pierwszym programem będzie tradycyjne Hello World z prostym GUI – wyświetlimy okno z przyciskiem. Uruchamiamy QtCreator’a i wybieramy File->New file or project->Other Project->Empty qmake Project i klikamy na przycisk Choose…. Następnie nadajemy nazwę naszemu projektowi, wybieramy dla niego lokalizację i klikamy Next >.
W następnym oknie mamy możliwość wyboru wersji bibliotek Qt, których będziemy używać w projekcie. Jeśli nie instalowaliśmy kilku wersji biblioteki, będziemy mieli prosty wybór. Wybieramy też rodzaje build’ów, z których będziemy korzystać – najczęściej chcemy mieć wersję debug do rozwijania oprogramowania i testów oraz wersję release, przeznaczoną do budowy finalnej aplikacji, która będzie udostępniana innym osobom. I po raz kolejny klikamy na Next > oraz Finish.
W ten sposób utworzyliśmy pusty projekt, który będzie używał narzędzia qmake (Czym jest qmake ?) do budowania naszej aplikacji.
Projekt w QtCreator.
W prawej górnej części okna QtCreator’a mamy widok projektu – w tej chwili nasz projekt zawiera jedynie plik *.pro. Jest to plik, który będzie zawierał wszystkie informacje na temat projektu, niezbędne do jego zbudowania na określoną platformę. Plikom projektu poświęcę jeden z kolejnych wpisów z cyklu Qt Tutorial.
Ponieważ stworzyliśmy pusty projekt, musimy na początku uzupełnić plik projektu o niezbędne wpisy (które często są dodawane automatycznie przy wyborze innych typów projektów). Dodajemy więc do pliku *.pro następujące 3 linijki:
QT += core gui widgets TARGET = NAZWA_NASZEGO_PROJEKTU TEMPLATE = app
Oczywiście tekst NAZWA_NASZEGO_PROJEKTU należy uzupełnić wg uznania (będzie to domyślna nazwa pliku wykonywalnego aplikacji).
Żeby dodać plik do projektu, klikamy prawym przyciskiem myszy na nazwę projektu i wybieramy z listy Add New…->C++->C++ Source File i klikamy Choose…. Następnie podajemy nazwę pliku – w naszym przypadku będzie to – i klikamy na Next > oraz Finish.
W ten sposób dodaliśmy niezbędny plik źródłowy do naszego projektu. Wartym zauważenia faktem jest automatyczne uzupełnienie pliku projektu przez QtCreator’a.
Kod źródłowy programu.
Poniżej przedstawiam kompletny kod źródłowy, który należy umieścić w pliku – jego wyjaśnieniem zajmiemy się w dalszej części wpisu:
#include
W linii 1. i 2. włączamy pliki nagłówkowe, zawierające definicje klas QApplication i QPushButton. Pierwsza z nich zarządza każdą aplikacją, która korzysta z biblioteki Qt. Do jej głównych zadań należy inicjalizacja aplikacji, przetwarzanie pętli zdarzeń w połączeniu z graficznymi elementami interfejsu oraz zakończenie programu. Natomiast klasa QPushButton reprezentuje przycisk.
W linii 6. tworzymy obiekt klasy QApplication. Parametry konstruktora tej klasy odpowiadają argumentom funkcji main.
W linii 8. tworzymy przycisk – jako parametr konstruktora podajemy napis Hello World – podany tekst będzie etykietą przycisku. Natomiast metoda resize zmienia rozmiary przycisku, jako argumenty przyjmując szerokość i wysokość. Następnie w linii 10. wywołujemy metodę show, która wyświetla przycisk na ekranie.
Na końcu, w linii 12., wywołujemy metodę exec na utworzonym wcześniej obiekcie klasy QApplication – metoda ta przekazuje obsługę pętli zdarzeń do biblioteki Qt i wyświetlany jest interfejs aplikacji.
Efekt tego krótkiego kodu jest zdumiewający, ponieważ otrzymujemy funkcjonalne okno aplikacji z przyciskiem, choć definiowaliśmy tak naprawdę jedynie przycisk. Co jest tego powodem ? Otóż klasą bazową wszystkich wizualnych elementów interfejsu jest klasa QWidget. Każdy element, który dziedziczy pośrednio lub bezpośrednio po klasie QWidget, dziedziczy też jej funkcjonalność (np. metody resize oraz show). Dlatego taki element może pracować zarówno jako samodzielne okno aplikacji, jak również być częścią podrzędną innego okna. Dodam jeszcze, że każdy obiekt klasy dziedziczącej po klasie QWidget posiada zdolność pełnej obsługi zdarzeń generowanych przez użytkownika.
Aby zbudować i uruchomić aplikację, klikamy w zielony trójkąt w prawym dolnym rogu QtCreator’a (lub Ctrl+R z klawiatury). Oto, jak wygląda nasz program po uruchomieniu (oczywiście wygląd zależy od systemu operacyjnego i domyślnie ustawionego stylu okien):
Podsumowanie.
Każdy przyzna, że kod odpowiedzialny za wykonanie naszego pierwszego programu jest prosty i krótki, a tworzenie i manipulowanie elementami GUI nie sprawia żadnych trudności. W tych paru linijkach stworzyliśmy program z graficznym interfejsem użytkownika – okno z przyciskiem. To pokazuje, jakie możliwości ma biblioteka Qt i jak łatwo można za jej pomocą tworzyć nawet bardzo złożone aplikacje.
Zwykle kursy programowania rozpoczyna się od żmudnego poznawania składni języka, pisania prostych aplikacji konsolowych ze sławnym ''Hello world!'' na czele. Dopiero w ostatnich częściach przechodzi się do bardziej atrakcyjnych przykładów, które zaczynają przypominać aplikacje, które chcielibyśmy pisać i dla których rozpoczynamy naukę danego języka. W prezentowanym kursie ten tradycyjny porządek zostanie odwrócony.
Spis treści
Zwykle kursy programowania rozpoczyna się od żmudnego poznawania składni języka, pisania prostych aplikacji konsolowych ze sławnym ''Hello world!'' na czele. Dopiero w ostatnich częściach przechodzi się do bardziej atrakcyjnych przykładów, które zaczynają przypominać aplikacje, które chcielibyśmy pisać i dla których rozpoczynamy naukę danego języka. W prezentowanym kursie ten tradycyjny porządek zostanie odwrócony.
Jest to możliwe dzięki zaletom zintegrowanych środowisk programistycznych IDE (Integrated Development Environment), które pozwalają szybko projektować interfejsy aplikacji metodą składania ich z gotowych komponentów za pomocą myszy nawet bez znajomości zawiłości programowania obiektowego. Nie jest to jedyna zaleta korzystania ze środowisk programistycznych. Oferują one także wygodny edytor wyróżniający słowa kluczowe, na bieżąco kontrolujący poprawność składni wpisywanego kodu i uzupełniający wyrażenia (własności i metody klas oraz argumenty metod). Nie do przecenienia są także wszelkiego typu kreatory, wbudowana pomoc i oczywiście możliwość kontrolowanego uruchamiania tworzonych projektów z debugerem współpracującym z edytorem. Te wszystkie cechy, a także narzędzia do projektowania aplikacji bazodanowych czynią nieracjonalnym alternatywny sposób pisania programów za pomocą zwykłego edytora i kompilatora uruchamianego z wiersza poleceń.
Pierwsza część kursu poświęcona jest środowiskom programistycznym C#, w szczególności środowisku Microsoft Visual C# 2003, będącym elementem Microsoft Visual Studio .NET 2003. Kilka słów poświęcę również konkurencyjnemu C# Builderowi firmy Borland i jego następcy, środowisku Delphi 2005. Wszystkie trzy środowiska łączy obsługa tej samej platformy .NET w wersji 1.1.4322. C# Builder ma tę wielką zaletę, że jego wersja Personal jest bezpłatna i nadal można ją ściągnąć ze .
Porównując oba środowiska, szybko dojdziemy do wniosku, że przy pierwszym kontakcie niewiele się one różnią. W obu znajdziemy te same elementy, także praktyka projektowania aplikacji jest ta sama. Nie jest to przypadek - rozwiązania platformy .NET wymuszają to podobieństwo. W szczególności oba środowiska korzystają z kompilatora platformy .NET, więc skompilowane aplikacje muszą być identyczne. Ponadto C# Builder potrafi odczytywać projekty konkurencji i eksportować plik projektu w tym formacie. Zapewniam, że bez względu na to, czy używasz Visual C#, czy C# Buildera, niniejszy kurs okaże się przydatny w równym stopniu. Na koniec warto jeszcze wspomnieć o projekcie Mono (już omówionym w tym dziale, w artykule "Nie NET, a Mono" z numeru 12/2004). Jest to nadal rozwijany projekt platformy uruchomieniowej .NET oraz środowiska programistycznego C# działającego w systemie Linux. Platforma osiągnęła już wysoką zgodność z pierwowzorem, ale IDE nadal daleko do funkcjonalności omawianych tu środowisk do Windows.
Tezę o wyższości stosowania zintegrowanych środowisk programistycznych do C# chciałbym poprzeć dwoma przykładami. W pierwszym utworzymy prostą aplikację, w której użytkownik będzie mógł ustalić kolor panelu za pomocą trzech suwaków kontrolujących składowe R, G oraz B. Na tym przykładzie krok po kroku omówimy tworzenie interfejsu aplikacji w widoku projektowania, korzystanie z palety komponentów, okna własności oraz określanie interakcji aplikacji z użytkownikiem. W pierwszym projekcie kod wpisywany "ręcznie" ograniczy się do jednego wiersza. Tylko nieco więcej będzie go w drugim przykładzie, w którym utworzymy aplikację wybijającą godziny. Mała ilość kodu jest jednak zamierzona, bo głównym celem tej części kursu jest oswojenie ze środowiskami programistycznymi. Natomiast poznawaniem tajników języka C# zajmiemy się już za miesiąc.
Pierwsza aplikacja C#. Poznajemy środowisko programistyczne
Przejdźmy do pierwszego projektu. Zgodnie z zapowiedzią, ma to być aplikacja, w której za pomocą trzech suwaków (komponentów TrackBar) określać będziemy kolor panelu (komponent Panel). Opis przygotowania, w tym jednym wypadku dość szczegółowy, będzie się odnosił do środowiska Microsoft Visual C# 2003, ale nie powinno być najmniejszych problemów, aby powtórzyć go także w Borland C# Builderze, Borland Delphi 2005, a nawet w najnowszej wersji Visual C# 2005 do .NET 2.0.
Tworzymy projekt aplikacji w Visual C#
Uruchamiamy środowisko Microsoft Visual Studio .NET 2003. Następnie naciskamy kombinację klawiszy [Ctrl Shift N], aby otworzyć okno New Project zawierające szablony projektów. Na karcie Visual C# Projects zaznaczamy ikonę Windows Application, wpisujemy w pole Name nazwę projektu, np. "Kolory", i klikamy przycisk OK.
Odpowiednia sekwencja czynności w C# Builderze wyglądałaby następująco: z menu File, podmenu New wybieramy pozycję C# Application. W oknie New Application w pole Name wpisujemy nazwę projektu, np. "Kolory", i klikamy OK.
Rysunek 1. Widok projektowania w środowisku Microsoft Visual C# 2003.
Po chwili zobaczymy widok projektowania. Od tej pory sposób postępowania w poszczególnych środowiskach nie będzie się zasadniczo różnił (najbardziej kłopotliwa różnica to inne zdefiniowanie klawiszy skrótów). Aby ułatwić dalsze omawianie procedury projektowania aplikacji, nazwijmy poszczególne elementy środowiska w widoku projektowania (por. rysunki 1 i 2). Przede wszystkim mamy przed sobą podgląd formy (oznaczony na rysunkach numerem 1), w tej chwili jeszcze pustej. W Visual C# z prawej strony znajdują się dwa okna. Górne zawiera pliki projektu, jest to Solution Explorer (nr 2). W trakcie projektowania interfejsu szczególną rolę będzie odgrywało okno znajdujące się na dole prawego panelu (nr 3). Jest to okno własności, pozwalające na konfigurowanie własności formy i położonych na niej komponentów. Z lewej strony ukryte jest kolejne istotne okno, a mianowicie Toolbox (skrzynka narzędzi) (nr 4). Zawiera w tej chwili komponenty biblioteki Windows Forms, których możemy użyć do budowania interfejsu aplikacji. Jeżeli przez chwilę potrzymamy nad jego ikoną kursor myszy, rozwinie się. Natychmiast kliknijmy ikonę pinezki, aby nie pozwolić mu się schować. Wśród kart Toolbox na razie interesować będzie nas jedynie Windows Forms. W C# Builderze i Delphi 2005 zobaczymy bardzo podobny widok, tyle że inspektor obiektów (odpowiednik okna własności) znajduje się z lewej strony (por. cyfry na rysunkach), a paleta komponentów (odpowiednik Toolbox) - z prawej.
Budujemy interfejs aplikacji
Rysunek 2. Widok projektowania w środowisku Borland C# Builder 1.0. Niemal identycznie wygląda to w Delphi 2005.
W oknie Toolbox, na karcie Windows Forms zaznaczamy komponent Panel. Gdy przesuniemy kursor myszy nad podgląd formy, zobaczymy, że zawiera ikonę wybranego komponentu. Zaznaczamy obszar, który ma zająć wybrany komponent. Następnie z naciśniętym klawiszem [Ctrl] zaznaczamy komponent TrackBar (prawdopodobnie będzie trzeba przewinąć paletę, korzystając z ikony strzałki oznaczonej na rysunku jako 5).
Umieszczamy na formie trzy komponenty tego typu jeden pod drugim.
Proszę zwrócić uwagę, że symbol wybranego komponentu nie znika z kursora po umieszczeniu kontrolki na formie. To zasługa klawisza [Ctrl]. Aby usunąć zaznaczenie, należy kliknąć pozycję Pointer na palecie Visual C# lub strzałkę na pasku narzędzi palety w C# Builderze. Jeżeli mamy na formie za mało miejsca, możemy ją powiększyć. W tym celu wystarczy kliknąć niezajęty przez żaden komponent fragment okna w podglądzie i zmienić jego rozmiar, korzystając z charakterystycznych "łapek".
Zwróćmy uwagę na to, jak szybko powstał interfejs aplikacji. Ten sam efekt przy ręcznym tworzeniu kodu kosztowałby wprawionego programistę co najmniej pół godziny pracy. A projektując myszą, nie tylko możemy dowolnie cyzelować położenie każdego komponentu, ale także unikamy błędów, jakie zawsze powstają przy pisaniu kodu.
Rysunek 3. Edytor związany z własnościami typu Color pozwala na wybór jednego z predefiniowanych kolorów, w tym związanych z wybranym przez użytkownika zestawem kolorów systemowych.
Przejdźmy do konfiguracji formy i umieszczonych na niej komponentów. Zaznaczamy formę. W oknie własności powinniśmy zobaczyć nazwę odpowiadającego jej obiektu Form1. W tym oknie odnajdujemy własność Text, odpowiadającą za napis na pasku tytułu okna, i zmieniamy go np. na "Kolory". Po naciśnięciu [Enter] zobaczymy nowy tytuł na podglądzie formy. Zaznaczamy wszystkie komponenty TrackBar. Można to zrobić, przytrzymując naciśnięty klawisz [Shift] lub [Ctrl]. Za pomocą okna własności ustalamy ich własności: Maximum na 255, TickFrequency na 15, SmallChange na 15 i LargeChange na 51. Następnie na podglądzie formy zaznaczamy komponent panel1. Jego własność BackColor zmieniamy na Black - kolor dostępny na karcie Web lub Custom edytora własności (zob. rysunek 3).
I w ten sposób interfejs naszej aplikacji jest już gotowy, przynajmniej jego statyczny aspekt. Kolejnym krokiem będzie zaprogramowanie reakcji aplikacji na manipulacje użytkownika elementami utworzonego interfejsu. Na zaprogramowanie tej "dynamiki" aplikacji pozwalają zdarzenia. Co to są zdarzenia? W skrócie: to wszelkie sytuacje wynikające z działania użytkownika, np. owo kliknięcie przycisku, ale także włożenie płyty CD do napędu. Może to być również sytuacja związana z działaniem systemu operacyjnego: zakończenie działania jakiegoś programu, włączenie wygaszacza ekranu lub niski poziom baterii w notebooku. Za pomocą okna własności możemy tworzyć metody zdarzeniowe, tj. metody, które będą automatycznie uruchamiane, gdy do naszej aplikacji dotrze informacja o zaistnieniu zdarzenia, np. o tym, że przesunięty został suwak.
W tym projekcie skupimy się na zdarzeniu ValueChanged, które zachodzi wówczas, gdy suwak TrackBar zmieni pozycję.
Leave a Comment