native look and feel bbui & alicejs
DESCRIPTION
TRANSCRIPT
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
HTML5 and CSS3
Flash 11 and WebGL
http://www.craftymind.com/guimark3/
http://acid3.acidtests.org http://html5test.com
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
7
Performance Memory Usage
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
11
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
}
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
19
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
BlackBerry 10 Action Bar
20
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
BlackBerry 10 Context Menu
21
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
Image Lists
22
Seen in:
Options screens
Inbox
Contacts
Image, Title, Description, Accent Text
Auto scaled
Headers
onclick events for items
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
24
Can be used anywhere
Buttons size to text
Can stretch
Onclick
Enable/Disable
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
26
Used with rounded panel
Supported formats:
Left-justified label
Right-justified button
Stretched inputs
Based on rows
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
28
<select>
Can be used anywhere
size to largest item
Can stretch
onchange
setSelectedItem
Arrow Lists
29
Variation on the Image list
data-bb-type=
“text-arrow-list”
• Items are:
data-bb-type=“item”
BBM Bubbles
30
Great for BBM-connected WebWorks apps
Bubbles contain item(s)
Bubbles left/right justified
Items:
Image
Text description
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
36
<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>
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
Use the builder tool to create your own effects
http://blackberry.github.com/Alice/demos/builder.html 38
Bounce
Dance
Drain
Fade
Hinge
PageFlip
Pendulum
PhantomZone
RaceFlag
Slide
Spin
Toss
Twirl
Wobble
Zoom
. . .
THANK YOU
@n_adam_stanley May 25, 2012