Tworzenie GUI wysokiego poziomu

Tworzenie GUI wysokiego poziomu Marcin Majak 164000@student.pwr.wroc.pl Politechnika Wrocławska Wydział Elektroniki Studenckie Koło Naukowe Informatyki Systemów Autonomicznych i Adaptacyjnych ISA 2 12 listopada 2009 Marcin Majak Wyskopoziomowe GUI 1/46

Plan prezentacji 1 Wprowadzenie 2 Form 3 Przegląd elementów formularza 4 Wyświetlanie komunikatów 5 Lista 6 Jak zmienić czcionkę? 7 Ticker 8 Dodatkowe 9 Przykłady użycia Marcin Majak Wyskopoziomowe GUI 2/46

Przypomnienie Przypomnijmy jeszcze raz Wyświetlić na ekranie możemy tylko obiekty klas wywiedzionych z klasy Displayable, która dostarcza funkcjonalności dostępnej później we wszystkich jego potomkach. public boolean isshown() public void addcommand(command cmd) public void removecommand(command cmd) public void setcommandlistener(commandlistener l) Display.setCurrent(Displayable nextdisplayable) - ustawienie co ma byc wyswietlane na ekranie Marcin Majak Wyskopoziomowe GUI 4/46

Diagram Dzisiejszego dnia najważniejsza jest dla nas będzie klasa Screen, która pozwala tworzyć GUI wysokiego poziomu, elementy te swój wygląd przystosowują do urządzenia, na którym aplikacja jest uruchamiana(maszyna Javy konkretnego urządzenia odgrywa kluczową rolę). Marcin Majak Wyskopoziomowe GUI 5/46

Bliżej o klasie Screen API klasy Screen wygląda następująco: public Ticker Ticker(); public String gettitle(); public void setticker(ticker ticker); public void settitle(string title); W profilu MIDP 2.0, wszystkie metody przeszły z klasy Screen do klasy Displayable, jest to zgodnie z zasadą źgodności wstecz, aplikacje napisane pod MIDP 1.0 będą działać na urządzeniu o profilu MIDP 2.0. Marcin Majak Wyskopoziomowe GUI 6/46

FORM Studenkie Koło Naukowe ISA 2 Warsztaty programistyczne J2ME 12 listopada 2009 http://www.midlety.net/site/praktyka/highlevelgui1.html Powyższy diagram pokazuje, że wszystkie elementy dziedziczą z klasy abstrakcyjnej Item. Głównym źródłem tworzenia formularzy będzie klasa Form pochodząca z klasy Screen. Poszczególne elementy dokładane do Form wywiedzione są z klasy Item pakietu javax.microedition.lcdui. Marcin Majak Wyskopoziomowe GUI 8/46

Z czego możemy skorzystać I Możemy tworzyć formularze na dwa sposoby: Stworzyć pusty formularz z nagłówkiem i sekwencyjnie dodawać nowe elementy za pomocą funkcji append() 1 public Form(String nazwaformularza); 2 public void append(item element); Przygotować zestaw elementów składających się na nasz formularz i użyć konstruktora 1 public Form(String nazwaformularza, Item[] elementydoformularza); Marcin Majak Wyskopoziomowe GUI 9/46

Jeszcze trochę o formularzu I Inne przydatne metody obsługi formularza: 1 public void delete(int numerelementu); 2 public Item get(int numerelementu); 3 public void insert(int index, Item rodzajelementu); 4 public void set(int index, Item item); 5 public int size(); Pamiętaj W przeciwieństwie do elementów Command elementy Item mogą być dodane tylko do jednego Formularza!!! Marcin Majak Wyskopoziomowe GUI 10/46

Obsługa zdarzeń I Istnieją dwie metody obsługi zdarzeń Dodanie do formularza obiektu klasy Commad i nasłuchiwanie zdarzeń w zarejestrowanym CommandListener Aby modyfikować formularz w zależności od wprowadzonych danych należy zarejestrować ItemStateListener 1 public void setitemstatelistener(itemstatelistener ilistener); 2 // rejestracja listenera 3 public void ItemStateChanged(Item item); 4 // obsluga zdarzen Marcin Majak Wyskopoziomowe GUI 11/46

