Mobile Application Development. MIDP & GUI Programmierung

Transcription

1 J2ME MIDlets Mobile Application Development MIDP & GUI Programmierung Christoph Denzler Fachhochschule Nordwestschweiz Institut für Mobile und Verteilte Systeme Lernziele Sie wissen wie ein MIDlet kontrolliert wird. kennen die GUI Komponenten des lcdui Packages können ein GUI konzipieren und planen können eine MVC Architektur entwerfen und implementieren. haben Erfahrungen gesammelt bei der Programmierung von einfachen GUIs mit MIDP. 2 1

2 Heute Was ist ein MIDlet? Entwurf des GUIs der Fallstudie GUI Komponenten in MIDP Entwurf einer MVC Architektur für die Fallstudie 3 Heute Was ist ein MIDlet? Überblick Applikationsmodell HelloWorld Beispiel Entwurf des GUIs der Fallstudie GUI Komponenten in MIDP Entwurf einer MVC Architektur für die Fallstudie 4 2

3 What is a MIDlet MIDP applications are called MIDlets The class javax.microedition.midlet.midlet allows the platform to control a MIDP application. MIDP does not support the running of traditional applications that use a static main method as their entry point. Its entry point is a class that extends the javax.microedition.midlet.midlet class. MIDP defines an application lifecycle model similar to the applet model. 5 What is a MIDlet Suite One or more MIDlets are packaged together into what is referred to as a MIDlet suite. A MIDlet suite is basically a standard JAR (Java archive) file and Class files Resource files (e.g. icons, image files, string resources) A manifest describing the JAR contents a separate file called an application descriptor (JAD). Midlets in a suite share Runtime object heap Persistent storage 6 3

4 Heute Was ist ein MIDlet? Überblick Applikationsmodell HelloWorld Beispiel Entwurf des GUIs der Fallstudie GUI Komponenten in MIDP Entwurf einer MVC Architektur für die Fallstudie 7 Application Management Software The Application Management Software (AMS) manages the MIDlets. The AMS is a part of the device's operating environment and guides the MIDlets through their various states during the execution process. 8 4

5 MIDP State Management The MIDlet Life Cycle new Midlet() startapp Paused destroyapp pauseapp Active destroyapp Destroyed 9 MIDP State Management State transitions initiated by application management software protected void startapp() Midlet is (re)-started May be called several times use flag to decide whether first call or not Midlet initialization is usually done in the constructor protected void pauseapp() Midlet should release as many resources as possible Midlet can still receive asynchronous events (e.g. timer) protected void destroyapp(boolean unconditional) Normal way to terminate a midlet. If unconditional == false the midlet may throw a MIDletStateChangeException to signal that it would like to stay alive Midlet should release its resources and save any persistent data 10 5

6 MIDP State Management State transitions initiated by MIDlet notifydestroyed() Informs manager that midlet released its resources and saved data. destroyapp() will NOT be called Rule: call destroyapp() to perform cleanup before notifydestroyed(). notifypaused() Informs manager that midlet entered the paused state. pauseapp() will NOT be called In the future, startapp() or destroyapp() will be called. resumerequest() Request to become active again (e.g. after a timer event) 11 The MIDlet Class abstract class MIDlet { // called by the platform abstract void startapp(); abstract void pauseapp(); abstract void destroyapp(); } // can be called by the subclass void notifypaused(); void notifydestroyed(); // plus various property accessors 12 6

7 Heute Was ist ein MIDlet? Überblick Applikationsmodell HelloWorld Beispiel Entwurf des GUIs der Fallstudie GUI Komponenten in MIDP Entwurf einer MVC Architektur für die Fallstudie 13 Simple HelloWorld Midlet package hello; import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class HelloWorld extends MIDlet implements CommandListener { private Command cmdexit; // the exit command private TextBox tb; public HelloWorld() { cmdexit = new Command("Exit", Command.SCREEN, 2); tb = new TextBox("Hello MIDlet", "Hello World", 256, TextField.ANY); tb.addcommand(cmdexit); tb.setcommandlistener(this); } 14 7

8 Simple HelloWorld Midlet (cont.) } public void startapp() { Display.getDisplay(this).setCurrent(tb); } public void pauseapp() { } public void destroyapp(boolean unconditional) { cleanup(); } public void commandaction(command c, Displayable s) { if (c == cmdexit) { destroyapp(true); notifydestroyed(); } } 15 Heute Was ist ein MIDlet? Entwurf des GUIs der Fallstudie GUI Komponenten in MIDP Entwurf einer MVC Architektur für die Fallstudie 16 8

9 User Interface Design Use a Screen Map Split the application into views Make the application structure simple Define a main screen for the application Clarify the interactions between each view Consider the navigation throughout the application Ensure that the users can always return to where they started 17 User Interface Design (cont) Take different screen sizes into account Do not use hard coded UI coordinates UI size Get screen size Use getheight() and getwidth() methods of the Canvas class to get the size of the Canvas. Note Set canvas in full screen mode Use the setfullscreenmode(true) method Plan for localization 18 9

10 Key Handling Be Aware that keypad layouts vary a lot key mappings may differ from device to device Key Handling Design separate the control code from the application logic enables the changing of the control handlers without modifying the application use the key codes and game actions defined by the MIDP specification public void keypressed( int keycode ) { int gameaction = getgameaction( keycode ); switch( gameaction ) { case Canvas.DOWN: // move down break; case Canvas.LEFT: // move left break;.. } 19 Modular Architecture Separate View from Logic Apply MVC Pattern Separate application specifics from generic components e.g. by designing an abstract interface Separate device specific from application e.g. by designing an abstract interface Separate localization resources from code Save in external text files 20 10

11 Heute Was ist ein MIDlet? Entwurf des GUIs der Fallstudie GUI Komponenten in MIDP Übersicht High-Level GUI Komponenten List, Alert, TestBox Form & Items Low-Level GUI Komponenten Entwurf einer MVC Architektur für die Fallstudie 21 The MIDP User Interface Library Display Model Commands The High-Level API Screens Form, TextBox, List, Alert, Item The Low-Level API Canvas, Graphics, CustomItem Located in javax.microedition.lcdui 22 11

12 MIDP User Interface Requirements Not too many short-lived objects Usable without pointer device / touch screen Compatibility with native phone applications => neither AWT nor Swing (nor SWT) were an option! Display Types High-level API, only abstract description of UI Look-and-feel matches the device Forms, Menus, Commands, Lists, Alerts Low-level API ("Gaming") Canvas, native drawing primitives 23 MIDP UI Class Hierarchy Display 0..1 * Displayable * * * Command Ticker CommandListener Screen Canvas List Alert TextBox Form 1 * Item CustomItem ChoiceGroup Gauge DateField TextField ImageItem StringItem 24 12

13 MIDP User Interface Screen Model Each MIDlet consists of several screens (Displayable) On the display one Screen is displayed at each point of time The application sets and resets the current screen Display Commands Abstract Commands Specified by a type and a priority Can be implemented as buttons, menus, Have to be added to each screen Are handled in a command listener (also associated with a screen) 0..1 Displayable * * * Command 0..1 CommandListener 25 Display Setting Displayable Objects Displayable getcurrent(); Returns the current displayable object void setcurrent(displayable d) makes next displayable object visible (may be delayed) void setcurrent(alert alert, Displayable next) shows the alert and after its dismiss the displayable d (may be delayed) void setcurrentitem(item item) makes form which contains item as next displayable Display Access static Display getdisplay(midlet m) 26 13

14 Display (cont.) setcurrent change will typically not take effect immediately Change of display occurs between event delivering calls (not guaranteed before next event) Consequences Call to getcurrent after a setcurrent is unlikely to return the set displayable, getcurrent returns the visible displayable Calls to setcurrent are not queued isshown on a Displayable may return false although it has been set with setcurrent If after a call to setcurrent the thread is busy in a blocking operation, then it may be that the UI is not actualized => Blocking Operations should be executed in a separate thread! A Canvas offers methods shownotify and hidenotify 27 Display (cont.) Screen Parameters boolean iscolor() int numcolors() Number of colors or graylevels int numalphalevels() Number of alpha levels (transparency of colors) int getcolor(int colorspecifier) Returns information about foreground/background colors int getbestimagewidth/height(int imagetype) Returns best image width&height for list/choice/alert images boolean vibrate(int millis) Returns whether vibrator can be controlled int getborderstyle(boolean highlighted) boolean flashbacklight(int duration) 28 14

15 Displayable Commands void addcommand(command cmd) void removecommand(command cmd) CommandListener void setcommandlistener(commandlistener l) replaces previous installed listeners the same listener may be installed in several displayable objects Visibility boolean isshown() Checks if the Displayable is actually visible on the display (e.g. MIDlet running, Displayable installed, no system screens) Title void settitle(string title) String gettitle() Ticker void setticker(ticker t) setticker(null) clears the ticker Ticker getticker Ticker ticker = new Ticker("Select an item"); disp.setticker(ticker); disp.addcommand(exitcommand); disp.addcommand(nextcommand); 29 Command Label String representation, may be ignored (except for SCREEN commands) Type SCREEN application defined command, pertained to current screen BACK previous screen, may be mapped on a back button OK confirm data and proceed CANCEL discarding of current screen Nothing is done automatically by these EXIT exit request commands!!! HELP on-line help request STOP stop a process visible on the current screen ITEM specific to a particular item on the screen Priority: >= 1; low = high priority 30 15

16 CommandListener Interface void commandaction(command c, Displayable d) Indicates that a command event has occurred on displayable d Command c may be one which has been added or an implicit List.SELECT_COMMAND of a list. Implementation Provided by the application, implemented e.g. as inner class Should return immediately (not necessarily called in a separate thread) otherwise, application could block 31 Heute Was ist ein MIDlet? Entwurf des GUIs der Fallstudie GUI Komponenten in MIDP Übersicht High-Level GUI Komponenten List, Alert, TestBox Form & Items Low-Level GUI Komponenten Entwurf einer MVC Architektur für die Fallstudie 32 16

17 High-Level LCDUI Ensure highest portability Provide a set of standard controls Make GUI development easy Offers high level widgets Standard controls like lists, textbox, etc. Look-And-Feel is determined by LCDUI implementation application automatically adapts to runtime environment i.e. application may look different on different devices Simple user interactions are taken care of by system E.g. scrolling in a large dialog No direct access to input devices data exchange through listeners Limited capabilities 33 MIDP UI High-Level API Screen List Alert TextBox Form 1 * Item ChoiceGroup Gauge DateField Spacer TextField ImageItem StringItem 34 17

18 Screen Screen Common abstract base class of all high-level user interface classes No further methods (since MIDP 2.0) 35 List Functionality list of choices (string [+ icon]), insert/append/delete scrolling handled by system (no events) selection using select / go button Types IMPLICIT menu list (=> List.SELECT_COMMAND) EXCLUSIVE radio buttons, getselectedindex() no events! MULTIPLE check boxes, isselected(int) new List("Title", List.IMPLICIT, new String[]{"one","two","three"}, null); 36 18

19 TextBox Functionality Screen to enter and edit text Application sets max chars and input constraints TextBox must have an associated command! Types ANY (0) ADDR (1) NUMERIC (2) PHONENUMBER (3) URL (4) DECIMAL (5) Modifier PASSWORD UNEDITABLE SENSITIVE NON_PREDICTABLE INITIAL_CAPS_WORD INITIAL_CAPS_SENTENCE new TextBox("Enter ID", "", 10, TextField.NUMERIC); 37 Alert Functionality Message screen (optional with image), used for errors / exceptions Default Command: Alert.DISMISS_COMMAND (may be replaced) gettimeout() / settimeout(int) [Alert.FOREVER => modal] Types ERROR INFO WARNING ALARM (e.g. reminder, wakeup call) CONFIRMATION Alert a = new Alert("Oops"); a.setstring("something went wrong"); a.settype(alerttype.confirmation); a.settimeout(alert.forever); 38 19

20 Form Functionality Combination of different items (images, textfields, gauges, choice groups) Each item has a label (setlabel / getlabel) An item may be contained in at most one form Scrolling performed by device, no events Methods append(item item) / append(image image) / append(string str) set(int n, Item item) / insert(int n, Item item) size() / delete(int n) / get(int n) setitemstatelistener(itemstatelistener listener) void itemstatechanged(item item) Called, when an item changes (e.g. text input) 39 Items StringItem ImageItem different layouts: center, left, right, newline before, newline after TextField similar to text box; with max size & constraints DateField types date, time, date_time; setdate / getdate ChoiceGroup only exclusive and multiple Gauge graphical value display, may be editable Gauge(String label, boolean interactive, int max, int initial) Spacer CustomItem 40 20

21 Heute Was ist ein MIDlet? Entwurf des GUIs der Fallstudie GUI Komponenten in MIDP Übersicht High-Level GUI Komponenten List, Alert, TestBox Form & Items Low-Level GUI Komponenten Entwurf einer MVC Architektur für die Fallstudie 41 MIDP Low-Level Interface Low level abstraction Gives control about positioning of elements Exact pixel positioning Control over look-and-feel of UI elements Direct access to keyboard and input devices Capturing low-level keyboard events key pressed key released Access to device specific properties Display resolution Color depth Available keys May limit portability Typical application domain are games 42 21

22 MIDP Low-Level API Canvas Graphics Form 1 * Item CustomItem 43 Canvas Drawing full control, but code must adapt itself to available features (color, size,..) redrawing requested by system with paint(graphics g) redrawing can be requested by application with repaint Events Key Events keypressed, keyreleased, keyrepeated Pointer Events pointerpressed, pointerreleased, pointerdragged Visibility shownotify, hidenotify 44 22

23 Canvas Drawing full control, but code must adapt itself to available features (color, size,..) redrawing requested by system with paint(graphics g) redrawing can be requested by application with repaint Events Key Events keypressed, keyreleased, keyrepeated Pointer Events pointerpressed, pointerreleased, pointerdragged Visibility shownotify, hidenotify 45 Canvas (cont) Canvas Properties Screen getwidth, getheight, isdoublebuffered Events haspointerevents, haspointermotionevents, hasrepeatevents Key Codes Game Actions: UP, DOWN, LEFT, RIGHT, FIRE, GAME_A, GAME_B, GAME_C, GAME_D Key Codes: KEY_NUM0,, KEY_NUM9, KEY_POUND (#), KEY_STAR (*) Support getkeycode(action) <-> getgameaction(key) getkeyname(key) => "press F1 to continue" 46 23

24 Graphics Drawing drawline, drawrect, drawroundrect, drawarc, drawstring, drawimage fillrect, fillroundrect, fillarc Drawing State setcolor / setgrayscale setstrokestyle (SOLID / DOTTED) setfont Clipping setclip(x, y, w, h), getclipx / getclipy, getclipwidth, getclipheight 47 Graphics (cont) Image getwidth() / getheight() immutable: createimage(string resource) createimage(byte[] data, int offset, int len) createimage(image src) mutable createimage(int w, int h) => getgraphics() Font Font.getFont(face, style, size) FACE_MONOSPACE, FACE_PROPORTIONAL, FACE_SYSTEM SIZE_LARGE, SIZE_MEDIUM, SIZE_SMALL STYLE_BOLD, STYLE_ITALIC, STYLE_PLAIN, STYLE_UNDERLINED 48 24

25 CustomItem Purpose Allow user to develop her own item controls Although derived from Item this is a low-level class API very similar to Canvas class 49 Heute Was ist ein MIDlet? Entwurf des GUIs der Fallstudie GUI Komponenten in MIDP Entwurf einer MVC Architektur für die Fallstudie 50 25