09 J2ME_UI_v2

8/3/2019 09 J2ME_UI_v2

http://slidepdf.com/reader/full/09-j2meuiv2 1/70

© BME-AAIT 2010 Felhasználói Felület Tervezése és Készítése J2ME Platformon 1

Felhasználói FelületTervezése és Készítése

Java ME Platformon

Budapesti Műszaki és Gazdaságtudományi Egyetem

Automatizálási és Alkalmazott Informatika Tanszék

Ekler Péter

8/3/2019 09 J2ME_UI_v2



GyorskérdésMire használható a NetBeans

FlowDesigner?

8/3/2019 09 J2ME_UI_v2



Tartalom

Bevezetés Felhasználói felület, felhasználói szokások

J2ME alkalmazás felülete (Screen-ek)

Felhasználói felület kialakítása Beépített GUI elemek, űrlapok létrehozása Menü és parancs kezelés

A Canvas használata

Érintőképernyő használata

NetBeans bemutatása UI tervezéshez Tervezőeszközök

Példa alkalmazások

Összefoglalás

Teszt

8/3/2019 09 J2ME_UI_v2



A felhasználói felület céljaiElérhetővé tegye az alkalmazás funkcióitElfedje a felhasználó elől a program

összetettségét

Megkönnyítse az alkalmazás használatát

Fontos információk átlátható formátumban

való megjelenítéseBarátságosabbá tegye a programot

8/3/2019 09 J2ME_UI_v2



Korlátozások mobil készülékekenKis kijelzőBeviteli eszközök korlátai

Nincs egér

Nincs QWERTY billentyűzet

Csak a mobiltelefon billentyűje áll arendelkezésre

Kezd elterjedni az érintőképernyő és ahangfelismerés is

8/3/2019 09 J2ME_UI_v2



Tipikus J2ME UI

Beépített GUI elemek „Kézzel rajzolt” UI

8/3/2019 09 J2ME_UI_v2

http://slidepdf.com/reader/full/09-j2meuiv2 7/70© BME-AAIT 2010 Felhasználói Felület Tervezése és Készítése J2ME Platformon 7

Tartalom








Összefoglalás

Teszt

8/3/2019 09 J2ME_UI_v2


Az igényes felhasználói felület előnyeiSzép és átlátható alkalmazást könnyebb

értékesíteni

Pl.: egy autóversenyes játék lehet nagyon

primitív, ha szép grafikával rendelkezik.A felhasználókat első ránézésre a felülettel

lehet megnyerni, nem pedig a

funkcionalitással

8/3/2019 09 J2ME_UI_v2


Felhasználói szokások I.Amennyiben a felület első ránézésre nemátlátható, könnyen kezelhető, akkor a

felhasználók nem szívesen használják azalkalmazást

A felhasználók a lehető legegyszerűbbenszeretnék az alkalmazásokat használni

Nem célravezető, ha a felhasználóknaksok felesleges adatot kell megadniuk,ezért érdemes például a szövegmezőketkezdetben alapértékekkel feltölteni

8/3/2019 09 J2ME_UI_v2


Felhasználói szokások II.Ügyelni kell arra, hogy a beviteli mezőkbe

a felhasználók ne tudjanak hibás értékeketmegadni

Pl.: ÉÉÉÉ.HH.NN formátum esetén gyakrankötőjellel írják az dátumot. Megoldás: afelhasználó válassza ki a kívánt dátumot egyDateField mezőből.

8/3/2019 09 J2ME_UI_v2


Példa hibás felhasználói felület kialakítására

Linux ATM

Tisztelt ügyfelünk!

Bankunk hálózatának fejlesztése keretében, valamint aköltségek csökkentése érdekében ATM-jeinket Linuxoperációs rendszerre állítjuk át.Készpénzfelvételhez használja a getcash parancsot.Szintaxis:getcash -ac számlaszám (hexában) -c kártyaszám(hexában) -p pinkód (MD5 hashként) -a összeg(hexában) -b bankazonosító (128 bites egyediszámlavezető bankazonosító)Ha bizonylatot szeretne kapni a tranzakcióról, akkor irányítsa a getcash parancs stdout- ját a /dev/lp0-ba,

