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.

Presentation Lcdui


Published on

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

Presentation Lcdui

  1. 1. High Level User Interface Arief Purnama L.K.
  2. 2. MIDlet User Interfaces <ul><li>MIDlets are intended to be portable to a range of devices </li></ul><ul><li>Ranging from the very small, mainly two-color screens and restricted keypads on pagers and cell phones to the larger (PDA), often multicolor displays </li></ul>
  3. 3. User Interface Overview <ul><li>The user interface model for MIDP devices is very simple. </li></ul><ul><li>A MIDP device is required to display only a single &quot;window&quot; at a time </li></ul><ul><li>The MIDlet user interface library is implemented in the javax.microedition.lcdui package </li></ul><ul><ul><li>includes several classes that represent the device's screen and provide the basic top-level windows </li></ul></ul>
  4. 4. The Display and Displayable Classes <ul><li>The Display class represents a logical device screen on which a MIDlet can display its user interface. </li></ul><ul><li>you can obtain a reference to it by using the static getDisplay() method </li></ul><ul><li>Every screen that a MIDlet needs to display is constructed by mounting user interface components onto a top-level window derived from the abstract class Displayable </li></ul>
  5. 5. The Display and Displayable Classes <ul><li>Displayable is not visible to the user until it is associated with the MIDlet's Display object using the Display's setCurrent() method </li></ul><ul><li>public void setCurrent(Displayable displayable) </li></ul>
  6. 6. Top-level user interface classes
  7. 7. Canvas <ul><li>The Canvas class is the cornerstone of the low-level GUI API </li></ul><ul><li>We will discussed this later </li></ul>
  8. 8. Screen <ul><li>Screen is the basic class from which the top-level windows of the high-level API are derived </li></ul><ul><li>Consists of: </li></ul><ul><ul><li>TextBox </li></ul></ul><ul><ul><li>List </li></ul></ul><ul><ul><li>Form </li></ul></ul><ul><ul><li>Alert </li></ul></ul>
  9. 9. TextBox <ul><li>TextBox is a component used to display and modify text </li></ul><ul><li>Since it is derived from Screen, TextBox occupies the entire screen of the device </li></ul><ul><li>can accomodate relatively large amounts of text spread over several lines. </li></ul>
  10. 10. TextBox
  11. 11. TextBox <ul><li>Constructor </li></ul><ul><ul><li>public TextBox(String title, String text, int maxSize, int constraints) </li></ul></ul><ul><ul><li>Constraints: TextField.ANY, TextField.NUMERIC, TextField.EMAILADDR, etc </li></ul></ul><ul><li>Displaying TextBox </li></ul><ul><ul><li>display = Display.getDisplay(this); </li></ul></ul><ul><ul><li>display.setCurrent(textBox); </li></ul></ul>
  12. 12. List <ul><li>A List contains a series of choices presented in one of three formats </li></ul><ul><li>These format includes : Multiple, Exclusive, and Implicit </li></ul>
  13. 13. List (Exclusive, Multiple, Implicit)
  14. 14. List <ul><li>Constructor </li></ul><ul><ul><li>public List(String title, int type); </li></ul></ul><ul><ul><li>public List(String title, int type, String[] strings, Image[] images); </li></ul></ul><ul><ul><li>Type: List.EXCLUSIVE, List.MULTIPLE, List.IMPLICIT </li></ul></ul><ul><li>Adding element to list </li></ul><ul><ul><li>public int append(String string, Image image) </li></ul></ul><ul><li>Displaying List </li></ul><ul><ul><li>display = Display.getDisplay(this); </li></ul></ul><ul><ul><li>display.setCurrent(list); </li></ul></ul>
  15. 15. Form <ul><li>Form is a subclass of Screen that can be used to construct a user interface from simpler elements such as text fields, strings, and labels. </li></ul><ul><li>Like TextBox , Form covers the entire screen </li></ul><ul><li>The elements that you can add to a Form are all derived from the abstract class Item </li></ul>
  16. 16. Form <ul><li>Empty form </li></ul>
  17. 17. Items That Can Be Added to a Form <ul><li>StringItem An item that allows a text string to be placed in the user interface </li></ul><ul><li>TextField A single-line input field much like the full-screen TextBox </li></ul><ul><li>DateField A version of TextField that is specialized for the input of dates; it includes a visual helper that simplifies the process of choosing a date </li></ul>
  18. 18. Items That Can Be Added to a Form <ul><li>Gauge A component that can be used to show the progress of an ongoing operation or allow selection of a value from a contiguous range of values </li></ul><ul><li>ChoiceGroup A component that provides a set of choices that may or may not be mutually exclusive and therefore may operate either as a collection of checkboxes or radio buttons </li></ul><ul><li>ImageItem A holder that allows graphic images to be placed in the user interface </li></ul>
  19. 19. Form <ul><li>Complete Form </li></ul>
  20. 20. Form <ul><li>Constructor </li></ul><ul><ul><li>public Form(String title); </li></ul></ul><ul><ul><li>public Form(String title, Item[] items); </li></ul></ul><ul><li>Form has three methods that allow items to be added </li></ul><ul><ul><li>public void append(Item item); </li></ul></ul><ul><ul><li>public void append(Image image); </li></ul></ul><ul><ul><li>public void append(String string); </li></ul></ul>
  21. 21. Form Item: StringItem <ul><li>Constructor: </li></ul><ul><ul><li>StringItem (String label, String text) </li></ul></ul><ul><li>Can be appended to form: </li></ul><ul><ul><li>form.append(stringItem) </li></ul></ul>
  22. 22. Form Item: TextField <ul><li>Constructor </li></ul><ul><ul><li>TextField (String label, String text, int maxSize, int constraints) </li></ul></ul><ul><li>Constraints: </li></ul><ul><ul><li>The TextField shares the concept of input modes with the TextBox class : </li></ul></ul><ul><ul><ul><li>ANY, EMAILADDR, NUMERIC, PHONENUMBER, URL </li></ul></ul></ul><ul><li>Can be appended to form: </li></ul><ul><ul><li>form.append(textField) </li></ul></ul>
  23. 23. Form Item: DateField <ul><li>Constructor: </li></ul><ul><ul><li>DateField (String label, int mode) </li></ul></ul><ul><ul><li>label: date field label </li></ul></ul><ul><ul><li>mode: DATE , DATE_TIME, TIME </li></ul></ul><ul><li>Can be appended to form: </li></ul><ul><ul><li>form.append(dateField) </li></ul></ul>
  24. 24. Form Item: DateField Screenshots <ul><li>DATE </li></ul><ul><li>TIME </li></ul><ul><li>DATE_TIME </li></ul>
  25. 25. Form Item: Gauge <ul><li>Gauge(String label, boolean interactive, </li></ul><ul><li> int maxValue, int initialValue) </li></ul><ul><ul><li>interactive == true  user can change the value </li></ul></ul><ul><ul><li>Interactive == false  only system can change the value </li></ul></ul><ul><li>Can be appended to form: </li></ul><ul><ul><li>form.append(gauge) </li></ul></ul>
  26. 26. Form Item: ChoiceGroup <ul><li>Constructor: </li></ul><ul><ul><li>ChoiceGroup (String label, int choiceType) </li></ul></ul><ul><ul><li>ChoiceGroup (String label, int choiceType, </li></ul></ul><ul><ul><li> String[] stringElements, </li></ul></ul><ul><ul><li> Image[] imageElements) </li></ul></ul><ul><ul><li>choiceType: EXCLUSIVE, MULTIPLE, or POPUP </li></ul></ul><ul><li>Adding element to ChoiceGroup: </li></ul><ul><ul><li>choiceGroup. append (String stringPart, Image imagePart) </li></ul></ul><ul><li>Can be appended to form: </li></ul><ul><ul><li>form.append(choiceGroup) </li></ul></ul>
  27. 27. Form Item: ChoiceGroup ScreenShots <ul><li>EXCLUSIVE </li></ul><ul><li>MULTIPLE </li></ul><ul><li>POPUP </li></ul>
  28. 28. Form Item: ImageItem <ul><li>Constructor </li></ul><ul><ul><li>ImageItem (String label, Image img, int layout, String altText) </li></ul></ul><ul><ul><li>layout: LAYOUT_DEFAULT, LAYOUT_LEFT, LAYOUT_RIGHT, LAYOUT_CENTER, </li></ul></ul><ul><ul><li>LAYOUT_NEWLINE_BEFORE, </li></ul></ul><ul><ul><li>LAYOUT_NEWLINE_AFTER </li></ul></ul><ul><ul><li>altText = alternate text string </li></ul></ul><ul><li>Can be appended to form: </li></ul><ul><ul><li>form.append(imageItem) </li></ul></ul>
  29. 29. Alert <ul><li>Alert is a subclass of Screen that behaves much like a dialog </li></ul><ul><li>When an Alert is displayed by calling the Display setCurrent( ) method, it covers some or all of the device screen </li></ul>
  30. 30. Alert <ul><li>Alert has several attributes that determine its appearance and behavior: </li></ul><ul><ul><li>Title : An Alert is not required to have a title </li></ul></ul><ul><ul><li>String : message that the Alert displays to the user </li></ul></ul><ul><ul><li>Image : optional image </li></ul></ul><ul><ul><li>Timeout : Specifies how long the Alert is displayed </li></ul></ul><ul><ul><li>Type : AlertType.ALARM, AlertType.CONFIRMATION, </li></ul></ul><ul><ul><li>AlertType.ERROR, AlertType.INFO, </li></ul></ul><ul><ul><li>AlertType.WARNNG </li></ul></ul>
  31. 31. Alert <ul><li>Constructor </li></ul><ul><ul><li>Alert alert = new Alert(&quot;Alert Title&quot;, &quot;This is an Alert&quot;, alertImage, AlertType.ERROR); </li></ul></ul><ul><li>Set Alert’s timeout </li></ul><ul><ul><li>setTimeout(int timeOut); </li></ul></ul><ul><ul><li>Timeout: in milliseconds, or Alert.FOREVER </li></ul></ul><ul><li>Displaying Alert </li></ul><ul><ul><li>Display.getDisplay(this).setCurrent(alert); </li></ul></ul>
  32. 32. Alert <ul><li>Alert (in seconds and forever) </li></ul>
  33. 33. Ticker <ul><li>A high-level API class that displays a scrolling text message on a Screen </li></ul><ul><li>The ticker is associated with a Screen by calling its setTicker() </li></ul><ul><li>Constructor </li></ul><ul><ul><li>Ticker (String str) </li></ul></ul><ul><li>Can be appended to screen (and it’s subclasses): </li></ul><ul><ul><li>Ex: form.setTicker(ticker) </li></ul></ul>
  34. 34. Ticker ScreenShot
  35. 35. Commands <ul><li>Commands are a feature of the Displayable class </li></ul><ul><li>To use commands, our midlet has to implement CommandListener interface </li></ul><ul><li>Then, our midlet Class must implement the inherited abstract method: commandAction(Command, Displayable) </li></ul>
  36. 36. Commands <ul><li>Constructor </li></ul><ul><ul><li>public Command(String label, int type, </li></ul></ul><ul><ul><li> int priority); </li></ul></ul><ul><ul><li>The label argument supplies the text that will be used to represent the Command in the user interface </li></ul></ul><ul><ul><li>type and priority arguments are hints that the MIDP implementation can use when deciding where the Command will be placed </li></ul></ul>
  37. 37. Command Type Parameter <ul><li>OK : Implies agreement by the user for some operation to be performed. </li></ul><ul><li>BACK : Replaces the currently displayed screen with the one that preceded it. </li></ul><ul><li>CANCEL : Abandons an operation before it has been initiated </li></ul><ul><li>STOP : Stops an operation that is already in progress </li></ul><ul><li>EXIT : Requests that the MIDlet stop all outstanding operations and terminate </li></ul><ul><li>HELP : Requests general or context-sensitive help </li></ul><ul><li>SCREEN : Relates to the function of the current screen (application specific) </li></ul>
  38. 38. Commands <ul><li>Adding Commands to the user interface </li></ul><ul><ul><li>public void addCommand(Command cmd); </li></ul></ul><ul><li>Responding to user activation of Commands </li></ul><ul><ul><li>public void setCommandListener(CommandListener l); </li></ul></ul><ul><li>The commandAction( ) method is called when any Command on the Displayable is activated </li></ul>
  39. 39. Command: commandAction() Example <ul><li>public void commandAction(Command c, Displayable d) </li></ul><ul><li>{ </li></ul><ul><li>if(c == testCommand) //command object </li></ul><ul><li>{ </li></ul><ul><li>System.out.println(“test command pressed”); </li></ul><ul><li>} </li></ul><ul><li>else if( c == backCommand) //command object </li></ul><ul><li>{ </li></ul><ul><li>System.out.println(“back command pressed”); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  40. 40. <ul><li>Q & A </li></ul>