Tips & Tricks: Extend the Native Shell

by Giuseppe Lanzi on 06/13/2014

We’ve talked many times about the advantage of the hybrid architecture of apps made with Instant Developer, which because they are written in JavaScript can be used on all major mobile operating systems – iOS, Android and Windows8/RT – and for which the Native Shell provides functionalities that would otherwise be inaccessible, such as reading the file system, or accessing the camera roll. But what should we do when we need to extend the shell with functionalities that are not available in InDe? I know that there are many people interested in this subject, so I decided to use today’s post to answer this question. I’ll give an example working with an Android project, but the classes to be customized are the same in the other cases too.

If you create the installation package for an offline app, you’ll find the class it’s an object that extends the WebView base class of the operating system, and which, functioning like a normal browser, displays the app’s web interface to the user. Maybe not exactly like a normal browser, because it allows the application to launch even when there’s no connectivity, loading it directly from the file system. But apart from the offline launch, there’s another behavior that interests us today.

You know the URL you use to call up an online web application by triggering the onCommand event? Well, IDWebView handles all HTTP requests in which the query string contains the parameter _CMD in the same way, running the handleCommand method. This function uses reflection to search for a procedure with the same name as the parameter value. And if it finds it, it launches it. At this point, if we knew how to execute this type of request, we’d be fine. Let’s start by seeing what the framework does.

Every time we use a function of the Shell library, the Shell.js SendCmd method is launched. This is the function that creates the correct URL, executes the HTTP request, and reads the response, acting as a bridge between JavaScript and the native code.

In this example project I added a HELLO function to the native code like the one in the image above, which receives a parameter with the name of the user, and returns a greeting in string format. Then, I made it so it could be called up by the app:

  • I added the function to the class, copying my customized version into the custom folder in Devices\Android\src\com\__InstMob__;
  • I added sendCmd to the Shell library, creating a method with two arguments: one string containing the name of the native function to be launched, and an IDMap with all the parameters to send to the native code.

To try the example, you need to compile the app, creating the installation packages, import the project into Eclipse, and then compile it on the device. Once you’ve done that, open the Commands Test screen and you’ll find two lines: HELLO lets you try out my example, while MYFUNCT is just waiting for you to implement it 🙂

Do you already have an idea of how to extend the Native Shell in your apps?

  •    Definitely! I've really got to use an external native library.
  •    I don't know yet, but it will certainly come in handy.
  •    I don't plan on needing to extend the Native Shell.
Loading ... Loading ...

Leave a Comment

Previous post:

Next post: