Native look and feel bbui & alicejs

How to get that native look & feel
using bbUI.js and Alice.js

@n_adam_stanley
May 25, 2012

Welcome

 Adam Stanley
 Mobile web specialist
 BlackBerry Developer Relations

 Follow me on Twitter:
 @n_adam_stanley

 Likes:
 HTML5
 Bacon
 Ninjas 2

BlackBerry Web Platform

 Driven by strong Web
standards support
 Powered by WebKit http://html5test.com http://acid3.acidtests.org

 HTML5 and CSS3
 Flash 11 and WebGL

http://www.craftymind.com/guimark3/

BlackBerry 10

 Next generation platform
 HTML5 / WebWorks
 Native NDK
 Android
 Adobe AIR

 BlackBerry 10 Jam World Tour
 Moscow: June 26, 2012
 http://www.blackberryjamworldtour.com/

bbUI.js
BlackBerry UI JavaScript framework

5

Framework Goals

 BlackBerry Look and Feel
 Common UI
 Inline with BlackBerry UX guidelines
 Screen Management
 Performance and Memory optimization
 Open and collaborative

6

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

Performance Memory Usage

7

Current State

 Now version 0.9.1 BETA

 Supports BlackBerry OS v.5, 6, 7, PlayBook and BB10
 BlackBerry OS 5 support needs a bit of work…

 Open Source:
 http://www.github.com/blackberry/bbUI.js

 Still in the “incubating” phase
8

bbUI.js
Time for a demo!

9

Configuration document
 Config.xml:
 <rim:navigation mode=“focus”/>
 <feature id=“blackberry.system.event” />
 <feature id=“blackbery.app” />

 If using dropdowns on BlackBerry 5/6/7:
 <feature id=“blackberry.ui.dialog” />

 If using menus
 <feature id=“blackberry.ui.menu”/>
 <feature id=“blackberry.app.event”/>
10

Toolkit Initialization

 Mandatory initialization using bb.init(myoptions)
 Should be the first code you run on your main page
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 and screen will use the dark theme
bb10ForPlayBook: false, // If set to true, PlayBook will be considered a BB10 device
bb10AccentColor: '#2D566F', // An accent color to be used for title bars and other areas
bb10HighlightColor: '#00A8DF„ // A highlight color to use when a user selects an item
}

11

Screens

 Each screen is an individual HTML fragment file
 data-bb-type=“screen”

 Transition effects

 Title bar
 Back button on PlayBook
 Appears as an action bar back button on BlackBerry 10

12

Screen Code

<div data-bb-type="screen" data-bb-title="My Screen">

<div data-bb-type="title"
data-bb-caption="Title bar caption"
data-bb-back-caption="Back">
</div>

<p> Hello World ! </p>

</div>

Screen Management

 App = Single page
 bbui-0.9.1.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-close screens on BB5/6/7
 bbUI.js automatically handles “back” if you specify a back button
on PlayBook or BlackBerry 10
14

Screen Events

 onscreenready
 Assigned once, passed screen element
 Fires synchronously

 ondomready
 Assigned once, passed screen element
 Fires asynchronously

15

Screen Management Code
<html>
<head>
<script type="text/javascript">
bb.init({
onscreenready : function(element, id) {
console.log(id + ‘ ready’); }
});
</script>
</head>
<body onload="bb.pushScreen('menu.htm’,'menu');">
</body>
</html> 16

Styling & Scripting

 Screen specific CSS
 Inline OR linked (relative to app root)

 Dynamic resolution handling
 Fonts
 Images

 Screen specific JS
 Unload event fired if you need to do some clean-up

17

Code

<div data-bb-type="screen”>
<link rel="stylesheet" href="css/screen1.css"></link>

<script id="screen1JS" src="js/tabs.js"
onunload="unloadPushListeners()">
</script>
</div>

18

BlackBerry 10 Grid Lists

 Current
 Image data layouts
 Items declared in groups and rows
 Optional group headers
 16:9 format
 Images sized based on # items / row

 Next
 Allow “square” images
 Allow removal of titles
19

BlackBerry 10 Action Bar

 Current
 Buttons and tabs
 Actions are for everything
viewed on the screen
 Built in “Back” button
 >5 actions create slide in
action overflow menu

 Next
 Tab overflow menu

20

BlackBerry 10 Context Menu

 Current
 Press and hold context menu
 Actions to perform on a
selection
 peek() or Show()
 Peek and then swipe gesture
 Get selected menu item
 Image list integration

 Next
 Integrate into Grid List
21

Image Lists

 Seen in:
 Options screens
 Inbox
 Contacts
 Image, Title, Description,
Accent Text
 Auto scaled
 Headers
 onclick events for items
22

Image List

<div data-bb-type="image-list">
<div data-bb-type="item”
data-bb-img="icon1.png”
data-bb-title="Input Controls">
Use native looking input controls
</div>
...
</div>

23

Buttons

 Can be used anywhere
 Buttons size to text
 Can stretch
 Onclick
 Enable/Disable

24

Buttons

<div data-bb-type="label-control-horizontal-row">
<div data-bb-type="label">Font Style:</div>
<div data-bb-type="button”
onclick="alert('click');”
id="plain">
Plain
</div>
</div>

25

Label/Control Container

 Used with rounded panel

 Supported formats:
 Left-justified label
 Right-justified button
 Stretched inputs

 Based on rows
26

Label/Control Container

<div data-bb-type="round-panel">
<div data-bb-type="panel-header">Buttons</div>
<div data-bb-type="label-control-container">
<div data-bb-type="row">
<div data-bb-type="label">Choose a
city:</div>
<div data-bb-type="button"
onclick="openCityScreen()">
Brasilia
</div>
...
27

Dropdowns

 <select>
 Can be used anywhere
 size to largest item
 Can stretch
 onchange
 setSelectedItem

28

Arrow Lists

 Variation on the Image list
 data-bb-type=
“text-arrow-list”
• Items are:
data-bb-type=“item”

29

BBM Bubbles

 Great for BBM-
connected WebWorks
apps
 Bubbles contain item(s)
 Bubbles left/right justified
 Items:
 Image
 Text description

30

Future

 Goals:
 Stabilize BlackBerry 5 support
 Add more PlayBook elements
 More core controls for BlackBerry 10
 More transition effects

 How can you help?
 Become a contributor!
 http://www.github.com/blackberry/bbUI.js

31

Alice.js
A Lightweight Independent CSS Engine

32

Framework Goals

 Visual effects library
 Hardware accelerated for fast animations and transitions
 Adds randomization to effects so they never go stale

 One line of code
 Apply an effect to any HTML element

 Open and collaborative
 http://blackberry.github.com/Alice
 Apache 2 license
33

AliceJS Philosophy

 Simplicity
 One line of code for any effect
 CSS likeness
 Easy to one day perhaps integrate in the standard
 DOM-level animations
 Not just for image galleries
 Rich
 Collection of effects
 Organics
 effects are always mysteriously slightly different

Alice.js
Time for a demo!

35

Using Alice.js
<html>
<body>
<img id="e1" src="images/logo.png" onClick="animate(‘e1’)">
<input id="e2" type="text" onClick="animate(‘e2’)" />

<script src="js/src/alice.core.js"></script>
<script src="js/src/alice.plugins.cheshire.js"></script>
<script>
var a = alice.init();

function animate(id) {
a.wobble([id], 10, "center", "1000ms", "ease-in-out");
}
</script>
</body>
</html>
36

CSS Likeness

JavaScript Code:
a.wobble(["e1", "e2"], {value: 20, randomness: 80}, "center",
{value: 1000, randomness: 20}, "ease-in-out");

Putting CSS glasses on, it could look like this:
#MyDiv {
animate-wobble: randomize(20deg, 80%) center randomize(1000ms, 20%) ease-in-out;
}

Or
#MyDiv {
animate-wobble-rotation: 5 80%;
animate-wobble-anchor: center;
animate-wobble-duration: 1000ms 20%;
animate-wobble-timing-function: ease-in-out;
}

15 OOTB Sub-Effects

Bounce RaceFlag
Dance Slide
Drain Spin
Fade Toss
Hinge Twirl
PageFlip Wobble
Pendulum Zoom
PhantomZone ...

Use the builder tool to create your own effects
http://blackberry.github.com/Alice/demos/builder.html
38

THANK YOU
@n_adam_stanley
May 25, 2012

Native look and feel bbui & alicejs

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (8)

Similar to Native look and feel bbui & alicejs

Similar to Native look and feel bbui & alicejs (20)

More from .toster

More from .toster (19)

Recently uploaded

Recently uploaded (20)

Native look and feel bbui & alicejs