Przykład zastosowania komponentu DrawGrid

Komponent DrawGrid budową przypomina tabelkę StringGrid, różnica polega na możliwości pokrywania tabelki DrawGrid bitmapami 16x16, stanowiącymi zewnętrzną otoczkę tabeli.

Ćwiczenie3.7

Zadanie aplikacji

Utworzenie pomocy do nauki angielskich słówek. Aplikacja wyświetla w tabelce DrawGrid rysunki: książka, pędzel, strzałka, drzwi itp.

Po kliknięciu komórki z odpowiednim rysunkiem mamy możliwość wpisania słowa -angielskiej nazwy przedstawianego obrazka. Dwukrotne kliknięcie myszą komórki w fazie edycji powoduje wyświetlenie komunikatu Dobrze, jeśli pisownia się zgadza lub Źle, jeśli jest inaczej. Jeśli klikniemy prawym przyciskiem myszy obrazek w komórce, wyświetla się poprawna pisownia słowa.

Nowe umiejętności

Korzystanie z komponentu DrawGrid. Procedury-zdarzenia związane z myszą.

Rysunek 1 - Tabelka DrawGrid z oknem komunikatu

1. Na formularzu umieść komponenty: ImageList z karty Win32 i DrawGrid z karty Additional.

2. Wyselekcjonuj ImageList i przejdź poprzez menu podręczne (prawy przycisk myszy) do ImageList Editor. Utwórz listę obrazków, które chcesz umieścić w słowniku (kliknij przycisk Add, a następnie po wybraniu obrazka przycisk Otwórz).

3. Dodaj do deklaracji typów (przed słowem var w części Interface):

str20=String [20];

4. Dodaj do deklaracji zmiennych globalnych (po słowie var przed słowem Implementation) zmienne:

wartość: str20; //zmienna globalna do przenoszenia wpisanego słowa między procedurami

nr:Integer; //do przeniesienia numeru komórki wpisywanego słowa

oraz tablicę stałych: zawierającą angielskie nazwy przygotowanych rysunków. Przykład deklaracji tablicy stałych:

const nazwy: array[0..7] of str20 = ('book', 'drawer', 'calculator1, 'door', 'brush', 'books', 'palm', 'letter');

5. . Dla komponentu DrawGrid ustaw właściwości:

Align Al Client //tabela zajmuje cala powierzchnię formularza

F1xedColls 0 //cała tabela jest dostępna do edycji, brak kolumn zamrożonych

F1xedRows 0

ColCount 20 //liczba kolumn w tabeli

RowCount 20 //liczba wierszy w tabeli

ScrollBars ssNone //aby można było jednoznacznie określić położenie kursora myszy, paski przewijania są niewidoczne

6. Rozwiń właściwość Options i ustaw:

goEditing True

7. Dla zdarzenia OnDrawCell (pokrywanie komórek obrazkami) komponentu DrawGrid wpisz procedurę:

procedure TForm1.DrawGrid1DrawCell(Sender:TObject; Col, Row: Longint; Rect: TRect; State: TGridDrawState);

var index: Integer;

begin

index :=Row * DrawGrid1.ColCount + Col;

with Sender as TDrawGrid do //rzutowanie parametru na typ komponentu

begin

//umieszczanie obrazka o odpowiednim indeksie na obszarze DrawGrid

ImageList1.Draw(Canvas,Rect.Left,Rect.Top,index);

//jeśli kursor jest w polu

if gdFocused in State then

Canvas.DrawFocusRect(Rect);

end;

end;

8. Dla zdarzenia OnSetEditText komponentu DrawGrid wpisz procedurę:

procedure TForm1.DrawGrid1SetEditText (Sender: TObject; ACol, ARow: Integer; const Value: String);

begin

wartość: =Value; //zaktualizowanie wpisanej ostatnio wartości

end;

9. Dla zdarzenia OnDblCIick komponentu DrawGrid wpisz procedurę:

procedure TForml.DrawGrid1DblClick (Sender: TObject);

begin

//LowerCase to funkcja, która zamienia duże litery w łańcuchu na małe. Ten sposób sprawdzania zapewnia możliwość identyfikacji napisu bez względu na wielkość liter

If LowerCase(wartosc)=nazwy[nr] then

ShowMessage('Dobrze')

else

ShowMessage( 'Źle');

end;

10. Dla zdarzenia OnClick komponentu DrawGrid wpisz procedurę:

procedure TForm1.DrawGrid1MouseDown (Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);

var ilex, iley: Integer;

begin

with DrawGrid1 do

begin

ilex:=x div DefaultColWidth; '

iley:=y div DefaultRowHeight;

nr:= iley*RowCount+ilex

end;

if Button=mbRight then ShowMessage(nazwy[nr]);

end;

11. Uruchom aplikację i sprawdź jej działanie.

2

---