1. © 2009 Research In Motion Limited User interface design for mobile devices

2. © 2009 Research In Motion Limited Agenda This course covers the following topics: –Introduction to developing applications for mobile devices –Methods of application development for mobile devices –Introduction to GPS and Wi-Fi® technology on BlackBerry® smartphones GPSGlobal Positioning System

3. Agenda –Introduction to push technology –Data structures and memory management on mobile devices –User interface design for mobile devices –BlackBerry themes and animated graphics –Security considerations for developing applications for mobile devices

4. User interface design for mobile devices Objectives: –Explain why UI design is important when developing applications for mobile devices. –List the high-level best practices for designing a UI for mobile devices. –Explain the differences between MIDP and BlackBerry UI classes. –Describe the elements that you can use to design a UI for mobile devices. © 2009 Research In Motion Limited UI user interface MIDP Mobile Information Device Profile

5. User interface design for mobile devices Objectives: –Explain how to create UI elements to design a UI for mobile devices. © 2009 Research In Motion Limited

6. The importance of UI design for mobile devices

7. The importance of UI design for mobile applications Mobile devices have the following limitations: –Smaller screen size –Smaller keyboard Mobile device users: –Expect to find relevant information quickly and easily

8. The importance of UI design for mobile applications Best practices: –Keep your application consistent with others, to take advantage of user experience. –Stay focused on the users’ immediate task. –Display only the information and menu actions that users need at the moment. –Minimize the number of steps required to complete a task. –Allow users to change their minds and undo commands. –Display information in a way that makes effective use of the small screen.

9. The importance of UI design for mobile applications APIs: –For BlackBerry Java® applications, use the BlackBerry UI APIs. –For MIDlets, use the MIDP UI APIs. –A BlackBerry application is an application that uses BlackBerry APIs CLDC APIs MIDP APIs (in some cases) API application programming interface CLDC Connected Limited Device Configuration

10. © 2009 Research In Motion Limited Input methods

11. Input methods include: –Touch screen –Trackball or trackpad –Trackwheel –Keyboard

12. Input methods Touch screen: –Users interact with the BlackBerry smartphone by touching the screen. –Shortcut bars appear at the bottom of most screens. –Users can type text on a virtual keyboard. –Users can view application screens in portrait mode or landscape mode. –The screen, banner, background images, and icons on a BlackBerry smartphone with a touch screen are larger than other BlackBerry smartphones.

13. Input methods Trackball or trackpad: –The trackball can move left, right, up, or down. –Roll the trackball or slide a finger on the trackpad to move the cursor. –Click the trackball or trackpad to perform default actions or open a context menu. –Click the trackball or trackpad while pressing the Shift key to select text, or select messages in a message list.

14. Input methods Trackwheel: –Located on the right-hand side of the BlackBerry smartphone. –Moves up and down only. –Roll the trackwheel to move the cursor vertically. –Roll the trackwheel while pressing the Alt key to move the cursor horizontally. –Click the trackwheel to select objects or open the menu.

15. Input methods Keyboard: –BlackBerry smartphones have either a QWERTY keyboard or SureType® keyboard. –The QWERTY keyboard uses the same layout as standard desktop keyboards. –The SureType keyboard contains multiple letters on each key.

16. Input methods –SureType multi-tap input method Users press a letter key once to type the first letter on the key and twice to type the second letter. Example: to type run, press the ER key twice, the UI key once, and the BN key twice. –SureType technology can predict words as users type them. Example: to type run, press the ER key once, the UI key once, the BN key once; the technology presents possible letter combinations.

17. © 2009 Research In Motion Limited UI hierarchy

18. The BlackBerry UI is a three-level hierarchy. 1.Screen class net.rim.device.api.ui.Screen 2.Manager class net.rim.device.api.ui.Manager 3.Field class net.rim.device.api.ui.component

19. UI hierarchy –The Screen class provides Standard screen layout Default menu Standard behavior for user input –The BlackBerry smartphone displays screens One at a time By pushing and popping them off of the display stack

20. UI hierarchy –The Manager class provides the ability to arrange components on a BlackBerry smartphone screen in standard ways. –A manager specifies Location and layout of fields it contains Scrolling Focus change between fields –Every screen must contain at least one manager.

21. UI hierarchy –The Field class provides the fundamental functionality for all field components. –A field is a rectangular region that displays output to a user. –A field can also handle input. –Field components provide standard UI elements for date selection, options, check boxes, lists, text fields, labels, and progress bar controls.

