sobota, 9 maja 2009

Podstawowe komponenty w LWUIT #part 1/2

Skoro pierwsze spotkanie z biblioteką LightWeightUserInterfaceToolkit mamy już za sobą, chciałbym dziś przybliżyć podstawowe komponenty jakimi możemy się posługiwać aby wzbogacić UI naszej aplikacji mobilnej.

Hierarchia klas w LWUIT:


Component
To klasa bazowa dla wszystkich komponentów, tylko klasy które dziedziczą po niej mogą być wyświetlane na ekranie. W ogólności nie będziemy z niej korzystać chyba, że zaczniemy pisać własne komponenty to wtedy możemy się nią zainteresować;-)

Container
Kontener to obiekt który umożliwia przechowywanie w sobie wielu innych komponentów. W tym innych kontenerów które zawierają inne komponenty, możliwość zagnieżdżania jest praktycznie nieograniczona.
Komponenty które dodajemy do kontenera trafiają na listę wg której są później wyświetlane na ekranie, jeśli nie podamy indeksu na który ma on trafić to jest domyślnie umieszczany na ostatnim miejscu.

Form
Formularz jest klasą reprezentującą okna w programie. Składa się on z 3 części: paska tytułowego, zawartości okna oraz paska menu. Jak to wygląda przedstawia obrazek obok.
Jeśli chodzi o pasek tytułowy to wg mnie jest on trochę ograniczony ponieważ możemy na niego wrzucać tylko tekst, no ale gdyby było inaczej to może inaczej też by się nazywał ;P Zawartość okna to nasze pole gdzie wrzucamy jakiekolwiek komponenty potrzebujemy. Możemy je rozmieszczać za pomocą różnych układów (layouts) ale o nich znacznie więcej w innej części tutoriala.
Pasek menu zawiera pozycje pomocne przy sterowaniu aplikacją, jeśli jest ich więcej niż dwie to będzie nam się wyświetlać menu wyboru. Przycisku na tym pasku tworzy się poprzez dodanie do obiektu formularza obiektów typu Command.
Form udostępnia nam dwa konstruktory. Jeden jest bez bezparametrowy, a drugi posiada parametr typu String który jest tekstem na pasku tytułowym. Formularz wyświetlamy za pomocą metody Form.show();.
API tej klasy jest dość bogate i jego znajomość jest podstawą z którą trzeba się zapoznać.

Label
Label to po prostu komponent który wyświetla tekst i/lub obrazek. Należy pamiętać by używać go tylko w tym wypadku! Gdyby istniała potrzeba jakieś interaktywności to lepszym wyborem byłoby skorzystanie z klasy Button.
Dla zawartości etykiety możemy definiować wyrównania - domyślnym jest LEFT, ale poza nim jest jeszcze CENTER i RIGHT. Ponadto jeśli dodany jest zarówno tekst jak i obrazek to możemy wyrównać tekst względem obrazka mamy do dyspozycji pozycje: TOP, BOTTOM, LEFT, RIGHT. A wykonujemy to za pomocą metody: setTextPosition(Label.TOP);.
Może mały przykład:
Form form = new Form("Label in action!");
// utworzenie obrazka
Image image = Image.createImage("/picture.png");

Label label = new Label(image);
label.setText("Hello Label !!");
label.setAlignment(Label.CENTER);
label.setTextPosition(Label.BOTTOM);

// dodanie labela do formularza
form.addComponent(label);
// wyświetlenie
form.show();
Button
Przyciski wywołują dla nas jakieś akcje. Podobnie jak Label może składać się z ikony i teksty (przecież jest to klasa rozszerzająca Label^^). Do przycisku możemy podpiąć dwa rodzaje "słuchaczy" (nie lubię tej nazwy, zna ktoś może jakąś lepsza polską ?;), na aktywowanie (FocusListener) oraz akcje (ActionListener). Ponieważ drugi przypadek jest częstszy w użyciu to posłużę się nim jako przykładem. Może od razu podam przykład który wyjaśni działanie tego mechanizmu:
Button coolButton = new Button("Great button!");
coolButton.addActionListener(new ActionListener() {

public void actionPerformed(ActionEvent arg0) {
// instrukcje w tej metodzie zostaną wywołane po wciśnięciu przycisku
}
});
Można też utworzyć osobne klasy implementujące ten interfejs i podać je jako parametr. Zależy jakie kto rozwiązanie lubi i jak długa jest metoda obsługi zdarzenia.

RadioButton
To element dobrze nam znany chociażby z HTMLa. Jest to element który może posiadać dwa stany wybrany oraz nie wybrany. Stan taki może posiadać tylko jeden radio button w obrębie grupy o której za chwilę. Jeśli chodzi o zasady tworzenia oraz przypisywania obsługi zdarzeń to są one identyczne jak w przypadku przycisku.

ButtonGroup
Ta użyteczna klasa w sumie nie powinna zostać nazwana komponentem a bardziej takim zarządcą grupy komponentów. Jej funkcją jest grupowanie jakiegoś zbioru przycisków, żeby np. przypilnować, że został zaznaczony tylko jeden RadioButton.
Przykład działania:
// tworzenie przycisków
RadioButton radio1 = new RadioButton("RadioButton1");
radio1.setSelected(true); // niech jeden będzie zaznaczony domyślnie
RadioButton radio2 = new RadioButton("RadioButton2");
RadioButton radio3 = new RadioButton("RadioButton3");
RadioButton radio4 = new RadioButton("RadioButton4");

// tworzenie grupy oraz dodawanie do niej przycisków
ButtonGroup group = new ButtonGroup();
group.add(radio1);
group.add(radio2);
group.add(radio3);
group.add(radio4);

/**
* Jakieś operacje
*/

// pobranie indeksu który przycisk jest zaznaczony
int index = group.getSelectedIndex();
// pobranie zaznaczonego przycisku
RadioButton radioSelected = group.getRadioButton(index);
Gdy mamy indeks zaznaczonego przycisku to później można sobie zrobić jakiegoś switcha i wykonać odpowiednie akcje. Należy tylko pamiętać o tym by nie zmieniać kolejności ich dodawania do grupy, bo wg tego są one indeksowane.

To koniec części pierwszej o komponentach w LWUIT. W następnym wpisie z tej serii omówię CheckBox, ComboBox, TextArea oraz TabbedPane.

Zapraszam do komentowania !

_
Źródła obrazków oraz linki:
[1] https://lwuit.dev.java.net/
[2] http://lwuit.blogspot.com/

Brak komentarzy:

Prześlij komentarz