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!

About Tom Anderson

Tom Anderson – Senior BlackBerry Developer Evangelist – Tom started his career in 1986 with Microsoft Corporation where he was a Program Manager on such products as Windows 3.11, Windows for Workgroups, Windows 95, and Internet Explorer. He was also the creator of the Windows Resource Kit which began that product line. In addition, Tom presented at many trade shows and gave technical presentations with the Microsoft Executive Staff. He left Microsoft in 1995 to form Three Points Consulting with Marianne Reid Anderson and Bob Taniguchi. Three Points focused on bringing the power of the emerging internet technology to everyday life. Tom’s innovative technology solutions played a key role in the successful acquisition of Three Points by TechRx. At TechRx, he acted in the role of CTO until it was acquired by NDC Health of Atlanta, Georgia. In 2004, Tom decided to become a High School Teacher as his primary method of giving back to the community. In 2005 he joined the Pennsylvania Cyber Charter School (PA CYBER) where he was awarded the Keystone Award for Innovative Use of Technology in the Class Room. During this time, he also earned a Master’s degree in Software Design through Capella University. In 2009, in addition to teaching, Tom returned to software development creating various web and mobile applications.

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus