Intro to Asha UI

Developing  UI  for  Asha  Pla4orm  

Jussi  Pohjolainen  Tampere  University  of  Applied  Sciences  

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  

LCDUI  

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!  

PossibiliMes  

•  You  can  put  to  screen  – Alert, List, TextBox

•  Also  – Form  that  contains  items  –  Items?  StringItem, TextField …  

•  And  some  low  UI  stuff  – Canvas – GameCanvas

Example   Display d = Display.getDisplay(this);

List list = new List("List", List.EXCLUSIVE);

list.append("Hello", null);

list.append("World", null);

d.setCurrent(list);

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

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!

}

}

LWUIT  

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.  

Form  

•  Root  of  your  UI  – Title  –  ContentPane  –  Menubar  

•  Scrollable  •  Se`ng  layout  – setLayout(…)

•  Adding  components  – addComponent(…)

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

}

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 – …  

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

}

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

Switching  Forms  

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

Handling  Back-­‐buZon  

Form a = new Form();

Command command = …

a.setBackCommand(command);

a.setCommandListener(this);