szükség esetén grep-ezze ki az értékes sorokat.

8/3/2019 09 J2ME_UI_v2


Felhasználói felület J2ME platformon J2ME alkalmazás több típusú készüléken

futtatható

A különféle készülékek eltérő kijelző

mérettel és kezelőszervekkel rendelkeznek

8/3/2019 09 J2ME_UI_v2


Egységes J2ME alkalmazások Nehéz (praktikusan lehetetlen) olyan

alkalmazásokat készíteni, amelyekegységesen jelennek meg minden

eszközön, de törekedni kell rá Pl.: eltérő képernyőméret, képernyőarány,

színmélység, használható memória, stb.

A felhasználói felületre szinte nincsmegkötés – a telefon gyártói határozzákmeg

8/3/2019 09 J2ME_UI_v2


MIDP LCDUI

A J2SE megszokott grafikai elemei (awt,swing) nem használhatók a mobiltelefonon

Túl nagyok

Átlapolódó ablakokat használnak

Ezért hoztak létre egy teljesen új GUI-t:MIDP LCDUI

Optimalizált a kisméretű kijelzőkhöz

Tipikus felhasználói felületelemek kialakítása:lista, űrlap

8/3/2019 09 J2ME_UI_v2


LCDUI alkalmazástípusok Játékok

A legfontosabb alkalmazási terület

Teljes ellenőrzés a kijelző felett

Pixelre pontosan meg lehet adni, hogy mi hovakerüljön

Űrlap alapú alkalmazások

Egyszerűen elkészíthető Az előre elkészített elemek átláthatók és könnyen

használható

Egyéb

8/3/2019 09 J2ME_UI_v2


J2ME alkalmazás felülete J2ME alkalmazás eltérő típusú

készülékeken futtatható

Csak olyan előre elkészített felületelem

használható, amely a legtöbb készülékenmegjeleníthető

Az előre elkészített felületelemek skálája

szűk

8/3/2019 09 J2ME_UI_v2


Tartalom








Összefoglalás

Teszt

8/3/2019 09 J2ME_UI_v2


Screen fogalma

J2ME platformon a Screen jelenti a kijelző, mint konténer típusát

Különféle típusú konténerek különféle elemekmegjelenítésre használatosak

6+1 féle Screen-t definiáltak: List

TextBox

Alert

SpalshScreen

WaitScreen Form

Canvas Erre bármit lehet rajzolni

8/3/2019 09 J2ME_UI_v2


List Screen

Nem mindig fér el egy sokelemű listaa többi GUI elem között

List Screen esetében csak egy listatalálható a kijelzőn

Lehet felsorolás jellegű,

egyválasztásos, többválasztásos(implicit, exclusive, multiple)

8/3/2019 09 J2ME_UI_v2


List Screen példák

Implicit Exclusive Multiple

8/3/2019 09 J2ME_UI_v2


TextBox Screen

Teljes kijelzősszövegbeviteli mező

Nagyobb mennyiségű

szöveg bevitelérehasználható

Rövidebb szöveg

bevitelére inkább aFormok-on elhelyezhetőTextBox javasolt

8/3/2019 09 J2ME_UI_v2


Alert Screen

Figyelmeztető ablakHiba megjelenítésére

Felhasználótájékoztatására

A megjelenési módja a

készülék típusától függ

8/3/2019 09 J2ME_UI_v2


Form Screen

A legtöbbször használt Screen

GUI elemek

tárolásához ésmegjelenítéshezegyfajta

konténerkénthasználatos

Form példa háromGUI elemmel:

8/3/2019 09 J2ME_UI_v2


Screen-ek kezeléseAz alkalmazás elindítása után a

felhasználó lépeget a különbözőScreenek között

A képernyők megjelenítését a Displayosztályon keresztül vezérelhetjük

Screen váltása:Display.getDisplay(this).setCurrent(nextScreen);

8/3/2019 09 J2ME_UI_v2



Screen-ek közötti navigációAz alkalmazás általában több Screen-

ből áll

Átlátható módon kell megvalósítani anavigálást, váltást a nézetek között

A felhasználónak mindig tudnia kell,

milyen nézetet lát éppen, illetvehogyan tud visszajutni a kezdőnézetre

8/3/2019 09 J2ME_UI_v2



Navigáció megvalósításaA legtöbb fejlesztőeszköz támogatja

beépített designer segítségével anavigáció kialakítását, például az

alábbi módon (NetBeans FlowDesigner):

8/3/2019 09 J2ME_UI_v2



Tartalom



Felhasználói felület kialakítása

Beépített GUI elemek, űrlapok létrehozása Menü és parancs kezelés





Összefoglalás

Teszt

8/3/2019 09 J2ME_UI_v2



A beépített GUI elemek A mobil készülékeken találhatók előre

elkészített GUI elemek

Célszerű ezeket használni, mivel ezeka telefonra vannak optimalizálva(méret, megjelenés tekintetében)

8/3/2019 09 J2ME_UI_v2



Formok GUI elemei

StringItemTextField

ImageItem

Spacer

Gauge

DateFieldChoiceGroup

TableItem

8/3/2019 09 J2ME_UI_v2



GUI elemek tulajdonságaiAz elemek kitöltik a kijelző teljes

szélességét

Egymás alatt helyezkednek elMinden elem rendelkezik saját

azonosítóval és egyedi

tulajdonságokkal

8/3/2019 09 J2ME_UI_v2



StringItem

Megjelenés módja: Két elemből áll (Label, Text),

melyekre külön hivatkozhatunk

Funkciója: Szöveges információ megjelenítése

Megjegyzés:

Nem kötelező mindkét elemnekértéket adni

8/3/2019 09 J2ME_UI_v2



TextField

Megjelenés módja: Egy szöveg, amely a beviteli mező

címe, illetve a beviteli mező

A két elemre külön-külön

hivatkozhatunk

Funkciója: Szövegbevitel

Megjegyzés: A mező címe lehet üres String

Az egyes telefontípusok eltérően jelenítik meg

8/3/2019 09 J2ME_UI_v2



ImageItem

Megjelenés módja: Egy szöveg, mely tulajdonképpen a

kép címe, valamint maga a kép

Az elemekre külön-különhivatkozhatunk

Funkciója:

Kép megjelenítése

Megjegyzés:

.jpg, .png, .gif formátumú lehet

8/3/2019 09 J2ME_UI_v2



Spacer

Funkciója: Két elem között távolság tartása

A távolság állítható

Megjegyzés: Az Item-ek egymás alatt vannak,

csak Spacer elhelyezésével lehetköztük nagyobb teret hagyni

8/3/2019 09 J2ME_UI_v2



Gauge

Hasonló a ProgressBar -hoz Funkciója:

Lépcsőszerű oszlopos, vagy vízszintes elrendezésselvizuálisan mutatja az értéket

Normál Interactive

8/3/2019 09 J2ME_UI_v2



DateField

Megjelenés módja: A dátum mező címe, illetve a dátum különféle

formátumban (Date, Time, DateTime)

Funkciója: Dátum/idő megjelenítése

Megjegyzés: A mező címe lehet üres String

8/3/2019 09 J2ME_UI_v2



DateField példa

8/3/2019 09 J2ME_UI_v2



ChoiceGroup

Megjelenés módja: Cím, illetve a választandó elemek listája

Funkciója:

Lista elemeiből lehet választani

Megjegyzés:

Többféle típusú megjelenítési módot támogat

8/3/2019 09 J2ME_UI_v2



ChoiceGroup - típusok

Multiple (==ChoiceBox): több elemválasztható ki egyidejűleg

Exclusive (==RadioButton): csak egylistaelem jelölhető ki

Popup (==ListBox): legördülő listából

választható ki egy elem

8/3/2019 09 J2ME_UI_v2



ChoiceGroup példa

Exclusive Multiple Popup

