MECHANIK 7/2013 XVII Międzynarodowa Szkoła Komputerowego Wspomagania Projektowania, Wytwarzania i Eksploatacji

77

Mgr inż. Witold BUŻANTOWICZ Dr inż. Jacek WARCHULSKI Dr inż. Marcin WARCHULSKI Wojskowa Akademia Techniczna

TWORZENIE NOWOCZESNEGO INTERFEJSU UŻYTKOWNIKA

W ŚRODOWISKU EMBARCADERO RAD STUDIO XE3

Streszczenie: W artykule przedstawiono zasady tworzenia interfejsów użytkownika oraz podano przykłady realizacji nowoczesnych rozwiązań GUI w programowaniu aplikacyjnym za pomocą środowiska Embarcadero RAD Studio XE3.

MODERN GUI BUILDING

WITH EMBARCADERO RAD STUDIO XE3

Abstract: This paper presents a set of principles for GUI creating. Also the exam-ples of some modern GUI solutions in application programming using Embarcade-ro RAD Studio XE3 IDE are given. Słowa kluczowe: interfejs użytkownika, zintegrowane środowisko programistyczne Keywords: GUI, IDE, RAD

1. WPROWADZENIE Nowoczesne programowanie aplikacyjne stawia przed projektantem wymóg precyzyjnego określenia sposobów interakcji z użytkownikiem już na etapie prac koncepcyjnych. Interfejs tworzonego oprogramowania winien spełniać wymogi związane z ergonomią pracy, potrze-bami zgłaszanymi przez odbiorcę docelowego, konfigurowalnością (w tym, jeżeli zaistnieje taka konieczność, zapewnieniem wsparcia dla operatorów z różnymi rodzajami dysfunkcji), a także – o czym często się zapomina – z estetyką. Czasy, w których użytkownicy komunikowali się z programami za pośrednictwem linii pole-ceń, zaś aplikacje tworzono „ręcznie” w oparciu o funkcje Windows API, minęły bezpowrot-nie. Rozwiązania współczesne – obok szeroko pojętej i rozmaicie rozumianej cechy przyja-zności dla użytkownika (ang. user friendliness), której pochodną jest m.in. wygląd i sposób organizacji interfejsu aplikacji – powinny uwzględniać cechę dalece ważniejszą i niosącą ze sobą określone skutki dla architektury GUI projektowanego oprogramowania: konieczność zapewnienia mobilności, pojmowanej jako przenośność, zdolność adaptacji wyglądu do róż-nych urządzeń i warunków pracy. Ta sama bowiem aplikacja, która doskonale sprawdza się w przypadku użytkownika posługującego się komputerem stacjonarnym lub notebookiem, może okazać się całkowicie afunkcjonalna i wyjątkowo nieporęczna dla osoby korzystającej na co dzień ze smartphone’a. Co więcej, mając do wyboru dwie aplikacje porównywalne pod względem operacyjnym, funkcjonalnym i cenowym – zawsze (podświadomie) sięgniemy po tę, która lepiej prezentuje się na wyświetlaczu najnowszego tabletu (notebooka, palmtopa...), która – mówiąc potocznie – jest po prostu „przyjemniejsza dla oka”. Od wielu lat na rynku dostępne są zintegrowane środowiska programistyczne (IDE) wspiera-jące proces projektowania, rozwijania i wdrażania aplikacji. Jednym z czołowych dostawców

MECHANIK 7/2013 XVII Międzynarodowa Szkoła Komputerowego Wspomagania Projektowania, Wytwarzania i Eksploatacji

78

kompleksowych rozwiązań dla architektów systemów, grafików-projektantów GUI i progra-mistów front-endów aplikacji jest firma Embarcadero (wcześniej Borland i CodeGear), posia-dająca w swojej ofercie rozwijane od kilkunastu lat, wysoko oceniane w opiniach specjali-stów pakiety C++ Builder i Delphi [6]. Najnowsze wersje tych środowisk (Embarcadero RAD Studio XE3, Embarcadero C++ Builder XE3 i Embarcadero Delphi XE3) wraz z drugą odsło-ną wdrażanej od niedawna, multiplatformowej biblioteki komponentów FireMonkey (ozna-czanej symbolem FM2) wychodzą naprzeciw potrzebom twórców i projektantów oprogramo-wania – także w obszarze budowy interfejsu aplikacji.

