Web and WebWorks Development

[arnoldc]

Wonder if anyone has more insight about this new feature?  There is not whole lot of information about Ripple in general and its official site is vastly outdated.

I have been waiting for Ripple to support  blackberry.io.file and blackberry.io.dir.  

1.  It says it supports BB10 Webworks file system APIs, would it also work for Webworks for Tablet too?

2.  Where does it read/write to exactly to emulate a device's file system. 

My app reads some text files and it would be great if I can test it on Ripple rather than real device everytime. 

Thanks in advance.

[anzor_b]

Hello Arnoldc,

HTML5 Filesystem API is supported in Ripple for both WebWorks for Tablet and WebWorks for BB10 platforms. It creates a sandboxed virtual file system within the browser to store files. The only way to load files into the file system is using the API (even when using Ripple for Chrome).

On the device, Filesystem API will write to a directory within the Application space. This space is not accessible outside the application.  

Please note, that Persistent storage requires user's permission when using Ripple within Chrome. This is achieved by using the following code:

function onInitFs(fs) {
       console.log('Opened file system: ' + fs.name);
}

// Persistent storage requires user's permission when using Ripple within Chrome
window.webkitStorageInfo.requestQuota(window.PERSISTENT, 5*1024*1024 /* 5MB */, function(grantedBytes) {
			  window.webkitRequestFileSystem(window.PERSISTENT, grantedBytes, onInitFs, errorHandler);
	}, function(e) {
			  console.log('Error', e);
});

On the device, there is no need to ask for user's permission, proceed to allocating the necessary space:

function onInitFs(fs) {
  console.log('Opened file system: ' + fs.name);
}

window.webkitRequestFileSystem(window.PERSISTENT, 5*1024*1024 /*5MB*/, onInitFs, errorHandler);

If you need access to shared resources, you will need to implement the following API's in order to get access to non-sandboxed space (Music/Pictures/Documents/etc):

1. blackberry.io.file/blackberry.io.dir on PlayBook/ BlackBerry OS 6.x,7.x.

https://developer.blackberry.com/html5/apis/blackberry.io.file.html

2. blackberry.io for BB10

https://developer.blackberry.com/html5/apis/blackberry.io.html

Please let me know if you have any follow up questions.

[arnoldc]

Thanks anzor_b but this is not really what I am looking for.  I want to learn more about how Ripple maps filesytem in emulator.  I am using WebWorks File I/O.

For instead, 

When I made a call like:

blackberry.io.dir.listFiles(blackberry.io.dir.appDirs.shared.documents.path)

This works fine in real device but in Ripple, I see it is accessing file:///accounts/1000/appdata/emulatedapp/shared/documents.  My question is: Is it mapping to any specific folder on my Mac that I can manipulate with such as I can copy a file over in which the emulator can read that file...etc

While I am on this subject, I also stumbled on another thread with similar question raised earlier this year?

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/where-does-Ripple-s-shared-folde...

[anzor_b]

Hello arnoldc,

It appears that in the later builds of Google Chrome (I believe 13 and up), the virtual filesystem used by Chrome Extensions such as Ripple is designed to be hidden from the user.

For example, I stored 4 text files using the FileSystem API in Ripple for Chrome, and found them in the following locations (renamed). It is clear that Chrome is using a database to store this information instead of keeping the files in its original form, which makes sense from a security perspective.

c:\Users\username\AppData\Local\Google\Chrome\User Data\Default\File System\001\p (for persistent) \00\00000000 (instead of log.txt)

As a workaround, have one application store the files and test retrieving the files using the application you are working on.

FYI, the virtual filesystem may be accessed in Chrome using the following URLs:

filesystem:http://localhost/persistent/

filesystem:http://localhost/temporary/

