Native look and feel bbui & alicejs
Upcoming SlideShare
Loading in...5

Native look and feel bbui & alicejs






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Native look and feel bbui & alicejs Native look and feel bbui & alicejs Presentation Transcript

  • How to get that native look & feelusing bbUI.js and Alice.js@n_adam_stanleyMay 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
  • BlackBerry 10 Next generation platform  HTML5 / WebWorks  Native NDK  Android  Adobe AIR BlackBerry 10 Jam World Tour  Moscow: June 26, 2012 
  • bbUI.jsBlackBerry 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:  Still in the “incubating” phase 8
  • bbUI.jsTime for a demo! 9
  • Configuration document Config.xml:  <rim:navigation mode=“focus”/>  <feature id=“blackberry.system.event” />  <feature id=“” /> If using dropdowns on BlackBerry 5/6/7:  <feature id=“blackberry.ui.dialog” /> If using menus  <feature id=“”/>  <feature id=“”/> 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 its inserted into the DOM ondomready: null, // Manipulate your screen after its 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!  31
  • Alice.jsA 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   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.jsTime 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 LikenessJavaScript 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 38
  • THANK YOU@n_adam_stanleyMay 25, 2012