Programowanie GUI  część 1
1.1 UrzÄ…dzenia sterujÄ…ce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Historia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.3 Składniki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.4 Biblioteki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5 Wybór biblioteki oraz języka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Literatura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Maciej WoÅ‚oszyn WFiIS AGH (http://fatcat.ftj.agh.edu.pl/~woloszyn) ©29 lutego 2012
A
Dokument przygotowany za pomocą systemu LTEX. Formatowanie kodu może wynikać z wymogów wersji prezentowanej w formie slajdów  proszę
go wtedy nie traktować jako wzór do naśladowania. Informacje o znalezionych błędach oraz propozycje zmian i uzupełnień proszę wysyłać na
[e-mail]. Wszelkie prawa zastrzeżone.
Graficzny Interfejs Użytkownika
" GUI (graphical user interface)  sposób interakcji użytkownika z komputerem (lub podobnym urządzeniem)
poprzez graficznÄ… reprezentacjÄ™ danych i operacji na nich (np. ikony, przyciski, menu)
" użytkownik posługuje się w tym celu urządzeniem (np. mysz, touchpad) sterującym tzw. kursorem
" zastępuje (lub uzupełnia) CLI (command line interface)
1.1 UrzÄ…dzenia sterujÄ…ce
" mysz, trackball, touchpad lub podobne urzÄ…dzenia sterujÄ…ce kursorem
" ekran dotykowy
" klawiatura (skróty, sterowanie kursorem)
" system rozpoznawania głosu
" dodatkowe urządzenia/sensory, np. pióro świetlne (obecnie rzadko spotykane), czujniki położenia urządzeń
przenośnych
1.2 Historia
" pierwsze idee  pomysł urządzenia Memex (Vannevar Bush, lata 30-te XX w., rozwinięcie 1945)
" pomysły Busha zainspirowały Douglasa Engelbarta  w 1968 zaprezentował NLS (oN-Line System)
urządzenie obsługiwało m.in. wynalezioną przez Engelbarta mysz i wykorzystywało pomysł dokumentów
hipertekstowych
" Xerox PARC (Palo Alto Research Center)  komputer Xerox Alto (1973)
oraz Xerox Star 8010 Document Processor (1981, 17 000$)
" Apple Lisa (1983, 10 000$)
" Apple Macintosh (1984, 2 495$)
9-calowy monochromatyczny ekran (512x384), 128kB RAM, brak wielozadaniowości
1
M.Wołoszyn  Programowanie GUI, cz. 1 (29 lutego 2012) 2
" X Window System (1984, MIT)  system Unix i pokrewne
 jest to tylko szkielet graficznego interfejsu użytkownika; dodatkowo potrzebne są np. window manager,
biblioteka elementów GUI
" Windows 1.0 (1985)
" Amiga 1000 (1985)
1.3 Składniki
widget (window+gadget ?), inaczej kontrolka
" Button  wywołanie pewnej akcji
" Checkbox  wybór dwustanowy (włączony/wyłączony), czasem dostępny trzeci stan: element nieaktywny
" Radio Button  grupa przycisków, spośród których włączony może być tylko jeden
" Icon  graficzny symbol np. pliku, folderu, aplikacji, funkcji programu; zapisywana najczęściej w formatach
ICO, BMP (MS Windows) lub PNG, SVG (inne systemy)
" Toolbar  zestaw przycisków, zwykle z ikonami często wykonywanych operacji
M.Wołoszyn  Programowanie GUI, cz. 1 (29 lutego 2012) 3
" Label
" List
" Spinner
" Slider
" Menu  rozwijana lista komend i opcji
" Context Menu (Pop-up Menu)  menu kontekstowe
M.Wołoszyn  Programowanie GUI, cz. 1 (29 lutego 2012) 4
" Pie Menu (Radial Context)
" Tree View  hierarchiczny układ informacji
" Status Bar  zwykle w dolnej części okna
" Table (Grid View, Datagrid)  często dodatkowe możliwości: przesuwanie/ukrywanie kolumn, sortowanie
" Scrollbar (Slider)  wersje poziome, pionowe
" Progress Bar  także wersja do wykorzystania gdy nie jest znane  maksimum
" Text Box (Edit Field)  nie zawsze muszą dopuszczać edycję tekstu
M.Wołoszyn  Programowanie GUI, cz. 1 (29 lutego 2012) 5
" Tooltip
" Tabbed Pane
" Application/Document Window   zwykłe okna aplikacji, dokumentu otworzonego przez program itp.
" Dialog Box
" Modal Window (Modal Dialog)  blokuje dalsze działanie programu
" Combo box  kombinacja pola tekstowego i listy rozwijanej, w razie potrzeby uzupełniona przez scrollbar;
może umożliwiać edycję (np. pasek adresu w przeglądarkach WWW)
M.Wołoszyn  Programowanie GUI, cz. 1 (29 lutego 2012) 6
" oraz wiele innych, dostępnych w poszczególnych zestawach widgetów  np. dialogi otwierania/zapisywania
plików, drukowania, Color Chooser. . .
Uwaga:
tzw. focus (skupienie)  stan, w którym może być równocześnie tylko jeden widget w całym systemie okienkowym;
naciśnięcie przycisku na klawiaturze przekazuje informację do elementu, który  posiada focus.
1.4 Biblioteki
toolkit  zbiór widgetów
" niskopoziomowe:
 Windows API (application programming interface)
 Macintosh API
 niskopoziomowe biblioteki dla X Window
" wysokopoziomowe
  nakładki na Windows API:
" MFC (Microsoft Foundation Classes)  do niedawna standardowe narzędzie używane w środowi-
skach programistycznych Micorsoftu
" Windows Forms  GUI na platformie .NET
" OWL (Object Windows Library)  Borland, alternatywa dla MFC
" VCL (Visual Component Library)  Borland, wykorzystywane przez C++ Builder oraz Delphi
 Unix, X Window system:
" Motif
" Lesstif  open source owa wersja Motifa
" Xaw (Athena Widget Set)
 wiele platform, języki C/C++ (często także dowiązania dla innych języków):
" Qt  dostępna jako open source oraz w wersjach komercyjnych dla platform Unix/Linux (X Window),
MS Windows, Mac OS X, embedded; wykorzystywana przez środowisko KDE
" GTK+  open source, pierwotnie dla X Window, obecnie także na innych platformach; korzystają
z niej m.in. GNOME i XFCE
" wxWidgets (dawniej wxWindows)
" FLTK  open source, zaprojektowana pod kątem wydajności i niewielkiego zużycia zasobów
M.Wołoszyn  Programowanie GUI, cz. 1 (29 lutego 2012) 7
" FOX  open source
 wiele platform, język Java:
" AWT (Abstract Windowing Toolkit)
" Swing  dodany w nowszych wersjach Javy
" SWT (Standard Widget Toolkit)  część projektu Eclipse, umożliwia wykorzystanie widgetów plat-
formy, na której działa maszyna wirtualna Javy (np. API Windows albo GTK+)
1.5 Wybór biblioteki oraz języka
?
Literatura
" Jeremy Reimer, A History of the GUI,http://arstechnica.com/articles/paedia/gui.ars
" Mike Tuck, The Real History of the GUI,http://www.sitepoint.com/print/real-history-gui
" A Visual Guide to the Swing Components,http://docs.oracle.com/javase/tutorial/ui/features/
components.html
Programowanie GUI  część 2
2.1 Biblioteka Qt  wstęp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2.2 Pierwszy program . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.3 Qt Assistant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.4 Obsługa zdarzeń: sygnały i sloty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.4.1 WÅ‚asne sloty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.4.2 Własne sygnały . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.4.3 Predefiniowane sygnały . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.4.4 Predefiniowane sloty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Literatura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Maciej WoÅ‚oszyn WFiIS AGH (http://fatcat.ftj.agh.edu.pl/~woloszyn) ©7 marca 2012
A
Dokument przygotowany za pomocą systemu LTEX. Formatowanie kodu może wynikać z wymogów wersji prezentowanej w formie slajdów  proszę
go wtedy nie traktować jako wzór do naśladowania. Informacje o znalezionych błędach oraz propozycje zmian i uzupełnień proszę wysyłać na
[e-mail]. Wszelkie prawa zastrzeżone.
Qt cz.1
Jak podaje Wikipedia QT to m.in. . . .
" The Qt toolkit, a cross platform graphical widget toolkit for the development of GUI computer programs.
2.1 Biblioteka Qt  wstęp
Education Course Material (1) The ideas behind Qt
1
M.Wołoszyn  Programowanie GUI, cz. 2 (7 marca 2012) 2
2.2 Pierwszy program
#include
#include
int main( int argc, char **argv ) {
QApplication app( argc, argv );
QLabel napis( " ... Witamy w Qt ... " );
napis.show();
return app.exec();
}
" QApplicationobsługuje parametry linii poleceń oraz zasoby wspólne dla całego programu
" napis.show()spowoduje, że wcześniej przygotowany widget stanie się widoczny (łącznie ze swoją zawar-
tością)
" app.exec()przekazuje dalsze sterowanie do pętli zdarzeń (obsługiwanej przez Qt)  program przechodzi
w stan  oczekiwania na działania użytkownika (mysz, klawiatura itd.)
Kompilacja
Zakładając, że przykładowy program umieszczony jest w plikumain.cppw kataloguHelloWorldwykonujemy
następujące kroki:
1. $qmake -project
Ò! powstanie niezależny od platformy plik projektuHelloWorld.pro:
##########################################
# Automatically generated by qmake (2.01a)
# czw. mar 10 08:15:54 2011
##########################################
TEMPLATE = app
TARGET =
DEPENDPATH += .
INCLUDEPATH += .
# Input
SOURCES += main.cpp
2. $qmake
Ò! wygeneruje odpowiedni dla danego systemu plikMakefile
3. $make
Ò! przeprowadzi kompilacjÄ™ programu  otrzymamy plik wykonywalnyHelloWorld
2.3 Qt Assistant
" dokumentacja biblioteki i system pomocy dla narzędzi Qt są dostępne w wygodny sposób poprzez instalowaną
domyślnie z biblioteką aplikację Qt Assistant
jeśli zachodzi potrzeba uruchomienia z linii komend to wystarczy polecenie:
M.Wołoszyn  Programowanie GUI, cz. 2 (7 marca 2012) 3
$assistant
! fatcat :
Uwaga! na serwerzefatcatzainstalowane są wersje Qt z obu serii: 3.x oraz 4.x (4.x nawet więcej niż jedna)
 na pierwszych zajęciach laboratoryjnych podane zostaną szczegóły
2.4 Obsługa zdarzeń: sygnały i sloty
Schemat przekazywania informacji o zdarzeniach w Qt:
" widgety wysyłają (emitują) sygnały zawierające informacje o zdarzeniu (np. została wybrana 5-ta pozycja na
liście)
" sygnały są odbierane przez specjalnie do tego przeznaczone funkcje nazywane slotami (które są wtedy au-
tomatycznie uruchamiane)
" do utworzenia par sygnał-slot służy metodaconnecturuchamiana z wykorzystaniem makr:
 SIGNAL dla metod z obiektu generujÄ…cego zdarzenie
