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

Like this? Share it with your network

Share

Intro to Asha UI

on

  • 348 views

 

Statistics

Views

Total Views
348
Views on SlideShare
348
Embed Views
0

Actions

Likes
1
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Intro to Asha UI Presentation 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);