03 Tworzenie GUI wysokiego poziomu w j2me

Studenkie Koło Naukowe ISA2 Warsztaty programistyczne J2ME 12 listopada 2009

Tworzenie GUI wysokiego poziomu

Marcin [email protected]

Politechnika WrocławskaWydział Elektroniki

Studenckie Koło Naukowe Informatyki Systemów Autonomicznychi Adaptacyjnych ISA2

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



Plan prezentacji

1 Wprowadzenie

2 Form



5 Lista


7 Ticker

8 Dodatkowe




Przypomnienie

Przypomnijmy jeszcze raz

Wyświetlić na ekranie możemy tylko obiekty klas wywiedzionych zklasy Displayable, która dostarcza funkcjonalności dostępnejpóź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 mabyc wyswietlane na ekranie



Diagram

Dzisiejszego dnia najważniejsza jest dla nas będzie klasa Screen,która pozwala tworzyć GUI wysokiego poziomu, elementy te swójwygląd przystosowują do urządzenia, na którym aplikacja jesturuchamiana(maszyna Javy konkretnego urządzenia odgrywakluczową rolę).



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 doklasy Displayable, jest to zgodnie z zasadą źgodności wstecz”,aplikacje napisane pod MIDP 1.0 będą działać na urządzeniu oprofilu MIDP 2.0.



Plan prezentacji

1 Wprowadzenie

2 Form



5 Lista


7 Ticker

8 Dodatkowe




FORM

http://www.midlety.net/site/praktyka/HighLevelGUI1.html

Powyższy diagram pokazuje, że wszystkie elementy dziedziczą zklasy abstrakcyjnej Item. Głównym źródłem tworzenia formularzybędzie klasa Form pochodząca z klasy Screen. Poszczególneelementy dokładane do Form wywiedzione są z klasy Item pakietujavax.microedition.lcdui.



Z czego możemy skorzystać I

Możemy tworzyć formularze na dwa sposoby:

Stworzyć pusty formularz z nagłówkiem i sekwencyjniedodawać 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 naszformularz i użyć konstruktora

1 public Form(String nazwaFormularza, Item[] elementyDoFormularza);



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!!!



Obsługa zdarzeń I

Istnieją dwie metody obsługi zdarzeń

Dodanie do formularza obiektu klasy Commad inasłuchiwanie zdarzeń w zarejestrowanym CommandListener

Aby modyfikować formularz w zależności od wprowadzonychdanych należy zarejestrować ItemStateListener

1 public void setItemStateListener(ItemStateListener iListener);2 // rejestracja listenera3 public void ItemStateChanged(Item item);4 // obsluga zdarzen



Plan prezentacji

1 Wprowadzenie

2 Form



5 Lista


7 Ticker

8 Dodatkowe




StringItem I

StringItem

1 StringItem(String nazwaElementu, String text);2 public String getText(); // pobierz tekst3 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);



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);



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



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);



Rodzaje ChoiceGroup

Choice.EXLUSIVE możliwytylko pojedynczy wybórChoice.MULTIPLE możeszwybrać kilka opcjiChoice.POPUP powciśnięciu rozwija się menu



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();



Gauge I

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);



Rodzaje odliczania w Gauge I

Dla nieiteraktywnych Gauge rodzaj pola maxWartosc możnaustawić:

CONTINUOUS IDLE,

CONTINUOUS RUNNING,

INCREMENTAL IDLE,

INCREMENTAL UPDATING

1 m_Form.append(new Gauge(2 Głośność, // label3 true, // interactive4 9, // maxValue5 5)); // initialValue



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);89 public void commandAction(Command c, Displayable d){

10 if (c.getCommandType() == Command.OK)11 GoFurther(m_TextBox.getString());12 }



Plan prezentacji

1 Wprowadzenie

2 Form



5 Lista


7 Ticker

8 Dodatkowe




Alert I

Alert służy do wyświetlania prostych komunikatów na ekranieurzą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);



Rodzaje alertów

Rodzaje alarmów:

AlerType.ALARM

AlerType.CONFIRMATION

AlerType.ERROR

AlerType.INFO

AlerType.WARNING



Plan prezentacji

1 Wprowadzenie

2 Form



5 Lista


7 Ticker

8 Dodatkowe




Przykłady list I

Podobieństwo do ChoiceGroup

Obiekt typu List jest bardzo podobny do omówionego wcześniejChoiceGroup. List wywiedziony jest z klasy Screen, tak więczajmuje cały ekran. Można do niego dołączać własne komendy, aletrzeba pamiętać, że nie można dołączyć do niegoItemStateListener (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);



Rodzaje list

Rodzaje list(podobne jak wChoiceGroup):

List.IMPLICIT wybór jednejopcji(zwykła lista)List.EXCLUSIVE wybór jedengoelementu(RadioButtons)List.MULTIPLE wybór kilku opcji



Plan prezentacji

