INSTRUKCJA DO ĆWICZENIA 11 PIERWSZA APLIKACJA MOBILNA 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ę Projekt11 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
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 osobowe"); 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 osobowe) Oprogramujemy wygląd ekranu form2 przedstawiony na rysunku po prawej stronie; ekran zawiera następujące obiekty: Komponent StringItem z legendą Wypełnij pola: Komponent TextField z legendą Nazwisko: Komponent TextField z legendą Imię: Komponent TextField z legendą Rok urodzenia: Komponent ChoiceGroup z 2 opcjami i legendą Płeć: Komponent Gauge z legendą Procent przyznanej premii 1. W klasie Ekrany, pod nagłówkiem, zadeklaruj pola: TextField nazwisko, imie, rokurodzenia; ChoiceGroup plec; Gauge premia; 2. Wygląd ekranu form2 zdefiniujmy tworząc i dodając odpowiednie obiekty do ekranu form2 w konstruktorze klasy Ekrany. W konstruktorze klasy Ekrany dopisz następujące instrukcje: form2.append(new StringItem("Wypełnij pola:", "")); form2.append(nazwisko = new TextField("Nazwisko:", "", 16, TextField.ANY)); form2.append(imie = new TextField("Imię:", "", 15, TextField.ANY)); form2.append(rokurodzenia = new TextField("Rok urodzenia:", "", 4, TextField.NUMERIC)); form2.append(plec = new ChoiceGroup("Płeć:", Choice.EXCLUSIVE, new String[]{"mężczyzna", "kobieta", null)); form2.append(premia = new Gauge("procent przyznanej premii", true, 100, 0)); Materiały do użytku wewnętrznego. Opracował Zbigniew JANIK 2
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 Ekrany() 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
W metodzie commandaction() oprogramuj polecenie Powrót tak, by spowodował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){ 3. Wygląd naszego ekranu zdefiniujemy w metodzie paint(), zatem uzupełnij jej treść 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()); //Wyświetlenie napisu w lewym górnym narożniku ekranu g.setcolor(0, 0, 0); g.drawstring("wt PW", 0, 0, Graphics.TOP Graphics.LEFT); g.setcolor(0, 255, 0); g.filltriangle(40, getheight(), getwidth() / 2, getheight() / 3, 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); g.fillarc(getwidth() / 2-10, 0, 20, 20, 0, 360); g.setcolor(0, 0, 0); g.drawstring("wesołych ŚWIĄT!", getwidth() / 2, getheight(), g.hcenter g.bottom); 4. W publicznej części klasy TrzyEkrany zadeklaruj i utwórz obiekt klasy EkranG: EkranG ekran3 = new EkranG(); 5. 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); 6. W konstruktorze klasy TrzyEkrany dodaj do form1 polecenie grafika,dodaj do ekran3 polecenia powrót i koniec oraz dodaj nasłuch komend do ekran3: form1.addcommand(grafika ); ekran3.addcommand(powrót ); ekran3.addcommand(koniec ); ekran3. setcommandlistener(this); 7. W metodzie commandaction() oprogramuj polecenie Grafika tak, by spowodowało wyświetlenie ekranu ekrang: if (c== grafika ) { display.setcurrent(ekran3); 8. Uruchom midlet, sprawdź wygląd wszystkich ekranów i działanie wszystkich komend na wszystkich ekranach. Obróć ekran emulatora telefonu o 90 naciskając przycisk lub naciskając klawisz F9. Sprawdź czy grafika wyświetla się prawidłowo w centralnej części ekranu. VII - Rozbudowa aplikacji 1. Dodaj do ekranu informacyjnego taki komponent, który pozwoli dopisać dodatkowe informacje o autorze programu (ok. 200 znaków). Za listą poleceń utwórz obiekt info wykorzystując komponent TextField następująco: TextField info = new TextField("INFO o autorze:","",200,textfield.any);.w konstruktorze TrzyEkrany() dodaj do ekranu form1 obiekt info instrukcją. form1.append(info); Sprawdź działanie MIDletu. Wpisz do pola tekstowego dużymi literami tekst: STUDENT II ROKU WT PW. (W trakcie wprowadzania tekstu, ustaw w Menu odpowiedni typ wprowadzanych znaków). Materiały do użytku wewnętrznego. Opracował Zbigniew JANIK 4
2. Zmodyfikuj konstruktor klasy TrzyEkrany i metodę commandaction() tak, aby możliwe było przełączanie z każdego ekranu na dowolny inny ekran. Za pomocą metody addcommand( ) dodaj do ekranów odpowiednie polecenia. 3. Zmiana kolejności wyświetlanych ekranów. Zmodyfikuj midlet tak, aby na starcie jako pierwszy wyświetlany był ekran graficzny ekrang. Sprawdź działanie aplikacji. VIII Animacja obrazu ekranu graficznego Animację obrazu uzyskamy dzięki obiektom klasy Timer oraz TimerTask pochodzących z pakietu java.util. 1. W części publicznej Midletu zadeklaruj i utwórz obiekt klasy Time o nazwie zegar: Timer zegar = new Timer(); 2. Pod spodem utwórz generator liczb losowych klasy Random oraz zadeklaruj zmienną całkowitą k=255, która będzie oznaczać nasycenie barwy czerwonej w metodzie setcolor(): Random r = new Random(); int k=255; 3. W metodzie paint() klasy EkranG zamień instrukcję g.setcolor(255, 0,0); która ustawia kolor czerwony bombki na g.setcolor(k, 0, 0); 4. W klasie TrzyEkrany utwórz wewnętrzną klasę o nazwie Zmiana, która dziedziczy z klasy TimerTask. (Klasa ta posłuży do zdefiniowania zdarzeń generowanych przez zegar: class Zmiana extends TimerTask { 5. Zaimportuj klasę TimerTask, następnie zaimplementuj abstrakcyjną metodę run() tej klasy, klikając ikonę żarówki po lewej stronie nagłówka klasy. 6. Wewnątrz metody run() umieść instrukcję generującą wartość całkowitą z przedziału [150 255] i odświeżającą grafikę na ekranie graficznym ekrang public void run() { k = 150+r.nextInt(106); ekran3.repaint(); 7. W części publicznej Midletu uwórz obiekt klasy Zmiana: Zmiana zdarzenie = new Zmiana(); 8. W metodzie startapp() Midletu, za pomocą metody schedule() powiąż obiekt zegar z obiektem zdarzenie następująco: zegar.schedule(zdarzenie, 0, 200); Metoda run() obiektu zdarzenie będzie się wykonywała co 200 milisekund, a zegar zostanie uruchomiony po 0 sekundach) 9. Uruchom Midlet i zaobserwuj animację obrazu na ekranie graficznym. 10. Dodaj instrukcje, które spowodują losową zmianę nasycenia koloru zielonego choinki. 11. Rozbuduj metodę paint() tak, by na choince pojawiło się więcej migoczących kolorowych bombek. Zadanie do samodzielnego wykonania 1. Zbuduj aplikację mobilną, która narysuje na ekranie graficznym kopertę o wymiarach 120x40 umieszczoną pośrodku ekranu. 2. 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. 3. Poniżej koperty, na ¼ wysokości ekranu umieść swoje nazwisko i imię, wyświetlone kolorem niebieskim wypośrodkowane w poziomie. 4. Zamknięcie aplikacji powinno nastąpić po wybraniu opcji z napisem WYJŚCIE. Materiały do użytku wewnętrznego. Opracował Zbigniew JANIK 5