1. Developing
UI
for
Asha
Pla4orm
Jussi
Pohjolainen
Tampere
University
of
Applied
Sciences

2. Approaches
• LCDUI
high-­‐level
components
– Limited
Capability
Device
UI
(LCDUI)
– Components
are
styled
with
Asha
look
&
feel
– Custom
components
can
be
created
with
CustomItem
• LWUIT
(for
Nokia)
Components
– Lightweight
UI
Toolkit
(LWUIT)
– More
comprehensive
component
set
– Can
be
branded
using
your
own
theme
• Custom
UI
on
(Game)Canvas
– Full
screen
apps
– Everything
is
drawn
pixel
by
pixel
– Good
for
games

3. LCDUI

4. LCDUI
• Limited
Capability
Device
UI
API
• Really
simple
UI:
one
"screen"
visible
at
a
Mme
• Screen?
– Display d = Display.getDisplay(this);
– d.setCurrent(screenHere!);
• It's
a
subclass
of
Displayable
class!

6. PossibiliMes
• You
can
put
to
screen
– Alert, List, TextBox
• Also
– Form
that
contains
items
– Items?
StringItem, TextField …
• And
some
low
UI
stuff
– Canvas
– GameCanvas

7. Example
Display d = Display.getDisplay(this);
List list = new List("List", List.EXCLUSIVE);
list.append("Hello", null);
list.append("World", null);
d.setCurrent(list);

8. Example
with
Command
Display d = Display.getDisplay(this);
List list = new List("List", List.EXCLUSIVE);
list.append("Hello", null);
list.append("World", null);
Command c = new Command("Ok", Command.OK, 0);
list.addCommand(c);
d.setCurrent(list);

9. Listener
public class Example extends MIDlet implements CommandListener {
...
protected void startApp() throws MIDletStateChangeException {
Display d = Display.getDisplay(this);
List list = new List("List", List.EXCLUSIVE);
list.append("Hello", null);
list.append("World", null);
Command ok = new Command("Ok", Command.OK, 0);
list.addCommand(ok);
list.setCommandListener(this);
d.setCurrent(list);
}
public void commandAction(Command c, Displayable d) {
// Command clicked!
}
}

10. LWUIT

11. LWUIT
• LWUIT
is
an
open
source
API
for
UI
components,
layouts
and
effects
– Built
on
top
of
Canvas
class
• Nokia
Asha
Theme
• Scales
to
different
screen
resoluMons
and
orientaMons.
Support
for
touch
and
non-­‐touch
• LCDUI
is
beZer
opMon
for
performance
cri@cal
apps.
By
using
LCDUI
you
will
get
smaller
binary
size
• LWUIT
increase
jar
size
by
200
–
800
kb.

14. Form
• Root
of
your
UI
– Title
–
ContentPane
–
Menubar
• Scrollable
• Se`ng
layout
– setLayout(…)
• Adding
components
– addComponent(…)

15. Example
protected void startApp() throws
MIDletStateChangeException {
Display.init(this);
Form f = new Form();
f.setTitle("Jussi's Revenge!");
f.addComponent(new Button("Play"));
f.addComponent(new Button("Highscore"));
f.addComponent(new Button("Exit"));
f.show();
}

16. Layout
• Layout
managers
allow
a
Container
to
arrange
its
components
by
a
set
of
rules
that
would
be
adapted
for
specific
screen/font
sizes.
– BorderLayout
– BoxLayout
– CoordinateLayout
– FlowLayout
– GridLayout
– …

17. Example
protected void startApp() throws
MIDletStateChangeException {
Display.init(this);
Form f = new Form();
f.setTitle("Jussi's Revenge!");
// Really beautiful UI :D
f.setLayout(new GridLayout(2,2));
f.addComponent(new Button("Play"));
f.addComponent(new Button("Highscore"));
f.addComponent(new Button("Info"));
f.addComponent(new Button("Exit"));
f.show();
}

18. Example
protected void startApp() throws
MIDletStateChangeException {
Display.init(this);
Form f = new Form();
f.setTitle("Jussi's Revenge!");
f.setLayout(new BorderLayout());
Container buttonBar = new Container(new
FlowLayout(Component.CENTER));
buttonBar.addComponent(new Button("Play"));
buttonBar.addComponent(new Button("Exit"));
Label label = new Label("Welcome!");
label.setAlignment(Component.CENTER);
f.addComponent(BorderLayout.CENTER, label);
f.addComponent(BorderLayout.SOUTH, buttonBar);
f.show();
}

19. Switching
Forms
• Create
mulMple
forms,
call
show()
• Possible
to
add
transiMon
animaMons
– form.setTransitionOutAnimator(…);

20. Handling
Back-­‐buZon
Form a = new Form();
Command command = …
a.setBackCommand(command);
a.setCommandListener(this);