intro to asha ui
Post on 19-May-2015
294 Views
Preview:
TRANSCRIPT
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);
top related