v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version...
Transcript of v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version...
![Page 1: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/1.jpg)
v0.9.3 Tim Neil Director, Application Platform & Tools Product Management
@brcewane
![Page 2: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/2.jpg)
Framework Goals
Incubation project to experiment with HTML5 UI
Contribute learning's to jQueryMobile, Sencha, Dojo
Provides BlackBerry Look and Feel
Inline with BlackBerry UX guidelines per OS
Developer code re-use between OS versions
Screen Management
Performance and Memory optimization
Open and collaborative
2
![Page 3: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/3.jpg)
Philosophy
Scales with the platform
Both capabilities and resolution/pixel density
Dynamic based on capabilities
Custom HTML “data-” attributes
Control based layout
Off-DOM manipulation
3
Performance Memory Usage
![Page 4: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/4.jpg)
Current State
Now version 0.9.3
Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10
BlackBerry OS 5 support needs a bit of work…
Top level OSS project:
http://www.github.com/blackberry/bbUI.js
Still “evolving” as we continue to experiment
4
![Page 5: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/5.jpg)
WebWorks Requirements
Java Based Smartphones:
BlackBerry WebWorks SDK v2.3.x or higher
BlackBerry PlayBook
BlackBerry WebWorks SDK v2.2.x or higher
BlackBerry 10
BlackBerry 10 WebWorks SDK
Include bbui-0.9.3.js, bbui-0.9.3.css in your App
5
![Page 6: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/6.jpg)
Application Structure
6
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“bbui-0.9.3.css”</link>
<script type=“text/javascript” src=“bbui-0.9.3.js”</script>
<script type=“text/javascript”>
bb.init();
</script>
</head>
<body onload=“bb.pushScreen(‘menu.htm’, ‘menu’)”>
</body>
</html>
Menu.htm
AJAX
![Page 7: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/7.jpg)
Toolkit Initialization
Mandatory initialization using bb.init(myoptions)
Should be the first code you run on your main page
7
myoptions = {
onbackkey: null, // Custom handler for back key on BlackBerry 5/6/7 smartphones
onscreenready: null, // Manipulate your screen before it's inserted into the DOM
ondomready: null, // Manipulate your screen after it's inserted into the DOM
bb10ActionBarDark: false, // If set to true, the action bar will use the dark theme
bb10ControlsDark: false, // If set to true, the controls will use the dark theme
bb10ListsDark: false, // If set to true, lists will use the dark theme (needs dark background)
bb10ForPlayBook: false, // If set to true, PlayBook will be considered a BB10 device
bb10HighlightColor: '#00A8DF‘ // A highlight color to use when a user selects an item
}
NOTE: Some of these will be changing in v0.9.4 (currently in the “next” branch)
![Page 8: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/8.jpg)
Screens
Each screen is an individual HTML fragment file
data-bb-type=“screen”
Transition effects (not supported on most BBOS phones)
fade, slide-left, slide-right, slide-up, slide-down
Reversed when screen is “popped” off the stack
Title bar
Back button (PlayBook & BB10 only)
8
![Page 9: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/9.jpg)
Screen Management
App = Single page
bbui-0.9.3.js/css files loaded once into this single page
Screen = HTML fragment
Screens loaded via AJAX
Screen stack
bb.pushscreen(…), bb.popscreen()
bbUI.js traps HW “back” key to auto-pop screens on BB5/6/7
bbUI.js automatically handles “back” if you specify a back button on PlayBook or BlackBerry 10
9
![Page 10: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/10.jpg)
Screen Events
onscreenready
Pre-render, pre-CSS hook, post-JS load
Assigned once, passed screen element
Fires synchronously
ondomready
Post-render, post-CSS hook, post-JS load
Assigned once, passed screen element
Fires asynchronously
10
![Page 11: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/11.jpg)
bb.init() Example
11
bb.init({onscreenready: function(element, id) {
if (id == ‘menu’) {
doMenuLoadingBeforeInsert(element);
}
},
ondomready: function(element, id) {
if (id == ‘menu’) {
doMenuLoadingAfterInsert(element);
}
}
});
![Page 12: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/12.jpg)
Styling & Scripting
Screen specific CSS
Inline OR linked (relative to app root)
Screen specific JS
Unload event fired if you need to do some clean-up
bbUI automatically handles resolution changes for you
Fonts
Image scaling in controls/lists
12
![Page 13: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/13.jpg)
TrackPad Navigation Mode
Built-in support for BB5/6/7
Focus tags added
Highlighting
Events
Styling
13
![Page 14: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/14.jpg)
Image Lists
14
Image, Title, Description, Accent Text
Optional Headers
Support context menus
Supported on BB5/6/7/PlayBook/BB10
Placeholder images
Text Only mode
Image display effects on BB10
![Page 15: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/15.jpg)
Image Lists Continued…
15
Arrow List now integrated into Image Lists
Added JavaScript interface
Support for “title only” on a list item
Added dual action buttons for image lists
Use a secondary (+)(-)(>) button
![Page 16: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/16.jpg)
BlackBerry 10 Grid Lists
16
Provides layout of image data
Declare your items in groups and rows
Optional headers for groups
1:1 or 16:9 image formats
Sizes images based on number of items per row
Optional title overlays
Press-and-hold Context Menus
![Page 17: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/17.jpg)
BlackBerry 10 Context Menu
17
Press and hold context menu
Actions to perform on a selection
“peek()” or “Show()”
Peek and then swipe gesture to fully open
Grab the currently selected item from the menu
Integrated into Image List and Grid List
![Page 18: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/18.jpg)
BlackBerry 10 Action Bar
18
Buttons and Tabs
Provides up to 5 slots for commonly used actions
Built in “Back” button (if no tabs)
Action Overflow Menu:
More actions button
Add secondary actions
![Page 19: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/19.jpg)
Action Bar & Context Menu
19
Action Bar now supports Tab overflow menus
Provide tabs that aren’t as important to the user
Action overflow menu and context menu now support “pinning” of an item to the bottom of the list
![Page 20: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/20.jpg)
BlackBerry 10 Sliders
20
Use a slider to adjust a value between a given range
Provide min, max, value and step attributes
Trap the onchange event
Simply add an HTML5 input of type “range” into your screen
![Page 21: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/21.jpg)
BlackBerry 10 Radio Buttons
21
Use radio buttons to give users a choice between a set number of options
Group radio buttons by the “name” attribute
Trap the onchange event
Simply add an HTML5 input of type “radio” into your screen
![Page 22: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/22.jpg)
Dropdowns & Inputs
22
Dropdowns
Automatically styled <select> inputs
Stretch to their container’s width
Animated fades/spins
Inertial scrolling of items
onchange event
setSelectedItem() function
Inputs
Automatically styled text <inputs>
Styled placeholder-text and outlines
BB10 Built in delete button to clear text
![Page 23: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/23.jpg)
Buttons and Pill Buttons
23
Buttons
Set caption
Enabled & Disabled states
Onclick events
Supported on BB6/7/PB/BB10
Pill Buttons
Set caption
Set currently selected button
Onclick events
Supported on BB6/7/PB/BB10
![Page 24: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/24.jpg)
Progress Indicators
24
Show progress of a running action
Set the min, max and value
Normal and Paused states
Simply add an HTML5 progress element to your screen
Supported on BB6/7/PlayBook/BB10
![Page 25: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/25.jpg)
Screen Menus
25
Provides menu items for a screen
Displays as a swipe down menu on PlayBook and BB10
Displays as the native BlackBerry menu on BB5/6/7
![Page 26: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/26.jpg)
BlackBerry 10 CheckBoxes
26
Use checkboxes to give users a choice between multiple options
Trap the onchange event
Simply add an HTML5 input of type “checkbox” into your screen
![Page 27: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/27.jpg)
BlackBerry 10 Toggle
27
Use toggle buttons to give users a choice between two options
Provide two words to choose from
Trap the onchange event
![Page 28: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/28.jpg)
BlackBerry 10 Activity Indicators
28
Provide an indicator that your application is processing without a known end point
Sizes are large, medium and small
![Page 29: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/29.jpg)
Scrolling Panels
29
Available for BB10 styling and PlayBook
Great for master/detail views on PlayBook
Provides a fixed area on the screen where the inner contents are scrolled
![Page 30: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/30.jpg)
What’s Currently Under Development
v0.9.4 in the “next” branch of github.com
30
![Page 31: v0.9.3 Tim Neil€¦ · Off-DOM manipulation 3 Performance Memory Usage . Current State Now version 0.9.3 Supports BlackBerry OS v.5, 6, 7, PlayBook and BlackBerry 10 ...](https://reader033.fdocuments.us/reader033/viewer/2022060516/604961ce24da2b4ad348a061/html5/thumbnails/31.jpg)
Current & Future Development
Bug fixes
PlayBook control styling (light & dark themes)
More core controls for BlackBerry 10
DateTime picker, Action Bar enhancements
More dynamic manipulation of controls
Focus order: BB10/PlayBook/BB7/BB6/BB5
…
Q: How do you help?
http://www.github.com/blackberry/bbUI.js
31