Tag Archives: BlackBerry Web Works

Create File Explorer in BlackBerry PhoneGap project


I am using PhoneGap + jQuery Mobile for my current project.
It was required to upload images from gallery.

Unfortunately, In BlackBerry we can’t open built in Gallery to pick an image. So though why not to provide my file explorer? What worked pretty well.

As I am using PhoneGap, you can also use the same code for Android and may be for WebOS. In iOS it may not work.

Your index.html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>File Explorer</title>
<script src="javascript/phonegap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="stylesheet/jquery.mobile.min.css" />
<script src="javascript/jquery.min.js"></script>
<script src="javascript/jquery.mobile.min.js"></script>
<script src="javascript/source.js"></script>
	<div data-role="page" id="FileExplorerPage">
		<div data-role="header" data-position="fixed">
				File Explorer
		<div data-role="content">
			<div id="Explorer" style="float:left"></div>

And you JavaScript magic code:

 * File explorer logic
var currentPath = "file:///store";
$('#FileExplorerPage').live('pagebeforeshow', function(event) {
function populate(path){
	try {
		var dirEntry = new DirectoryEntry({fullPath: path});
		var directoryReader = dirEntry.createReader();
	} catch (e) {
function successDirectoryReader(entries) {
    var i;
    for (i=0; i<entries.length; i++) {
        if (entries[i].isDirectory) {
        	$("#Explorer").append("<div style='width:104px;float:left;text-align:center;'><div><img src='local:///resources/folder.png' style='border:2px;' onclick='changePath(this)'/></div><div style='width:100px;word-wrap:break-word;'>" + entries[i].name + "</div></div>");
        } else {
        	var fileType = blackberry.io.file.getFileProperties(entries[i].fullPath).mimeType;
        	if (Left(fileType,5) == 'image') {
        		// if file is of type image, then show in small size
        		$("#Explorer").append("<div style='width:104px;float:left;text-align:center;'><div><img src='" + entries[i].fullPath + "' height='80px' width='80px' style='border:2px;' /></div><div  style='width:100px;word-wrap:break-word;'>" + entries[i].name + "</div></div>");
        	} else {
        		$("#Explorer").append("<div style='width:104px;float:left;text-align:center;'><div><img src='local:///resources/file.png' style='border:2px;' /></div><div>" + entries[i].name + "</div></div>");
    // add an option to go to parent directory
    if (currentPath != "file:///store") {
    	$("#Explorer").append("<div style='width:104px;float:left;text-align:center;'><div><img src='local:///resources/folder.png' style='border:2px;' onclick='backPath()'/></div><div style='width:100px;word-wrap:break-word;'>..</div></div>");
function failDirectoryReader(error) {
    alert("Failed to list directory contents: " + error.code);
function backPath() {
	currentPath = Left(currentPath, currentPath.lastIndexOf('/'));
function changePath(ele){
	currentPath = currentPath + "/" + $(ele).parent().next().html();

//Error dump function
function dump(arr,level) {
    var dumped_text = "";
    if(!level) level = 0;

    var level_padding = "";
    for(var j=0;j<level+1;j++) level_padding += "    ";

    if(typeof(arr) == 'object') {  
        for(var item in arr) {
            var value = arr[item];

            if(typeof(value) == 'object') { 
                dumped_text += level_padding + "'" + item + "' ...\n";
                dumped_text += dump(value,level+1);
            } else {
                dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
    } else { 
        dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
    return dumped_text;

//String left function
function Left(str, n){
	if (n <= 0)
	    return "";
	else if (n > String(str).length)
	    return str;
	    return String(str).substring(0,n);

Download full project from here

How to create BlackBerry WebWork PhoneGap project in eclipse?

Hi friends,

Nice to Inform you that I’ve stated working on PhoneGap for my new BlackBerry Project.

To get first running project, it took lots of time. So I decided to post on this process.

Basically you should follow steps from this official site, But in my case, it was a different experience.

I prefer to use eclipse for each project, so here also we need eclipse.
Get the BlackBerry extension(here) and Web Work extension (here).

Now open eclipse, go to create new project, and selec BlackBerry Web Works project.

Type name, and then finish

After finishing, it prompt me this error

Press ok, To build a project you need to have project.properties file in your project directory, but it is not created, so you just copy this file from sample phoneGap project (available in phonegap zip)

Copy and paste above file into you project directory:

Just copy is not enough, you need to update the path for the BlackBerry WebWork Project EXE. Open this file in text editor, we need to update the path for bbwp.dir as we will compile this project in eclipse. New path should point to bbwp.exe file. To find this file, go to eclipse installation directory, then plugins, then look for the directory with the name “net.rim.browser.tools.wcpc”, and then wcpc.

Update the file with new path:

Now refresh you project, but hey, it still display this error 😦

Right click on you project, and open project properties, then select “Project facets”

REMOVE any selection if you find, (in my case, “Static web module” was selected).

Now this removes the error from our web work project, but our project still missing PhoneGap library.

First you need to build PhoneGap Web work project with ant build, and create a jar file. To do so please follow steps from here. Starting from the Ant installation to creation of sample project.

After building source code, you will get new files, as shown here:

Copy all these files and paste to you project directory. Over right files if exists.

Now refresh you project, and try to run it, This should work. Please see following file structure, each PhoneGap project should have these kind of structure.

After running this project, you should see PhoneGap sample application,

After closing this application in simulator, you can again find it in “Downloads”! I wasn’t knowing about this, and tried a lot to search where my app! Hope you don’t waste you time!!

Hurray!! Now just start creating HTML pages with jQuery Mobile and you can build good apps…

I’ll post more on BlackBerry Web Work + PhoneGap as I proceed. Enjoy mobilisum!

If you like my work, then please buy me a Coffee!