8/3/2019 09 J2ME_UI_v2



TableItem

Megjelenés módja: A tábla címe és a

táblamodell

állítható beFunkciója:

Táblázat

megjelenítése

8/3/2019 09 J2ME_UI_v2



Felhasználói felület kialakításaA legtöbb fejlesztőeszközben megtalálható

egy ScreenDesigner nevű eszköz(NetBeans Screen Designer):

8/3/2019 09 J2ME_UI_v2



Tartalom









Összefoglalás

Teszt

8/3/2019 09 J2ME_UI_v2



Felhasználói parancsok beviteli módja

A telefon parancsgombjaihoz (Softkey)lehet különféle eseményeket (akciókat)rendelni

Lehetőség van kettőnél több akciódefiniálására is

Ebben az esetben az akció prioritása

határozza meg a menüben elhelyezkedősorrendet

8/3/2019 09 J2ME_UI_v2



Menükezelés

Amennyiben több parancsot kezelünk azalkalmazásban, mint amennyiparancsbillentyű található a készüléken,

akkor egy felugró menüből választhatjuk kia megfelelő parancsot

A menü elemei a gombhoz rendelt akciók

a megadott prioritás sorrendjében

8/3/2019 09 J2ME_UI_v2



A GUI elemek elhelyezése

Egy GUI elemet általában akár egy sorralis létre lehet hozni

Pl.: rblCinema = new ChoiceGroup("rblCinema", ChoiceGroup.EXCLUSIVE);

Létrehozás után az elemet hozzá kell adnia megfelelő Form-hoz

Az elkészült kód könnyen olvashatóLogikus felépítésű, világos struktúrájú

8/3/2019 09 J2ME_UI_v2



Egy egyszerű Form létrehozásapublic UserForm1(String title) {

super("");setTitle("Film");

rblCinema = new ChoiceGroup("rblCinema", ChoiceGroup.EXCLUSIVE);

rblCinema.append("Corvin", null);

rblCinema.append("Idjos", null);

append(rblCinema);

addCommand(new Command("Options", Command.OK, 1));

addCommand(new Command("Törlés", Command.OK, 2));

ChoiceGroup rblDate = new ChoiceGroup("rblDate", ChoiceGroup.EXCLUSIVE);

rblDate.append("06/06/2005 17:00", null);

rblDate.append("06/06/2005 19:00", null);

append(rblDate);

Gauge tickets = new Gauge("Tickets", true, 200, 50);

append(tickets);

ChoiceGroup rblFilmTitle = new ChoiceGroup("rblDate", ChoiceGroup.EXCLUSIVE);

rblFilmTitle.append("Film Title1", null);

rblFilmTitle.append("Film Title2", null);

append(rblFilmTitle);

}

8/3/2019 09 J2ME_UI_v2



A létrehozott Form

8/3/2019 09 J2ME_UI_v2



Tartalom









Összefoglalás

Teszt

8/3/2019 09 J2ME_UI_v2



Canvas

A nem űrlap alapú alkalmazások nagyrésze ezt használja

Bármit, bárhova lehet rajzolni

A képernyő pontosan úgy jelenik meg, ahogyazt lekódoltuk

Játékok nagy része Canvas-ra épül

8/3/2019 09 J2ME_UI_v2



Canvas kezelése

Saját Canvas osztály létrehozásaszármaztatással

import javax.microedition.lcdui.*;

public class MyCanvas extends Canvas {public void keyPressed( int keycode ) {

// Billentyűnyomás eseménykezelő....

}

public void paint( Graphics g ) {// A Canvas újrafestésekor hívódik meg. A Canvas-ban kötelező implementálni.}

}

8/3/2019 09 J2ME_UI_v2



Canvas eseménykezelése

Többféle eseménykezelő metódusa van Pl.: keyPressed(int keyCode),

keyReleased(int keyCode)

Külön említésre méltó a showNotify(), és ahideNotify(), melyek akkor hívódnak meg,ha a Canvas előtérben/hátérbe kerül

8/3/2019 09 J2ME_UI_v2



showNotify() – hideNotify()

Nem csak a MIDlet fut a mobil készülékenA MIDlet futása közben érkezhet például

telefonhívás, melynek ablaka eltakarja a

MIDlet-et Ekkor hívódik meg hideNotify() függvény

Amikor a MIDlet újra előtérbe kerül, akkor

hívódik meg a showNotify() függvény

8/3/2019 09 J2ME_UI_v2



Canvas Példaimport javax.microedition.lcdui.*;

public class MyCanvas extends Canvas{

private HelloMidlet midlet;

public MyCanvas(HelloMidlet aMidlet) {

midlet = aMidlet;

}public void paint( Graphics g ) {

g.setColor(0,0,0);

g.fillRect(0,0,getWidth(),getHeight());

g.setColor(255,0,0);

g.fillRect(40,40,50,50);

}

public void keyPressed( int keycode ) {

midlet.getDisplay().setCurrent(midlet.get_helloForm());

}

}

8/3/2019 09 J2ME_UI_v2



Tartalom Bevezetés

Felhasználói felület, felhasználói szokások








Összefoglalás

Teszt

8/3/2019 09 J2ME_UI_v2


Érintőképernyő támogatása

A Form elemei alapértelmezetten támogatjáka platformon keresztül

Canvas esetében a megfelelő függvények

felüldefiniálásával reagálhatunk az érintéseseményekre

Telepítés után beállítható, hogy

érintőképernyő telefonon milyen on-screenbillentyűzet jelenjen meg

A MIDP nem írja elő kötelezően az

érintőképernyő támogatását© BME-AAIT 2010 Felhasználói Felület Tervezése és Készítése J2ME Platformon 56

8/3/2019 09 J2ME_UI_v2


Érintés események a Canvas osztályból

Képernyő lenyomásának kezelése:protected void pointerPressed(int x, int y) {}

Képernyő felengedés esemény:protected void pointerReleased(int x, int y) {}

Folyamatos mozgatás a képernyő nyomva tartásamellett:

protected void pointerDragged(int x, int y){}


8/3/2019 09 J2ME_UI_v2



Tartalom Bevezetés









Összefoglalás

Teszt

8/3/2019 09 J2ME_UI_v2



NetBeans Projekt Kezelő

8/3/2019 09 J2ME_UI_v2



Screen-ek, Parancsok és Erőforrások

8/3/2019 09 J2ME_UI_v2



NetBeans Flow Designer

8/3/2019 09 J2ME_UI_v2



NetBeans GUI Tools

8/3/2019 09 J2ME_UI_v2



NetBeans Properties

8/3/2019 09 J2ME_UI_v2



NetBeans Screen Designer

8/3/2019 09 J2ME_UI_v2



DEMO

Űrlap készítés a Designer -ekhasználatával

Canvas példa

8/3/2019 09 J2ME_UI_v2



Tartalom Bevezetés









Összefoglalás

Teszt

8/3/2019 09 J2ME_UI_v2



Összefoglalás

Felhasználói felület kialakítása mobilkészüléken eltér egy PC-s alkalmazásétól

A kijelzőn megjeleníthető Screen-ek több

csoportba oszthatók: Űrlapok, Listák,Figyelmeztető ablakok, teljes kijelzősCanvas-ok

A fejlesztőeszközök különféle Designer -eksegítségével támogatják a felhasználóifelület kialakítását

8/3/2019 09 J2ME_UI_v2



Tartalom Bevezetés









Összefoglalás

Teszt

8/3/2019 09 J2ME_UI_v2



Teszt

1. Mire szolgál a Screen Designer?2. Mik a lényeges különbségek, ha

beépített GUI elemeket, illetve Canvas-t

használunk a UI kialakításához?3. Mik a GUI elemek legfőbb tulajdonságai?

4. Mire szolgál a showNotify() függvény?

5. Mit jelent az Exclusive ChoiceGrouptulajdonság?

8/3/2019 09 J2ME_UI_v2


Kérdések

Documents

09 J2ME_UI_v2