Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Scmad Chapter04


Published on

SCMAD Chapter 04- MIDP UI

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

Scmad Chapter04

  1. 1. By Marcel Caraciolo Chapter 04 – MIDP: User Interface SCMAD Certification 45mm 61mm
  2. 2. Agenda <ul><li>MIDP User interface API’s </li></ul><ul><li>API’s: High level, low level, game </li></ul><ul><li>Displayable </li></ul><ul><li>Command </li></ul><ul><li>CommandListener </li></ul><ul><li>Ticker </li></ul><ul><li>Classes </li></ul><ul><li>TextBox </li></ul><ul><li>List </li></ul><ul><li>Alert </li></ul><ul><li>Form </li></ul>
  3. 3. MIDP : User Interface API’s <ul><li>AWT is too resource-consuming and complex to fit </li></ul><ul><li>inside MIDP, so it defines its own user interface </li></ul><ul><li>API: LCDUI (Limited Connected Device UI) </li></ul><ul><li>Packages: </li></ul><ul><ul><li>javax.microedition.lcdui: Low and High-Level API </li></ul></ul><ul><ul><li> Game API </li></ul></ul><ul><li>Every MIDlet has a Display linked to it: </li></ul><ul><ul><li>Found by calling Display.getMIDlet(midlet) </li></ul></ul><ul><li>This Display instance will be valid through all the </li></ul><ul><li>MIDlet life, so it may be kept as instance attribute </li></ul><ul><li>in the MIDlet </li></ul><ul><li>Every “full screen window” extends Displayable </li></ul>
  4. 4. MIDP : User Interface API’s <ul><li>Display has one Displayable set to it (current). </li></ul><ul><ul><li>Navigation” between screens is done changing the current </li></ul></ul><ul><ul><li>Displayable. </li></ul></ul><ul><li>All UI operations are thread-safe. No synchronization or specific thread needs to be used by the developer to update the UI. </li></ul><ul><li>Display methods: </li></ul><ul><ul><li>isColor: if the device support colours </li></ul></ul><ul><ul><li>numColors: Number of colours or gray tones supported </li></ul></ul><ul><ul><li>flashBacklight(milliseconds): Flashes the device’s “backlight” </li></ul></ul><ul><ul><li>vibrate(milliseconds): Vibrates the device </li></ul></ul><ul><ul><li>getColor( colorSpecifier): Returns the colour of an UI component (e.g. background color, border color, etc.) </li></ul></ul>
  5. 5. MIDP : Displayable <ul><li>Every Displayable (either low level or high level) </li></ul><ul><li>may have: </li></ul><ul><ul><li>Zero or more commands associated (user operations that will be </li></ul></ul><ul><ul><li>executed on a screen). </li></ul></ul><ul><ul><li>A single commandListener to execute operations from </li></ul></ul><ul><ul><li>commands on a screen </li></ul></ul><ul><ul><li>A title </li></ul></ul><ul><ul><li>A Ticker (Scrolling text) </li></ul></ul>
  6. 6. MIDP : Command <ul><li>Commands are operations to be executed on a screen, usually linked to a soft key on the phone. </li></ul><ul><li>Every command has a type and a priority. These attributes define where the command will be placed. For instance, “Back”, “Cancel” or “Exit” buttons are placed on the right button. Priority defines how easy it is to call the operation. This is only a hint to the system, since the real position is defined by the device. </li></ul><ul><li>Commands also have a label and a short label. Again, which label will be used is up to the device. Command type, priority and label are all set on the constructor. </li></ul>
  7. 7. MIDP : Command <ul><li>Command types: </li></ul><ul><ul><li>SCREEN: Concerns all the fields on the screen (e.g. save, submit). </li></ul></ul><ul><ul><li>BACK: On navigation screens, go to the previous </li></ul></ul><ul><ul><li>CANCEL : Cancels the operation </li></ul></ul><ul><ul><li>OK: Confirms the operation </li></ul></ul><ul><ul><li>HELP : Help </li></ul></ul><ul><ul><li>STOP : Cancels a running operation </li></ul></ul><ul><ul><li>EXIT : Exits the application </li></ul></ul><ul><ul><li>ITEM : Concerns only the currently selected item, not all the </li></ul></ul><ul><ul><li>items on the screen. This command is only shown when the item </li></ul></ul><ul><ul><li>is selected. </li></ul></ul>
  8. 8. MIDP : Command
  9. 9. MIDP : CommandListener <ul><li>Executes a command operation </li></ul><ul><li>A displayable may have several commands, but will </li></ul><ul><li>have a single CommandListener. </li></ul><ul><li>Defines only one method: </li></ul><ul><li>commandAction(command, displayable). </li></ul><ul><li>Execution must return immediately. If a time-consuming operation will be executed by the command (like a network call) then the execution shall be done on a separated thread. </li></ul>
  10. 10. MIDP : Ticker <ul><li>Shows a scrolling banner on the top of the screen. </li></ul><ul><li>It receives a message on the constructor, and is </li></ul><ul><li>then placed on a Displayable. </li></ul>
  11. 11. MIDP – User Interface : Classes
  12. 12. MIDP – High level User Interface <ul><li>Based on Screen (Displayable sub class). </li></ul><ul><li>As any Displayable, only one Screen is shown at time and it </li></ul><ul><li>fill the whole screen. </li></ul><ul><li>The components “look-and-feel” is controlled by the </li></ul><ul><li>device. Some very limited customizations are allowed. </li></ul>
  13. 13. Screen Types: TextBox <ul><li>Shows a input screen. </li></ul><ul><li>The Constructor is called with: </li></ul><ul><ul><li>Title and contents </li></ul></ul><ul><ul><li>Maximum size (UI will prevent the user from entering more </li></ul></ul><ul><ul><li>characters than allowed. If the application tries to set a bigger </li></ul></ul><ul><ul><li>string an exception will be thrown). </li></ul></ul><ul><ul><li>Constraints (from TextField class). </li></ul></ul>
  14. 14. Screen Types: TextBox
  15. 15. Screen Types: TextBox <ul><li>All the input operations (like converting two presses on the 2 button to a ‘b’) is managed by the device and is not visible to the developer. Text is generated according to the constraints. </li></ul><ul><li>Text is obtained by the getString() method and can be changed using setString(String string), insert and delete. The displayed value does not need to be equal to the returned value (some values may be formatted, e.g. 1234567--> 123-4567 for phone numbers and 1234.56 --> 1.234,56 for floating point numbers). </li></ul>
  16. 16. Screen Types: TextBox <ul><li>Constraints (some can be combined with pipe (OR operator)): </li></ul><ul><ul><li>ANY: Allow any text </li></ul></ul><ul><ul><li>EMAILADDR: Email address. Might not be validated. </li></ul></ul><ul><ul><li>NUMERIC: Numbers only, no commas or dots. </li></ul></ul><ul><ul><li>PHONENUMBER: Phone number. The contact list may be used for </li></ul></ul><ul><ul><li>lookup in some devices. </li></ul></ul><ul><ul><li>URL: URL. Might not be validated. </li></ul></ul><ul><ul><li>DECIMAL: Decimal numbers (the contents is parseable by </li></ul></ul><ul><ul><li>Double.valueof, and the value may be shown according to the </li></ul></ul><ul><ul><li>device’s locale). </li></ul></ul>
  17. 17. Screen Types: TextBox <ul><li>Constraints (continued): </li></ul><ul><ul><li>PASSWORD: Shows a string of ‘*’ instead of typed characters. </li></ul></ul><ul><ul><li>UNEDITABLE: Blocks the input. </li></ul></ul><ul><ul><li>SENSITIVE: Data cannot not be kept on any “history” on the </li></ul></ul><ul><ul><li>device (e.g. credit card). </li></ul></ul><ul><ul><li>NON_PREDICTIVE: Device shall not guess the input. </li></ul></ul><ul><ul><li>INITIAL_CAPS_WORD: Every word is capitalized (e.g. person </li></ul></ul><ul><ul><li>name). </li></ul></ul><ul><ul><li>INITIAL_CAPS_SENTENCE: Every sentence is capitalized. </li></ul></ul>
  18. 18. Screen Types: List <ul><li>Shows a list with options to be chosen. </li></ul><ul><li>Three types are available: </li></ul><ul><ul><li>Multiple Choice: Several items can be chosen (show checkboxes). </li></ul></ul><ul><ul><li>Exclusive: Only one item can be chosen (show radiobuttons). </li></ul></ul><ul><ul><li>Implicit: Only one item can be chosen. When a choice is done, an </li></ul></ul><ul><ul><li>event is triggered (on a command listener). Useful for creating </li></ul></ul><ul><ul><li>menus. Default command is List . SELECT_COMMAND. This can be </li></ul></ul><ul><ul><li>changed with setSelectCommand. </li></ul></ul>
  19. 19. Screen Types: List <ul><li>Items are added/removed from the list with the following methods (icon may be null): </li></ul><ul><ul><li>insert(elementNum, stringPart, imagePart) </li></ul></ul><ul><ul><li>set(elementNum,stringPart,imagePart) </li></ul></ul><ul><ul><li>append(stringPart,imagePart) </li></ul></ul><ul><ul><li>delete( elementNum) </li></ul></ul><ul><ul><li>deleteAll() </li></ul></ul><ul><li>Except for the Implicit lists, it might not be possible to </li></ul><ul><li>notify the application when a item is selected. This </li></ul><ul><li>verification is usually performed when a command is </li></ul><ul><li>executed. </li></ul><ul><li>You can change the font for a specific item with </li></ul><ul><li>setFont(elementNum, Font) </li></ul>
  20. 20. Screen Types: List <ul><li>When the item description is too wide, you may call setFitPolicy() with: </li></ul><ul><ul><li>TEXT_WRAP_DEFAULT </li></ul></ul><ul><ul><li>TEXT_WRAP_ON (break lines) </li></ul></ul><ul><ul><li>TEXT_WRAP_OFF ( don’t break lines, labels may be truncated). </li></ul></ul>
  21. 21. Screen Types: Alert <ul><li>Show errors and short messages. </li></ul><ul><li>On mobile phones they usually like any other screen, but </li></ul><ul><li>on PDA’s they may look like a JavaScript alert(small “modal” screen) </li></ul><ul><li>It can show: </li></ul><ul><ul><li>A title </li></ul></ul><ul><ul><li>A message (optional) </li></ul></ul><ul><ul><li>An image (optional) </li></ul></ul><ul><ul><li>A progress indicator (optional) </li></ul></ul><ul><li>May be displayed during a specific time, or wait for a user “dismiss” with: </li></ul><ul><ul><li>setTimeout(timeout) </li></ul></ul><ul><ul><li>setTimeout(Alert.FOREVER ) </li></ul></ul>
  22. 22. Screen Types: Alert <ul><li>Is show by: </li></ul><ul><ul><li>Display.setCurrent( alert): When closed, displaying returns to the </li></ul></ul><ul><ul><li>current screen. </li></ul></ul><ul><ul><li>Display.setCurrent( alert, nextDisplayable): When closed, </li></ul></ul><ul><ul><li>displaying goes to nextDisplayable. </li></ul></ul><ul><li>AlertType sets the type of the alert: INFO,WARNING, </li></ul><ul><li>ERROR, ALARM, CONFIRMATION. </li></ul><ul><li>AlertType also has the playSound method. Sound is chosen by the device. When an alert is shown, sound is played automatically. </li></ul><ul><li>AlertType.INFO.playSound(display) : can be used to play sounds without displaying the Alert dialog. </li></ul>
  23. 23. Screen Types: Alert <ul><li>May receive commands, for instance to creating “ Ok/Cancel” screens: </li></ul><ul><ul><li>When alerts receive commands, they lose the “dismiss” command: The next screen to be displayed must be controlled by a new CommandListener. </li></ul></ul><ul><ul><li>When two or more commands are added, the alert is automatically modal. </li></ul></ul><ul><li>A Gauge may be set as an indicator. This will be discussed on the next chapter. </li></ul>
  24. 24. Screen Types: Form <ul><li>Shows a screen with several components: </li></ul><ul><ul><li>Labels </li></ul></ul><ul><ul><li>Text fields </li></ul></ul><ul><ul><li>Date fields </li></ul></ul><ul><ul><li>“ Gauge” (e.g. Volume Control) </li></ul></ul><ul><ul><li>Radio buttons and checkboxes </li></ul></ul><ul><ul><li>Images </li></ul></ul><ul><li>It will be discussed on the next chapter. </li></ul>
  25. 25. Screen Types: Form
  26. 26. Example Codes <ul><li>Some examples and MIDlets samples are available for reference and studying at this link: </li></ul><ul><ul><li> </li></ul></ul><ul><li>The source codes include: </li></ul><ul><ul><li>AlertMIDlet </li></ul></ul><ul><ul><li>TextBoxMIDlet </li></ul></ul><ul><ul><li>ListMIDlet </li></ul></ul><ul><ul><li>TickerMIDlet </li></ul></ul><ul><ul><li>DisplayableMIDlet </li></ul></ul>
  27. 27. Future Work <ul><li>Next Chapter: </li></ul><ul><ul><li>MIDP –User interface - Form </li></ul></ul><ul><ul><li>Form </li></ul></ul><ul><ul><li>Item Types </li></ul></ul><ul><ul><li>Classes </li></ul></ul><ul><ul><li>Other topics about High level UI </li></ul></ul>
  28. 28. References <ul><li>ALVES F. Eduardo. SCMAD Study Guide, </li></ul><ul><li>27/04/2008. </li></ul><ul><li>JAKL Andreas, Java Platform, Micro Edition Part </li></ul><ul><li>01 slides, 12/2007. </li></ul><ul><li>Sun Certification Mobile Application Developer </li></ul><ul><li>Website: []. </li></ul>