How to get that native look & feel using bbUI.js and Alice.js WEB03 bbUI.js BlackBerry UI JavaScript framework 2 Framework Goals       BlackBerry Look and Feel Common UI Inline with BlackBerry UX guidelines Screen Management Performance and Memory optimization Open and collaborative 3 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 4 Current State  Now version 0.9.2 BETA  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 in the “incubating” phase 5 bbUI.js Time for a demo! 6 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”/> 7 Toolkit Initialization  Mandatory initialization using bb.init(myoptions)  Should be the first code you run on your main page myoptions = { onbackkey: null, onscreenready: null, ondomready: null, bb10ActionBarDark: false, bb10ControlsDark: false, bb10ForPlayBook: false, bb10AccentColor: '#2D566F', bb10HighlightColor: '#00A8DF‘ } // Custom handler for back key on BlackBerry 5/6/7 smartphones // Manipulate your screen before it's inserted into the DOM // Manipulate your screen after it's inserted into the DOM // If set to true, the action bar will use the dark theme // If set to true, the controls and screen will use the dark theme // If set to true, PlayBook will be considered a BB10 device // An accent color to be used for title bars and other areas // A highlight color to use when a user selects an item 8 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 9 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.2.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 BlackBerry5/6/7 bbUI.js automatically handles “back” if you specify a back button on PlayBook or BlackBerry 10 11 Screen Events  onscreenready   Assigned once, passed screen element Fires synchronously  ondomready   Assigned once, passed screen element Fires asynchronously 12 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> 13 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 14 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> 15 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 16 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 17 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 18 Image Lists  Seen in:  Options screens  Inbox  Contacts  Image, Title, Description, Accent Text  Auto scaled  Headers  onclick events for items 19 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> 20 Buttons  Can be used anywhere  Buttons size to text  Can stretch  Onclick  Enable/Disable 21 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> 22 Label/Control Container  Used with rounded panel  Supported formats:  Left-justified label  Right-justified button  Stretched inputs  Based on rows 23 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> ... 24 Dropdowns  <select>  Can be used anywhere  size to largest item  Can stretch  onchange  setSelectedItem 25 Arrow Lists  Variation on the Image list  data-bb-type= “text-arrow-list” • Items are: data-bb-type=“item” 26 BBM Bubbles  Great for BBMconnected WebWorks apps  Bubbles contain item(s)  Bubbles left/right justified  Items:  Image  Text description 27 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 28 Alice.js A Lightweight Independent CSS Engine 29 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 30 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! 32 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> 33 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 Dance Drain Fade Hinge PageFlip Pendulum PhantomZone RaceFlag Slide Spin Toss Twirl Wobble Zoom ... Use the builder tool to create your own effects http://blackberry.github.com/Alice/demos/builder.html 35 Flux Slider Hardware Accelerated Alternative http://www.joelambert.co.uk/flux/ 36 THANK YOU WEB03