Scmad Chapter05

1,354 views

Published on

SCMAD Chapter 05 - For ony studies purposes

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,354
On SlideShare
0
From Embeds
0
Number of Embeds
59
Actions
Shares
0
Downloads
111
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Scmad Chapter05

  1. 1. By Marcel Caraciolo http://mobideia.blogspot.com Chapter 05 – MIDP: User Interface SCMAD Certification 45mm 61mm
  2. 2. Agenda <ul><li>MIDP User interface - Form </li></ul><ul><li>Form </li></ul><ul><li>Item Types </li></ul><ul><li>Classes </li></ul><ul><li>Other topics about High level UI </li></ul>
  3. 3. MIDP : High User Interface - Form <ul><li>Screen containing a list of components </li></ul><ul><li>Components extend javax.microedition.lcdui.item </li></ul><ul><li>Every Item instance may only be added to ONE </li></ul><ul><li>Form at a time. Set the same item on more than </li></ul><ul><li>one form or setting it twice on the same form </li></ul><ul><li>throws an IllegalStateException </li></ul><ul><li>Every item has a label and an input/output field </li></ul>
  4. 4. MIDP : High User Interface - Form <ul><li>The form has a label (title) and a collection of items </li></ul><ul><li>You add/remove items with: </li></ul><ul><ul><li>append(item) </li></ul></ul><ul><ul><li>append(string): Creates a StringItem (shows a string, no label) </li></ul></ul><ul><ul><li>append(image): Creates an ImageItem (shows a image, no label) </li></ul></ul><ul><ul><li>insert(itemNum,item) </li></ul></ul><ul><ul><li>delete(itemNum) </li></ul></ul><ul><ul><li>deletAll() </li></ul></ul><ul><ul><li>set(itemNum,item) </li></ul></ul><ul><li>Scrolling is always managed by the device. Focus on an item set with: Display.setCurrentItem(item) </li></ul>
  5. 5. MIDP : High User Interface - Form
  6. 6. MIDP : High User Interface - StringItem <ul><li>Shows read-only-text </li></ul><ul><li>Is made by a label + read-only text field </li></ul><ul><li>May have appearance mode as PLAIN,HYPERLINK, </li></ul><ul><li>or BUTTON. </li></ul><ul><li>This only changes the view, the link/button </li></ul><ul><li>operations must be coded as commands on these </li></ul><ul><li>items. On the emulator, the view only changes </li></ul><ul><li>when a default command is added to the item </li></ul>
  7. 7. MIDP : High User Interface - StringItem
  8. 8. MIDP : High User Interface - TextField <ul><li>Text input field, very similar to the TextBox </li></ul><ul><li>Like a TextBox, it has maximum size and input </li></ul><ul><li>constraints. </li></ul>
  9. 9. MIDP : High User Interface - ImageItem <ul><li>Shows an image on the form </li></ul><ul><li>May have appearance Mode of PLAIN, HYPERLINK </li></ul><ul><li>or BUTTON. </li></ul>
  10. 10. MIDP : High User Interface - Spacer <ul><li>Adds spacer between items </li></ul><ul><li>Constructor has minWidth and minHeight </li></ul><ul><li>parameters </li></ul><ul><li>Has no labels or commands. The addCommand and </li></ul><ul><li>setLabel methods throw exception </li></ul><ul><li>Is not “navigable” </li></ul>
  11. 11. MIDP : High User Interface - DateField <ul><li>Shows a Calendar (date, time or both) </li></ul><ul><li>Initial value is null </li></ul><ul><li>Usually, we only see the value on the form. A pop- </li></ul><ul><li>up calendar will be shown when the item is </li></ul><ul><li>selected. </li></ul><ul><li>Implementation of the date/time-editor highly dependent on device manufacturer. </li></ul>
  12. 12. MIDP : High User Interface - ChoiceGroup <ul><li>Item selection list </li></ul><ul><li>Similar to List (Screen), but Implicit is not supported </li></ul><ul><li>ChoiceGroup types: EXCLUSIVE, MULTIPLE OR POPUP (exclusive, drop-down combo box) </li></ul><ul><li>Has all List operations (append,delete,setFont,etc). </li></ul>
  13. 13. MIDP : High User Interface - ChoiceGroup
  14. 14. MIDP : High User Interface - Gauge <ul><li>“ Progress bar” and linear values inside a “range” </li></ul><ul><li>(e.g. volume control) </li></ul><ul><li>“ Current value” goes from zero to maximum value, </li></ul><ul><li>inclusive </li></ul><ul><li>Shown value may in fact be approximated to the </li></ul><ul><li>real value </li></ul><ul><li>May be interactive or not. Non-interactive gauges are </li></ul><ul><li>useful as activity indicators or progress bars. If max </li></ul><ul><li>value is INDEFINITE, the gauge is an indicator </li></ul><ul><li>Value is set with: CONTINOUS_IDLE, </li></ul><ul><li>INCREMENTAL_IDLE,CONTINOUS_RUNNING, </li></ul><ul><li>INCREMENTAL_UPDATING </li></ul>
  15. 15. MIDP : High User Interface - Gauge
  16. 16. Form-related classes
  17. 17. Alert with a Gauge <ul><li>A gauge may be set on an Alert to indicate progress </li></ul><ul><li>Set with Alert.setIndicator() </li></ul><ul><li>The gauge must not have label, must not have </li></ul><ul><li>commands and must not be interactive </li></ul>
  18. 18. ItemStateListener <ul><li>Listener instance is set on a FORM and it is notified when changes happen on one of its items. </li></ul><ul><li>It’s up to the device to decide when notify. Notifications are not expected to be delivered after every change (like at every key stroke), but they must be delivered before a command is triggered or when the focus is lost. It is not triggered when an application itself changes the value of an item </li></ul>
  19. 19. ItemStateListener
  20. 20. Item Commands <ul><li>Commands may be added to an item </li></ul><ul><li>These commands will only be available when the item </li></ul><ul><li>has focus </li></ul><ul><li>Commands are added to Items the same way they are </li></ul><ul><li>added to Screens </li></ul><ul><li>One of the commands may be the “default” command </li></ul><ul><li>Events are sent to ItemCommandListener and not to </li></ul><ul><li>CommandListener </li></ul>
  21. 21. Item Layout <ul><li>By MIDP 2.0 spec, the items are place on screen like </li></ul><ul><li>“ left-aligned text” (by 1.0 the items are placed one at </li></ul><ul><li>each line) </li></ul><ul><li>You may change the layout by calling item.setLayout </li></ul><ul><li>Changing the layout of an item changes the layout of </li></ul><ul><li>all subsequent </li></ul><ul><li>setPreferredSize(x,y): “Locks” the width or the height </li></ul><ul><li>of an item. The floating parameter must be -1 </li></ul>
  22. 22. Item Layout <ul><li>Item.layout may be: </li></ul><ul><ul><li>MIDP 2.0 style (more than one item by line): </li></ul></ul><ul><ul><ul><li>LAYOUT_2 </li></ul></ul></ul><ul><ul><li>Horizontal layout: </li></ul></ul><ul><ul><ul><li>LAYOUT_LEFT </li></ul></ul></ul><ul><ul><ul><li>LAYOUT_RIGHT </li></ul></ul></ul><ul><ul><ul><li>LAYOUT_CENTER </li></ul></ul></ul><ul><ul><li>Vertical layout on the same line (ignored if all items </li></ul></ul><ul><ul><li>have the same size): </li></ul></ul><ul><ul><ul><li>LAYOUT_TOP </li></ul></ul></ul><ul><ul><ul><li>LAYOUT_BOTTOM </li></ul></ul></ul><ul><ul><ul><li>LAYOUT_VCENTER </li></ul></ul></ul>
  23. 23. Item Layout <ul><li>Item.layout may be: </li></ul><ul><ul><li>Force line breaks (ignored if the line break already </li></ul></ul><ul><ul><li>exists): </li></ul></ul><ul><ul><ul><li>LAYOUT_NEWLINE_BEFORE </li></ul></ul></ul><ul><ul><ul><li>LAYOUT_NEWLINE_AFTER </li></ul></ul></ul><ul><ul><li>Expands or shrinks an item: </li></ul></ul><ul><ul><ul><li>LAYOUT_SHRINK </li></ul></ul></ul><ul><ul><ul><li>LAYOUT_EXPAND </li></ul></ul></ul><ul><ul><ul><li>LAYOUT_VSHRINK </li></ul></ul></ul><ul><ul><ul><li>LAYOUT_VEXPAND </li></ul></ul></ul>
  24. 24. `B Brief Review: High level UI Hierarchy
  25. 25. Example Codes <ul><li>Some examples and MIDlets samples are available for reference and studying at this link: </li></ul><ul><ul><li>http://www.dsc.upe.br/~mpc/chapter5.rar </li></ul></ul><ul><li>The source codes include: </li></ul><ul><ul><li>GaugesMIDlet </li></ul></ul><ul><ul><li>LayoutMIDlet </li></ul></ul><ul><ul><li>ItemsMIDlet </li></ul></ul>
  26. 26. Future Work <ul><li>Next Chapter: </li></ul><ul><ul><li>MIDP – Low level - UI </li></ul></ul><ul><ul><li>Low level interface </li></ul></ul><ul><ul><li>Canvas </li></ul></ul><ul><ul><li>Graphics </li></ul></ul><ul><ul><li>CustomItem </li></ul></ul>
  27. 27. 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: [http://www.sun.com/training/certification/java/scmad.xml]. </li></ul>

×