You may also use an extension such as HTML5 FileSystem explorer to view/remove the files. (https://chrome.google.com/webstore/detail/nhnjmpbdkieehidddbaeajffijockaea)

 Edit: On mac it should be under /Users/USERNAME/Library/Application Support/Google/Chrome/Default/File System

[arnoldc]

Thanks again, anzor_b.

However I think you address about HTML5 Local filesystem, not Blackberry File APIs

I conduct some tests for more observation.

If I created a txt file within the app by calling blackberry.io.file.saveFile, a subsequent call to 

blackberry.io.dir.listFiles() will detect this file in the emulator.  But I don't see any file created physically in  /Users/USERNAME/Library/Application Support/Google/Chrome/Default/File System.

Now if I take out the save function call and re-run the app, the emulator won't detect this file(or any).  Apparently, data is not persistent and I suspect the saved file content is only cached in memory good for that session.   Look like file system emulation (for Blackberry Filesystem) is not quite there yet....

[anzor_b]

Hello arnoldc,

After further testing it appears that BB10 and PlayBook may behave differently. Using the BB10 simulator and Ripple, I was able to store a file into the Documents folder (within shared folders). Although Ripple appears to store its filesystem under Chrome's temporary storage, I was able to retrieve the file without any issues after restarting Chrome - it appears to remain persistent.

Here's the code I used.

<script type="text/javascript">

window.addEventListener("load", function(e) {
document.addEventListener("webworksready", initApp);
}, false);

function initApp(){
    // un-sandbox file system to access shared folder
	
	blackberry.io.sandbox = false;
	window.webkitStorageInfo.requestQuota(window.PERSISTENT, 5*1024*1024, function(grantedBytes)   {
		  window.webkitRequestFileSystem(window.PERSISTENT, grantedBytes, onInitFs, errorHandler);
		}, function(e) {
		  console.log('Error', e);
	});
}
		

function onInitFs(fs) {
		  console.log('Opened file system: ' + fs.name);
		  fs.root.getFile(blackberry.io.sharedFolder + '/Documents/log.txt', {create: true}, function(fileEntry) {

		    fileEntry.createWriter(function(fileWriter) {
     	               fileWriter.onwriteend = function(e) {
		       console.log('Write completed.');
		      };
		
		      fileWriter.onerror = function(e) {
		        console.log('Write failed: ' + e.toString());
		      };
		
		      var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});
		
		      fileWriter.write(blob);
		    }, errorHandler);
		  }, errorHandler);
		}
</script>

 The url to Documents folder containing the log.txt file is 

filesystem:http://localhost/temporary/rippleFileSystem/sampleapp/unsandboxed/webworksBB10/sharedFold...

Physically, log.txt was stored in 

\Users\abashkhaz\AppData\Local\Google\Chrome\User Data\Default\File System\001\t\00\

Since PlayBook does not yet support blackberry.io, I don't think there is a way to store data into persistent memory in Ripple for Chrome yet.

Can you please post your example using blackberry.io.file.saveFile, I will test on my end and get back to you.

[arnoldc]

Hmm, may be it is not supporting playbook OS platform.  Just to clarify, I use WebWorks-TabletOS Version 2.0

And here's the code I used.

function onInitFs() {    
    // file system test in Ripple
    var dest = blackberry.io.dir.appDirs.shared.documents.path;
    console.log("onInitFs: 1st checking directory="+dest);
    
    var files=blackberry.io.dir.listFiles(dest);
    if (files.length==0) {
    	console.log('onInitFs: no file found, create one');
    	var text = "HELLO WORLD";
    	var blob_data = blackberry.utils.stringToBlob(text);
    	var destFile = dest+"/log.txt";
    	
        try {
        	blackberry.io.file.saveFile(destFile, blob_data);  	
        	console.log("onInitFs: Save text file successfully");
        	
        	var files=blackberry.io.dir.listFiles(dest);
            console.log("onInitFs: 2nd checking directory="+dest);

        	console.log("list files found:"+files.length);
        	console.log("First file is named="+files[0]); 	
        } catch(e) {
        	console.log("onInitFs: Fail to save: ", e.message);
        }      	
    }	
}