v0.9.3 tim neil - blackberry developer...current state now version 0.9.3 supports blackberry os v.5,...

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


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


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


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?


31


v0.9.3 tim neil - blackberry developer...current state now version 0.9.3 supports blackberry os v.5,...

Documents