Artur Opaliński, Robert Smyk - Tworzenie wizualnego interfejsu użytkownika.pdf

(4107 KB) Pobierz
r
Tworzenie wizualnego interfejsu
użytkownika
Autorzy:
dr inż. Artur Opaliński - redaktor
dr inż. Robert Smyk
Gdańsk, listopad 2011
Publikacja jest dystrybuowana bezpłatnie.
Materiał został przygotowany w związku z realizacją projektu pt. „Zamawianie kształcenia na kierunkach technicznych,
matematycznych i przyrodniczych – pilotaż” współfinansowanego ze środków Unii Europejskiej w ramach Europejskiego
Funduszu Społecznego Nr umowy: 46/DSW/4.1.2/2008 – zadanie 018240 w okresie od 21.08.2008 – 15.03.2012
992557670.004.png
 
dr inż. Artur Opaliński jest autorem rozdziałów:
1.Wstęp
2.Funkcje interfejsu użytkownika
3.Elementy interfejsów użytkownika
4.Programowanie zdarzeniowe
5.Technika programowania wizualnego
6.Biblioteka wxWidgets
11.Instalacja biblioteki wxWidgets
dr inż. Robert Smyk jest autorem rozdziałów:
7.Podstawowe kontrolki graficznego interfejsu użytkownika
8.Obsługa zdarzeń
9.Wybrane dodatkowe kontrolki GUI z biblioteki wxWidgets
10.Przykład integracji GUI z interfejsem tekstowym istniejącej aplikacji
12.Instalacja Microsoft Visual Studio
13.Wykorzystanie Microsoft Visual Studio do wizualnego tworzenia graficznego interfejsu użytkownika
992557670.005.png
 
Spis treści
1.Wstęp.................................................................................................................................................5
2.Funkcje interfejsu użytkownika........................................................................................................5
2.1.Waga interfejsu użytkownika.....................................................................................................5
2.2.Rodzaje interfejsów użytkownika..............................................................................................6
2.3.Zasady tworzenia interfejsu użytkownika.................................................................................8
3.Elementy interfejsów użytkownika...................................................................................................9
3.1.Tekstowy interfejs użytkownika................................................................................................9
3.1.1.Szczątkowy interfejs tekstowy.........................................................................................10
3.1.2.Prosty interfejs tekstowy..................................................................................................11
3.1.3.Przykłady interfejsów tekstowych...................................................................................13
3.2.Graficzny interfejs użytkownika..............................................................................................16
3.3.Interfejs linii komend...............................................................................................................20
4.Programowanie zdarzeniowe...........................................................................................................26
5.Technika programowania wizualnego.............................................................................................30
6.Biblioteka wxWidgets.....................................................................................................................35
7.Podstawowe kontrolki graficznego interfejsu użytkownika............................................................36
7.1.Szkielet aplikacji wxWidgets...................................................................................................36
7.2.Okno aplikacji wxWidgets.......................................................................................................38
7.2.1.Podstawowe klasy okien..................................................................................................40
7.2.2.Tworzenie własnej klasy okna o nazwie wxOknoFrame................................................41
7.2.3.Tworzenie obiektu okno klasy użytkownika wxOknoFrame..........................................42
7.3.Przycisk akcji użytkownika wxButton....................................................................................44
7.3.1.Tworzenie przycisku........................................................................................................44
7.3.2.Tworzenie przycisku za pomocą kreatora wxSmith pakietu Code::Blocks.....................45
7.3.3.Programowanie elementarnego zdarzenia od przycisku..................................................47
7.4.Wyświetlanie tekstu statycznego - etykieta tekstowa wxStaticText........................................48
7.4.1.Tworzenie etykiety tekstowej...........................................................................................49
7.4.2.Dynamiczna prezentacja informacji w etykiecie tekstowej.............................................50
7.5.Przycisk radiowy – panel przycisków jednokrotnego wyboru wxRadioButton......................51
7.5.1.Tworzenie i obsługa panelu przycisków radiowych........................................................51
7.6.Pobieranie danych od użytkownika - pole tekstowe wxTextCtrl.............................................53
7.6.1.Tworzenie i obsługa pola tekstowego..............................................................................53
7.7.Zarządzanie rozmieszczeniem komponentów okna, panele ...................................................55
8.Obsługa zdarzeń..............................................................................................................................57
8.1.Statyczna obsługa zdarzeń.......................................................................................................57
8.2.Przykład statycznej obsługi zdarzeń generowanych przez przycisk i pole edycji ..................59
8.3.Dynamiczna obsługa zdarzeń..................................................................................................61
8.4.Przykład dynamicznej obsługi zdarzeń ...................................................................................63
9.Wybrane dodatkowe kontrolki GUI z biblioteki wxWidgets..........................................................66
9.1.Wprowadzanie danych formatowanych - pole tekstowe o rozszerzonych możliwościach
edycji wxRichTextCtrl...................................................................................................................66
9.2.Obsługa wybranych okien dialogowych..................................................................................67
10.Przykład integracji GUI z interfejsem tekstowym istniejącej aplikacji .......................................70
11.Instalacja biblioteki wxWidgets.....................................................................................................75
992557670.001.png
 
11.1.Instalacja wxWidgets w środowisku zintegrowanym Dev-C++ oraz wxDev-C++...............76
11.2.Instalacja wxWidgets dla środowiska zintegrowanego Code::Blocks...................................79
12.Instalacja Microsoft Visual Studio................................................................................................81
13.Wykorzystanie Microsoft Visual Studio do wizualnego tworzenia graficznego interfejsu
użytkownika.......................................................................................................................................83
14.Referencje......................................................................................................................................89
992557670.002.png
 
1.Wstęp
1. W STĘP
Skrypt przeznaczony jest dla studentów Wydziału Elektrotechniki i Automatyki, uczestniczących
w realizacji przedmiotu Informatyka na semestrze 3. Podczas pisania programów w ramach tego
kursu, studenci są zachęcani do programowania interfejsu użytkownika w różnych formach.
Zakłada się, że Czytelnik zna składnię podstawowych elementów języka C i nie jest ona
prezentowana. Celem jest przedstawienie problematyki związanej zarówno z szerszymi decyzjami
projektowymi oraz elementami współpracy człowiek-maszyna, jak i z ostatecznym
programowaniem (kodowaniem) interfejsów użytkownika. W ramach kodowania interfejsów skrypt
przedstawia ograniczenia wybranych standardowych elementów obsługi wejścia-wyjścia w języku
C, oraz duże możliwości rozbudowanych, ogólnodostępnych bibliotek programistycznych.
Przedstawiona tematyka obejmuje zarówno tworzenie interfejsów do aplikacji czysto
programowych, działających na komputerach ogólnego przeznaczenia, jak i do urządzeń
wbudowanych, gdzie komponent oprogramowania i związany z nim interfejs użytkownika jest
tylko częścią większego, fizycznego urządzenia czy systemu.
2. F UNKCJE INTERFEJSU UŻYTKOWNIKA
2.1. Waga interfejsu użytkownika
Pionier badań nad interakcją człowieka z komputerem, profesor Ben Shneiderman rozszerzył
znane amerykańskie powiedzenie: “jeden rysunek jest wart tyle, co tysiąc słów, zaś jeden interfejs
jest wart tysiąc rysunków”. Chodzi oczywiście o interfejs użytkownika (ang.: User Interface, UI ) –
czyli te części oprogramowania i sprzętu, które działając na styku maszyny i człowieka mają
przybliżać ludziom możliwości programu.
Rzeczywiście trudno przecenić znaczenie UI: z punktu widzenia użytkownika, czyli ostatecznego
odbiorcy np. urządzenia, który decyduje o jego zakupie czy użytkowaniu, to właśnie UI świadczy o
całości systemu. Użytkownik nie zna, i często nie rozumie szczegółów rozwiązania, więc nie
kieruje się nimi w ocenie. Zwraca za to uwagę na efektywność swojej pracy z użyciem danego
narzędzia – a konieczność częstego odwoływania się do dokumentacji, czy uczestniczenia w
szkoleniach z obsługi bardzo pogarsza tę efektywność. Nawet najdoskonalsze możliwości programu
– jeżeli nie są w łatwy sposób dostępne do wykorzystania poprzez interfejs użytkownika – nie
przemawiają znacząco na korzyść produktu.
Jak wskazują badania, ludzie bardzo szybko oceniają portale internetowe, opierając się wyłącznie
na ich wizualnym aspekcie. Co więcej, ankietowani użytkownicy wyjawiają, że łatwiej ufają
stronom WWW, które samym wyglądem sprawiają wrażenie profesjonalnie zaprojektowanych.
1
992557670.003.png
 

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin