Dziennik ucznia: Różnice pomiędzy wersjami

Z Zasoby CoderDojo
Skocz do: nawigacji, wyszukiwania
(Utworzono nową stronę "Zadanie, które wykonamy w tym ćwiczeniu pozwoli Ci zapoznać się z elementami graficznego interfejsu użytkownika. Mówiąc inaczej ze wszystkimi rodzajami elementów...")
 
m (Zapoznanie z klasą GUI_DemoWorld)
Linia 44: Linia 44:
 
Otwórz klasę klikając na nią dwukrotnie.
 
Otwórz klasę klikając na nią dwukrotnie.
 
[[File:jmk-dziennik_image02.png| center]]
 
[[File:jmk-dziennik_image02.png| center]]
 +
Na początku klasy widać pola, które są kontrolkami. Umieszczono je tutaj, aby mogły być wykorzystane w całej klasie. Zobaczmy jak są inicjowane.
 +
[[File:jmk-dziennik_image23.png| center]]
 +
W konstruktorze, czyli w momencie tworzenia świata, tworzone są obiekty, a ich wartości są przypisane do pól.
 +
[[File:jmk-dziennik_image36.png| center]]
 +
<syntaxhighlight lang="java">
 +
String text = "A TextBox that ...";
 +
txtB = new TextBox(new Point(250, 100), text, new Font("Helvetica", Font.PLAIN, 15));
 +
</syntaxhighlight>
 +
Do pola '''txtB''' zostaje przypisane pole tekstowe, w które można wprowadzić własny tekst.<br />
 +
Następnie za pomocą polecenia
 +
<syntaxhighlight lang="java">
 +
addObject(txtB, 470, 73);
 +
</syntaxhighlight>
 +
pole tekstowe '''txtB''' jest dodawane do świata, aby je wyświetlić. Obiekt ten dodaje się do świata tak samo jak wszystkich aktorów, gdyż właśnie '''TextBox''' jest dzieckiem klasy '''Actor'''.<br />
 +
Jeśli klikasz na przyciski, możesz zauważyć, że wywołują one pewne akcje. Zobaczmy jeszcze jak to jest obsłużone. W metodzie '''act()''' zobaczysz taki oto kawałek kodu:
 +
[[File:jmk-dziennik_image34.png| center]]
 +
W pierwszej instrukcji sprawdzane jest, czy przycisk '''btnClick''' został kliknięty. Jeśli tak, to w następnym kroku sprawdzana jest aktualna akcja.
 +
<syntaxhighlight lang="java">
 +
if (btnAction.getText().equals("Add Counter"))
 +
</syntaxhighlight>
 +
Jeśli akcja ma polegać na dodaniu do licznika, to za pomocą takiej instrukcji w wyświetlanej etykiecie (label), wartość zostaje zwiększona  o 1.
 +
<syntaxhighlight lang="java">
 +
lblCounter.setText("" + (Integer.parseInt(lblCounter.getText()) + 1));
 +
</syntaxhighlight>
 +
{| class="wikitable" border="1"
 +
|'''''Uwaga!''' Projekt GUI_Components warto jest mieć otwarty, aby móc się na nim wzorować. Greenfoot może być uruchomiony w kilku oknach.''
 +
|}
 +
 +
=== Stworzenie świata ===
 +
 +
 +
 +
[[File:jmk-dziennik_image36.png| center]]
 +
<syntaxhighlight lang="java">
 +
</syntaxhighlight>

Wersja z 09:47, 15 wrz 2015

Zadanie, które wykonamy w tym ćwiczeniu pozwoli Ci zapoznać się z elementami graficznego interfejsu użytkownika. Mówiąc inaczej ze wszystkimi rodzajami elementów, których używamy korzystając z różnych aplikacji. Są to m.in. pola tekstowe, listy rozwijane, menu, przyciski.

Pamiętaj! Ćwiczenie, które wykonamy wymaga kontrolek, które nie są dostarczone z podstawową wersją Greenfoot. Należy pobrać wersję dostarczoną przez CoderDojo.

Na przykładzie naszego ulubionego Greenfoot-a przejrzyjmy listę kontrolek, które zapewne znasz z innych aplikacji.
Pole tekstowe

Jmk-dziennik image50.png

Checkbox

Jmk-dziennik image16.png

Lista wyboru

Jmk-dziennik image09.png

Menu górne

Jmk-dziennik image31.png

Menu kontekstowe

Jmk-dziennik image49.png

Suwak

Jmk-dziennik image17.png

Przyciski

Jmk-dziennik image55.png

To jednak tylko część elementów, każdy z nich ma inne właściwości i używa się ich tak, aby użytkownik aplikacji w jak najprostszy sposób mógł z niej korzystać.

Zapoznanie z Greenfoot GUI Components

Greenfoot posiada rozszerzenie stworzone przez Taylora Borna, które pozwala na używanie takich elementów we własnej aplikacji. Taką aplikację stworzymy właśnie w tym ćwiczeniu. Na początek przyjrzyjmy się oferowanym przez Taylora kontrolkom.
Wyszukaj w google frazy “Greenfoot GUI compoenents” lub wejdź na poniższy link [http://www.greenfoot.org/scenarios/7578]. Powinieneś zobaczyć opis rozszerzenia jak na poniższym obrazku.

Jmk-dziennik image00.png

Kliknij Open in Greenfoot. Zostanie pobrany plik o rozszerzeniu gfar, który możesz otworzyć w Greenfoot. Kliknij po prostu dwukrotnie na plik lub przez menu Greenfoot otwórz go wybierając kolejno Scenario -> Open, i wskaż na pobrany plik.
Po otwarciu powinieneś zobaczyć okno Greenfoot takie, jak na obrazku poniżej.

Jmk-dziennik image46.png

Teraz skompilujmy ten program. Uwaga! Ze względu na to, że w Greenfoocie, który otrzymaliście od nas, już dodaliśmy te klasy, pojawią się ostrzeżenia (kilkanaście), jak na poniższym obrazku. Kliknij po prostu przy każdym OK.

Jmk-dziennik image12.png

Po zamknięciu wszystkich wiadomości projekt się skompiluje i Twoim oczom powinno pojawić się okno takie, jak poniżej.

Jmk-dziennik image48.png

Poklikaj w aplikacji, zobacz jak działają poszczególne elementy GUI.
Jak możesz zauważyć, świat nazywa się GUI_DemoWorld. Świat, jak w każdej aplikacji, pozwala na dodawanie aktorów. W tym przypadku to kontrolki są aktorami.
Przeanalizujmy strukturę kontrolek.

  • Wszystkie z nich dziedziczą z klasy GUI_Component, jest to klasa bazowa dla wszystkich kontrolek. Jeśli zajrzysz w jej dokumentację, dowiesz się jakie ma metody i na co pozwalają wszystkie kontrolki. Klasa ta pozwala m.in. na zmianę tła, czcionki, obramowania. Oznacza to, że wszystkie dziedziczące po niej kontrolki mają te metody i możesz ich używać.
  • Następna klasa to WindowComponent. Jest klasą bazową dla wszystkich podstawowych elementów takich jak lista rozwijana (DropDownList), pole tekstowe (TextBox), przycisk (Button), hasło (Password), itd.
  • Kolejna klasa bazowa to Window. Jest to klasa bazowa, z której dziedziczą klasy odpowiedzialne za wyświetlanie wyskakujących okien. Jeśli w przykładowej aplikacji wybierzesz Window Examples i któryś z elementów podmenu, to zobaczysz nowe okno.

Założenie aplikacji i stworzenie świata

Zapoznanie z klasą GUI_DemoWorld

W pierwszej kolejności przed przystąpieniem do stworzenia nowego projektu spójrzmy jak wygląda kod klasy GUI_DemoWorld. Pozwoli to na zapoznanie się z tym, jak autor widział wykorzystanie napisanych przez niego klas.
Otwórz klasę klikając na nią dwukrotnie.

Jmk-dziennik image02.png

Na początku klasy widać pola, które są kontrolkami. Umieszczono je tutaj, aby mogły być wykorzystane w całej klasie. Zobaczmy jak są inicjowane.

Jmk-dziennik image23.png

W konstruktorze, czyli w momencie tworzenia świata, tworzone są obiekty, a ich wartości są przypisane do pól.

Jmk-dziennik image36.png
String text = "A TextBox that ...";
txtB = new TextBox(new Point(250, 100), text, new Font("Helvetica", Font.PLAIN, 15));

Do pola txtB zostaje przypisane pole tekstowe, w które można wprowadzić własny tekst.
Następnie za pomocą polecenia

addObject(txtB, 470, 73);

pole tekstowe txtB jest dodawane do świata, aby je wyświetlić. Obiekt ten dodaje się do świata tak samo jak wszystkich aktorów, gdyż właśnie TextBox jest dzieckiem klasy Actor.
Jeśli klikasz na przyciski, możesz zauważyć, że wywołują one pewne akcje. Zobaczmy jeszcze jak to jest obsłużone. W metodzie act() zobaczysz taki oto kawałek kodu:

Jmk-dziennik image34.png

W pierwszej instrukcji sprawdzane jest, czy przycisk btnClick został kliknięty. Jeśli tak, to w następnym kroku sprawdzana jest aktualna akcja.

if (btnAction.getText().equals("Add Counter"))

Jeśli akcja ma polegać na dodaniu do licznika, to za pomocą takiej instrukcji w wyświetlanej etykiecie (label), wartość zostaje zwiększona o 1.

lblCounter.setText("" + (Integer.parseInt(lblCounter.getText()) + 1));
Uwaga! Projekt GUI_Components warto jest mieć otwarty, aby móc się na nim wzorować. Greenfoot może być uruchomiony w kilku oknach.

Stworzenie świata

Jmk-dziennik image36.png