(np. funkcjaclicked()obiektu reprezentujÄ…cego przycisk)
 SLOT dla metod obsługujących zdarzenia
(np.quit()klasyQApplication)
Przykład:QPushButtonemituje sygnałclicked()gdy użytkownik kliknie przycisk
#include
#include
int main( int argc, char **argv ) {
QApplication app( argc, argv );
QPushButton ok( "Zakoncz" );
QObject::connect( &ok, SIGNAL(clicked()),
&app, SLOT(quit()) );
M.Wołoszyn  Programowanie GUI, cz. 2 (7 marca 2012) 4
ok.show();
return app.exec();
}
" każdy sygnał może być połączony z dowolną ilością slotów (albo nawet z innym sygnałem!)
" mogą mieć dowolną ilość argumentów dowolnego typu
" do pojedynczego slotu można podłączyć wiele sygnałów
2.4.1 WÅ‚asne sloty
" mogą się pojawiać w klasach dziedziczących poQObject(niekoniecznie związanych z GUI!) lub jej podklasach
(np.QWidget)
" mogą mieć dowolną ilość argumentów dowolnego typu
Przykład: program definiujący osobny obiekt reagujący na naciśnięcie przycisku (3 oddzielne pliki):
Writer.h
#include
#include
class Writer : public QObject {
Q_OBJECT
public slots:
void write();
};
Writer.cpp
#include "Writer.h"
void Writer::write() {
std::cerr << "#\n";
}
main.cpp
#include
#include
#include "Writer.h"
int main( int argc, char **argv ) {
QApplication app( argc, argv );
M.Wołoszyn  Programowanie GUI, cz. 2 (7 marca 2012) 5
QPushButton *b = new QPushButton("Wypisz  # ");
Writer *w = new Writer();
QObject::connect(b, SIGNAL(clicked()),
w, SLOT(write()) );
b->show();
return app.exec();
}
" tym razem wykonanie poleceniamakespowoduje dodatkowo wygenerowanie plikumoc_Writer.cppzawie-
rającego wynik działania programu moc (Meta-Object Compiler):
 klasy oznaczone makremQ_OBJECTsą parsowane i udostępniana jest z nich (już za pomocą standardo-
wych mechanizmów C++) funkcjonalność umożliwiająca m.in. działanie slotów i sygnałów
 wykorzystanie tego mechanizmu jest zautomatyzowane poprzez użyciemoc,qmakeiQObject(lub klas
potomnych)
 metody-sloty deklaruje się poprzez składnię typu:
public slots:
 klasa obsługująca sloty (Writer) musi dziedziczyć poQObject(albo po klasie odQObjectpochodzącej)
2.4.2 Własne sygnały
" można tworzyć klasy dziedziczące po bibliotecznych widgetach i definiować dla nich własne sygnały:
 słowo kluczowesignals+ automatyczne generowanie
  wysłanie sygnału za pomocąemit
 uwaga na możliwe nieskończone pętle!
Przykład: program służący do komunikacji między  naszymi obiektami1
Liczba.h
#include
class Liczba : public QObject {
Q_OBJECT
public:
Liczba() : n(0) { }
int getN() const { return n; }
public slots:
void setN(int _n) {
if (_n != n) {
n = _n;
emit zmiana(_n);
}
}
signals:
void zmiana(int _nowa);
private:
int n;
};
main.cpp
1
Uwaga! W dalszych przykładach nie zawsze cytowane są wszystkie dyrektywy#include,#ifndefitp.
M.Wołoszyn  Programowanie GUI, cz. 2 (7 marca 2012) 6
#include
#include "Liczba.h"
using namespace std;
int main() {
Liczba x,y;
QObject::connect(&x, SIGNAL(zmiana(int)),
&y, SLOT(setN(int)) );
cout << x.getN() << " " << y.getN() << endl;
x.setN(3);
cout << x.getN() << " " << y.getN() << endl;
y.setN(7);
cout << x.getN() << " " << y.getN() << endl;
return 0;
}
Ó!
0 0
3 3
3 7
2.4.3 Predefiniowane sygnały
" dla poszczególnych widgetów zdefiniowane są odpowiednie dla nich sygnały
przykład: klasaQSliderudostępnia m.in. sygnały:
 valueChanged(int value) zmiana wartości wybranej suwakiem
 sliderPressed() użytkownik  chwyta suwak
 sliderMoved(int value) suwak został poruszony
 sliderReleased() suwak został  puszczony
