Projektowanie Graficznych Interfejsów Użytkownika Robert Szmurło 1
Prototypowanie w Delphi CodeGear from Borland http://www.codegear.com/ 2
Borland Delphi Polityka Borland: Borland (http://www.borland.com/) 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 (http://www.codegear.com/), 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
Turbo Delphi Explorer Projekt wizualny Znacznie ulepszony edytor wizualny. 4
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
Turbo Delphi Explorer Historia zmian Możliwość śledzenia zmian. Czyli wbudowany Version Control System (podobny do Subversion) 6
Turbo Delphi Explorer Diagram klas Bardzo prosty diagram klas. (Ale zawsze jest :-) 7
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
Delphi 7.0 Personal Edition 9
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 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
Kod programu program Project1; uses Forms, Unit1 in 'Unit1.pas' {Form1}; {$R *.RES} begin Application.Initialize; Application.CreateForm(TForm1, Form1); Application.Run; end. 12
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
Podstawy podstaw Object Pascala lub Delphi Pascala 14
Historia Object Pascala Object Pascal opracowany przez Apple'a (1984-1994): 15
Historia Object Pascala Borland: Turbo Pascal (1986-1994): 16
Historia Object Pascala Borland: Delphi Pascal (1994-2004) 17
Historia Object Pascala Borland: Delphi Pascal for.net Ciekawe źródło informacji: http://4programmers.net/delphi/.net/elementy_j%c4%99zyka_delphi 18
Historia? : Przykład konwersji do.net Moduły mogą posiadać blok begin...end Źródło: http://4programmers.net/delphi/.net/elementy_j%c4%99zyka_delphi 19
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: http://4programmers.net/ Delphi/.NET/WinForms 20
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
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
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
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
Ćwiczenie 1 Okno Logowania Rozmieścić kontrolki: Label, Edit i Button. 25
Zdefiniuj nazwy kontrolek Będziemy się za ich pomocą odwoływać z kodu. txtlogin txthaslo cmdcancel cmdok 26
Dodaj obsługę przycisków - Metody Dwukrotnie kliknij na przycisku. Napisz zawartość procedur. 27
Obsługa zdarzeń w Delphi Delphi automatycznie mapuje komunikaty systemu operacyjnego (wciśniecie myszki) na wybrane procedury obsługi. 28
Uruchamiamy program 29
Poprawiamy Użyteczność Można zmienić rozmiar, a okno dialogowe lgowania nie powinno umożliwiać takiej funkcji. 30
Poprawiamy Użyteczność Pokazuje się w miejscu ekranu gdzie został zaprojektowany, a powinien w środku ekranu. 31
Poprawiamy Użyteczność Przycisk OK powinien działać po wciśniećiu ENTER. 32
Poprawiamy Użyteczność Przycisk Anuluj powinien być dostępny pod ESC. 33
Ćwiczenie 2 Automatyczny Rozmiar Formularz wireframe Panel1 Panel4 Panel2 Panel3 34
Widok w Delphi 35
Zaczynamy automatyczne skalowanie 36
Lewy panel 37
Panel wypełniający 38
Dodajmy przyciski 39
Znowu Źle Co zrobić a by zawsze znajdowały się w prawym dolnym rogu? (Anchros) 40
Kotwice - Anchors 41
Styl XP Bez stylu XP Z stylem XP 42
Menadżer Akcji Action Manager 43
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
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
Modalne / Nie Modalne 46
Wyświetlanie Danych / Przeglądarka Internetowa Jeżeli nie mamy dostępnego TwebBrowser, musimy zaimportować komponent ActiveX, na następnym slajdzie, 47
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
Przeglądarka w Akcji 49
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
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
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
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
Uzupełniamy kod frmkrokpostep Obsługa timera... Inicjalizacja kontrolek po pokazaniu okna postępu. 54
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
Interakcja Dziękuję za uwagę. Chcemy być coraz lepsi! Jeżeli coś cię zainteresowało napisz e-maila: robert@iem.pw.edu.pl Jeżeli coś cię bardzo znudziło napisz e-maila: robert@iem.pw.edu.pl Jeżeli zauważyłeś błąd napisz e-maila: robert@iem.pw.edu.pl 56