Using bbUI.js Scroll-Panel

How-to

With the release of bbUI.js 0.9.3, a new feature appeared called the Scroll-Panel. The idea is simple enough: have a section of your application that scrolls independently of the items around it. I was waiting for this feature to be released for two reasons: First, I was there when the idea was conceived and implemented. Second, I need this feature in my ZenLottery application.

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.

TTILE_IMAGE

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!

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus