Developing	
  UI	
  for	
  Asha	
  Pla4orm	
  
Jussi	
  Pohjolainen	
  
Tampere	
  University	
  of	
  Applied	
  Sciences...
Approaches	
  
•  LCDUI	
  high-­‐level	
  components	
  

–  Limited	
  Capability	
  Device	
  UI	
  (LCDUI)	
  	
  
–  ...
LCDUI	
  
LCDUI	
  
•  Limited	
  Capability	
  Device	
  UI	
  API	
  
•  Really	
  simple	
  UI:	
  one	
  "screen"	
  visible	
  ...
PossibiliMes	
  
•  You	
  can	
  put	
  to	
  screen	
  
–  Alert, List, TextBox

•  Also	
  
–  Form	
  that	
  contains...
Example	
  
Display d = Display.getDisplay(this);
List list = new List("List", List.EXCLUSIVE);
list.append("Hello", null)...
Example	
  with	
  Command	
  
Display d = Display.getDisplay(this);
List list = new List("List", List.EXCLUSIVE);
list.ap...
Listener	
  
public class Example extends MIDlet implements CommandListener {
...
protected void startApp() throws MIDletS...
LWUIT	
  
LWUIT	
  
•  LWUIT	
  is	
  an	
  open	
  source	
  API	
  for	
  UI	
  components,	
  
layouts	
  and	
  effects	
  
–  Bu...
Form	
  
•  Root	
  of	
  your	
  UI	
  
–  Title	
  –	
  ContentPane	
  –	
  Menubar	
  

•  Scrollable	
  
•  Se`ng	
  l...
Example	
  
protected void startApp() throws
MIDletStateChangeException {
Display.init(this);
Form f = new Form();
f.setTi...
Layout	
  
•  Layout	
  managers	
  allow	
  a	
  Container	
  to	
  arrange	
  
its	
  components	
  by	
  a	
  set	
  of...
Example	
  
protected void startApp() throws
MIDletStateChangeException {
Display.init(this);
Form f = new Form();
f.setTi...
Example	
  
protected void startApp() throws
MIDletStateChangeException {
Display.init(this);
Form f = new Form();
f.setTi...
Switching	
  Forms	
  
•  Create	
  mulMple	
  forms,	
  call	
  show()	
  
•  Possible	
  to	
  add	
  transiMon	
  anima...
Handling	
  Back-­‐buZon	
  
Form a = new Form();
Command command = …
a.setBackCommand(command);
a.setCommandListener(this...
Intro to Asha UI
Intro to Asha UI
Intro to Asha UI
Upcoming SlideShare
Loading in...5
×

Intro to Asha UI

317

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
317
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Intro to Asha UI

  1. 1. Developing  UI  for  Asha  Pla4orm   Jussi  Pohjolainen   Tampere  University  of  Applied  Sciences  
  2. 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. 3. LCDUI  
  4. 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!  
  5. 5. PossibiliMes   •  You  can  put  to  screen   –  Alert, List, TextBox •  Also   –  Form  that  contains  items   –  Items?  StringItem, TextField …   •  And  some  low  UI  stuff   –  Canvas –  GameCanvas
  6. 6. Example   Display d = Display.getDisplay(this); List list = new List("List", List.EXCLUSIVE); list.append("Hello", null); list.append("World", null); d.setCurrent(list);
  7. 7. 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);
  8. 8. 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! } }
  9. 9. LWUIT  
  10. 10. 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.  
  11. 11. Form   •  Root  of  your  UI   –  Title  –  ContentPane  –  Menubar   •  Scrollable   •  Se`ng  layout   –  setLayout(…) •  Adding  components   –  addComponent(…)
  12. 12. 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(); }
  13. 13. 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 –  …  
  14. 14. 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(); }
  15. 15. 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(); }
  16. 16. Switching  Forms   •  Create  mulMple  forms,  call  show()   •  Possible  to  add  transiMon  animaMons   –  form.setTransitionOutAnimator(…);
  17. 17. Handling  Back-­‐buZon   Form a = new Form(); Command command = … a.setBackCommand(command); a.setCommandListener(this);
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×