StringItem I StringItem 1 StringItem(String nazwaelementu, String text); 2 public String gettext(); // pobierz tekst 3 public void settext(string text); // ustaw tekst 1 m_form = new Form(Formularz); 2 Image image; 3 try{ 4 image = Image.createImage(/Ikonka2.png); 5 }catch (java.io.ioexception e){ 6 e.printstacktrace(); 7 image = null; 8 } 9 m_form.append(new StringItem(null, 10 Napis..., Item.PLAIN)); 11 m_form.append(new Spacer(32, 32)); 12 m_form.append(new ImageItem(null, image, 13 ImageItem.LAYOUT_DEFAULT, null)); 14 m_form.setcommandlistener(this); 15 m_form.addcommand(new Command(OK, Command.OK, 0)); 16 Display display = Display.getDisplay(this); 17 display.setcurrent(m_form); Marcin Majak Wyskopoziomowe GUI 13/46

TextField I TextField- konstruktor i metody 1 public TextField(String nazwaelementu, String tekstpoczatkowy, 2 int maxiloscznakow, int ograniczenia); 3 public void setconstraints(int rodzajograniczenia); 4 public void delete(int poczatektekstu, int dlugosc); 5 public int getchars(char[] tablicachar); 6 public String getstring(); 7 public void insert(char[] data, int poczatektekstu, int dlugosc, 8 int gdzie); 9 public void insert(string tekst, int gdzie); 10 public void setchars(char[] data, int poczatektekstu, int dlugosc); 11 public void setstring(string text); Marcin Majak Wyskopoziomowe GUI 14/46

Wyjaśnienie oznaczeń I 1 Form.append(new TextField( 2 URL, 3 http://www.google.pl/, 4 256, 5 TextField.URL)); Rodzaje ograniczeń Constrains : TextField.ANY każdy tekst TextField.EMAILADDR adres e-mail TextField.NUMERIC tylko liczby TextField.PASSWORD hasło TextField.PHONENUMBER możliwość wprowadzenia numeru TextField.URL adres internetowy Marcin Majak Wyskopoziomowe GUI 15/46

ChoiceGroup I ChoiceGroup umożliwa wybór jednej lub kilki opcji 1 public ChoiceGroup(String nazwaelementu, int rodzaj); 2 public ChoiceGroup(String label, int rodzaj, 3 String[] nazwywyborow, Image[] ikony); 4 int append(string nazwawyboru, Image ikona); 5 public int size(); 6 public boolean isselected(int index); 7 public int getselectedindex(); 8 public int getselectedflags(boolean[] flags); 9 public void insert(int index, String string, Image image); 10 public void set(int index, String string, Image image); 11 public void delete(int index); Marcin Majak Wyskopoziomowe GUI 16/46

Rodzaje ChoiceGroup Choice.EXLUSIVE możliwy tylko pojedynczy wybór Choice.MULTIPLE możesz wybrać kilka opcji Choice.POPUP po wciśnięciu rozwija się menu Marcin Majak Wyskopoziomowe GUI 17/46

DateField I DateField występuje w 3 rodzajach DateField.DATE, DateField.TIME, DateField.DATE TIME. 1 DateField(String nazwa, int rodzajdzialania, 2 TimeZone strefa czasowa); 3 DateField(String nazwa, int rodzajdzialania); 4 public void setdate(date data); 5 public Date getdate(); 6 public void setinputmode(int rodzajdzialania); 7 public int getinputmode(); Marcin Majak Wyskopoziomowe GUI 18/46

Gauge I Studenkie Koło Naukowe ISA 2 Warsztaty programistyczne J2ME 12 listopada 2009 Gauge suwak do wybierania wartości liczbowej 1 Gauge(String nazwa, boolean czymozliwazmiana, 2 int maxwartosc, int poczatkowawartosc); 3 public int getmaxvalue(); 4 public int getvalue(); 5 public void setvalue(int wartosc); 6 public vois setmaxvalue(int wartosc); Marcin Majak Wyskopoziomowe GUI 19/46

Rodzaje odliczania w Gauge I Dla nieiteraktywnych Gauge rodzaj pola maxwartosc można ustawić: CONTINUOUS IDLE, CONTINUOUS RUNNING, INCREMENTAL IDLE, INCREMENTAL UPDATING 1 m_form.append(new Gauge( 2 Głośność, // label 3 true, // interactive 4 9, // maxvalue 5 5)); // initialvalue Marcin Majak Wyskopoziomowe GUI 20/46

TextBox I TextBox obiekt podobny do omówionego wcześniej TextField 1 public TextBox(String nazwa, String textpoczatkowy, 2 int maxliczbaznakow, int ograniczenia); 1 TextBox m_textbox; 2 protected void startapp() throws MIDletStateChangeException{ 3 m_textbox = new TextBox(Login,, 32, 0); 4 m_textbox.setcommandlistener(this); 5 m_textbox.addcommand(new Command(OK, Command.OK, 0)); 6 Display display = Display.getDisplay(this); 7 display.setcurrent(m_textbox); 8 9 public void commandaction(command c, Displayable d){ 10 if (c.getcommandtype() == Command.OK) 11 GoFurther(m_TextBox.getString()); 12 } Marcin Majak Wyskopoziomowe GUI 21/46

Alert I Studenkie Koło Naukowe ISA 2 Warsztaty programistyczne J2ME 12 listopada 2009 Alert służy do wyświetlania prostych komunikatów na ekranie urządzenia. 1 public void setcurrent(displayable alertdowysietlenia); 2 public void setcurrent(alert alert, Displayable nastepnyekran); 3 public Alert(String nazwa); 4 public Alert(String nazwa, String alerttext,image alertimage, 5 AlertType rodzajalarmu); 6 public int getdefaulttimeout(); 7 public void setdefaulttimeout(int wartosc); Marcin Majak Wyskopoziomowe GUI 23/46

Rodzaje alertów Rodzaje alarmów: AlerType.ALARM AlerType.CONFIRMATION AlerType.ERROR AlerType.INFO AlerType.WARNING Marcin Majak Wyskopoziomowe GUI 24/46

Przykłady list I Podobieństwo do ChoiceGroup Obiekt typu List jest bardzo podobny do omówionego wcześniej ChoiceGroup. List wywiedziony jest z klasy Screen, tak więc zajmuje cały ekran. Można do niego dołączać własne komendy, ale trzeba pamiętać, że nie można dołączyć do niego ItemStateListener (bo nie wywodzi sie z klasy Item). 1 public List(String nazwa, int rodzajlisty); 2 public List(String nazwa, int rodzajlisty, String[] opcje, Image[] images); Marcin Majak Wyskopoziomowe GUI 26/46

Rodzaje list Rodzaje list(podobne jak w ChoiceGroup): List.IMPLICIT wybór jednej opcji(zwykła lista) List.EXCLUSIVE wybór jedengo elementu(radiobuttons) List.MULTIPLE wybór kilku opcji Marcin Majak Wyskopoziomowe GUI 27/46

Czcionki I Zmiana czcionki Aby zmienić czcionkę w naszej aplikacji należy skorzystać z obiektu typu FONT 1 Font font=font.getfont(face,style.size); 2 m_list = new List(Lista, Choice.IMPLICIT); 3 m_list.append(opcja 1, null); 4 m_list.append(opcja 2, null); 5 m_list.append(opcja 3, null); 6 m_list.setfont(0, fon 7 t); 8 m_list.setfont(1, font); 9 m_list.setfont(2, font); Marcin Majak Wyskopoziomowe GUI 29/46

Opcje zmiany czcionki Rodzaje face: Font.FACE SYSTEM Font.FACE MONOSPACE Font.FACE PROPORTIONAL Rodzaje style: Font.STYLE BOLD Font.STYLE ITALIC Font.STYLE PLAIN Font.STYLE UNDERLINED Rodzaje size: Font.SIZE SMALL Font.SIZE MEDIUM Font.SIZE LARGE Pamiętaj, że... Pamiętaj, że nie zawsze uzyskasz pożądane czcionki!!! Marcin Majak Wyskopoziomowe GUI 30/46

Ticker I Studenkie Koło Naukowe ISA 2 Warsztaty programistyczne J2ME 12 listopada 2009 Ticker Tekst przelatujący u góry ekranu, dostępny na dowolnym ekranie za pomocą metody setticker z klasy Displayable. Przykład wykorzystania 1 Alert alert = new Alert(Loading, 2 Trwa ładowanie gry, proszę czekać..., 3 null, 4 AlertType.INFO); 5 alert.settimeout(alert.forever); 6 Ticker ticker = new Ticker(REKLAMA!!!); 7 alert.setticker(ticker); Marcin Majak Wyskopoziomowe GUI 32/46

Bonusy I Jeśli chcemy wywołać wibrację w telefonie, wystarczy wpisać: Display display = Display.getDisplay(this); display.vibrate(200); Wywołanie jest asynchroniczne i nie blokuje telefonu. Marcin Majak Wyskopoziomowe GUI 34/46

Pamięć I Runtime rt = Runtime.getRuntime(); rt.totalmemory(); rt.freememory(); Marcin Majak Wyskopoziomowe GUI 35/46

Wyświetlacz I Display d = Display.getDisplay(this); d.iscolor(); d.numcolors(); d.numalphalevels(); Marcin Majak Wyskopoziomowe GUI 36/46

Canvas I c.getwidth(); c.getheight(); c.isdoublebuffered(); c.haspointerevents(); c.haspointermotionevents(); c.hasrepeatevents(); Marcin Majak Wyskopoziomowe GUI 37/46

Gauge i Timer I 1 Gauge m_gauge; 2 java.util.timer m_timer; 3 protected void startapp() 4 throws MIDletStateChangeException 5 { 6 Alert alert = new Alert( 7 Loading, 8 Trwa ładowanie gry..., } 9 null, 10 AlertType.INFO); 11 alert.settimeout(alert.forever); 12 m_gauge = new Gauge(null, false, 9, 0); 13 alert.setindicator(m_gauge); 14 Display display = Display.getDisplay(this); 15 display.setcurrent(alert); 16 m_timer = new java.util.timer(); 17 m_timer.schedule(new MyTask(), 500, 500); 18 } Marcin Majak Wyskopoziomowe GUI 39/46

Gauge i Timer II 1 private class MyTask extends 2 java.util.timertask 3 { 4 public void run() 5 { 6 m_gauge.setvalue( 7 m_gauge.getvalue() + 1); 8 } Marcin Majak Wyskopoziomowe GUI 40/46

Gauge i Timer III Marcin Majak Wyskopoziomowe GUI 41/46

Prosty formularz I 1 m_form = new Form(Formularz); 2 Item item; 3 item = new StringItem(Twoje dane, Tu wpisz swojene, 0); 4 item.setlayout(item.layout_2 5 Item.LAYOUT_NEWLINE_AFTER); 6 m_form.append(item); 7 item = new TextField(Imię, Twoje imię, 32, 0); 8 item.setlayout(item.layout_2 9 Item.LAYOUT_NEWLINE_AFTER); 10 m_form.append(item); 11 item = new TextField(Nazwisko, Twoje nazwisko, 32, 0); 12 item.setlayout(item.layout_2 13 Item.LAYOUT_NEWLINE_AFTER); 14 m_form.append(item); 15 m_form.setcommandlistener(this); 16 m_form.addcommand(new Command(OK, Command.OK, 0)); 17 Display display = Display.getDisplay(this); 18 display.setcurrent(m_form); Marcin Majak Wyskopoziomowe GUI 42/46

Alert prawie jak Windows Message Box I 1 // Utworz ekran komunikatu 2 Alert alert = new Alert( 3 Błąd, // title 4 Nie można otworzyć pliku., // alerttext 5 null, // alertimage 6 AlertType.ERROR); // alerttype 7 // Pobierz uchwyt wyswietlacza 8 Display display = Display.getDisplay(this); 9 // Pokaz komunikat na wyswietlaczu 10 display.setcurrent(alert); Marcin Majak Wyskopoziomowe GUI 43/46

Pytania Studenkie Koło Naukowe ISA 2 Warsztaty programistyczne J2ME 12 listopada 2009? Marcin Majak Wyskopoziomowe GUI 44/46

Kolejne spotkanie Temat: Wprowadzenie do Ray casting u w j2me Prowadzenie: Marcin Majak Data: 19.11.2009, godzina: 17.00 Gdzie: sala 23 C-3 Marcin Majak Wyskopoziomowe GUI 45/46

Więcej informacji Kontakt z autorem: 164000@student.pwr.wroc.pl Strona koła naukowego ISA 2 http://autonom.ict.pwr.wroc.pl/ Strona warsztatów: http://autonom.ict.pwr.wroc.pl/ mstachniuk Adres tego dokumentu: http://autonom.ict.pwr.wroc.pl/ mstachniuk/files/warsztaty2009/04-highlevel-2009.11.12.pdf MID Profile - dokumentacja Javadoc http://java.sun.com/javame/reference/apis/jsr118/ Creating 2D Action Games with the Game API http://developers.sun.com/mobility/midp/articles/game/ Getting Started With the MIDP 2.0 Game API http://developers.sun.com/mobility/midp/articles/gameapi/ GameCanvas - czyli dalej rysujemy po ekranie http://4programmers.net/java/j2me/gamecanvas - czyli dalej rysujemy po ekranie NetBeans http://www.netbeans.org/ Marcin Majak Wyskopoziomowe GUI 46/46