1 Wprowadzenie

2 Form



5 Lista


7 Ticker

8 Dodatkowe




Czcionki I

Zmiana czcionki

Aby zmienić czcionkę w naszej aplikacji należy skorzystać z obiektutypu 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, fon7 t);8 m_List.setFont(1, font);9 m_List.setFont(2, font);



Opcje zmiany czcionki

Rodzaje face:

Font.FACE SYSTEMFont.FACE MONOSPACEFont.FACE PROPORTIONAL

Rodzaje style:

Font.STYLE BOLDFont.STYLE ITALICFont.STYLE PLAINFont.STYLE UNDERLINED

Rodzaje size:

Font.SIZE SMALLFont.SIZE MEDIUMFont.SIZE LARGE

Pamiętaj, że. . .

Pamiętaj, że nie zawsze uzyskasz pożądane czcionki!!!



Plan prezentacji

1 Wprowadzenie

2 Form



5 Lista


7 Ticker

8 Dodatkowe




Ticker I

Ticker

Tekst przelatujący u góry ekranu, dostępny na dowolnym ekranieza pomocą metody setTicker z klasy Displayable. Przykładwykorzystania

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);



Plan prezentacji

1 Wprowadzenie

2 Form



5 Lista


7 Ticker

8 Dodatkowe




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.



Pamięć I

Runtime rt = Runtime.getRuntime();

rt.totalMemory();

rt.freeMemory();



Wyświetlacz I

Display d = Display.getDisplay(this);

d.isColor();

d.numColors();

d.numAlphaLevels();



Canvas I

c.getWidth();

c.getHeight();

c.isDoubleBuffered();

c.hasPointerEvents();

c.hasPointerMotionEvents();

c.hasRepeatEvents();



Plan prezentacji

1 Wprowadzenie

2 Form



5 Lista


7 Ticker

8 Dodatkowe




Gauge i Timer I

1 Gauge m_Gauge;2 java.util.Timer m_Timer;3 protected void startApp()4 throws MIDletStateChangeException5 {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 }



Gauge i Timer II

1 private class MyTask extends2 java.util.TimerTask3 {4 public void run()5 {6 m_Gauge.setValue(7 m_Gauge.getValue() + 1);8 }



Gauge i Timer III



Prosty formularz I

1 m_Form = new Form(Formularz);2 Item item;3 item = new StringItem(Twoje dane, Tu wpiszswojene, 0);

4 item.setLayout(Item.LAYOUT_2 |5 Item.LAYOUT_NEWLINE_AFTER);6 m_Form.append(item);7 item = new TextField(Imię, Twojeimię, 32, 0);

8 item.setLayout(Item.LAYOUT_2 |9 Item.LAYOUT_NEWLINE_AFTER);

10 m_Form.append(item);11 item = new TextField(Nazwisko, Twojenazwisko, 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);



Alert prawie jak Windows Message Box I

1 // Utworz ekran komunikatu2 Alert alert = new Alert(3 Błąd, // title4 Nie można otworzyć pliku., // alertText5 null, // alertImage6 AlertType.ERROR); // alertType7 // Pobierz uchwyt wyswietlacza8 Display display = Display.getDisplay(this);9 // Pokaz komunikat na wyswietlaczu

10 display.setCurrent(alert);



Pytania

?



Kolejne spotkanie

Temat: Wprowadzenie do Ray casting’u w j2meProwadzenie: Marcin MajakData: 19.11.2009, godzina: 17.00Gdzie: sala 23 C-3



Więcej informacji

Kontakt z autorem:[email protected] koła naukowego ISA2

http://autonom.ict.pwr.wroc.pl/Strona warsztatów:http://autonom.ict.pwr.wroc.pl/∼mstachniukAdres tego dokumentu:http://autonom.ict.pwr.wroc.pl/∼mstachniuk/files/warsztaty2009/04-highlevel-2009.11.12.pdfMID Profile - dokumentacja Javadochttp://java.sun.com/javame/reference/apis/jsr118/Creating 2D Action Games with the Game APIhttp://developers.sun.com/mobility/midp/articles/game/Getting Started With the MIDP 2.0 Game APIhttp://developers.sun.com/mobility/midp/articles/gameapi/GameCanvas - czyli dalej rysujemy po ekraniehttp://4programmers.net/Java/J2ME/GameCanvas - czyli dalej rysujemy po ekranieNetBeanshttp://www.netbeans.org/


http://autonom.ict.pwr.wroc.pl/~mstachniuk

http://autonom.ict.pwr.wroc.pl/~mstachniuk/files/warsztaty2009/04-highlevel-2009.11.12.pdf

http://4programmers.net/Java/J2ME/GameCanvas_-_czyli_dalej_rysujemy_po_ekranie

03 Tworzenie GUI wysokiego poziomu w j2me

Technology

Transcript of 03 Tworzenie GUI wysokiego poziomu w j2me