Shane Cridlebaugh

Shane Cridlebaugh

Co-founder and legal nay-sayer of OSBB. Owner of SCrApps Application Development, WebWorks aficionado, Open Source contributor. SCrid2000 on most blogs. I build awesome BlackBerry apps when I'm not doing legal work or spending time with my wife and two boys.


Follow me on Twitter - @GShaneC

Check out my apps in BlackBerry World

Website URL: http://SCrApps.org

Backing Up Your Data

Normally here on OpenSourceBB we focus more on the How To of coding; this article is more a How To on not having the worst day ever: backing up your data.

It seems like every few weeks I talk to someone who had some sort of catastrophic data loss regardng their app development - anywhere from losing a few hours of coding work (which sucks, but can be redone), to losing their BlackBerry signing keys and being unable to ever update their apps again (BlackBerry seeks to prevent that with their new signing tokens, but that's no excuse to not be safe).

Now, there's no wrong way to back up your apps, signing keys, and other personal data that has nothing to do with coding. But I'm listing here a couple that I personally use. If you have a few tips or tricks of your own, we'd love to here about it at http://forums.crackberry.com/opensourcebb-f402/how-your-development-pc-set-up-836667/.

Simple BBM Integration in WebWorks

Jeremy wrote up a great article about integrating BBM into Cascades, and a few people mentioned they wanted to see an article about getting BBM integrated with WebWorks. I've been kind of off the radar lately, but figured this was a good topic for me to do a quick writeup on.

Now, to contnue with some friendly teasing I directed at Jeremy eariler: integrating BBM into Cascades may be easy, but integrating it into WebWorks makes integrating it into Cascades look like rocket science. Yes, it really is that easy.

The Power of Ant Build

There's several official ways for WebWorks developers to package their apps: Ripple (which I have personally never actually used) and the command line (my former favorite) being the big two. However, Tim Windsor from the BlackBerry Dev Relations team created what is, in my opinion, the best and easiest way to package and sign your WebWorks apps: the Ant Build Script.

If you want to skip the rest of this post and read Tim's excellent documentation on getting it all set up, just head over to https://github.com/blackberry/BB10-WebWorks-Community-Samples/tree/master/Ant-Build-Script. But if you're not convinced yet, read on.

First, why is the Ant Build Script awesome? 

It's awesome because it lets you quickly and easily compile your apps via the command line in a variety of ways. Before I had the Ant Build Script, I'd write my app, add it to a zip, move it to a folder I set up for signing/packaging, open the command line, and type "bbwp c:/apps/AppName.zip -g mypassword -buildId 0"; if I wanted to say add web inspector, I'd have to add -d, and there were a few other operators that I've forgoten. Then I'd drag it to a sideloading bat to sideload it onto my BlackBerry.

With the Ant Build Script, all I have to do is open the command line tool in the app folder (shift+right click) and type "ant build" and my bar is compiled and sideloaded to my BlackBerry. That simple.

If that convinced you that the Ant Build Script is awesome (if it didn't, read it again), then here's how to get it set up:

Set Up

1Download the Ant Build Script from https://github.com/blackberry/BB10-WebWorks-Community-Samples/tree/master/Ant-Build-Script and extract it to somewhere you don't mind keeping it.

2Open the buildTasks.xml (it's in the tools folder) with a program like Notepad++ and edit the variables you need, such as the location of your SDKs and your signing key password.

3Download Apache Ant from http://ant.apache.org/bindownload.cgi (you want the binary zip)

4Unzip Apache ant anywhere you want (I put it into the root of my C drive)

5Add Ant_Home to your System Variables

The easiest way to do this is to type "System Variables" into the Windows Search bar. You can also get to it by right clicking on the computer icon.Click the "New" Button.
For Variable Name, type ANT_BUILD For Variable Value, enter the directory of the Ant build folder. For me, that was C:/ApacheAnt

6Now, whenever you want to package a new app, copy the build.xml file from the Ant Build Script folder, edit it to suit your needs, and run "ant build"

That should be it! If you have any problems with my instructions, check out Tim's to see if he explained something better than I did, or email us here at OSBB to let us know.

getUserMedia: stream video to your BB10 WebWorks App

If you ever wanted to stream into your BlackBerry 10 WebWorks app, it's pretty simple to do. This tutorial will include a brief example showing how to do it (and include all the necessary code).

1. Prepare all the basic elements for your app; the config.xml, any custom scripts and styling, and get everything set up.

2. Add the needed features and elements to your config.xml:

<rim:permissions>
<rim:permit>use_camera</rim:permit>
</rim:permissions>

I also recommend you use the following to lock the orientation: 

<feature id="blackberry.app">
<param name="orientation" value="portrait" />
</feature>

3. Create the following video and canvas elements on the page you want to stream video to:

<canvas id="canvas"></canvas>
<video id="video" style="display: none;" autoplay></video>

You'll probably want to include the height/width of your canvas in that element.

4. Add the code!If you're using bbUI, you can add it to the onDomReady event. If you're not, the easiest way to use it is to use a DOMContentLoaded event listener: document.addEventListener('DOMContentLoaded', function() {})

var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d')
navigator.webkitGetUserMedia({video: true}, function(stream) {
     video.src = window.URL.createObjectURL(stream);
     setInterval(function () {ctx.drawImage(video, 0, 0, 300, 500);}, 20);
});

That's it! 

And if you're on your BlackBerry 10 device, or using Google Chrome, here's the above code in action:

Click here to see the code in action

WebWorks File API Framework

One of the things I love about developing for BlackBerry 10 is that BlackBerry has really done well at implementing HTML5 standards (and a quick visit to http://html5test.com confirms it). While this is awesome as far as creating robust HTML5 apps is concerned, it means that developers have to learn new technologies that might not be fully implemented in your web browser. As an example, webkitGetUserMedia only recently showed up in Chrome.

The File API isn't all that new (it's been around a while now), but it's something that I couldn't find a whole lot of documentation for it. There is a very, very good article at http://www.html5rocks.com/en/tutorials/file/dndfiles/, but it's (in my opinion) a fairly involved API.

The great folks over at BlackBerry have implemented the File API, but that doesn't necessarily mean it's easy for developers to start using. And since the web is all about frameworks these days (JQuery, Sencha, etc), I figured I'd do a mini framework of BlackBerry specific File API functions to make things easy for other WebWorks Devs to implement saving and loading (including backup and restore) to their apps!

This framework is Open Source (so you can browse my typos without even downloading it), and you can check it out at My Github.

You can check out the readme in the github link to see how it works, but here's the quick how-to:

1. Include the javascript in your index.html

Example: <script type="text/javascript" src="/cssjs/bbfiles.js"></script>

2. Add the required feature IDs to your config.xml:

<feature id="blackberry.invoke.card" />
<feature id="blackberry.io" />
<feature id="blackberry.ui.toast" />

3. Create a function for whatever you want to do. Functions that are available: 

Save text to a specified file:
saveText(Text to save, save location and file name)
Example: saveText('Hello World!', '/accounts/1000/shared/misc/helloWorld.txt')

Save text to a file of the user's choice:
saveText(Text to save, location to open the file picker, 'picker')
Example: saveText('Hello World', '/accounts/1000/shared/misc/', 'picker')

Load text from a file:
loadData(location of document)
Example: loadData('/accounts/1000/shared/misc/helloWorld.txt')

Load text from a file of the user's choice:
loadData(location to open the file picker, 'picker')
Example: loadData('/accounts/1000/shared/misc/', 'picker')

Delete a specified file:
deleteFile(file location and name)
Example: deleteFile('/accounts/1000/shared/misc/helloWorld.txt')

Delete a file of the user's choice:
deleteFile(location to open the file picker, 'picker')
Example: deleteFile('/accounts/1000/shared/misc/', 'picker')

Create a folder:
createFolder(folder to create)
Example: createFolder('/accounts/1000/shared/misc/New')

Delete a folder:
deleteFolder(folder to delete)
Example: deleteFolder('/accounts/1000/shared/misc/New')

Move a file:
moveFile(location to move the file to, current file location and name)
Example: moveFile('/accounts/1000/shared/misc/downloads/', '/accounts/1000/shared/misc/helloWorld.txt')

Move a file of the user's choice:
moveFile(location to move the file to, location to open the file picker, 'picker')
Example: moveFile('/accounts/1000/shared/misc/downloads/', '/accounts/1000/shared/misc/', 'picker')

Move and Rename a file:
moveRenameFile(location to move the file to, current file location and current file name, new name)
Example: moveRenameFile('/accounts/1000/shared/misc/downloads/', '/accounts/1000/shared/misc/helloWorld.txt', 'newFile.txt')

Move and Rename a file of the user's choice:
moveRenameFile(location to move the file to, location to open the file picker, new name, 'picker')
Example: moveRenameFile('/accounts/1000/shared/misc/downloads/', '/accounts/1000/shared/misc/', 'newFile.txt', 'picker')

Copy a file:
copyFile(location to move the file to, current file location and file namee)
Example: copyFile('/accounts/1000/shared/misc/downloads/', '/accounts/1000/shared/misc/helloWorld.txt')

Copy a file of the user's choice:
copyFile(location to move the file to, location to open the file picker, 'picker')
Example: copyFile('/accounts/1000/shared/misc/downloads/', '/accounts/1000/shared/misc/', 'picker')

Copy and Rename a file:
copyRenameFile(location to copy the file to, current file location and current file name, new name)
Example: copyRenameFile('/accounts/1000/shared/misc/downloads/', '/accounts/1000/shared/misc/helloWorld.txt', 'newFile.txt')

Copy and Rename a file of the user's choice:
copyRenameFile(location to copy the file to, location to open the file picker, new name, 'picker')
Example: copyRenameFile('/accounts/1000/shared/misc/downloads/', '/accounts/1000/shared/misc/', 'newFile.txt', 'picker')

Rename a file:
renameFile(file location and current name, new name)
Example: renameFile('/accounts/1000/shared/misc/helloWorld.txt', 'yay.txt')

Rename a file of the user's choice:
renameFile(file location, new name, 'picker')
Example: renameFile('/accounts/1000/shared/misc/', 'yay.txt', 'picker')

Save Canvas to an image:
saveCanvas(canvas element, location and name you want to save canvas to)
Example: saveCanvas(document.getElementById('canvas'), '/accounts/1000/shared/misc/image.png')

Save Canvas to an image of the user's choice:
saveCanvas(canvas element, location to open the file picker, 'picker')
Example: saveCanvas(document.getElementById('canvas'), '/accounts/1000/shared/misc/', 'picker')

Load image to Canvas:
loadCanvas(canvas element, image to load', 'nopicker', width you want image to load, height you want image to load)
loadCanvas(document.getElementById('canvas'), '/accounts/1000/shared/misc/image.png', 'nopicker', 500, 300)
Note: 'nopicker' can be any text except 'picker'. It is optional, unless you specify a height and width (which are also optional).

Save image of the user's choice to Canvas:
loadCanvas(canvas element, location to open the file picker, 'picker', width you want image to load, height you want image to load)
loadCanvas(document.getElementById('canvas'), '/accounts/1000/shared/misc/', 'picker', 500, 300)

That's it! Maybe not as simple as simple can get, but a lot better than writing the function out yourself :)

Who uses BlackBerry?

This morning (right now actually) I attended a Market Insights session at BlackBerry Live, and what I learned was at first surprising, although in retrospect I perhaps should have suspected.

I'm going to keep it short because this post is coming from my Z10, but the presenters discussed who uses BlackBerry the most.

According to the presenters, people in their 30s to 60s are most likely to use BlackBerry, and more likely to use BlackBerry versus other smart phones as compared to other age groups.

More importantly for developers like me, most of those BlackBerry users have a higher education in general - which I hope means they buy apps :)

image

Hopefully more information coming out from Live later today, and thanks to @Flip4Bytes for the images I missed getting a shot of.

How to create Custom Icons for your BlackBerry 10 Device

The thing I most miss about the Java based BlackBerry's is decent Twitter apps - I really wish there was a Twitter app for BB10 that was as good as T4BB or one of the other choices, or as good as Blaq for the PlayBook. A close second to that though is theming - I was very disappointed when BlackBerry decided not to launch Theme Builder for BlackBerry 7, and far more disappointed when it was announced that there would be no BlackBerry 10 Theme Builder.

A small amount of customization can be contrived using apps like my recent Z Theme app, but that doesn't let you modify the device icons. However, there is a way to create a shortcut for many of the existing applictions. For a more in-depth explanation of how these icons work, read this CrackBerry Forums post.

Creating your Custom Icons:

Step 0: Get BlackBerry Signing Keys and configure your PC for signing.

Step1: Download the templates from my Github: https://github.com/SCrid2000/BlackBerry-URI-Builder, and copy the templates you'd like to use into a folder on your desktop.

Step 2 (optional but recommended): Set up the signing tools. To make this easy, I have provided downloads for all needed signing tools. Get the signURI.bat and sideloadFile.bat files from github and put them into a folder with the signing tools contained at http://www.mediafire.com/?qq64yck165xtbwc.
You'll need to open the .bat files with a text editor to add your Signing Key Password and BlackBerry IP/password to them. 

Step 3: Get the icon you'd like to use. Resize it to be 114x114 pixels, and place it in the folder with the META-INF folder.

Step 4: Modify the MANIFEST.MF of the launcher you'd like to create. You will need to modify the following:
Package-Version: must be increased by at least 0.0.0.1 for each successive signing;
Application-Version: must match Package Version;
Archive-Asset-SHA-512-Digest: does not always need to be updated, but sometimes might cause signing to fail.  Use a site like http://hash.online-convert.com/sha512-generator to get the appropriate SHA-512 hex for your image.

Other attributes can be modified if you'd like, such as Application-Name, Entry-Point, and others. However, this is unnecessary if you just use the templates included in the Github link above.

Step 5: Compress the icon.png you created and the META-INF folder containing the MANIFEST.MF file into a .zip file. Change the .zip extension to .bar

Step 6: Sign the URI by dragging it onto the signURI.bat

That's it! Just do that for any icon you want a custom icon for, and sideload it to  your BlackBerry!

Keep in mind that these are shortcuts, and will not replace the stock icon.

Visual Connection (also, dynamic bbUI coding).

A few weeks ago, early on a quiet Sunday morning, I felt the familiar buzz in my pocket that means someone had posted a comment in one of my BBM groups. With an ease born of inestimable hours of experience, I whipped out my BlackBerry to mock the person who was wasting their weekend morning by being awake.

The mocking never actually happened; as I read the BBM group post from Brian, I decided that the idea was quite good, and worth discussion (Brian also lives 2 time zones over for me, so mocking him for being awake wouldn't have made much sense).

"Hey, my wife got this really cool game on her phone where you guess a word based on pictures. There isn't anything like that for BlackBerry, why don't we make one?"

We decided to make the BB10 version in Cascades (which is what Brian uses, because it's absolutely amazing for BlackBerry), and the PlayBook version in WebWorks (which is what I use, because it's not quite as amazing for BlackBerry as Cascades yet (but close), but is amazing in general). After over a week of intensive coding, development, and testing, Visual Connection was born.

//End fancy sentimental backstory.

I could go on about how cool Visual Connection is (because it is. It's awesome. To quote Trogdor, "Ohh... this is the best game I've ever played"), but that's really not that beneficial to anyone unless you haven't tried the game, in which case, you should head over to BlackBerry World and get it (Hypnotoad wants you to buy Visual Connection). So instead, I decided to briefly show how you can use bbUI to keep your code small, by creating a template and loading elements with JavaScript. This is the method used in Visual Connection to stop the app from being huge - if there was a seperate .html document for each level, that would be 300 pages, soon to be 400. If you want to follow along, I've included a very simple sample at the end of this post that you can download and test in Ripple.

1. First, get slightly familiar with bbUI. If you've never heard of bbUI, check out https://github.com/blackberry/bbUI.js.

2. Next, create your template. In the example, the template is called screen.html. You'll use bb.pushScreen('page',''id') to load it.

3. Write the JavaScript functions that will load different things based on the bb.pushScreen ID. In the example, this is what it looks like:

if (id == 'page1') element.getElementById('pagetext').innerHTML = "You loaded screen.html with a page ID of 'page1'. Yay!"
if (id == 'page2') element.getElementById('pagetext').innerHTML = "This time, you loaded screen.html with a page ID of 'page2'. See how it's different?"

(because we're using onscreenready, we use element instead of document).

4. Insert the javascript code into the onscreenready function of the bbUI index.html.

5. Run your app!

As you can see, it's a fairly simple process that can be used to help keep the size of your app more manageable.

Download the dynamic-bbUI sample

Check out Visual Connection in App World

If you want to read about the Cascades version of Visual Connection, check out Brian's BBCascades blog post.

Install BB10 OS 10.0.10.261 onto your Dev Alpha (or Zed10)

 

If you, like me, are a developer who was lucky enough to get a BlackBerry 10 Dev Alpha but isn't in an area that has the Zed10 available for purchase yet, you can still enjoy all the awesomeness that is BlackBerry 10!

This morning, our good buddy xSacha leaked an autoloader for BlackBerry 10 OS onto the CrackBerry Forums. For some reason, xSacha released the slightly older 10.0.0.9.2372.

Now, that OS download will work on your Dev Alpha, and install full BlackBerry 10 on it. And let me say, it's pretty freaking awesome.

However, after xSacha's work, and in part thanks to some inspiration from CB forum member borceg, an even newer full BB10 OS is available, and works perfectly on the Dev Alpha as well!

You can get 10.0.10.261 for your DEV ALPHA from Mega.co.nz here"

DEV ALPHA DOWNLOAD

ZED10 DOWNLOAD

CAUTION! MAKE SURE YOU GET THE CORRECT INSTALLER. OSBB IS NOT RESPONSIBLE FOR ANY PROBLEMS YOU HAVE AS A RESULT OF INSTALLING THIS SOFTWARE!

This installer has been .zipped to reduce it's size (by some 500mb or so), which should make it easier to download. So far all BB10 features seem to be working on my Dev Alpha A, and on another OSBB member's Dev Alpha B. For some reason it prints your pin on the sides of the device if you have a Dev Alpha A, but IMO that's a small price to pay to get full BB10.

For more OSes, check the OSBB BB10 OS Download Page at http://opensourcebb.com/bb10-oses/

Let us know how the install works for you!

INSTALLATION INSTRUCTIONS

1. Download the OS. Because of the way mega.co.nz is set up, you'll probably need Google Chrome to do that.

2. Unzip it.

3. Connect your Dev Alpha to your PC.

4. Run the .exe. You might need to do a hard shut down of your Dev Alpha (hold the power button), disconnect it from your PC, and connect it again.

5. Let it install and go through the setup.

NOTE! If you are presented with an OS update during setup, Skip it!

A few other older OS Autoloaders are also there, and will be added to the OSBB BB10 OS Download list soon.

*Small disclaimer - it's not my or anyone else's fault if this bricks your device or makes your house explode or cats run away. Informational purposes only, etc., etc.

Subscribe to this RSS feed
Subscribe to the official OSBB BBM Channel!

osbbchannelQR

C00013E89

Back to top