So what is a Built for BlackBerry app? In a nutshell, a BFB app is an application which is designed from start-to-finish to be awesome in performance, looks, and functionality. Apps which apply for, and pass, the Built For BlackBerry program tell users that this app meets BlackBerry’s high standards for quality and performance.

My latest sample app was created to give you a head start in achieving the BFB designation, allowing you to focus more of your time on the functionality of your app, rather than the actual UI and setup. It’s simply a starting point/blank slate for you to work with and customize.

I’ve incorporated all of the features we look for in a Built For BlackBerry app. Right out of the box you’ll have an application that meets the BlackBerry 10 UI guidelines, connects to BlackBerry Messenger and to the Share Framework. There are also several other features including: App Menu (swipe down), Toasts, Window Covers, and device specific Splash Screens. I’ve even included CSS media queries to show you how to style your app on a Z10 vs. Q10 with CSS!. This will allow you to quickly customize this “boiler-plate” to meet your own needs and focus on the content of your app rather than getting the “right” look.

Check-out the application over at GitHub.

If you find this sample useful, have any questions, or just want to keep up-to-date on the world of BlackBerry WebWorks and HTML5, follow me on Twitter!

It has been discovered that bbUI.js version 0.9.5 has a rendering issue when run on BlackBerry 10.1. The device was not being accurately detected and as a result, application content was not being rendered to the screen correctly.

Issue: Grid & Image List in bbUI.js 0.9.5 running on BlackBerry 10

A fix for this issue was applied last month in version 0.9.6 which is available for download from Github. Developers have since been updating their applications and I would encourage you do the same if you haven’t done so already.  A recompile and re-submit of your application to BlackBerry World may be required.  Doing so will ensure that users will continue to enjoy your content, as it was designed, when they upgrade to BlackBerry 10.1. Note: At the time of writing, there is no ETA for when 10.1 will be published.

Upgrade Instructions:

1. Download bbUI.js version 0.9.6.
2. Replace the bbUI.js and bbUI.css files in your application.
3. Review the change Log to confirm whether any feature updates, performance improvements or compatibility changes affect your application.
4. Recompile using the BlackBerry 10 WebWorks SDK.
5. Test! Use the Dev Alpha C simulator to preview how your content will appear on BlackBerry 10.1.0.1020.
6. Once you are happy with the quality of your application, re-submit in BlackBerry World.

Fixed: Grid & Image List in bbUI.js 0.9.6 running on BlackBerry 10.1

With bbUI v0.9.5, <meme>We Has JavaScript</meme>. The focus in this release has really been another round of bug fixes, optimizations and additional JavaScript interfaces. The previous versions of bbUI have started to improve with the number of JavaScript interfaces, but still haven’t provided full dynamic functionality. This release gets us further towards our goal of creating more dynamic user interfaces via JavaScript. While we’ve made major steps forward in this department with v0.9.5, we’re not finished yet and have much more planned for v0.9.6.

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 app in order to run v0.9.5. Also, check out the closed issues for details on bug fixes and new features. Any v0.9.5 compatibility changes are fairly minor and are meant to make your life easier as we continue to move forward.

Notable Improvements

• Updated coloring/styling/sizing to better match Cascades
• New Title Bar styling allows for optional coloring other than the default light or dark
• Minified versions of the JavaScript and CSS files are now provided
• Action Bar back button and “button actions” highlight when touched
• Image Grids now allow for a specified number of columns in a row as well as horizontal carousel scrolling
• Action and tab overflow menus now vertically scroll items when there are too many options to fit on the screen at one time
• Toggle Buttons now support a disabled state
• Ability to refresh all the items in an image list at once
• Many new JavaScript interfaces for controls with updated samples to show how to use them
• Control bug fixes

Compatibility Changes

I mentioned that there were a few changes that were made that will affect your applications, so let’s talk about those:

• Image Lists:
• List items now only highlight if they have an associated onclick for the item or have a context menu assigned to the list.
• Images for image lists are now 109 x 109 for BlackBerry 10 devices to match the new list item height adjustment.
• You now simply include bbUI.js and bbUI.css in your application. There are no longer any version numbers as part of the source file names. Version numbers are now contained inside the files as code comments.
• The samples now show how to use your initialization code in the “webworksready” event for all BlackBerry OS versions.

More to Come

