Download as PDF, PPTX
Uploaded byJussi Pohjolainen
Intro to Asha UI
This document discusses different approaches for developing user interfaces for the Asha platform, including using the Limited Capability Device UI (LCDUI), Lightweight UI Toolkit (LWUIT), and custom interfaces built directly on the game canvas. It provides examples of creating basic screens and components using LCDUI and LWUIT, including lists, buttons, forms and layout managers.
More Related Content
Intro to Asha UI
- 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.
- 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 classExample 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.
- 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 voidstartApp() 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 voidstartApp() 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 voidstartApp() 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 Forma = new Form(); Command command = … a.setBackCommand(command); a.setCommandListener(this);