Sencha Space Invoke APISencha Space is a new way to manage, deploy and secure HTML5 applications on mobile devices. Space, launched at SenchaCon in July, is currently in developer preview. As we developed Sencha Space, we wanted to go beyond what is currently available in either web browsers or native mobile applications. We wanted a way for HTML5 applications running inside of Sencha Space to communicate with each other directly and securely. To do that, we developed a simple JavaScript API that developers can quickly add to any application they deploy in Sencha Space.

The following video shows: 1) an application that can invoke the photo app, 2) successful invocation of the photo application from the first app, 3) selection of photos using the externally invoked photo application, 4) returning the selected photos to the app that initiated the invoke call in the first place.

A quick video demonstrating how web applications running inside of space can communicate with each other using the Invoke API

Using Invoke in Foreground and Background

There are two ways applications can communicate using Invoke: foreground or background.

image

An Invoke call in the foreground will switch the user from one application to another. The user can then do some work in the second application and when done, Sencha Space will return the user to the application they started with. A simple example of this is photos. In Sencha Space, you can have an application that knows where all of your organization’s photos are. When any other application needed a photo, it would be able to redirect the user to the Photos application. The user can select the photos they want, and then they are returned to the application they started with, and the application has the list of photos they selected.

image

Background Invoke calls open up the possibility of a new class of application communication. Two applications can exchange data in the background asynchronously without the user needing to leave the application they are currently in. In the example we presented at SenchaCon, our Contacts application communicated with the chat application to get the online/offline status of the current contact and update the contact record. The Contacts application did not need to integrate a chat library or maintain a connection with a chat/presence server. It only needed to make a simple API call to the chat application running in Sencha Space.

Include the Sencha Space APIs

We also wanted to make adding Sencha Space APIs to your application as easy as possible. There are zero downloads required to get started. Simply include the CDN hosted copy of space.js in your application (and it doesn’t have to be a Sencha Touch app, it can be any HTML5 app or website):

<!– GeSHi could not find the language LANGUAGE (using path PATH) –>

How to Use Invoke Application to Foreground

To communicate with another application, you must first get a connection to it:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

If there isn’t a Photos application or your application doesn’t have permission to call that application, the failure callback will be called:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

Once you have a connection, your application can then start sending it messages:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

The first parameter of send is the JSON data you want to send to the application you are calling. The second parameter is the foreground/background boolean. A value of true is foreground and false is background.

The user will then be taken to the Photos application, allowed to select photos, and then the application will return the list of photos to your application via a callback:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

We provide the full sourcecode for the Photos application. To see how that code is written, check out our example repository on github: https://github.com/sencha/SpaceExamples/tree/master/Photos.

How to Use Invoke Application in the Background

In the next example, we will call the chat application in the background to get the presence of a user. The API calls are nearly identical to the previous example, except that we are passing false as the second parameter to the Send function.

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

Handling Incoming Messages From Another Application

Handling messages from other applications is accomplished with the onMessage API. The onMessage function receives the JSON message. The onMessage function must create and return an Ext.Promise. That Promise must be resolved to return data back to the calling application.

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

In handleMessage, the user info is fetched asynchronously and the response is returned by fulfilling the promise:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

If you want to see more examples of the Invoke API, check out our example applications: https://github.com/sencha/SpaceExamples

Invoke represents a new way of building HTML5 applications. Your applications no longer have to be islands that are connected only via a round trip to a server. By using Invoke, you can build simpler single purpose applications that expose a simple API.

Additional Resources

.right, .alignright float: right; margin: 0 0 10px 10px;
.left, .alignleft float: left; margin: 0 10px 10px 0;

Jump to original:

Connecting Applications in Sencha Space with Invoke