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_s...
BlackBerry Web Platform    Driven by strong Web     standards support    Powered by WebKit      http://html5test.com   h...
BlackBerry 10 Next generation platform     HTML5 / WebWorks     Native NDK     Android     Adobe AIR BlackBerry 10 J...
bbUI.jsBlackBerry UI JavaScript framework                                     5
Framework Goals   BlackBerry Look and Feel   Common UI   Inline with BlackBerry UX guidelines   Screen Management   P...
Philosophy Scales with the platform       Both capabilities and resolution/pixel density   Dynamic based on capabilitie...
Current State Now version 0.9.1 BETA Supports BlackBerry OS v.5, 6, 7, PlayBook and BB10     BlackBerry OS 5 support ne...
bbUI.jsTime for a demo!                   9
Configuration document Config.xml:     <rim:navigation mode=“focus”/>     <feature id=“blackberry.system.event” />    ...
Toolkit Initialization Mandatory initialization using bb.init(myoptions) Should be the first code you run on your main p...
Screens Each screen is an individual HTML fragment file     data-bb-type=“screen” Transition effects Title bar     Ba...
Screen Code<div data-bb-type="screen" data-bb-title="My Screen">  <div data-bb-type="title"      data-bb-caption="Title ba...
Screen Management App = Single page     bbui-0.9.1.js/css files loaded once into this single page     Screen = HTML fra...
Screen Events onscreenready     Assigned once, passed screen element     Fires synchronously ondomready     Assigned ...
Screen Management Code<html>  <head>       <script type="text/javascript">             bb.init({               onscreenrea...
Styling & Scripting Screen specific CSS     Inline OR linked (relative to app root) Dynamic resolution handling     Fo...
Code<div data-bb-type="screen”>  <link rel="stylesheet" href="css/screen1.css"></link>  <script id="screen1JS" src="js/tab...
BlackBerry 10 Grid Lists Current      Image data layouts      Items declared in groups and rows      Optional group he...
BlackBerry 10 Action Bar Current    Buttons and tabs    Actions are for everything     viewed on the screen    Built i...
BlackBerry 10 Context Menu Current    Press and hold context menu    Actions to perform on a     selection    peek() o...
Image Lists Seen in:    Options screens    Inbox    Contacts Image, Title, Description,  Accent Text Auto scaled He...
Image List<div data-bb-type="image-list">  <div data-bb-type="item”       data-bb-img="icon1.png”       data-bb-title="Inp...
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="...
Label/Control Container Used with rounded panel Supported formats:    Left-justified label    Right-justified button  ...
Label/Control Container<div data-bb-type="round-panel">  <div data-bb-type="panel-header">Buttons</div>  <div data-bb-type...
Dropdowns <select> Can be used anywhere size to largest item    Can stretch onchange setSelectedItem                ...
Arrow Lists Variation on the Image list data-bb-type=      “text-arrow-list”• Items are:   data-bb-type=“item”          ...
BBM Bubbles Great for BBM-  connected WebWorks  apps Bubbles contain item(s) Bubbles left/right justified Items:    I...
Future Goals:     Stabilize BlackBerry 5 support     Add more PlayBook elements     More core controls for BlackBerry ...
Alice.jsA Lightweight Independent CSS Engine                                       32
Framework Goals Visual effects library     Hardware accelerated for fast animations and transitions     Adds randomizat...
AliceJS Philosophy Simplicity     One line of code for any effect CSS likeness     Easy to one day perhaps integrate i...
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...
CSS LikenessJavaScript Code:      a.wobble(["e1", "e2"], {value: 20, randomness: 80}, "center",                           ...
15 OOTB Sub-Effects                     Bounce         RaceFlag                     Dance          Slide                  ...
THANK YOU@n_adam_stanleyMay 25, 2012
Upcoming SlideShare
Loading in...5
×

Native look and feel bbui & alicejs

3,400

Published on

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,400
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Native look and feel bbui & alicejs"

  1. 1. How to get that native look & feelusing bbUI.js and Alice.js@n_adam_stanleyMay 25, 2012
  2. 2. Welcome Adam Stanley  Mobile web specialist  BlackBerry Developer Relations Follow me on Twitter:  @n_adam_stanley Likes:  HTML5  Bacon  Ninjas 2
  3. 3. 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/
  4. 4. 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/
  5. 5. bbUI.jsBlackBerry UI JavaScript framework 5
  6. 6. Framework Goals BlackBerry Look and Feel Common UI Inline with BlackBerry UX guidelines Screen Management Performance and Memory optimization Open and collaborative 6
  7. 7. 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
  8. 8. 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
  9. 9. bbUI.jsTime for a demo! 9
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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>
  14. 14. 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
  15. 15. Screen Events onscreenready  Assigned once, passed screen element  Fires synchronously ondomready  Assigned once, passed screen element  Fires asynchronously 15
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. Image Lists Seen in:  Options screens  Inbox  Contacts Image, Title, Description, Accent Text Auto scaled Headers onclick events for items 22
  23. 23. 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
  24. 24. Buttons Can be used anywhere Buttons size to text  Can stretch Onclick Enable/Disable 24
  25. 25. 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
  26. 26. Label/Control Container Used with rounded panel Supported formats:  Left-justified label  Right-justified button  Stretched inputs Based on rows 26
  27. 27. 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
  28. 28. Dropdowns <select> Can be used anywhere size to largest item  Can stretch onchange setSelectedItem 28
  29. 29. Arrow Lists Variation on the Image list data-bb-type= “text-arrow-list”• Items are: data-bb-type=“item” 29
  30. 30. BBM Bubbles Great for BBM- connected WebWorks apps Bubbles contain item(s) Bubbles left/right justified Items:  Image  Text description 30
  31. 31. 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
  32. 32. Alice.jsA Lightweight Independent CSS Engine 32
  33. 33. 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
  34. 34. 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
  35. 35. Alice.jsTime for a demo! 35
  36. 36. 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
  37. 37. 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; }
  38. 38. 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
  39. 39. THANK YOU@n_adam_stanleyMay 25, 2012
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×