v0.9.3 tim neil€¦ · off-dom manipulation 3 performance memory usage . current state now version...
TRANSCRIPT
v0.9.3 Tim Neil Director, Application Platform & Tools Product Management
@brcewane
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
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
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
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
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
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)
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
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
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
bb.init() Example
11
bb.init({onscreenready: function(element, id) {
if (id == ‘menu’) {
doMenuLoadingBeforeInsert(element);
}
},
ondomready: function(element, id) {
if (id == ‘menu’) {
doMenuLoadingAfterInsert(element);
}
}
});
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
TrackPad Navigation Mode
Built-in support for BB5/6/7
Focus tags added
Highlighting
Events
Styling
13
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
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
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
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
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
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
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
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
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
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
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
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
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
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
BlackBerry 10 Activity Indicators
28
Provide an indicator that your application is processing without a known end point
Sizes are large, medium and small
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
What’s Currently Under Development
v0.9.4 in the “next” branch of github.com
30
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