bbUI.js version 0.9.3 now available



We’ve been receiving lots of great feedback on the bbUI framework as we’ve been continuing the BlackBerry® 10 Jam World Tour. Thank you all for your constant collaboration and continuous feedback! We even had a chance to receive a feature request during the morning of the Toronto stop and implement a new scrolling panel feature by the end of that same day 🙂

This release looks to further close the gap between what’s being offered in the Cascades™ UI framework and what’s available in bbUI.

Be sure to check out the full change log for this release to know what kind of adjustments you may need to make to your markup in order to run v0.9.3 and check out the closed issues for bugs that have been fixed. The v0.9.3 markup changes are fairly minor and are meant to make your life easier as we continue move forward.

Notable Improvements:

  • Action Bar
    • Now has tab overflow menus
    • UX updates to match latest Cascades experience
    • Full control of which items to show on the action bar vs. the overflow menus
    • Ability to “pin” an action to the bottom of action overflow and context menus
  • Image List
    • Supports multiple new styles such as allowing secondary action buttons for items
    • Additional JavaScript® interfaces for list manipulation
    • Adjusted alignment to support “title only” list items
  • Buttons
    • Now allow for text only | image only | text + image
    • Additional JavaScript interfaces for button manipulation
  • BlackBerry® PlayBook™ tablet controls with BlackBerry 10 styling have been re-sized to better fit the device resolution
  • File Input controls now have BlackBerry 10 styling to appear as a button which launches the browse dialog
  • Added toggle button styling for BlackBerry 10 with some funky animation
  • New activity indicator styling for BlackBerry 10
  • Additional JavaScript interfaces for Title Bar manipulation
  • Added checkbox styling and JavaScript interface for BlackBerry 10
  • New scroll panel for master/detail type of views on BlackBerry PlayBook tablet
  • New sliding screen transitions for BlackBerry 10 and BlackBerry PlayBook tablet styling
  • Font adjustments now look better when emulating in Ripple

Changes to your code:

I mentioned that there were a few changes that were made that will affect your application markup so let’s talk about those.

  • Default control color for BlackBerry 10 has been changed from dark to light. You should explicitly state your color choice in the bb.init() function to suit your application’s style
  • The progress bar’s pause() function has been removed and replaced with setState() to allow for normal, warning and error states
  • You now must explicitly state which actions/tabs on the Action Bar are to show on the overflow menus
  • Arrow List control has now been merged as a feature of the image list. You will have to change your existing arrow list markup to image list markup with the proper style attribute
  • By default a screen’s background color is now white unless you explicitly set its style. This was needed in order to implement the sliding transitions
  • BlackBerry 10 buttons no longer stretch by default. To stretch you need to set the data-bb-style=”stretch” attribute
  • Default font has been changed from Slate to Slate Pro for BlackBerry 10

More to Come:

We’ve now created an additional v0.9.4 milestone for bbUI that contains additional BlackBerry 10 controls but also includes more JavaScript interfaces for dynamic screen creation and manipulation. It also contains some updates around Tablet user experience. If you’re interested in following the bbUI.js changes as they go, feel free to follow me on Twitter®.

Okay…now that we’ve covered what’s new and what’s changed, I think it’s time for some of that good old eye candy 🙂

Image List Additional Styles


Tab Overflow menu, item centering and action pinning


Sample Action Bar Layouts

Buttons with Images and Activity Indicators


Scrollable Areas for Master/Detail Layout

Toggle Buttons and Checkboxes


Join the conversation

Show comments Hide comments
+ -