Robert Szmurło. Projektowanie Graficznych Interfejsów Użytkownika

Wielkość: px

Rozpocząć pokaz od strony:

Download "Robert Szmurło. Projektowanie Graficznych Interfejsów Użytkownika"

Sławomir Wierzbicki
8 lat temu
Przeglądów:

1 Projektowanie Graficznych Interfejsów Użytkownika Robert Szmurło 1

2 Prototypowanie w Delphi CodeGear from Borland 2

3 Borland Delphi Polityka Borland: Borland ( koncentruje się na rozwiązaniach wytwarzania oprogramowania uzwględniających wszystkie fazy procesu od analizy i projektu do wdrożenia i utrzymania. Utworzenie nowej firmy CodeGear ( której celem jest utrzymanie i rozwój narzędzi programistycznych. Wersje Delphi: Borland Delphi 2006 (2007) for Win32 Profesional, Enteprise Turbo Delphi Profesional Explorer Turbo Delphi for.net Explorer 3

projektu do wdrożenia i utrzymania. Utworzenie nowej firmy CodeGear (http://www.codegear.

4 Turbo Delphi Explorer Projekt wizualny Znacznie ulepszony edytor wizualny. 4

5 Turbo Delphi Explorer Edytor kodu Bardzo podobny do poprzednich wersji Delphi edytor kodu. Również sama struktura kodu Object Pascala nie została znacząco zmieniona. 5

6 Turbo Delphi Explorer Historia zmian Możliwość śledzenia zmian. Czyli wbudowany Version Control System (podobny do Subversion) 6

7 Turbo Delphi Explorer Diagram klas Bardzo prosty diagram klas. (Ale zawsze jest :-) 7

8 Aplikacja z Turbo Delphi Explorera pod Linuxem Symbole dowodzące, że aplikacja jest uruchomiona pod linuxem. Środowisko uruchomieniowe wykorzystuje darmowego Wine'a. W prezentowanym przypadku wersja komercyjna CodeWeavers (ok.50$) 8

Środowisko uruchomieniowe wykorzystuje darmowego Wine'a.

9 Delphi 7.0 Personal Edition 9

10 Możliwe projekty Standardowa aplikacja Aplikacja kompoatybilna z Kylixem (Oparte na Qt) Aplikacja konsolowa, w trybie tekstowym. Szablon komponentu rozszerzającego Delphi. Gotowy szablon serwisu, z kodem rejestrującym. 10

Elementy składowe standardowego projektu Projekt standardowej aplikacji graficznej w Delphi składa się z: Kod programu uruchomieniowego, który jest odpowiedzialny za inicjalizację głównych formularzy

11 Elementy składowe standardowego projektu Projekt standardowej aplikacji graficznej w Delphi składa się z: Kod programu uruchomieniowego, który jest odpowiedzialny za inicjalizację głównych formularzy interfejsu Jednostek (unitów) które mogą zawierać kod tekstowy (same klasy) Które mogą być zbudowane z klasy formularza (Unit1.pas) oraz z części dotyczącej projektu wizualnego (Form1) Dwa osobne tekstowe pliki. Tutaj ukryty jest kod uruchomieniowy programu. 11

(unitów) które mogą zawierać kod tekstowy (same klasy) Które mogą być zbudowane z klasy formularza (Unit1.

12 Kod programu program Project1; uses Forms, Unit1 in 'Unit1.pas' {Form1}; {$R *.RES} begin Application.Initialize; Application.CreateForm(TForm1, Form1); Application.Run; end. 12

13 Podstawowy Kod Formularza Moduł - Nazwa przestrzeni nazw. unit Unit1; Interfejs widoczny dla pozostałych modułów. interface uses Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs; type TForm1 = class(tform) private { Private declarations } public { Public declarations } end; Dołączane moduły Deklaracje typów zdefiniowanych w module var Form1: TForm1; implementation Zmienne globalne dla całej aplikacji. {$R *.DFM} end. Prywatna przestrzeń widoczna wyłącznie dla obiektów modułu. 13

Private declarations } public { Public declarations } end; Dołączane moduły Deklaracje typów zdefiniowanych w module var

14 Podstawy podstaw Object Pascala lub Delphi Pascala 14

15 Historia Object Pascala Object Pascal opracowany przez Apple'a ( ): 15

16 Historia Object Pascala Borland: Turbo Pascal ( ): 16

17 Historia Object Pascala Borland: Delphi Pascal ( ) 17

18 Historia Object Pascala Borland: Delphi Pascal for.net Ciekawe źródło informacji: 18

19 Historia? : Przykład konwersji do.net Moduły mogą posiadać blok begin...end Źródło: 19

20 Brak pliku *.dfm / *.nfm W przypadku WinForms informacje na temat komponentów nie są zawarte w żadnych plikach zewnętrznych. Wszystkie informacje na temat komponentów (właściwości, zdarzenia) są zawarte w kodzie źródłowym, w procedurze InitializeComponent: Umieść teraz na formularzu komponent Panel; zwróć teraz uwagę na zawartość procedury InitializeComponent: Źródło: Delphi/.NET/WinForms 20

Wszystkie informacje na temat komponentów (właściwości, zdarzenia) są zawarte w kodzie źródłowym, w

21 Object Pascal Podstawy podstaw Zmienne (deklarowane przed blokiem) Procedure Foo; var x, y : integer; f : double; begin x := 1; Inc(x); y := 2; (* itd. *) end; Wielkość liter nie jest istotna prostesortowaniemetodąprzesiewaniazograniczeniami ProsteSortowanieMetodąPrzesiewaniaZOgraniczeniami 21

22 Operatory Przypisania Number1 := 5; Porównania if x <> y Then Cokolwiek Operatory logiczne if (warunek1) and (warunek2) Then Cokolwiek While (warunek1) or (warunek2) do Cokolwiek 22

23 Nowe elementy języka dla.net Nowe elementy Object Pascala w wersji dla.net: Pętla for-in Procedury wplatane - inline Klasy zaplombowane (sealed) blokada dziedziecznia Typy zagnieżdżone Metody w rekordach argument metody jest rekordem Opakowywanie typów - (O := System.Object(P);) Metody proste mają dostęp do self, mogą być polimorficzne (bardziej rozbudowane od statycznych) Metody statyczne nie mają dostępu do self Strict private Strict protected Experimental w trakcie kompilacji ostrzeżenie 23

24 Elementy przestarzałe lub usunięte Wskaźniki Kod assemblera Pliki typowane, Pliki tekstowe Absolute Object Automated Dispid Exports Comp Real48, Pchar, BlockRead, BlockWrite GetMem, FreeMem, ReallocMem Lo, Hi, Swap, Addr, Ptr 24

25 Ćwiczenie 1 Okno Logowania Rozmieścić kontrolki: Label, Edit i Button. 25

26 Zdefiniuj nazwy kontrolek Będziemy się za ich pomocą odwoływać z kodu. txtlogin txthaslo cmdcancel cmdok 26

27 Dodaj obsługę przycisków - Metody Dwukrotnie kliknij na przycisku. Napisz zawartość procedur. 27

28 Obsługa zdarzeń w Delphi Delphi automatycznie mapuje komunikaty systemu operacyjnego (wciśniecie myszki) na wybrane procedury obsługi. 28

29 Uruchamiamy program 29

30 Poprawiamy Użyteczność Można zmienić rozmiar, a okno dialogowe lgowania nie powinno umożliwiać takiej funkcji. 30

31 Poprawiamy Użyteczność Pokazuje się w miejscu ekranu gdzie został zaprojektowany, a powinien w środku ekranu. 31

32 Poprawiamy Użyteczność Przycisk OK powinien działać po wciśniećiu ENTER. 32

33 Poprawiamy Użyteczność Przycisk Anuluj powinien być dostępny pod ESC. 33

34 Ćwiczenie 2 Automatyczny Rozmiar Formularz wireframe Panel1 Panel4 Panel2 Panel3 34

35 Widok w Delphi 35

36 Zaczynamy automatyczne skalowanie 36

37 Lewy panel 37

38 Panel wypełniający 38

39 Dodajmy przyciski 39

40 Znowu Źle Co zrobić a by zawsze znajdowały się w prawym dolnym rogu? (Anchros) 40

41 Kotwice - Anchors 41

42 Styl XP Bez stylu XP Z stylem XP 42

43 Menadżer Akcji Action Manager 43

44 Gotowe rozwiązania (jeszcze nie wzorce) 1. Okna modalne i nie modalne jako przykład kontroli przepływu informacji synchroniczny i asynchroniczny. (Delphi) 2. Wykorzystanie zewnętrznych komponentów ActiveX dla uatrakcyjnienia naszej aplikacji. (Delphi) 3. Konstruowanie kreatora z wykorzystaniem dziedziczenia podstawowej funkcjonalności. (Delphi) 44

45 Modalne / Nie Modalne Modalne (przepływ synchroniczny) kontrola wraca do kodu dopiero po zamnięciu okna modalnego. do pozostałych okien programu wstrzymane są komunikaty myszki i klawiatury (ale dochodzą komunikaty zegara!) Nie modalne (przepływ asynchroniczny) kontrola programu wraca natychmiast do następnej linii kodu musimy sprawdzać kiedy użytkownik zamknął okno, aby otrzymać ostateczny stan 45

46 Modalne / Nie Modalne 46

47 Wyświetlanie Danych / Przeglądarka Internetowa Jeżeli nie mamy dostępnego TwebBrowser, musimy zaimportować komponent ActiveX, na następnym slajdzie, 47

48 Importujemy kontrolkę przeglądarki 1 Uruchamiamy import kontrolki Active X. 3 Potwierdzamy wszystkie komunikaty wciskając Yes. 3 4 Po zainstalowaniu kontrolka jest do naszej dyspozycji w zakładce ActiveX 2 Wyszukujemy Microsoft Internet Controls i wciskamy Install. 48

49 Przeglądarka w Akcji 49

50 Przeglądarka Wyjaśnienie Użyliśmy w rzeczywistości kontrolkę ActiveX z silnika Internet Explorera. TWebBrowser w Delphi jest nakładką na tą kontrolkę. Takiej samej techniki używał Netscape dla niektórych wersji swojej przeglądarki (7.x), dopóki nie przeniósł swojego produktu na silnik Firefoxa. Inny przykład, okno startowe aplikacji. To jest komponent przeglądarki, która pokazuje plik html znajdujący się w katalogu aplikacji. 50

51 Kreator instalacji Kreator spełni swoje zadanie o ile instalacja będzie przebiegać krócej niż 2 sekundy :-) W przeciwnym razie należy dodać krok wskazujący postęp. To zadanie dla nas! 51

52 Formularz potomny Zacznijmy od stworzenia formularza potomnego dziedziczącego z klasy TfrmBaseKreator. Wybieramy zakładkę kreator i zaznaczamy frmbasekreator, a następnie OK. W wyniku powstaje formularz identyczny do bazowego. Pozostaje nam go teraz zmodyfikować. 52

53 Projektujemy okno postępu Nazwa formularza: Name = frmkrokpostep Będziemy się do niego odwoływać z poprzedniego kroku. ProgressBar1: TProgressBar Timer1: TTimer (do symulacji) 53

54 Uzupełniamy kod frmkrokpostep Obsługa timera... Inicjalizacja kontrolek po pokazaniu okna postępu. 54

55 Poprawiamy poprzedni krok Poprawiamy metodę obsługującą przycisk Dalej z poprzedniego kroku aby pokazała nasz formularz postępu. I prawie gotowe... (prawie robi różnicę?) Trzeba jeszcze w kilku miejscach dołączyć inne moduły ('unit') 55

56 Interakcja Dziękuję za uwagę. Chcemy być coraz lepsi! Jeżeli coś cię zainteresowało napisz a: Jeżeli coś cię bardzo znudziło napisz a: Jeżeli zauważyłeś błąd napisz a: 56

Podobne dokumenty

PROGRAM: WYSZUKANIE LICZBY MAKSYMALNEJ

PROGRAM: WYSZUKANIE LICZBY MAKSYMALNEJ 1. Na dysku STUDENT we własnym folderze utwórz podfolder o nazwie: WarMax. 2. Uruchom program Delphi. 3. Zapamiętaj w folderze WarMax poszczególne pliki tworzące