22. © 2009 Research In Motion Limited Screens

23. Screen objects: –The Screen object is the main structure for a BlackBerry smartphone UI. –The UI APIs initialize simple Screen objects. –You can add fields and a menu to a screen. –Display the screen by pushing it on to the UI stack.

24. Screens To create a screen, do the following: 1.Import the following classes net.rim.device.api.ui.Screen net.rim.device.api.ui.container.FullScreen net.rim.device.api.ui.container.MainScreen 2.Extend the Screen class or one of its subclasses, FullScreen or MainScreen.

25. Screens Other screen considerations include: –Application screens –Dialog boxes –Progress indicators –Menus

26. Screens Application screen: –The BlackBerry smartphone can have multiple applications open at once, but users can only view one screen at a time. –If multiple screens are open, the BlackBerry smartphone organizes the screens in a stack. –The screen at the top of the stack is the active screen.

27. Screens Application screen elements: –The title bar appears at the top of the screen. –Scroll bars allow users to view content that extends beyond the viewing area. –The context menu contains a list of available actions within the current context. –The full menu contains all the available actions for the application.

28. Screens Dialog boxes: –Prompt users for information that the application requires to complete a user-initiated task. –Inform users of urgent information or the status of important actions. –Warn users of unexpected or potentially destructive conditions or situations.

29. Screens Progress indicators: –Indicate the status of an operation Definite progress indicators—horizontal bar fills from left to right as an operation progresses. Indefinite progress indicators—use a message or graphic that does not indicate percent complete or time remaining.

30. Screens Menus: –The Application Menu Item API, in the net.rim.blackberry.api.menuitem package, allows you to add menu items to BlackBerry Java applications. –The ApplicationMenuItemRepository class allows you to add or remove menu items from BlackBerry Java applications.

31. Screens Menus: –You can create a Full menu, which includes all the actions that users can perform in the application Context menu, or short menu, which contains a list of the most common available actions that users can perform within the current context

32. © 2009 Research In Motion Limited Managers

33. Managers include: –HorizontalFieldManager –VerticalFieldManager –FlowFieldManager –DialogFieldManager

34. Managers HorizontalFieldManager : –Lays out fields from left to right in a single row –Can provide horizontal scrolling for fields that do not fit on the screen –Can provide vertical scrolling for fields that are taller than the screen

35. Managers VerticalFieldManager : –Lays out fields in a single vertical row –Can provide vertical scrolling for fields that do not fit on the screen –Can provide horizontal scrolling for fields that are wider than screen

36. Managers FlowFieldManager : –Lays out fields in a horizontal, then vertical flow. Fields are positioned from left to right –Places any fields that do not fit in the allotted horizontal space on the next line below, beginning from the left –Supports both horizontal and vertical scrolling

37. Managers DialogFieldManager : –Handles an icon, a message, and a special area, which can hold a list of user-specified custom fields. –Uses a VerticalFieldManager to lay out the fields in the user area. –A VerticalFieldManager lays out its icon in the top left corner, and its message label in the top left corner.

38. Managers Nested managers: –Managers are an extension of the Field class. –If you nest one manager into another manager, you can create various field layouts on the screen. –If you select managers that enable scrolling, you can also control how a user interacts with the fields on the screen.

39. © 2009 Research In Motion Limited Fields

40. Fields provide standard UI elements for controls: –Buttons –Check boxes –Drop-down lists –List boxes –Option buttons –Text fields –Search fields –Tree views

41. Fields Traditional field –Button –Check box –Date –Dialog box –Drop-down list BlackBerry field –ButtonField –CheckboxField –DateField –PopupScreen –NumericChoiceField or ObjectChoiceField

42. Fields Traditional field –Radio button –Text –Text label –List BlackBerry field –RadioButtonField –RichTextField, BasicEditField, EditField, PasswordEditField, or AutoTextEditField –LabelField –ListField

43. User interface design for mobile devices Objectives review: –Explain why UI design is important when developing applications for mobile devices. –List the high-level best practices for designing a UI for mobile devices. –Explain the differences between MIDP and BlackBerry UI classes. –Describe the elements that you can use to design a UI for mobile devices. –Explain how to create UI elements to design a UI for mobile devices. © 2009 Research In Motion Limited