Intro to Asha UI
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
383
On Slideshare
383
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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!  
  • 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. 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. 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. 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. LWUIT  
  • 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. Form   •  Root  of  your  UI   –  Title  –  ContentPane  –  Menubar   •  Scrollable   •  Se`ng  layout   –  setLayout(…) •  Adding  components   –  addComponent(…)
  • 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. 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. 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. 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. Switching  Forms   •  Create  mulMple  forms,  call  show()   •  Possible  to  add  transiMon  animaMons   –  form.setTransitionOutAnimator(…);
  • 17. Handling  Back-­‐buZon   Form a = new Form(); Command command = … a.setBackCommand(command); a.setCommandListener(this);