We’ve created an additional v0.9.6 milestone for bbUI that contains additional BlackBerry 10 styling improvements, and also includes more JavaScript interfaces for dynamic screen creation and manipulation. If you’re interested in following the bbUI.js changes as they go, feel free to follow me on Twitter.

The idea was conceived and implemented at the BlackBerry Jam World Tour in Toronto, where Tim Neil (@brcewane) was scheduled to present. If you didn’t know, Tim is one of the main authors of bbUI.js. During one of the breaks, an attendee approached Tim with the idea of adding an independently scrolling panel to the bbUI.js. Funny thing is, Tim thought it was a great idea and produced the initial branch over lunch! Right there in front of us, the birth of a new feature.

I have been waiting for this feature for my application: ZenLottery. With ZenLottery, you can generate lottery numbers based on your location. One feature of ZenLottery is the ability to save the sets of generated numbers. If you can save the numbers, then you should be able to delete them as well. The design called for the numbers to be displayed and a delete button at the bottom. Without the Scroll-Panel feature, the delete button may be off the bottom of the screen, if the user chooses to generate more than 8 sets of lottery numbers.

That’s not a good user experience. How do they even know the Delete button is there? The solution is to have a scrollable panel for the sets of numbers. Then, the user can scroll through the numbers without losing the Delete button off the bottom of the screen. With the new scroll-panel feature in bbUI.js, I was ready to rock n’ roll!

The code for showing the sets of numbers is pretty simple. There are two divs: the outer and the inner div. The two divs work together to make sure the numbers are centered on the screen:

<div class="centerOuter">
<div id="numberDiv" class="centerInner"></div>
</div>

For completeness, here’s the centerOuter and centerInner CSS:

.centerOuter
{
width: 100%;
text-align: center;
}

.centerInner
{
display: inline-block;
}

As with the other elements in the bbUI.js, the scroll-panel is a div that gets a special tag. The tag used is data-bb-type and the value is “scroll-panel”. I figured I would add this to the outer div and all would be grand:

<div data-bb-type=”scroll-panel” style=”height: 800px” class="centerOuter">
<div id="numberDiv" class="centerInner"></div>
</div>

Notice I also added a style tag to specify the height of the panel. This style tag limits the height of the div and helps to create the scrolling affect I wanted. Now the numbers could scroll and the delete button could stay put. However, there was an unforeseen side effect: I lost the centering of the numbers.

It turns out that the only formatting you can add to the scroll panel is style=”height: ###px”. This tag is necessary so the panel knows its boundaries. Without this style, the panel would occupy the whole screen. At first I thought: no center, bummer. But not to worry! There is a simple solution: keep the centerOuter and centerInner divs the way they were and add the scrolling panel as a wrapper:

<div data-bb-type="scroll-panel" id="scrollPanel" style="height: 800px">
<div class="centerOuter">
<div id="numberDiv" class="centerInner"></div>
</div>
</div>

Voila! I now have the centered, scrollable sets of numbers while the delete button stays right where it is. Groovy!

Since BlackBerry® 10 Jam, we’ve received lots of great feedback on the bbUI framework. Your collaborative effort is really helping to evolve the framework, so please keep the feedback flowing! We’ve been working hard to add in all the BlackBerry 10 goodness and now have a bunch of new functionality ready to go.

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.2, and check out the closed issues for bugs that have been fixed. The v0.9.2 markup changes are fairly minor and are meant to make your life easier as we move forward.

Notable Improvements

• BlackBerry 10 Grid List
• Now supports both square 1:1 and widescreen 16:9 image formats
• Added press-and-hold context menu support
• Only shows translucent overlay if either a title or sub-title is provided
• Supports both solid and gradient headers
• Header text justification added
• Image List
• Supports both solid and gradient headers for BlackBerry 10
• Image display effects for BlackBerry 10
• Added placeholder images for items without image content on all BlackBerry operating systems
• Supports a “text only” mode on all BlackBerry operating systems
• New touch and click highlighting to match BlackBerry 10 UX specifications
• Ellipsis added to the end of long text in arrow and image lists
• HTML5 input fields now supported in Label/Control containers
• Added slider styling for BlackBerry 10 with some funky animation
• Added progress indicators for all BlackBerry operating systems
• New title bar support with buttons for BlackBerry 10
• New radio button styling for BlackBerry 10 with some slip-and-slide animation

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.

