Lista zadań

Z Zasoby CoderDojo
Wersja KamilO (dyskusja | edycje) z dnia 05:56, 10 wrz 2015

(różn.) ← poprzednia wersja | przejdź do aktualnej wersji (różn.) | następna wersja → (różn.)
Skocz do: nawigacji, wyszukiwania

W tym projekcie stworzymy aplikację wyświetlającą zadania do wykonania oraz dodamy możliwość dodawania nowych zadań. Utworzymy klasę, która będzie przechowywać zadania wraz z datą. Dodamy kontrolki, które wyświetlą zadanie oraz przyciski, które pozwolą nam na poruszanie się po liście zadań. Stworzymy nowe okno, w którym zapytamy o zadanie. Dodamy także walidację na polu daty.
Umiejętności, które są potrzebne do wykonania tego ćwiczenia to:

  1. znajomość środowiska Greenfoot
  2. znajomość Javy na poziomie tworzenia klas, tworzenia obiektów, pętli oraz instrukcji warunkowych if, wiedza czym jest metoda, pole i zmienna lokalna
  3. umiejętność posługiwania się dokumentacją w Greenfoot
  4. podstawowa znajomość elementów interfejsu użytkownika (GUI), czym jest pole tekstowe, etykieta, okno dialogowe, przycisk

Zaczynajmy!

Wstęp

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.
Na przykładzie naszego ulubionego Greenfoot-a przejrzyjmy listę kontrolek, które zapewne znasz z innych aplikacji.
Pole tekstowe

Jmk-zadania image136.png

Checkbox

Jmk-zadania image78.png

Lista wyboru

Jmk-zadania image02.png

Menu górne

Jmk-zadania image41.png

Menu kontekstowe

Jmk-zadania image109.png

Suwak

Jmk-zadania image15.png

Przyciski

Jmk-zadania image47.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 [[1]]. Powinieneś zobaczyć opis rozszerzenia jak na poniższym obrazku.

Jmk-zadania image58.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-zadania image101.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-zadania image16.png

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

Jmk-zadania image44.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.

  1. 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ć.
  2. 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.
  3. 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.

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. Podczas przeglądania kodu zwróć szczególną uwagę na elementu ekranu (przyciski, etykiety), jak nazywają się poszczególne klasy i jakie metody posiadają.
Otwórz klasę klikając na nią dwukrotnie.

Jmk-zadania image144.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-zadania image09.png

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

Jmk-zadania image74.png

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

Jmk-zadania image139.png

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-zadania image121.png

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

Jmk-zadania image114.png

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. Wartość tutaj jest pobierana z pola tekstowego o nazwie lblCounter za pomocą metody getText. Następnie za pomocą wywołania metody z klasy Integer.parseInt napis zostanie zamieniony na liczbę. Dopiero teraz zadziała dodawanie.

Jmk-zadania image30.png
Uwaga! Projekt GUI_Components warto jest mieć otwarty, aby móc się na nim wzorować. Greenfoot może być uruchomiony w kilku oknach.

Założenie projektu

W pierwszym kroku załóżmy nowy projekt w Greenfoot. Pamiętaj, aby użyć Greenfoota dostarczonego przez nas.
Wybierz z menu Scenario -> New i załóż projekt, nazwij go Zadania. Pojawi się okno jak poniżej.

Jmk-zadania image31.png

Stworzenie świata

W tym kroku utwórzmy klasę świata. Na niej będziemy pokazywać odpowiednie kontrolki. Kliknij PPM na klasie World i wybierz New subclass. W nowym oknie wpisz nazwę klasy ListaZadan.

Jmk-zadania image140.png

Skompiluj projekt. Powinieneś zobaczyć czysty ekran.

Jmk-zadania image81.png

Otwórz do edycji tę nowo utworzoną klasę. Dodamy do niej etykiety i pola tekstowe, na których później wyświetlimy zadania.
Zastanówmy się, co jest potrzebne aby pokazać zadanie. Jakie elementy interfejsu użytkownika mogą być nam potrzebne?
Potrzebne będzie nam na pewno pole tekstowe do wyświetlania daty i opisu zadania. Warto dodać też etykiety, które te pola nazwą, tak aby od razu było jasne które odpowiada za wyświetlanie jakiej informacji.
Przejdźmy do klasy i stwórzmy te elementy. Najpierw dodajmy etykietę (Label) i TextBox z opisem zadania. Opis może być duży, więc zróbmy trochę większe pole tekstowe.
Dodaj pole opisBox pod definicją klasy ListaZadan. Będziemy mogli z niego korzystać we wszystkich metodach danej klasy.

Jmk-zadania image38.png

Teraz stwórzmy nową metodę w tej klasie, która doda nam etykietę i zainicjuje pole tekstowe. Nowa metoda pozwoli nam lepiej zorganizować kod, zrobić go bardziej czytelnym. Warto aby klasa składała się z małych metod, które są czytelne i posiadają czytelne nazwy. Naszą metodę nazwijmy inicujPodgladZadania. Wykorzystamy tutaj klasę Point z pakietu java.awt. Z tego względu na górze pliku ListaZadan.java musimy dodać odpowiedni import. Pamiętaj o pozostawieniu starego importu, będzie on nam cały czas potrzebny, gdyż używamy między innymi klasy World, która pochodzi z pakietu greenfoot. Klasa Point jest szeroko wykorzystywana w tym scenariuszu. Z założenia miała określać punkt na osi współrzędnych, jednak w tym wypadku będzie oznaczać wielkość obiektu. Konstruktor przyjmuje dwie wartości, pierwsza to szerokość, druga to wysokość. new TextBox(new Point(160, 60) - będzie oznaczać, że ma zostać stworzone pole tekstowe o rozmiarze 160 pikseli na 60 pikseli

Jmk-zadania image113.png

W metodzie stwórz etykietę, za pomocą konstruktora Label(trescOpisu). Następnie stwórz pole tekstowe za pomocą konstruktora TextBox(rozmiar, tekst). Za pomocą setReadOnly możesz ustawić, żeby pole było tylko do odczytu. Następnie wywołaj metodę addObject(element, x, y), która doda obiekt na świat w punkcie (x,y). Obiekt będzie miał rozmiar zgodny z tym co jest podane w konstruktorze za pomocą obiektu klasy Point.




Jmk-zadania image101.png