Creating Crochet Buddy HD for BlackBerry PlayBook using bbUI.js

[caption id="attachment_4204" align="aligncenter" width="540" caption="Crochet Buddy HD for the BlackBerry PlayBook"][/caption]

Recently, my first ever attempt at app development (Crochet Buddy HD) launched in App World for the BlackBerry PlayBook. Given my level of app development experience prior to embarking creating Crochet Buddy HD (zero), I thought other aspiring developers might benefit from reading a little bit about my experiences along the way—from concept to version 1.0 of my app.

The Inspiration

On May 1, 2012, the annual BlackBerry World Conference (BBWC) kicked off in Orlando, Florida. BBWC is an annual occurrence in Orlando, but this year it was different—much different.  This year, the BlackBerry Jam developer conference ran alongside BBWC, and I was fortunate enough to be in attendance. Although I have been building websites for myself and clients for several years, I never considered myself a web developer, but rather I considered myself to be a “website guy.” I utilized the available content managements systems, software, and other tools that are freely available and created or improved websites for clients.

The previous withstanding, I have always wanted to make the jump from website guy to web developer, so when I was told I would be able to attend BlackBerry Jam in Orlando (thank you RIM), I was ecstatic. BlackBerry Jam in Orlando was the first major BlackBerry conference I have been able to attend, and it was amazing.

I attended several sessions covering topics pertinent to web development while at the conference, and one session in particular was very beneficial to me—the “Create Outstanding HTML5 User Interfaces Using Easy, Available Toolkits” session.  Given my background, having a readily available UI framework in which to run my content really interested me. In short, I attended this session and immediately decided this was the framework on which my first BlackBerry app would be based.

The Concept

After deciding to use bbUI.js as the UI framework for my first app, I was now faced with deciding on the subject matter of the app. Honestly, I was approaching the development of my first app as a learning experience and really did not care what the subject matter was, but I at least wanted the app to be useful to someone.  Conveniently, my wife had recently begun crocheting on a regular basis, so the idea of a crochet helper app was born.  Now that these three decisions had been made it was time to actually make the app.

Creating Crochet Buddy HD

bbUI.js is hosted on GitHub and is freely available to anyone interested. Once I had the source downloaded, I uploaded to my server and began reading the code and tinkering. Right away I was surprised to see the very straight-forward and (dare I say) simple structure of the code in the bbUI.js sample app.  Originally, I had planned to develop this app for the DevAlpha first because I thought it would take me several months to figure everything out. However, I was quickly able edit down the sample application and replace the existing, sample code with my own content resulting in my first prototype app!

Feeling comfortable with the structure and function of bbUI.js, I made the decision to optimize for PlayBook first, and decided I would optimize for BlackBerry 10 prior to the official launch of the new platform.

I have seen lots of success with Crochet Buddy HD. Crochet Buddy HD has been used by RIM developer relations for bbUI.js demonstration purposes and it is also featured in App World starting today!

If I can have this much success using bbUI.js, any new or veteran developer can too!

bbUI.js Features Used

Essentially, I only used action bar, lists, and buttons in the creation of Crochet Buddy HD.

The Action Bar

[caption id="attachment_4207" align="aligncenter" width="413" caption="The Action Bar in bbUI.js"][/caption]

The action bar is the main navigation bar for a bbUI.js app. It can contain buttons and tabs which can trigger various actions and/or display tabs. When developing my app, the action bar was very simple to use and it's implementation is straightforward. 

Sample Action Bar code:

[sourcecode language="html"]

<div data-bb-type="screen" data-bb-scroll-effect="on">

[Page HTML code goes here]

<div data-bb-type="action-bar"></pre></pre>
<div data-bb-type="action" data-bb-style="button" data-bb-img="images/<span class=">actionBar/cog_dark_theme.png" onclick="bb.pushScreen('HTML_File.htm');" data-bb-title="Action Title">Text Under Button</div>
<pre>
<pre>

</div>

[/sourcecode]

Lists

Within bbUI, Arrow Lists, Image Lists, and Grid lists are available.  When calling a list (in this case an Arrow-List), the following code is used:

[sourcecode language="html"]
<div data-bb-type="text-arrow-list">
<div data-bb-type="item" onclick="alert('click')">Sleepy</div>
<div data-bb-type="item" onclick="alert('click')">Sneezy</div>
<div data-bb-type="item" onclick="alert('click')">Dopey</div>
<div data-bb-type="item" onclick="alert('click')">Grumpy</div>
<div data-bb-type="item" onclick="alert('click')">Doc</div>
<div data-bb-type="item" onclick="alert('click')">Bashful</div>
<div data-bb-type="item" onclick="alert('click')">Happy</div>

</div>

[/sourcecode]

The action bar serves as my navigation framework, and the lists serve as my embedded menus within my app.
Now that the app had navigation and list elements, all that was left for me to do was to add my contents for the individuals sections of my app, and I was well on my way to having a working app!

Overall, I was very impressed with the amount of effort going into the development of bbUI.js, and I was blown away by how easy the framework is to use.  Any web developer that is interested in getting into app development would have no problem creating killer apps with bbUI.js.

For the purposes of this article, I briefly cover the steps that went into creating Crochet Buddy HD. For a detailed tutorial on building a sample bbUI.js sample application make sure you check out my full tutorial on OSBBx here

Leave your comments

Post comment as a guest

0
  • No comments found
Subscribe to the official OSBB BBM Channel!

osbbchannelQR

C00013E89

Back to top