app/views/static/chapter5.html.erb
<% content_for :title, " Rozdział V Interfejsy graficzne, projektowanie interfejsu graficznego" %>
<div id="staticContent">
<h1 class = "chapter">
Rozdział V Interfejsy graficzne, projektowanie interfejsu graficznego
</h1>
<p> /Paweł Bensel/ </p>
<p>
Interfejs użytkownika (<a href="https://pl.wikipedia.org/wiki/J%25C4%2599zyk_angielski">ang.</a> user interface, UI) to część aplikacji odpowiadająca
na komunikację z użytkownikiem. Użytkownik nie ma możliwości bezpośredniej komunikacji z systemem komputerowym, komunikacja obsługiwana jest przez
stworzony infterfejs użytkownika, który może przyjmować jedną z nastepujących postaci:
</p>
<p>
Wiersz poleceń (linia komend) – polecenia wydawane są przy pomocy zdefiniowanych komend wpisywanych na klawiaturze. Przykładem tego rodzaju interfejsu
jest system DOS, wiersz poleceń systemu Windows, czy Windows PowerShell .
</p>
<p>
Interfejs/tryb tekstowy – polecenia wydawane są klawiaturą lub myszką, elementy interfejsu wyświetlane są na ekranie w trybie tekstowym, przy użyciu
znaków specjalnych budowane są prostokąty imitujące okna, przyciski itp. Przykładem użycia interfejsu tekstowego jest program Midnight commander
</p>
<p>
<img
alt="Interface"
src="/images/book/image5.png" height="450"/>
Interfejs/tryb graficzny – informacje są prezentowane w formie graficznej, komendy wykonywane są poprzez wskazanie kliknięcie myszką lub wskazanie
elementu na ekranie dotykowym.
</p>
<p>
Nowoczesne aplikacje najczęściej pracują w trybach graficznych, dzięki czemu ich wygląd jest bardziej przyjazny dla użytkownika. Graficzna prezentacja
działań aplikacji oraz komunikacji z użytkownikiem nazywana jest interfejsem graficznym. Interfejsy graficzne to część tzw. User Experience (z ang.
doświadczenie użytkowania), które obejmuje całość wrażeń, jakich doświadcza użytkownik podczas korzystania z danego produktu. O wygodzie użytkowania z
określonego interfejsu decyduje układ poszczególnych elementów na ekranie, ich ułożenie względem siebie, możliwość szybkiego dostępu do określonych
funkcji, ale również wybrana czcionka czy użyte ikony, ich wielkość czy kolor.
</p>
<p>
Aplikacje uruchamiane w wierszu poleceń wymagają od użytkownika zaznajomienia się z dokumentacją lub pomocą określonego polecenia, aby móc
uruchomić poszczególne funkcje.
</p>
<p>
W trybie tekstowym uruchamiać można również aplikacje, dla których utworzony został tekstowy interfejs (np. Midnight Commander) - są on bardziej
przyjazne od aplikacji uruchamianych w wierszu poleceń, bardzo często na ekranie wyświetlane są informacje opisujące poszczególne funkcje,
użytkownik nie musi znać określonych komend, ponieważ polecenia wydawane są poprzez wybór elementów na ekranie (najczęściej określonym skrótami
klawiszowymi lub przy pomocy strzałek na klawiaturze).
</p>
<p>
Największą popularnością cieszą interfejsy graficzne – są on bardzo intuicyjne, przejrzyste i przyjazne dla użytkownika. Poszczególne funkcje
aplikacji uruchamiane są poprzez przyciski i ikony, ich wielkość powinna być dopasowana do urządzenia, na którym działa aplikacja, wpisywanie
tekstu z klawiatury używane jest tylko do przekazywania danych wejściowych.
</p>
<p>
Zasadami tworzenia doświadczeń użytkownika mówią, że powinny być one pozytywnie odbierane przez użytkownia i zaprojektowane zgodnie z podejściem
zorientowanym na użytkownika (ang. user-centered design), co oznacza, że użytkownik aplikacji bierze udział w kolejnych etapach jej tworzenia.
</p>
<h2 class = "title">
V.1. Projektowanie interfejsu graficznego użytkownika
</h2>
<p>
W pierwszych latach użytkowania komputerów komunikowały się one z użytkownikami przy pomocy komunikatów wyświetlanych na ekranie, wprowadzanie
danych odbywało się przy pomocy klawiatury.
</p>
<p>
Wraz ze wzrostem możliwości sprzętu oraz dostępnością urządzeń wspomagających obsługę grafiki interfejs tekstowy został zastąpiony przez graficzny
interfejs użytkownika. Obecnie zdecydowana większość aplikacji dostępna jest również na urządzania mobilne, gdzie komunikacja z użytkownikiem w
głównej mierze opiera się o interfejs graficzny.
</p>
<p>
Chcąc stworzyć doby interfejs graficzny aplikacji należy przeanalizować następujące aspekty jej działania:
</p>
<ul>
<li>
<p>
Kim będą użytkownicy aplikacji? – wygląd i interakcja z użytkownikiem będzie inna dla dzieci, młodzieży czy seniorów, inaczej wyglądają
aplikacje kierowane do nastolatków, inaczej dla klientów biznesowych
</p>
</li>
<li>
<p>
W jaki sposób nasza aplikacja będzie wykorzystywana? Inaczej korzysta się z aplikacji korzystając z komputera wyposażonego w klawiaturę i
myszkę, inaczej na telefonie z niewielkim dotykowym ekranem. Coś, co jest wygodne na dużym ekranie nie musi być wygodne i dostępne na mniejszym
wyświetlaczu.
</p>
</li>
<li>
<p>
Jakie treści będą prezentowane w naszej aplikacji? Biorąc pod uwagę, jakie dane nasza aplikacja będzie prezentować użytkownikowi można
zastosować różne metody jej prezentacji – inaczej wyglądać będzie katalog produktów w sklepie internetowym, a inaczej prezentowane będą dane
dotyczące przepływów finansowych.
</p>
</li>
</ul>
<p>
Bardzo często interfejs urządzenia czy aplikacji jest kluczowy w jej postrzeganiu przez odbiorców i może zadecydować o sukcesie lub porażce danego
produktu na rynku. Doskonałym przykładem są projekty systemów obsługujących telefony dotykowe w roku 2007 - czasie premiery przełomowego
urządzenia, jakim był telefon iPhone firmy APPLE. Poniżej prezentowane są interfejsy systemów Windows Mobile oraz iPhone OS (obecnie iOS). Pierwszy
z nich zawiera kilka tekstowych skrótów na pulpicie oraz znana z systemów Windows Menu Start, drugi komunikuje się z użytkownikiem przy pomocy
kolorowych ikon. Dodatkowo do interfejsu dotykowego telefonu wprowadzono bardzo naturalne gesty pozwalające na wykonywanie różnych operacji, które
bardzo przyspieszyły obsługę urządzania i poszczególnych aplikacji.
</p>
<p>
<img
alt=" Ekran systemu Windows Mobile 6.5"
src="/images/book/image7.png"/>
</p>
<p>
Ekran systemu Windows Mobile 6.5
</p>
<p>
https://en.wikipedia.org/wiki/Windows_Mobile#/media/File:Winmo65.PNG
</p>
<p>
<img
alt=" Ekran systemu iPhone OS"
src="/images/book/image6.png"/>
</p>
<p>
Ekran systemu iPhone OS (obecnie iOS)
</p>
<p>
W zależności od przyjętej technologii tworzenia aplikacji wykorzystywany może być interfejs systemu operacyjnego w przypadku aplikacji dedykowanych lub
interfejs oparty o język HTML w przypadku aplikacji www (aplikacji uruchamianych, jako strony internetowe dostępne przez przeglądarkę internetową).
</p>
<p>
W przypadku aplikacji www interfejs definiowany jest w języku HTML wraz ze stylami CSS.
</p>
<p>
Programowanie aplikacji graficznych przeznaczonych dla konkretnego systemu operacyjnego opiera się na programowaniu obiektowym – poszczególne elementy
interfejsu w kodzie źródłowym posiadają reprezentujące je obiekty, których własności określać mogą np. wygląd elementu (np. dla przycisku mogą określać
jego rozmiar, wyśrodkowanie, pozycje na ekranie czy napis), natomiast metody określają działanie, które ma zostać wykonane w przypadku zaistnienia
określonego zdarzenia (np. zmiany treści czy naciśnięcia przycisku).
</p>
<p>
Pomimo różnic w sposobie generowania interfejsu graficznego podstawowe elementy interfejsu graficznego są takie same – są używane zarówno w aplikacjach
używanych na komputerach, tabletach oraz telefonach – nie występują w aplikacjach na zegarki (ang. smartwatch) - ze względu na ograniczenia związane z
wielkością ekranu interfejs opiera się głównie o ikony.
</p>
<p>
Do najczęściej wykorzystywanych elementów interfejsu graficznego należą:
</p>
<p>
Etykieta tekstowa (ang. Label) – Tekst wypisany na ekranie
</p>
<p>
Pole tekstowe używane na stronie www
</p>
<p>
<img
alt=" Pole tekstowe w systemie MacOS"
src="/images/book/image9.png"/>
</p>
<p>
Pole tekstowe w systemie MacOS
</p>
<p>
<img
alt=" Pole tekstowe wraz z etykietą w systemie Windows"
src="/images/book/image8.png"/>
</p>
<p>
Pole tekstowe wraz z etykietą w systemie Windows
</p>
<p>
<img
alt=" Pole tekstowe używane w systemie Android"
src="/images/book/image11.png"/>
</p>
<p>
Pole tekstowe używane w systemie Android
</p>
<p>
<img
alt=" Pole tekstowe używane w systemie iOS"
src="/images/book/image10.png"/>
/>
</p>
<p>
Pole tekstowe używane w systemie iOS
</p>
<p>
Pole tekstowe (ang. Text Box) – najczęściej jednoliniowe pole, w którym można wprowadzać tekst przetwarzany przez program. W zależności od środowiska
programistycznego istnieć mogą różne rodzaje pól tekstowych, np. zawierające maski wprowadzania danych pozwalających wprowadzać dane tylko w określonym
formacie, pola pozwalające na wybór dat, pola tekstowe z elementami zwiększania lub zmniejszania wartości czy pola wprowadzania hasła.
</p>
<p>
Obszar tekstu używany na stronie www
</p>
<p>
<img
alt=" Obszar tekstu w systemie Windows"
src="/images/book/image14.png" width="800"/>
</p>
<p>
Obszar tekstu w systemie Windows
</p>
<p>
<img
alt=" Obszar tekstu w systemie iOS"
src="/images/book/image12.png"/>
</p>
<p>
Obszar tekstu w systemie iOS
</p>
<p>
<img
alt=" Obszar tekstu w systemie Android"
src="/images/book/image13.png"/>
</p>
<p>
Obszar tekstu w systemie android
</p>
<p>
Obszar tekstu (ang. Text Area) – pole, w którym można wprowadzać dane tekstowe zawierające więcej niż jedną linię tekstu
</p>
<p>
Lista wyboru używana na stronie www
</p>
<p>
<img
alt=" Lista wyboru używana w systemie MAC OS X"
src="/images/book/image15.png"/>
</p>
<p>
Lista wyboru używana w systemie MAC OS X
</p>
<p>
<img
alt=" Lista wyboru używana w systemie Android"
src="/images/book/image16.png" height="400"/>
</p>
<p>
Lista wyboru używana w systemie Android
</p>
<p>
<img
alt=" Lista wyboru używana w systemie iOS"
src="/images/book/image17.png" height="400"/>
</p>
<p>
Lista wyboru używana w systemie iOS
</p>
<p>
<img
alt=" Lista wyboru używana w systemie Windows"
src="/images/book/image18.png"/>
</p>
<p>
Lista wyboru używana w systemie Windows
</p>
<p>
Lista wyboru (ang. Select List) – Lista rozwijana pozwalająca wybrać jedną (lub kilka) z dostępnych opcji.
</p>
<p>
Opcje jednokrotnego wyboru używane na stronach WWW
</p>
<p>
<img
alt=" Opcje jednokrotnego wyboru używane w systemie MAC OS X"
src="/images/book/image19.png"/>
</p>
<p>
Opcje jednokrotnego wyboru używane w systemie MAC OS X
</p>
<p>
<img
alt=" Opcje jednokrotnego wyboru używane w systemie Windows"
src="/images/book/image20.png"/>
</p>
<p>
Opcje jednokrotnego wyboru używane w systemie Windows
</p>
<p>
<img
alt=" Opcje jednokrotnego wyboru używane w systemie iOS"
src="/images/book/image21.png"/>
</p>
<p>
Opcje jednokrotnego wyboru w systemie iOS
</p>
<p>
<img
alt=" Opcje jednokrotnego wyboru używane w systemie Android"
src="/images/book/image22.png" height="400"/>
</p>
<p>
Opcje jednokrotnego wyboru w systemie Android
</p>
<p>
Przyciski opcji jednokrotnego wyboru (ang. Radio Button) – przyciski pozwalające wskazać jedną z dostępnych opcji.
</p>
<p>
Pola wielokrotnego wyboru na stronach www
</p>
<p>
<img
alt="Pola wielokrotnego wyboru w systemie Windows"
src="/images/book/image28.png"/>
</p>
<p>
Pola wielokrotnego wyboru w systemie Windows
</p>
<p>
<img
alt="Pola wielokrotnego wyboru w systemie iOS"
src="/images/book/image29.png"/>
</p>
<p>
Pola wielokrotnego wyboru w systemie iOS
</p>
<p>
<img
alt="Pola wielokrotnego wyboru w systemie Android"
src="/images/book/image30.png"/>
</p>
<p>
Pola wielokrotnego wyboru w systemie Android
</p>
<p>
<img
alt="Pola wielokrotnego wyboru w systemie MAC OS X"
src="/images/book/image31.png"/>
</p>
<p>
Pola wielokrotnego wyboru w systemie MAC OS X
</p>
<p>
Przyciski opcji wielokrotnego wyboru (ang. Check Box) przyciski pozwalające wskazać wiele z dostępnych opcji.
</p>
<p>
Przycisk używany na stronach www
</p>
<p>
<img
alt="Przycisk używany na w systemie iOS"
src="/images/book/image32.png"/>
</p>
<p>
Przycisk używany na w systemie iOS
</p>
<p>
<img
alt="Przycisk używany na w systemie Android"
src="/images/book/image33.png"/>
</p>
<p>
Przycisk używany na w systemie Android
</p>
<p>
<img
alt="Przycisk używany na w systemie Windows"
src="/images/book/image1.png"/>
</p>
<p>
Przycisk używany na w systemie Windows
</p>
<p>
<img
alt="Przycisk używany na w systemie MacOS X"
src="/images/book/image2.png"/>
</p>
<p>
Przycisk używany na w systemie MacOS
</p>
<p>
Przycisk (ang. Button) to element uruchamiający akcje po jego kliknięciu.
</p>
<p>
Obszar obrazu (ang. Canvas) – obszar, w którym można załadować, wyświetlać lub generować obrazy.
</p>
<p>
Istnieją też elementy typowe dla aplikacji uruchamianych bezpośrednio w systemie operacyjnym takie jak:
</p>
<p>
Okno (ang. Form) – okno aplikacji, na której zamieszczone są inne elementy interfejsu graficznego.
</p>
<p>
<img
alt="Okno w systemie Windows"
src="/images/book/image3.png" width="791"/>
</p>
<p>
Okno w systemie Windows
</p>
<p>
<img
alt="Okno w systemie MAC OS X"
src="/images/book/image4.png"/>
</p>
<p>
Okno w systemie MAC OS X
</p>
<p>
<img
alt=" Przyciski sterowania oknem w systemie Windows"
src="/images/book/image23.png" />
</p>
<p>
Przyciski sterowania oknem w systemie Windows
</p>
<p>
<img
alt=" Przyciski sterowania oknem w systemie MAC OS X"
src="/images/book/image24.png"/>
</p>
<p>
Przyciski sterowania oknem w systemie MAC OS X
</p>
<p>
Przyciski sterujące oknem (ang. Minimize button, maximize buton , close button) przyciski znajdujące się na górnym pasku okna pozwalające na jego
zminimalizowanie, maksymalizację oraz zamknięcie
</p>
<p>
<img
alt=" Paski przewijania"
src="/images/book/image25.png" height="400"/>
<img
alt="Paski przewijania"
src="/images/book/image26.png" height="400"/>
</p>
<p>
Paski przewijania (ang. Scroll Bar) – paski pozwalające na przesunięcie zawartości okna, dzięki czemu użytkownik widzi na ekranie interesujący go
fragment przetwarzanych czy wyświetlanych danych
</p>
<p>
Większość elementów graficznych potrafi obsługiwać następujące zdarzenia:
</p>
<p>
Kliknięcie (ang. click) – uruchomienie kodu źródłowego w momencie kliknięcia przycisku myszy lub naciśnięcia elementu na ekranie dotykowym.
</p>
<p>
Podwójne klikniecie (ang. double Click) - uruchomienie kodu źródłowego w momencie podwójnego kliknięcia przycisku myszy lub podwójnego naciśnięcia
elementu na ekranie dotykowym.
</p>
<p>
Zmiana (ang. Change) - uruchomienie kodu źródłowego w momencie zmiany wartości danego elementu (np. wybrania innej wartości opcji, czy wprowadzenie
tekstu do pola tekstowego).
</p>
<p>
Otrzymanie kursora tekstowego (ang. Focus) - uruchomienie kodu źródłowego w momencie, kiedy kursor tekstowy pojawi się wewnątrz danego elementu (np. w
momencie przechodzenia pomiędzy kolejnymi polami tekstowymi).
</p>
<p>
Opuszczenie kursora tekstowego (ang. Blur) - uruchomienie kodu źródłowego w momencie, kiedy kursor tekstowy opuszcza dany element (np. w momencie
przechodzenia pomiędzy kolejnymi polami tekstowymi).
</p>
<p>
Wejście kursora myszy (ang. mouse over) - uruchomienie kodu źródłowego w momencie, kiedy kursor myszy pojawia się ponad danym elementem.
</p>
<p>
Wyjście kursora myszy (ang. Mouse out) - uruchomienie kodu źródłowego w momencie, kiedy kursor myszy przesunie się poza dany element.
</p>
<p>
Naciśnięcie klawisza (ang. Key down) - uruchomienie kodu źródłowego w momencie, kiedy naciskany jest klawisz na klawiaturze przed
wyświetleniem/przekazaniem określonego znaku.
</p>
<p>
Przytrzymanie klawisza (ang. Key press) - uruchomienie kodu źródłowego w momencie, kiedy naciskany jest klawisz na klawiaturze po
wyświetleniu/przekazaniu określonego znaku
</p>
<p>
Zwolnienie klawisza (ang. Key Up) - uruchomienie kodu źródłowego w momencie, kiedy klawisz na klawiaturze jest zwalniany.
</p>
<p>
W zależności od używanego środowiska dostępne są różne zdarzenia wywołujące kod źródłowy, które mogą obsługiwać m.in. zmiany rozmiaru, przesunięcie
elementu, przesunięcie obszaru przy użyciu paska przewijania itp.
</p>
<p>
Dla okien czy stron kolejnych ekranów aplikacji najczęściej dostępne są zdarzenia obsługujące załadowanie/wczytanie danego elementu, jego
wyświetlenie na ekranie oraz ukrycie.
</p>
<p>
Przykładowa aplikacja pozwalająca na operacje matematyczne na dwóch liczbach może składać się z następujących elementów:
</p>
<ul>
<li>
<p>
Pole tekstowe o nazwie Liczba1TextBox
</p>
</li>
<li>
<p>
Pole wyboru o nazwie OperacjaSelect składające się z następujących opcji: +, -, * /
</p>
</li>
<li>
<p>
Pole tekstowe o nazwie Liczba2TextBox
</p>
</li>
<li>
<p>
Przycisk o nazwie ObliczButton
</p>
</li>
<li>
<p>
Etykieta o nazwie WynikLabel
</p>
</li>
</ul>
<p>
Przykładowe ułożenie elementów może wyglądać następująco:
</p>
<p>
<img
alt=" ułożenie elementów"
src="/images/book/image27.png"/>
</p>
<p>
Tworząc aplikację poza samym obliczeniem wyniku, warto stworzyć dodatkowe funkcjonalności polegające na sprawdzeniu danych wejściowych (np. aby
dopuszczać wyłączenie wartości tekstowe, czy też w przypadku wybrania działania dzielenia sprawdzania czy wartość drugiej liczby jest różna od 0).
</p>
<p>
Przy założeniu, że biblioteka graficzna zawiera obsługę standardowych elementów graficznych (zdefiniowanych jako klasy bazowe) używając dziedziczenia
istnieje możliwość zdefiniowania własnych klas odpowiedzialnych za wyświetlanie i obsługę konkretnych elementów graficznych dopasowanych do naszych
potrzeb. Przykładowy kod źródłowy takich klas odpowiedzialnych za obsługę powyższego formularza może wyglądać następująco:
</p>
<code class=" hljs livecodeserver language-csharp">
Class Liczba1TextBoxClass : TextBoxClass{ //deklaracja klasy o nazwie Liczba1TextBoxClass jako klasa pochodna od klasy TextBoxClass
function Liczba1TextBoxClass () //deklaracja konstruktora obiektu – funkcja nazywana tak samo jak klasa, której zadaniem jest przypisanie własności klasy.
{
this.left =0; //przypisanie właściwości odpowiadającej pozycji X na ekranie.
this.top =0; //przypisanie właściwości odpowiadającej pozycji Y na ekranie.
this.height=20; //przypisanie właściwości odpowiadającej wysokości obiektu.
this.width=200; //przypisanie właściwości odpowiadającej szerokości obiektu
return true;
}
function OnKeyPress() //deklaracja funkcji obsługującej zdarzenia naciśnięcia klawisza
{
if (this.key<’0’ and this.key>’9’) //sprawdzenie czy naciśnięto klawisze z poza zakresu 0..9
{
alert(‘To pole może przyjmować tylko wartości tekstowe’); //wywołanie funkcji wywołujące okno ostrzeżenia.
return false;
}
return true;
}
}
Class Liczba2TextBoxClass : TextBoxClass{ //deklaracja klasy o nazwie Liczba2TextBoxClass jako klasa pochodna od klasy TextBoxClass
function Liczba2TextBoxClass () //deklaracja konstruktora obiektu – funkcja nazywana tak samo jak klasa, której zadaniem jest przypisanie własności klasy.
{
this.left =320; //przypisanie właściwości odpowiadającej pozycji X na ekranie.
this.top =0; //przypisanie właściwości odpowiadającej pozycji Y na ekranie.
this.height=20; //przypisanie właściwości odpowiadającej wysokości obiektu.
this.width=200; //przypisanie właściwości odpowiadającej szerokości obiektu
return true;
}
function OnKeyPress() //deklaracja funkcji obsługującej zdarzenia naciśnięcia klawisza
{
if (this.key<’0’ and this.key>’9’) //sprawdzenie czy naciśnięto klawisze z poza zakresu 0..9
{
alert(‘To pole może przyjmować tylko wartości tekstowe’); //wywołanie funkcji wywołujące okno ostrzeżenia.
return false;
}
return true;
}
}
Class OperacjaSelectClass : SelectClass{ //deklaracja klasy o nazwie OperacjaSelectClass jako klasa pochodna od klasy SelectClass
function OperacjaSelectClass () //deklaracja konstruktora obiektu – funkcja nazywana tak samo jak klasa, której zadaniem jest przypisanie własności klasy.
{
this.left =220; //przypisanie właściwości odpowiadającej pozycji X na ekranie.
this.top =0; //przypisanie właściwości odpowiadającej pozycji Y na ekranie.
this.height=20; //przypisanie właściwości odpowiadającej wysokości obiektu.
this.width=80; //przypisanie właściwości odpowiadającej szerokości obiektu
this.options[]=[’+’]; //przypisanie kolejnej wartości wyboru na liście
this.options[]=[’-’]; //przypisanie kolejnej wartości wyboru na liście
this.options[]=[’*’]; //przypisanie kolejnej wartości wyboru na liście
this.options[]=[‘/’]; //przypisanie kolejnej wartości wyboru na liście
return true;
}
}
Class ObliczButtonClass : ButtonClass{ //deklaracja klasy o nazwie ObliczButton jako klasa pochodna od klasy ButtonClass
function ObliczButtonClass () //deklaracja konstruktora obiektu – funkcja nazywana tak samo jak klasa, której zadaniem jest przypisanie własności klasy.
{
this.left =440; //przypisanie właściwości odpowiadającej pozycji X na ekranie.
this.top =0; //przypisanie właściwości odpowiadającej pozycji Y na ekranie.
this.height=20; //przypisanie właściwości odpowiadającej wysokości obiektu.
this.width=80; //przypisanie właściwości odpowiadającej szerokości obiektu
this.text=’='; //przypisanie właściwości odpowiadającej napisowi na przycisku
return true;
}
function OnClick () //deklaracja funkcji obsługującej zdarzenia naciśnięcia klawisza
{
if ((OperacjaSelect.GetValue()==’/’)and Liczba2TextBoxClass.GetValue()==0)) //sprawdzenie czy wartość wybrana w obiekcie OperacjaSelect to dzielenie oraz czy wartość wprowadzona w obiekcie Liczba2TextBox wynosi 0
{
alert (‘Dzielenie przez 0 nie jest dozwolone’);
return false;
}
else
{
swith (OperacjaSelect.GetValue())
{
case :’+’
wynik= Liczba1TextBoxClass.GetValue()+Liczba2TextBoxClass.GetValue();
break;
case :’-‘
wynik= Liczba1TextBoxClass.GetValue()-Liczba2TextBoxClass.GetValue();
break;
case :’*’
wynik= Liczba1TextBoxClass.GetValue()*Liczba2TextBoxClass.GetValue();
break;
case :’/’
wynik= Liczba1TextBoxClass.GetValue()/Liczba2TextBoxClass.GetValue();
break;
}
WynikLabel.SetLabel(‘Wynik działania wynosi’+wynik);
return true;
}
}
}
Class WynikLabelClass : LabelClass{ //deklaracja klasy o nazwie WynikLabelClass jako klasa pochodna od klasy LabelClass
function WynikLabelClass () //deklaracja konstruktora obiektu – funkcja nazywana tak samo jak klasa, której zadaniem jest przypisanie własności klasy.
{
this.left =540; //przypisanie właściwości odpowiadającej pozycji X na ekranie
this.top =0; //przypisanie właściwości odpowiadającej pozycji Y na ekranie
this.height=20; //przypisanie właściwości odpowiadającej wysokości obiektu
this.width=80; //przypisanie właściwości odpowiadającej szerokości obiektu
this.value=’Wynik’; //przypisanie własności odpowiadającej wyświetlanemu tekstowi
return true;
}
}
Class MainProgramClass : WindowClass{ //deklaracja klasy o nazwie OperacjaSelectClass jako klasa pochodna od klasy SelectClass
function MainProgramClass () //deklaracja konstruktora obiektu – funkcja nazywana tak samo jak klasa, której zadaniem jest przypisanie własności klasy.
{
Liczba1TextBox = new Liczba2TextBoxClass; //utworzenie nowego obiektu klasy Liczba1TextBoxClass o nazwie Liczba1TextBox
Liczba2TextBox = new Liczba2TextBoxClass; //utworzenie nowego obiektu klasy Liczba2TextBoxClass o nazwie Liczba2TextBox
OperacjaSelect =new OperacjaSelectClass; //utworzenie nowego obiektu klasy OperacjaSelectClass o nazwie OperacjaSelect
ObliczButton = new ObliczButtonClass; //utworzenie nowego obiektu klasy ObliczButtonClass o nazwie ObliczButton
WynikLabel = new WynikLabelClass; //utworzenie nowego obiektu klasy WynikLabelClass o nazwie WynikLabel
this.add (Liczba1TextBox); //dodanie do głównego okna programu obiektu Liczba1TextBox
this.add (OperacjaSelect); //dodanie do głównego okna programu obiektu OperacjaSelect
this.add (Liczba2TextBox); //dodanie do głównego okna programu obiektu Liczba2TextBox
this.add (ObliczButton); //dodanie do głównego okna programu obiektu ObliczButton
this.add (WynikLabel); //dodanie do głównego okna programu obiektu WynikLabel
return true;
}
}
</code>
<p>
Program główny obsługujący obsługę wszystkich elementów interfejsu graficznego będzie działał, jako obiekt MainProgram, który w funkcji inicjującej
(konstruktorze) utworzy kolejne obiekty odpowiedzialne za wyświetlanie i obsługę pól tekstowych, listy wybieralnej oraz przycisku.
</p>
<a href="/static/chapter4"><b>Poprzedni rozdział</b></a>
<a href="/static/chapter6"><b>Następny rozdział</b></a>
</div>