Cross-Application Data Interaction in Firefox OS

Due to security restrictions, cross-origin invocation of WEB applications is troublesome. Traditional methods include server proxy and jsonp interfaces. However, in firefox OS, such a large discount is not required. The cross-application interaction mechanism has been provided in firefox OS. Although it is not very convenient at present, it can already implement basic cross-application interaction apps. This document uses an actual DEMO to explain the cross-application invocation of B2G.

Overview

This article will develop two applications: Application 1: Caller and Application 2: worker er

Caller has a Show Images button. Click this button to start the consumer er. The consumer er provides some Image Browsing functions. After selecting an image in the consumer er, click the Select button, transfers the image to Caller and displays the selected image in Caller.

The overall effect is as follows:

 

Caller Application

Receiver Application

Details

Cycler

In Firefox OS, to allow an application to be called by other applications, you must declare the application in manifest. webapp. Let's take a look at the manifest. webapp file of the explorer.

 
 

  
  
{  
  
  
     "name": "Receiver",  
  
  
     "launch_path": "/index.html",  
  
  
     "developer": {  
  
  
         "name": "chyblog",  
  
  
         "url": "http://www.chyblog.com"  
  
  
     },  
  
  
     "icons": {  
  
  
         "120": "/style/icons/Receiver.png"  
  
  
     },  
  
  
     "permissions": [  
  
  
         "background",  
  
  
         "backgroundservice",  
  
  
         "attention",  
  
  
         "contacts",  
  
  
         "settings",  
  
  
         "desktop-notification"  
  
  
     ],  
  
  
     "activities": {  
  
  
         "pick": {  
  
  
             "filters": {  
  
  
                 "type": ["image/png", "image/gif"]  
  
  
             },  
  
  
             "returnValue": true,  
  
  
             "disposition": "inline"  
  
  
         }  
  
  
     }  
  
  
 }  
 
 

The activities attribute declares a web activity named pick. The filters attribute tells the system which types of request responses are applied by the Cycler, and the response name can be pick, A response whose type is image/png or image/gif.

ReturnValue is a Boolean attribute. If it is set to true, the web activity must return data to the application that calls it. If it is set to false, no data is returned to the caller.

The disposition attribute has two optional values: window and inline. If it is a window, it will be opened by starting a new application. If it is an inline, the application interface is displayed on the screen.

In the javaser application, you also need to use js to write the processing code for response calls.

 
 

  
  
navigator.mozSetMessageHandler('activity', webActivityHandler);  
  
  
 
  
  
var activityRequest;  
  
  
 
  
  
var webActivityHandler = function(request) {  
  
  
    activityRequest = request;  
  
  
 
  
  
    document.getElementById('button').disabled = '';  
  
  
    document.getElementById('cancelButton').disabled = '';  
  
  
 };  
 
 

The preceding code registers an Event Response handle and stores the requester information in the global variable activityRequest.

When you click the Select button, the image information is sent to Caller. The Code is as follows:

 
 

  
  
function select() {  
  
  
    if (!activityRequest) {  
  
  
        alert('There are no any pending activity request.');  
  
  
        return;  
  
  
    }  
  
  
 
  
  
    // Return the request  
  
  
    activityRequest.postResult({  
  
  
        type : 'image/png',  
  
  
        text : getBase64Image(selectedImg)  
  
  
    });  
  
  
    activityRequest = null;  
  
  
 
  
  
    // close app, currently useless,  
  
  
    // see https://bugzilla.mozilla.org/show_bug.cgi?id=789392 
  
  
    window.close();  
  
  
};  
 
 

Because the data interaction between the two applications can only be transmitted using text information, the image in the Caller is sent to the Caller in base64 text encoding mode. In the Caller, set the text to backgroundImage, the code for obtaining the base64 encoding of the image is as follows:

 
 

  
  
function getBase64Image(imgSrc) {  
  
  
    var img = new Image();  
  
  
    img.src = imgSrc;  
  
  
    var canvas = document.createElement("canvas");  
  
  
    canvas.width = img.width;  
  
  
    canvas.height = img.height;  
  
  
    var ctx = canvas.getContext("2d");  
  
  
    ctx.drawImage(img, 0, 0);  
  
  
    var dataURL = canvas.toDataURL("image/png", 0.2);  
  
  
    return dataURL;  
  
  
} 
 
 
 

Caller

In the Call application, it mainly triggers the response of the caller Call and receives the processing of the returned data.

Call first creates an activity request. You must inform system of the Request Name and type. And register the processing logic for successful request return and request failure. How to call a request is completely controlled by system. The code for creating a request is as follows:

 
 

  
  
 var a = new MozActivity({ name : 'pick', data : { type : 'image/png' } }); a.onsuccess = function() { reopenApp(); document.getElementById('showImg').style.backgroundImage = "url(" + this.result.text + ")"; document.getElementById('result').textContent = 'well done'; }; a.onerror = function() { reopenApp(); document.getElementById('showImg').style.backgroundImage = ""; document.getElementById('result').textContent = '(canceled)'; };
 
 

It should be emphasized that Caller and aggreger are two independent applications, and the interaction between them is the responsibility of the system app. What we need to do is declare the web activity and trigger the request and Response Request.

Source code download: http://chyblog-chyblog.stor.sinaapp.com/wp-content/uploads/2012/10/webActivity.zip