Account Options

...

Code

Code

Sample Code

Using BrowserPlus™ is simpler than you might think. We've created some samples to demonstrate how simple. If BrowserPlus is installed, you'll be also be able to run the samples on this page.

Introduction

Check for and initialize BrowserPlus.

Detecting BrowserPlus

How to detect if BrowserPlus is installed.

Using Services

How to specify in your webpage what BrowserPlus services you require.

Errors & Return Values

How results are asynchronously returned.

Drag and Drop

Hooking up a drop target in a webpage.

Accessing Files

Previewing and getting contents of files that users select.

Uploading Modified Images

A demo showing how to use ImageAlter and Upload in a chain to upload images altered on the client.

File Zipper

A demo showing how to use Zipper and Upload in a chain to compress all files into one *.zip file before uploading.

All About Uploading

A demonstration of the various features of the uploader service.

Image Twiddler

A complete web application that demonstrates client side image manipulation, tying together the concepts thus far.

Publish Subscribe

Shows how two different browser windows (even from different browsers) can send messages back and forth.

Errors & Return Values

<html>
<head>
  <title>Errors and Return Values.</title>
  <style type="text/css" media="screen">
    #outputArea { width: 80%; padding: 10px; height:150px;
      border: 1px solid #999; }
  </style>
</head>

<body>
<a href="#" id="runValidCall"> run successful BrowserPlus call</a>
<br>
<a href="#" id="runInvalidCall"> run invalid BrowserPlus call</a>
<pre id="outputArea">
</div>

function dumpOutput(res) {
  var jsonText = JSON.stringify(res, null, "  ");
  var outputArea = document.getElementById("outputArea");
  while (outputArea.firstChild) {
    outputArea.removeChild(outputArea.firstChild);
  }
  outputArea.appendChild(document.createTextNode(jsonText));
}

function bpLoaded(res) {
  if (res.success) {
    BrowserPlus.PStore.set({key: 'foo', value: [1,2,3,'bar'] },
      function(){});

// set up our links 
    document.getElementById("runValidCall").onclick = function() {
      BrowserPlus.PStore.get({key: 'foo'}, dumpOutput);
      return false;
    }

document.getElementById("runInvalidCall").onclick = function() {
      BrowserPlus.PStore.get({key: 'foo', bogus: 'no such param'},
        dumpOutput);
      return false;
    }
  }
}

BrowserPlus.init(function(res) {
  if (res.success) {
    BrowserPlus.require({services: requiredServices}, bpLoaded);
  } else {
    alert("BrowserPlus required!");
  }
});
</script>
</body>
</html>

Run this Code

Description

This sample demonstrates the conventions used when data is returned from a BrowserPlus service. The PStore service is the tool we use to explore return values.

In the previous sample we covered the asynchronous nature of service invocation, in this sample we'll go a little further into the structure of information that's returned. Here we can see that BrowserPlus.PStore.get() is invoked with two arguments: the first is an object holding named arguments, the second is a function which will be invoked when the call completes. This function accepts a single argument which holds the status of the call and returned data. This two argument calling convention is common to all functions on all services.

What we haven't covered yet is how information and errors are returned inside the argument to the callback function. Result callbacks will always be invoked with an object. That object will always have a success property. When success is true, the value property will contain the return value of the function. Here is a JSON depiction of a return object resulting from a successful service invocation:

When there are errors in the invocation, the success property holds boolean false, and an error member is present which includes a textual error code. Optionally, a verboseError property may also be present which holds a developer readable english string describing what went wrong:

With this last bit of foundation laid, we're ready to jump in and start building web applications on BrowserPlus. Next we'll look at a key BrowserPlus feature, which allows javascript to get at drag and drop from the desktop...