2. WYMAGANIA STAWIANE NOWOCZESNYM INTERFEJSOM UŻYTKOWNIKA Należy jednak pamiętać, że żadne zaawansowane środowiska programistyczne ani zintegro-wane z nimi narzędzia wspomagające nie będą w stanie wygenerować funkcjonalnego, przy-jaznego interfejsu aplikacji, jeżeli twórcy oprogramowania popełnią na samym początku pro-cesu projektowego błędy w architekturze GUI lub przyjmą mylne założenia. Aby bowiem owo GUI spełniło oczekiwania i spotkało się z akceptacją użytkowników, należy kierować się pewnymi regułami jego budowy. Nadrzędną w tym przypadku jest zasada użyteczności, czyli wymaganie, by front-end programu – stanowiący platformę komunikacji człowieka z aplika-cją – nie stał się w tej współpracy przeszkodą. Omawiane zasady są precyzyjnie sformułowane w literaturze przedmiotu, znalazły także swo-je odzwierciedlenie w postaci norm międzynarodowych serii ISO 9241 [3]. Do najważniej-szych zalicza się następujące reguły [1-4]:

przejrzystość, intuicyjność i przyjazność Na ogólnie rozumianą przydatność aplikacji składają się nie tylko wykonywane przez nią czynności, lecz równie komfort jej obsługi. W związku z tym wygląd interfejsu typowego oprogramowania, tj. nieprzeznaczonego do zadań specjalistycznych wyko-nywanych przez odpowiednio przeszkolony personel, winien pozostawać w ścisłym (czytelnym intuicyjnie) związku z wypełnianymi zadaniami, zaś oferowane przez nie-go funkcje – udostępniane w sposób niewymagający od użytkownika zaawansowa-nych kwalifikacji. „Przyjazna” konstrukcja GUI oznacza mniej czasu poświęcanego na szkolenie operatorów, jak również mniej wysiłku przy samej obsłudze.

dostępność i konfigurowalność Poszczególne funkcje interfejsu powinny być dostępne w możliwie największym stopniu, należy również przewidzieć przystosowywanie rozmaitych aspektów wyglądu i działania GUI do indywidualnych potrzeb użytkowników, ew. uwzględniać ograni-czenia wzrokowe, słuchowe i motoryczne operatorów (wg potrzeb).

symbolika graficzna i kolory Odpowiedni dobór kolorystyki i symboli może przyczynić się do uwypuklenia po-szczególnych elementów funkcjonalności interfejsu, zwiększając intuicyjność i kom-fort obsługi. Właściwe użycie kolorów pomaga użytkownikom w zrozumieniu i zapa-nowaniu nad złożonością oprogramowania. Projektanci GUI powinni jednakże przyjąć ogólną zasadę, że nie należy stosować nieograniczonej liczby barw, zaś wybrane kolo-ry używać spójnie, zwracając uwagę na związki pomiędzy poszczególnymi barwami. W szczególności różnymi kolorami należy oznaczać zmiany stanu systemu.

MECHANIK 7/2013 XVII Międzynarodowa Szkoła Komputerowego Wspomagania Projektowania, Wytwarzania i Eksploatacji

79

efektywność Rozumiana jako ilość pracy wykonanej przez program w odniesieniu do wysiłku użytkownika.

możliwość odwrotu Możliwość anulowania skutków wykonanej operacji lub wycofania się z błędnie wy-branej opcji ma podczas pracy z oprogramowaniem niejednokrotnie znaczenie klu-czowe.

sprzężenie zwrotne Funkcje obsługi operacji długotrwałych powinny zawierać komunikaty potwierdzają-ce realizację określonych czynności bądź informacje o stopniu ich zaawansowania.

czytelne informacje o błędach Komunikaty informujące o błędach i wyjątkach krytycznych wykonania programu powinny być zrozumiałe i wyrażane w kategoriach, w jakich postrzega działanie apli-kacji operator (a nie twórca oprogramowania).

mobilność Aplikacja powinna mieć możliwość „płynnego” dostosowywania swojego wyglądu do parametrów wyświetlacza – innymi słowy: wygląd interfejsu programu musi zapew-niać użytkownikom jego niezakłóconą obsługę niezależnie od rodzaju urządzenia, na którym jest on uruchamiany (wymóg szczególnie istotny w przypadku aplikacji międzyplatformowych i dostępnych via Internet).

We współczesnym programowaniu aplikacyjnym od pewnego czasu zauważyć można ten-dencję odchodzenia od tradycyjnego sposobu organizacji interfejsu programu (menu główne, paski narzędzi, itd.) na rzecz nowych, lepiej korespondujących z percepcją użytkownika roz-wiązań. W dalszej części opracowania pokrótce omówioną zostaną trzy przykładowe projekty GUI prezentujące nowoczesne podejście do problemu tworzenia front-endu aplikacji. Każdy z zaprezentowanych przykładów można oczywiście wykonać praktycznie przy użyciu kom-ponentów biblioteki VCL i platformy FM2 pakietu Embarcadero RAD Studio XE3. 3. PRZYKŁAD A: KREATOR Oprogramowanie z GUI działającym na zasadzie kreatora postrzegane jest zwykle jako intui-cyjne i przystępne w pierwszym kontakcie. Stąd typowymi przedstawicielami tej grupy apli-kacji są programy instalacyjne, prowadzące użytkownika „krok po kroku” przez proces insta-lacji nowego oprogramowania na dysku komputera. Do zalet kreatorów zaliczyć należy rów-nież: umożliwienie użytkownikowi wprowadzania w przystępny sposób korekt danych i zmian decyzji na każdym etapie pracy z programem, a także nieskomplikowany interfejs – w danej chwili dostępna jest jedynie niewielka część opcji, kolejne zaś udostępniane są opera-torowi w miarę potrzeb.

Wykonanie aplikacji-kreatora w środowisku Embarcadero C++ Builder XE3 sprowadza się w praktyce do kilku prostych czynności:

utworzenia nowego projektu za pomocą polecenia File → New… → VCL Forms Ap-plication (C++ Builder),

ustawienia właściwości BorderStyle i BorderIcons formularza zgodnie z rys. 1,

MECHANIK 7/2013 XVII Międzynarodowa Szkoła Komputerowego Wspomagania Projektowania, Wytwarzania i Eksploatacji

80

ułożenia na formatce kontrolek (w rozpatrywanym przykładzie: komponentu TPage-Control, trzech zakładek TTabSheet i trzech przycisków TButton), nadania im wyma-ganych nazw wyróżniających i parametrów,

ukrycia zakładek TTabSheet komponentu TPageControl poprzez ustawienie ich wła-ściwości TabVisible na false (por. rys. 1).

Rys. 1. Hierarchia kontrolek oraz właściwości komponentów

udostępniane w oknie inspektora obiektów

Po wykonaniu wymienionych czynności należy oprogramować funkcję nawigacji pomiędzy zakładkami, definiując tym samym sposób przełączania między kolejnymi ekranami kreatora. Warto przy tym pamiętać o zapewnieniu co najmniej podstawowej funkcjonalności interfejsu aplikacji, tj. możliwości nieograniczonego powrotu oraz „blokowania” poleceń niedostęp-nych. Przykład realizacji takiego zadania przedstawiono poniżej:

#define NAV_NEXT 1 #define NAV_PREV -1 #define NAV_EXIT 0

void TForm1::Nawigacja(int kierunek) { switch(kierunek) { /* do tyłu o jedną zakładkę... */ case NAV_PREV: { if(PageControl1->ActivePageIndex > 0) { PageControl1->ActivePageIndex--; } break; } /* do przodu o jedną zakładkę... */ case NAV_NEXT: { if(PageControl1->ActivePageIndex < PageControl1->PageCount-1) { PageControl1->ActivePageIndex++; } break; } /* zakończenie pracy programu + obsługa przypadków szczególnych */ case NAV_EXIT: default:

MECHANIK 7/2013 XVII Międzynarodowa Szkoła Komputerowego Wspomagania Projektowania, Wytwarzania i Eksploatacji

81

{ if(Application->MessageBoxW(L"Zamknąć okno kreatora?", L"Potwierdzenie", MB_YESNO | MB_ICONQUESTION) == IDYES) { Application->Terminate(); } break; } } if(PageControl1->ActivePageIndex == PageControl1->PageCount-1) { NextButton->Enabled = false; } else { NextButton->Enabled = true; } if(PageControl1->ActivePageIndex == 0) { PrevButton->Enabled = false; } else { PrevButton->Enabled = true; } }

„Podpięcie” tak zdefiniowanej funkcji pod poszczególne przyciski aplikacji-kreatora nie jest już przedsięwzięciem skomplikowanym:

void __fastcall TForm1::PrevButtonClick(TObject *Sender) { Nawigacja(NAV_PREV); /* do tyłu o jedną zakładkę */ }

void __fastcall TForm1::NextButtonClick(TObject *Sender) { Nawigacja(NAV_NEXT); /* do przodu o jedną zakładkę */ }

void __fastcall TForm1::ExitButtonClick(TObject *Sender) { Nawigacja(NAV_EXIT); /* zakończenie pracy kreatora */ }

Przedstawiony fragment kodu prezentuje podstawowy engine aplikacji-kreatora i może sta-nowić punkt wyjścia do utworzenia własnego, bardziej rozbudowanego projektu. Warto pa-miętać, że w przypadku bardziej zaawansowanych programów struktura nawigacji menu krea-tora będzie nielinearna (por. rys. 2), co należy oczywiście uwzględniać podczas implementa-cji funkcji nawigacji.

Rys. 2. Przykład prostej (linearnej) i złożonej struktury nawigacji menu kreatora

MECHANIK 7/2013 XVII Międzynarodowa Szkoła Komputerowego Wspomagania Projektowania, Wytwarzania i Eksploatacji

82

Przykładowe okno kreatora przedstawiono na rys. 3.

Rys. 3. Aplikacja-kreator w działaniu [1]

4. PRZYKŁAD B: MENU WSTĄŻKOWE Menu wstążkowe (ang. ribbon) po raz pierwszy wprowadzone zostało przez firmę Microsoft w pakiecie biurowym Office w wersji 2007. Ideą „wstążki” było stworzenie funkcjonalnej części interfejsu użytkownika, która umieściłaby wszystkie funkcje oprogramowania w jed-nym miejscu, czyniąc je łatwymi do znalezienia i użytkowania. Ze względu na swoje zalety, m.in. przejrzystość i lepszą organizację pracy poprzez dynamiczne dopasowywanie list pole-ceń do aktualnych czynności wykonywanych w przestrzeni roboczej, rozwiązania typu ribbon coraz częściej pojawiają się w nowych wersjach produktów czołowych producentów opro-gramowania, nie tylko przeznaczonego do pracy biurowej, ale coraz częściej – służącego do realizacji zadań specjalistycznych (vide np. MathWorks MATLAB R2012b, Autodesk Auto-CAD od wersji 2009, Translatica 7).

Rys. 4. Środowisko obliczeniowe MATLAB w wersji R2012b

wyposażono w menu typu ribbon [8]

Rys. 5. Menu wstążkowe programu Autodesk AutoCAD 2013 [5]

MECHANIK 7/2013 XVII Międzynarodowa Szkoła Komputerowego Wspomagania Projektowania, Wytwarzania i Eksploatacji

83

W środowisku Embarcadero RAD Studio XE3 menu wstążkowe budowane są za pomocą komponentów: TRibbon, TRibbonComboBox i TRibbonSpinEdit, należących do biblioteki VCL (w chwili obecnej nie ma możliwości tworzenia menu typu „wstążka” w ramach plat-formy FM2, ale na rynku dostępne są już komponenty ribbon-like, oferowane przez niezależ-nych producentów). Wskazane komponenty współpracują z niewizualną kontrolką TAction-Manager, która odpowiada za organizację struktury i funkcjonalność projektowanego menu. 5. PRZYKŁAD C: METROPOLIS UI Metropolis UI to nowy element środowiska Embarcadero RAD Studio XE3, umożliwiający tworzenie aplikacji z interfejsem zgodnym z wprowadzonym przez Microsoft w systemie operacyjnym Windows 8 (rys. 6). Główną zaletą omawianego interfejsu użytkownika jest zapewnienie wsparcia dla oprogramowania współpracującego z wyświetlaczami dotykowymi urządzeń stacjonarnych i mobilnych (rys. 7). Filozofia działania oraz sposób organizacji pre-destynują Metropolis UI do roli menu wiodącego dla szerokiej gamy urządzeń przenośnych.

Rys. 6. Przykład organizacji interfejsu typu Metropolis [7]

Rys. 7. Metropolis UI dedykowany jest urządzeniom

wykorzystującym w interakcji z użytkownikiem wyświetlacze dotykowe [7]

MECHANIK 7/2013 XVII Międzynarodowa Szkoła Komputerowego Wspomagania Projektowania, Wytwarzania i Eksploatacji

84

W środowisku Embarcadero RAD Studio XE3 interfejs Metropolis IU można budować za-równo w oparciu o komponenty biblioteki VCL, jak i FM2. Co więcej, możliwa jest także migracja istniejących projektów VCL/FM/FM2 do VCL/FM2 Metropolis UI. Standardowo dostępne są trzy podstawowe konfiguracje interfejsu:

Blank Metropolis UI – projekt podstawowy, bez predefiniowanych ustawień,

Grid Metropolis UI – projekt w układzie tablicy elementów przewijanej w poziomie,

Split Pane Metropolis UI – projekt złożony z grup elementów, pól i list przewijanych.

6. PODSUMOWANIE Przedstawione wyżej realizacje interfejsu użytkownika stanowią przykład ewolucji podejścia do projektowania front-endów aplikacji, jaka dokonała się w inżynierii oprogramowania w przeciągu ostatniego dziesięciolecia. Rozwój technologii (w szczególności urządzeń mobil-nych) oraz zmiana sposobu przekazu informacji i prezentacji danych (przy dominującej roli animacji i innych form graficznych) wymuszają nowatorskie podejście do projektowania in-terfejsów aplikacji. Należy dbać o to, by – przy zachowaniu wymagań wyszczególnionych w punkcie 2. – tworzyć GUI ergonomiczne, przyjemne w użytkowaniu, a przede wszystkim – maksymalizujące stosunek wnoszonych nakładów pracy do uzyskiwanych efektów, pamięta-jąc jednocześnie, że to, co jest wygodne, jasne i użyteczne z punktu widzenia twórcy aplika-cji, niekoniecznie musi odpowiadać rzeczywistym potrzebom i wymaganiom odbiorcy doce-lowego. LITERATURA [1] Bużantowicz W.: Projekt systemu obserwacji optycznej z syntetyczną aperturą, praca

dyplomowa, WAT, Warszawa 2008. [2] Hollingworth J. i in.: C++ Builder 5 – vademecum profesjonalisty, Gliwice 2001. [3] ISO/AWI TR 9241-1: Ergonomics of human-system interaction – Part 1: Introduction to

the ISO 9241 series, International Organization for Standardization, 2011. [4] Nielsen J.: Usability 101: Introduction to Usability [w:] www.nngroup.com [5] www.autodesk.com [6] www.embarcadero.com [7] www.kentemplates.com [8] www.mathworks.com