2.4.4 Predefiniowane sloty
" bardzo często tworzy się własne sloty, ale dostępnych jest również wiele gotowych slotów dla widgetów
przykład: klasaQProgressBarzapewnia m.in. sloty
 void reset() pokaż  brak postępu (0%)
 void setMaximum(int maximum)
 void setMinimum(int minimum)
 void setValue(int value)
int main( int argc, char **argv ) {
QApplication app(argc, argv);
QProgressBar p;
QSlider s;
s.setOrientation(Qt::Horizontal);
QObject::connect(&s, SIGNAL(valueChanged(int)),
&p, SLOT(setValue(int)) );
p.show();
s.show();
return app.exec();
}
M.Wołoszyn  Programowanie GUI, cz. 2 (7 marca 2012) 7
(2) The Qt object model and the signal slot concept
! Do samodzielnego przećwiczenia: proszę wykonać polecenia zawarte w plikuL2 Exercises.pdfw materiałach
dostępnych pod adresem powyżej.
Literatura
" Dokumentacja i tutoriale na stronach WWW
http://doc.qt.nokia.com
http://www.qtcentre.org
" Blanchette J., Summerfield M., C++ GUI Programming with Qt 4. Dostępne również on-line:
http://www.qtrac.eu/marksummerfield.html
" Ezust A., Ezust P., An Introduction to Design Patterns in C++ with Qt 4
" Ganczarski J., Owczarek M., C++. Wykorzystaj potęgę aplikacji graficznych
Programowanie GUI  część 3
3.1 Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
3.2 Tworzenie złożonych widgetów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Maciej WoÅ‚oszyn WFiIS AGH (http://fatcat.ftj.agh.edu.pl/~woloszyn) ©18 marca 2012
A
Dokument przygotowany za pomocą systemu LTEX. Formatowanie kodu może wynikać z wymogów wersji prezentowanej w formie slajdów  proszę
go wtedy nie traktować jako wzór do naśladowania. Informacje o znalezionych błędach oraz propozycje zmian i uzupełnień proszę wysyłać na
[e-mail]. Wszelkie prawa zastrzeżone.
Qt cz.2
(3) Widgets and layouts (do str.37)
3.1 Layout
" rozkład widgetów w oknie (lub innym elemencie) może być realizowany za pomocą gotowych schematów
" do dyspozycji sÄ…:
 QHBoxLayout układ poziomy
 QVBoxLayout układ pionowy
 QGridLayout siatka
" korzyści:
1
M.Wołoszyn  Programowanie GUI, cz. 3 (18 marca 2012) 2
 pozycjonowanie widgetów potomnych
 rozsądnie dobierane domyślne i minimalne rozmiary okien
 obsługa zmian rozmiaru
 automatyczne uwzględnianie dodawania/usuwania, ukrywania/pokazywania widgetów potomnych, zmian
w ich zawartości (tekst, fonty. . . )
" widgety dodajemy do layout-u metodÄ…
addWidget( QWidget * w )
" w przypadku klasyQGridLayoutpodajemy jeszcze rzÄ…d i kolumnÄ™, np.
layout->addWidget(button1, 0, 0);
layout->addWidget(button2, 0, 1);
można również spowodować rozciągnięcie widgetu na kilka rzędów/kolumn, np.
layout->addWidget(button3, 1, 0, 1, 2);
" layout nie pełni jednak roli widgetu-rodzica:
 klasyQHBoxLayout,QVBoxLayoutiQGridLayoutdziedziczÄ… po abstrakcyjnej klasieQLayout, a ta
z kolei poQObject(a nieQWidget!)
 dodajÄ…c widgety do layout-u nie przekazujemy wskaz
nika do  rodzica  zostanie nim automatycznie
obiekt, dla którego ustawiliśmy layout
main.cpp
QApplication app( argc, argv );
QWidget w;
QLabel l("Value: ");
QProgressBar p;
QSpinBox s;
s.setMaximum(100);
QObject::connect(
&s, SIGNAL(valueChanged(int)),
&p, SLOT(setValue(int))
);
QGridLayout gl;
gl.addWidget(&l,0,0);
gl.addWidget(&s,0,1);
gl.addWidget(&p,1,0,1,2);
w.setLayout(&gl);
w.show();
return app.exec();
" bardziej skomplikowane rozmieszczenia tworzy się zagnieżdżając dostępne schematy metodąaddLayout()
M.Wołoszyn  Programowanie GUI, cz. 3 (18 marca 2012) 3
QHBoxLayout vl;
QGridLayout gl1;
gl1.addWidget(new QPushButton("1"),0,0);
gl1.addWidget(new QPushButton("2"),0,1);
gl1.addWidget(new QPushButton("3"),1,0,1,2);
vl.addLayout(&gl1);
QGridLayout gl2;
gl2.addWidget(new QPushButton("4"),0,1);
gl2.addWidget(new QPushButton("5"),1,0,1,2);
gl2.addWidget(new QPushButton("6"),2,0);
vl.addLayout(&gl2);
3.2 Tworzenie złożonych widgetów
" wykorzystanie do:
 dziedziczenia po klasieQWidgetlub innej pochodzÄ…cej od niej
 zawierania innych widgetów
 layout-ów
 własnych dodatków/modyfikacji
MojWidget.h
class MojWidget : public QWidget
{
public:
MojWidget(QString s = "x=",
QWidget *parent = 0 );
protected:
QProgressBar* progressBar;
QSpinBox* spinBox;
QLabel* label;
QHBoxLayout *layout;
};
MojWidget.cpp
#include "MojWidget.h"
MojWidget::MojWidget(QString s, QWidget *parent)
: QWidget(parent)
{
progressBar = new QProgressBar();
spinBox = new QSpinBox();
spinBox->setSuffix(" %");
label = new QLabel(s);
layout = new QHBoxLayout;
M.Wołoszyn  Programowanie GUI, cz. 3 (18 marca 2012) 4
connect(
spinBox, SIGNAL(valueChanged(int)),
progressBar, SLOT(setValue(int))
);
layout->addWidget(progressBar);
layout->addWidget(label);
layout->addWidget(spinBox);
setLayout(layout);
}
main.cpp
#include "MojWidget.h"
int main( int argc, char **argv )
{
QApplication app( argc, argv );
MojWidget w;
w.show();
return app.exec();
}
main.cpp(zmodyfikowany)
QWidget window;
QVBoxLayout layout;
MojWidget wx("X = ");
MojWidget wy("Y = ");
MojWidget wz("Z = ");
layout.addWidget(&wx);
layout.addWidget(&wy);
layout.addWidget(&wz);
window.setLayout(&layout);
window.show();
M.Wołoszyn  Programowanie GUI, cz. 3 (18 marca 2012) 5