• The bb.init() function no longer takes a bb10AccentColor. This color is now generated as a shade of the bb10HighlightColor.
• Header text alignment has been moved off of the individual headers on an image list and moved to an attribute of the image list itself. Make sure you check out the Image List documentation for the correct markup.
• Grid lists used to have header text left justified by default — they are now center justified by default.
• Back Buttons must be explicitly created in Action Bars for BB10 styling. Action bar will no longer be created “automagically” if the screen has a title bar with a back button specified.
• The toolkit file names have changed to bbui-0.9.2.js and bbui-0.9.2.css

More to Come

We’ve now created an additional BlackBerry 10 milestone for bbUI that contains some more BlackBerry 10 UI goodness. If you’re interested in following the bbUI.js changes as they go, feel free to follow me on Twitter.

Now that we’ve covered what’s new and what’s changed, I think it’s time for some eye candy

Square 1:1 Grid List and Slider

Radio Buttons and Progress Indicators

New Image List Headers and Placeholders

Take a look and let us know what you think:

[ YouTube link for mobile viewing ]

[ YouTube link for mobile viewing ]

[ YouTube link for mobile viewing ]

[ YouTube link for mobile viewing ]

Back in November of last year, we started up a little open source project which has quickly been gaining steam within our web development community. It was born from humble beginnings as a set of UI examples to show how to style your BlackBerry® WebWorks™ + HTML5 content with CSS to look like a native app, allowing users to have a consistent application feel in a web application. After a lot of hard work, I’m happy to announce that bbUI now has BlackBerry® 10 support…but more on that later

A little bit of History and Philosophy

While there are existing UI frameworks out there such as Sencha and jQuery Mobile, there was still a need to create a pixel-perfect application on the BlackBerry platform that also incorporated unique BlackBerry input mechanisms. Features such as the optical track-pad to give end users the experience they expected on a BlackBerry smartphone. Typically these other frameworks are touch only, and the trackpad has been the center of attention on existing BlackBerry smartphones as it requires some special treatment.

We took the opportunity to break out the look and feel provided in those examples, and set out on an adventure to transform them into a JavaScript® UI toolkit that would incorporate concepts of Adaptive Web Design to handle the different devices in the BlackBerry portfolio. This meant handling touch/trackpad inputs, multiple screen resolutions, proper memory management, and an evolution of the BlackBerry UI from BlackBerry® 5.0 to today.

The whole philosophy of the toolkit is to provide a responsive native-looking experience for the end user while incorporating best practices in the toolkit to make it as fast as possible on each of the different device versions. This means things like using AJAX and HTML fragments for pushing/popping screens to save precious memory, and only manipulating the styling of the screen when it’s not connected to the DOM to reduce layout computation.

We’ve provided a bunch of samples and documentation on how to use the toolkit, its controls and more information around the philosophy, so please do check it out on github. We’ve also been getting some great community contributions to the toolkit. So a big “thank you” goes out to those who have been helping!

Now for the cool stuff

We just posted up the latest version of bbUI that incorporates the BlackBerry 10 look and feel so that your BlackBerry WebWorks + HTML5 applications can look right at home on BlackBerry 10. Oh…and did I mention that the toolkit also provides this same look and feel on the BlackBerry® PlayBook™ tablet? Giddy-up!

That’s right – this means you have the ability to bring all the BlackBerry 10 core controls and concepts such as action bars, slide in menus, grid lists, context menus, dropdowns, buttons and so on to your BlackBerry WebWorks application on BlackBerry PlayBook tablets, and also on BlackBerry 10.

While there’s already a lot in bbUI to get you started, there’s still more BlackBerry 10 goodies to come:

• Tab overflow menus
• Sliders and progress indicators
• Checkboxes and Radio buttons
• Top title bars with integrated toolbar buttons

We’ve posted the details on how to use all these features right in the root of the github project so that you can get rolling today. I’m always tweeting about #bbUI, so if you want to hear my constant ramblings feel free to follow me @brcewane…that’s right, “I’m Batman.”

Now for the eye candy!

Grid Lists and Image Lists:

Action Bar Toolbars with Tabs, Buttons and sliding overflow menus:

Press and hold slide in context menus. “Peek” the menu on press-and-hold to show the icons, and then swipe if you want to bring it into full view:

Crazy animated Dropdown buttons, Inputs with built in delete buttons and styled buttons and pill-buttons: