Designing Better BlackBerry PlayBook Apps

1. Designing Better BlackBerry PlayBook Apps

2. Characteristics of the BlackBerry PlayBook • Seven inch screen size • Multi touch interface • Landscape or portrait display • Virtual keyboard

3. Make a touch centric app

4. On screen interactions

5. Notifications and Indicators • Application notifies appear in the top left corner of the screen • Inform users about app-specific events such as new mail messages • Status indicators appear in the top right corner of the screen • Display system status information such as battery power and wireless connection

6. API’s to build great apps

7. Adding a swipe gesture

8. Adding a swipe gesture

9. Device Information

10. Device Information • Battery level • Battery state • Hardware ID • Device OS • Device PIN • Platform Version • Vendor ID • Capture battery events for app lifecycle • Identify your users based on PIN • Identify the Device OS for functionality

11. Activity Indicator • provide visual progress feedback to the user during time-consuming operations

12. Battery Level and Events • Monitor battery levels for power consumption in your app • Customize your app to provide the user experience • Display battery and charging information from your app

13. Battery Level and Events

14. Database • SQLite is a in-process library that implements a self-contained, serverless, zero-configuration, transactional SQL database engine. • Data is stored in a file on the system, typical the developer stores it in File.applicationStorageDirectory. DB PlayBook AIR Application File

15. AIR SQLite APIs • SQLConnection • open() – Synchronous • openAsync() – Asynchronous • loadSchema() – Database schema • Can Encrypt data on disk. • SQLStatement • text – SQL commands • execute() • SQLError • details/detailsID – SQL error message • operation – SQL command causing error

16. Shared Object

17. AIR File APIs • File • File.applicationStorageDirectory - a storage directory unique to each installed AIR application • File.applicationDirectory - the read-only directory where the application is installed (along with any installed assets) • File.desktopDirectory, File.documentsDirectory, File.userDirectory • Properties: exists, isDirectory, nativePath, extension, name, … • Methods: browseForOpen, browseForSave, getDirectoryListing(), … • FileStream • writeObject() – Uses AMF to write binary serialization of object. • open() – Synchronous • openAsync() – Asynchronous

18. Alert Dialog

19. Skinning QNX UI Components

20. Skinning Basics • Skin options • Global themes • Set specific component skins parts • Skin states • Methods of creating Skins • Bitmaps with or without scale grid • Display objects using graphics API • QNX skin assets available for reuse

21. PlayBook Themes • PlayBook comes with 2 Themes: White (default) & Black

22. PlayBook Themes Example 2

23. ThemesGlobal

24. Skin States • SkinStates.DISABLED • SkinStates.DISABLED_SELECTED • SkinStates.DOWN • SkinStates.DOWN_SELECTED • SkinStates.FOCUS • SkinStates.SELECTED • SkinStates.UP • SkinStates.UP_ODD

25. Component Skin Parts • DropDown • setBackgroundSkin() • setButtonSkin() • setListSkin() • ToggleSwitch • setFillSkin() • setThumbSkin() • setTrackSkin() • Button • setSkin() • TextInput • setSkin()

26. Setting a Skin • Set skin method typically takes these types: • Class reference • String of qualified class name • DisplayObject instance

27. Bitmaps with Slice 9 Scaling • Use Case: Custom TextInput image that scales Up/Down skin image Focus skin image

28. Skin Code: OddShapeSkin.png OddShapeSkinFocus.png

29. Drawing API • Use Case: Custom TextInput with drawing API • Need to update any time the width/height changes

30. Skin Code:

31. Skin Code:

32. Q&A Thank You!