Laboratorium z informatyki sem. III/ćw.12 Wydział Transportu PW 2018/19

Transkrypt

1 INSTRUKCJA DO ĆWICZENIA 12 PRZYKŁAD APLIKACJI MOBILNEJ W JAVIE METODYKA POSTĘPOWANIA PRZY TWORZENIU MIDLETU Z TRZEMA EKRANAMI EKRAN 1 GUI WYSOKIEGO POZIOMU (KLASA SCREEN) EKRAN2 GUI WYSOKIEGO POZIOMU (KLASA SCREEN) EKRAN 3 GUI NISKIEGO POZIOMU (KLASA CANVAS) I Tworzenie MIDletu w środowisku NetBeans 1. Utwórz nowy projekt typu Mobile Application kategorii Java ME. 2. W kolejnym kroku Name and Location nadaj projektowi nazwę Projekt121 i wybierz folder Z:\ jako miejsce zapisu projektu. Okno Name and Location Okno Default Platform Selection 3. W trzecim kroku tworzenia nowego projektu, w oknie Default Platform Selection, wybierz w okienku dialogowym Emulator Platform: Oracle Java Platform Micro Edition SDK 3.3, następnie sprawdź, czy ustawienia: typ urządzenia, konfiguracji i profili są następujące JavaMEPhone1, CLDC-1.1, MIDP-2.1 jeśli tak, naciśnij przycisk Finish. 4. W okienku Projects poleceniem Refactor Rename zmień nazwę klasy Midlet na TrzyEkrany II Podstawowy szkielet MIDletu opis podstawowych wymagań 1. Nasz wygenerowany program powinien mieć następującą postać (pominięto komentarze): import javax.microedition.lcdui.*; import javax.microedition.midlet.midlet; public class TrzyEkrany extends MIDlet{ public void startapp() { public void pauseapp() { public void destroyapp(boolean unconditional) { Uzasadnienie - deklaracja koniecznych metod Dziedziczenie po klasie MIDlet zobowiązuje nas do zdefiniowania trzech metod, które w klasie MIDlet zostały oznaczone jako abstrakcyjne. Metody abstrakcyjne nie zawierają żadnej treści i zmuszają programistów tworzących klasy pochodne do samodzielnego ich zdefiniowania. Metody abstrakcyjne, o których mowa, to: public void startapp() public void pauseapp() public void destroyapp(boolean unconditional) Są one bezpośrednio związane ze stanem, w jakim znajduje się MIDlet. W momencie uruchamiania aplikacji wywołana zostaje metoda startapp(). Jeśli chcemy zwolnić zaalokowane wcześniej zasoby, możemy użyć metody destroyapp() przed zakończeniem działania aplikacji. Metoda pauseapp() zostaje wywołana w chwili wstrzymania działania aplikacji. Oprócz tych wymaganych metod, potrzebny jest konstruktor klasy, w którym tworzy się elementy interfejsu użytkownika i przygotowuje MIDlet do działania. W konstruktorze zapisujemy operacje, które mają być wykonane jednorazowo. Konstruktor jest wywoływany po uruchomieniu aplikacji przed wywołaniem metody startapp(). 2. Przed metodą startapp() wygeneruj automatycznie konstruktor klasy głównej TrzyEkrany (z menu podręcznego wybierz: Insert Code Constructor... )!!!Uwaga: Wszystkie nowe instrukcje, które należy dodać do istniejącego programu, zaznaczono kolorem niebieskim. Materiały do użytku wewnętrznego. Opracował Zbigniew JANIK 1

2 III Deklaracje dwóch ekranów interfejsu wysokiego poziomu klasy Screen i wybór ekranu początkowego 1. Zadeklaruj istnienie dwóch ekranów Pierwszego -informacyjnego klasy Form, o nazwie form1 Drugiego klasy Form, do wprowadzania danych osobowych, o nazwie form2 public class TrzyEkrany extends MIDlet // lista ekranów Form form1 = new Form("Ekran 1 - Informacyjny"); Form form2 = new Form("Dane studenta"); public TrzyEkrany () { public void startapp() { public void pauseapp() { public void destroyapp(boolean unconditional) { 2. Pod nagłówkiem klasy TrzyEkrany zadeklaruj obiekt klasy Display, który będzie logiczną reprezentacją ekranu: Display display; Obiekt klasy Display jest logiczną reprezentacją ekranu urządzenia mobilnego. Każdy MIDlet ma dedykowany dokładnie jeden taki obiekt i należy pozyskać referencję do niego poprzez wywołanie metody: getdisplay( ), co uczynimy poniżej. 3. W metodzie startapp() wpisz instrukcję przypisującą obiektowi display odpowiednią referencję: display = Display.getDisplay(this); 4. Wyświetlimy na pierwszym ekranie Nazwisko i Imię autora programu. (tu wpiszesz swoje własne imię i nazwisko.) Najłatwiej tego dokonać wpisując w konstruktorze głównej klasy instrukcję, która doda do ekranu tekst Autor: Jan Kowalski: form1.append("autor: Jan Kowalski \n"); 5. Dokonaj formatowania kodu programu. 6. Uruchom program <F6>. Dlaczego nic się nie dzieje? Nic się nie dzieje, ponieważ nie określiliśmy, który ekran ma być wyświetlany na starcie MIDletu. Należy zatem do metody startapp() dodać instrukcję: display.setcurrent(form1); 7. Uruchom program <F6>. 8. Zamknij emulator przyciskiem znajdującym się w prawym górnym narożniku okna. IV Projektowanie drugiego ekranu typu Form (formularz - Dane studenta) Oprogramujemy wygląd ekranu form2 przedstawiony na rysunku po prawej stronie; ekran zawiera następujące obiekty: Komponent TextField z legendą Nazwisko: Komponent TextField z legendą Imię: Komponent TextField z legendą Rok rozpoczęcia studiów: Komponent ChoiceGroup z 2 opcjami i legendą Rodzaj studiów: Komponent Gauge z legendą Procent wykonanych zadań dodatkowych.. 1. W klasie TrzyEkrany, pod nagłówkiem, zadeklaruj pola: TextField nazwisko, rok; ChoiceGroup studia; Gauge procent; 2. Wygląd ekranu form2 zdefiniujmy tworząc i dodając odpowiednie obiekty do ekranu form2 w konstruktorze klasy TrzyEkrany. W konstruktorze klasy TrzyEkrany dopisz następujące instrukcje: form2.append(nazwisko = new TextField("Nazwisko i imię:", "",20,TextField.ANY)); form2.append(rok = new TextField("Rok rozpoczęcia studiów:","",4,textfield.numeric)); form2.append(studia = new ChoiceGroup("Studia:", Choice.EXCLUSIVE, new String[]{"stacjonarne", "niestacjonarne", null)); form2.append(procent = new Gauge("procent wykonanych zadań dodatkowych z Informatyki", true, 100, 0)); Materiały do użytku wewnętrznego. Opracował Zbigniew JANIK 2

3 V Tworzenie listy poleceń W midletach do interakcji z użytkownikiem służą polecenia (Command). Na ekranie znajdują się one nad przyciskami opcji i to właśnie te przyciski wywołują polecenia. Po utworzeniu polecenia trzeba je następnie dodać do odpowiedniego ekranu. Procedura jest następująca: 1. Jeśli chcemy operować komendami (poleceniami) w naszej aplikacji, jedna z naszych klas musi implementować interfejs CommandListener. Zatem dodaj do klasy TrzyEkrany interfejs CommandListener, który pozwoli nam operować komendami obsługującymi przyciski opcji. W tym celu zmień nagłówek klasy TrzyEkrany do postaci: public class TrzyEkrany extends MIDlet implements CommandListener{ 2. Zaimportuj ten interfejs. Określenie obiektu słuchacza zdarzeń, który implementuje interfejs CommandListener wymaga zdefiniowania metody commandaction(); wygeneruj tą metodę automatycznie (Implement all abstract methods) wybierając je z listy po kliknięciu w symbol żarówki przy nagłówku klasy TrzyEkrany. W naszym przypadku metoda commandaction() powinna zostać wygenerowana za metodą destroyapp() i powinna mieć poniższą składnię: public void commandaction(command c, Displayable d) { throw new UnsupportedOperationException("Not supported yet."); Skasuj instrukcję throw wraz z komentarzem wewnątrz metody commandaction(). 3. W publicznej części klasy TrzyEkrany (przed konstruktorem a za listą dotychczas zadeklarowanych pól) zadeklaruj i utwórz odpowiednie polecenia wykorzystując klasę Command: // lista poleceń Command koniec = new Command("Zakończ", Command.EXIT,2); Command drugiekran = new Command("Ekran 2", Command.SCREEN,2); 4. Z pierwszym ekranem zwiążemy komendy: Zakończ zamknięcie aplikacji Ekran 2 przełączenie się na formularz dane osobowe Zatem wystarczy w konstruktorze TrzyEkrany () dopisać instrukcje dodające te polecenia do obiektu form1, jednocześnie musimy dodać metodę pozwalającą zarejestrować CommandListener, który będzie powiadamiany o wszystkich aktywowanych komendach tej formy: public TrzyEkrany() { // konstrukcja wyglądu pierwszego ekranu form1.append("autor: Jan Kowalski\n"); form1.addcommand(koniec ); form1.addcommand(drugiekran); form1.setcommandlistener(this); 5. Uruchom MIDlet. Dlaczego nie działają polecenia? Przyczyną jest brak obsługi zdarzeń w metodzie commandaction(). Musimy zatem rozpoznać wywołaną komendę i aktywny Displayable (ekran), i odpowiednio na nią zareagować. Wykonajmy te czynności. Obsługa komendy koniec w metodzie commandaction() powinna wyglądać następująco: public void commandaction(command c, Displayable d) { if (c == koniec ) { destroyapp(true); notifydestroyed(); Obsługa komendy Ekran 2 w metodzie commandaction() powinna wyglądać następująco: if(c == drugiekran) { display.setcurrent(form2); 6. Uruchom midlet, sprawdź możliwość przejścia z ekranu informacyjnego na formularz dane osobowe. Aby umożliwić posługiwanie się komendami również na ekranie form2, wykonaj następujące czynności: W publicznej części klasy TrzyEkrany zadeklaruj polecenie Command powrót = new Command("Powrót", Command.BACK, 2); W konstruktorze klasy TrzyEkrany dodaj do form2 polecenia Powrót oraz Zakończ form2.addcommand(powrót ); form2.addcommand(koniec ); W konstruktorze klasy TrzyEkrany dodaj nasłuch komend do form2: form2. setcommandlistener(this); Materiały do użytku wewnętrznego. Opracował Zbigniew JANIK 3

4 W metodzie commandaction() oprogramuj polecenie Powrót tak, by powodowało wyświetlenie ekranu form1: if (c== powrót ) { display.setcurrent(form1); 7. Uruchom midlet, sprawdź działanie wszystkich komend na obu ekranach. Wypróbuj wpisywanie danych na ekranie form2. Sprawdź działanie komponentu gauge. Do wpisywania danych na formularzu wykorzystaj klawiaturę wirtualną, wybierając z Menu opcję Qwerty, a następnie Virtual. VI Projektowanie trzeciego ekranu interfejs niskiego poziomu klasy Canvas 1. Aby tworzyć ekrany wyposażone w grafikę należy korzystać z abstrakcyjnej klasy Canvas 2. W klasie TrzyEkrany, np. przed metodą startapp(), zdefiniujemy wewnętrzna klasę EkranG rozszerzającą klasę Canvas. Powinna ona zawierać metodę paint() z instrukcjami tworzenia grafiki: private class EkranG extends Canvas { public EkranG(){ protected void paint(graphics g){ 8. Wygląd naszego ekranu zdefiniujemy w metodzie paint(). Zwróć uwagę na odmienny sposób definicji kolorów. Uzupełnij treść metody paint() następująco: //Malowanie tła g.setcolor(255, 255, 0);//zmiana aktualnego koloru //Namalowanie wypełnionego aktualnym kolorem prostokąta g.fillrect(0, 0, getwidth(), getheight()); g.setcolor(0, 0, 0); //Wyświetlenie napisu w lewym górnym narożniku ekranu g.drawstring("wt PW", 0, 0, Graphics.TOP Graphics.LEFT); g.setcolor(0, 255, 0); //rysowanie trójkątów g.filltriangle(40, getheight(), getwidth() / 2, getheight() / 3, getwidth() - 40, getheight()); g.filltriangle(60, 2*getHeight() / 3, getwidth() / 2, getheight() / 6, getwidth() - 60, 2*getHeight() / 3); g.filltriangle(80, getheight() / 3, getwidth() / 2, 0, getwidth() - 80, getheight() / 3); g.setcolor(255, 0, 0); //rysowanie wycinka tu koła g.fillarc(getwidth() / 2-10, 0, 20, 20, 0, 360); g.setcolor(0, 0, 255); g.drawstring("szczęśliwego NOWEGO ROKU!",getWidth()/2,getHeight(),g.HCENTER g.bottom); 3. W publicznej części klasy TrzyEkrany zadeklaruj i utwórz obiekt klasy EkranG: EkranG ekran3 = new EkranG(); 9. Poniżej istniejących deklaracji komend, dopisz nowe polecenie, które będzie wykorzystane do przejścia na ekran graficzny:: Command grafika = new Command("Grafika", Command.SCREEN, 2); 4. W konstruktorze klasy TrzyEkrany, w poniżej podany sposób, dodaj do form1 polecenie grafika, do ekran3 polecenia powrót i koniec oraz nasłuch komend do ekran3: form1.addcommand(grafika ); ekran3.addcommand(powrót ); ekran3.addcommand(koniec ); ekran3. setcommandlistener(this); 5. W metodzie commandaction() oprogramuj polecenie Grafika tak, by spowodowało wyświetlenie ekranu ekrang: if (c== grafika ) { display.setcurrent(ekran3); 6. Uruchom midlet, sprawdź wygląd wszystkich ekranów i działanie wszystkich komend na wszystkich ekranach. Obróć ekran emulatora telefonu o 90 stopni naciskając przycisk lub naciskając klawisz F9. Sprawdź czy grafika wyświetla się prawidłowo w centralnej części ekranu. Materiały do użytku wewnętrznego. Opracował Zbigniew JANIK 4

5 Tworzenie MIDletu umożliwiającego wykonywanie obliczeń kalkulator 4-działaniowy Otwórz nowy projekt typu Mobile Application o nazwie Projekt122 zapisując go na dysku Z:\ Nadaj MIDletowi nazwę Kalkulator. W odpowiednim miejscu wygeneruj konstruktor klasy głównej Kalkulator(). Do klasy głównej Kalkulator dodaj interfejs CommandListener, który pozwoli operować komendami. Zaimplementuj metodę abstrakcyjną commandaction(). VII Tworzenie GUI wysokiego poziomu - klasa TextField, klasa Form, klasa Alert, klasa ChoiceGroup oraz interfejs ItemCommandListener 1. W części publicznej MIDletu dopisz deklaracje definiujące trzy pola tekstowe TextField, listę wyboru ChoiceGroup, pole StringItem, dwa ekrany - pierwszy typu Form oraz ekran informacyjny typu Alert i dwa polecenia Command, następująco: static final int lznakow=20; TextField arg1 = new TextField(null, "", lznakow, TextField.DECIMAL); TextField arg2 = new TextField(null, "", lznakow, TextField.DECIMAL); TextField wynik = new TextField("Wynik", "", lznakow, TextField.UNEDITABLE); ChoiceGroup operator = new ChoiceGroup("", ChoiceGroup.POPUP, new String[] {"dodawanie", "odejmowanie", "mnożenie", "dzielenie", null); StringItem przycisk = new StringItem("", "oblicz", Item.BUTTON); Form f = new Form("Kalkulator 4-działaniowy"); Alert alert = new Alert("Błąd", "", null, AlertType.ERROR); Command koniec = new Command("Zakończ", Command.EXIT, 2); Command oblicz = new Command("", Command.ITEM, 1); 2. Wewnątrz konstruktora Kalkulator() oprogramuj wygląd głównego ekranu kalkulatora: f.append(arg1); f.append(operator); f.append(arg2); f.append(wynik); f.append(przycisk); f.addcommand(koniec); 3. Dodaj w konstruktorze nasłuch interfejsu commandlistener na ekran f: f.setcommandlistener(this); 4. W metodzie commandaction() samodzielnie oprogramuj polecenie Zakończ. Uzupełnij samodzielnie MIDlet o deklarację obiektu display klasy Display i odpowiednie instrukcje tworzące ten obiekt oraz pozwalające wyświetlić na starcie ekran f. 5. Uruchom program <F6>. Sprawdź czy w pola argumentów TextField można wpisać wartości rzeczywiste oraz czy lista ChoiceGroup pozwala na wybór odpowiedniego działania. 6. Do klasy Kalkulator dodaj interfejs ItemCommandListener (nazwę interfejsu dopisz w nagłówku klasy, oddzielając ją przecinkiem od istniejącego interfejsu CommandListener). Zaimportuj ten interfejs i zaimplementuj jego abstrakcyjną metodę commandaction(). W treści metody wpisz instrukcje, które pobierają z pól typu TextField wartości argumentów w postaci liczb rzeczywistych, a następnie dla wybranego operatora z listy ChoiceGroup wykonają odpowiednie działanie i wyświetlają wynik obliczeń, kontrolując jednocześnie reakcje na ewentualne błędy. public void commandaction(command c, Item item) { if (c == oblicz){ try { String s1 = arg1.getstring(); String s2 = arg2.getstring(); double wyn = 0.0; double n1 = Double.parseDouble(s1); double n2 = Double.parseDouble(s2); switch (operator.getselectedindex()) { case 0: wyn = n1 + n2; break; case 1: wyn = n1 - n2; break; case 2: wyn = n1 * n2; break; case 3: { if (n2!= 0) { wyn = n1 / n2; break; else { alert.setstring("dzielenie PRZEZ ZERO"; throw (new ArithmeticException()); Materiały do użytku wewnętrznego. Opracował Zbigniew JANIK 5

6 String wyn_str = Double.toString(wyn); wynik.setmaxsize(math.max(lznakow, wyn_str.length())); wynik.setstring(wyn_str); catch (NumberFormatException e) { alert.setstring("niepoprawne argumenty"); display.setcurrent(alert); catch (ArithmeticException e) { display.setcurrent(alert); 7. Aby umożliwić reakcję na polecenie oblicz, skojarz je z elementem klasy StringItem, dopisując w konstruktorze klasy Kalkulator następujące instrukcje: przycisk.setdefaultcommand(oblicz); przycisk.setitemcommandlistener(this); 8. Uruchom MIDlet, sprawdź jego działanie. Sprawdź jak program zachowuje się w przypadku niewłaściwych danych lub ich braku. VIII Aktualizacja pola wyniku po zmianie danych Aby po zmianie wartości argumentów lub zmianie wyboru operacji usunąć z pola wynik nieaktualną wartość, wykorzystamy interfejs ItemStateListener, umożliwiający reagowanie na zmiany stanu elementów formularza. 1. Dodaj interfejs ItemStateListener do klasy głównej Kalkulator, zaimportuj ten interfejs i zaimplementuj jego abstrakcyjną metodę itemstatechanged(). 2. W treści metody itemstatechanged() wpisz instrukcje, które kasują zawartość pola tekstowego wynik, jeśli nastąpiła zmiana wartości argumentów lub zmiana wyboru operacji: public void itemstatechanged(item item) { if (item == arg1 item == arg2 item == operator) { wynik.setstring(""); 3. Aby umożliwić reakcję na zmiany stanu elementów formularza, musimy zarejestrować obiekt klasy ItemStateListener w tym formularzu. Zrealizujemy to w konstruktorze klasy Kalkulator za pomocą metody setitemstatelistener(): f.setitemstatelistener(this); 4. Uruchom MIDlet, sprawdź efekt dokonanych zmian. Zadanie do samodzielnego wykonania 1. Zbuduj aplikację mobilną, która narysuje na ekranie graficznym kopertę o wymiarach 120x40 umieszczoną pośrodku ekranu. Wypełnij tło ekranu kolorem jasnoniebieskim oraz tło koperty dowolnie wybranym kolorem. Aby uzyskać odpowiedni kolor, należy określić 3 parametry R, G, B. Linie koperty wyrysuj kolorem czarnym. Punkt przecięcia przekątnych koperty powinien pokrywać się z punktem przecięcia przekątnych ekranu. Poniżej koperty, na ¼ wysokości ekranu umieść swoje nazwisko i imię, wyświetlone kolorem niebieskim wypośrodkowane w poziomie. Zamknięcie aplikacji powinno nastąpić po wybraniu opcji z napisem WYJŚCIE. 2. Zmodyfikuj projekt Projekt12b dodając nowe operacje dwuargumentowe: sumę kwadratów argumentów sumę odwrotności argumentów Dodaj odpowiednie elementy do listy ChoiceGroup oraz rozbuduj instrukcję wyboru switch w metodzie commandaction(). Uwzględnij sprawdzenie poprawności operacji i ewentualne wyświetlanie alertu. Materiały do użytku wewnętrznego. Opracował Zbigniew JANIK 6