Cordova Plugins, Top Tabris.js Feature #4

Cordova Plugins, Top Tabris.js Feature #4

When we built Tabris.js, our goal was to provide a cross-platform, mobile development toolkit that developers love to use. We set out to make mobile development easy and accessible to everyone. From the JavaScript API and module support to native widgets, gestures and performance, we’ve exceeded our expectations. However, we realized that we could never provide every native integration ourselves. In order to meet the needs of today’s mobile app developers and provide extensions for the future, we integrated the Cordova plugin model with Tabris.js.

Number 4 on my list is the Cordova Plugins.

Access to native device features like battery status, network connectivity, camera, GPS and other sensors is a key component to mobile app development. In order to support the wide variety of devices available, Tabris.js can be extended with Cordova Plugins to provide additional integrations.

The Tabris.js developer app comes with several Cordova plugins, including:

These plugins can be used directly in your Tabris.js apps and you can experiment with them using the Tabris.js Cordova demo.

<pre lang="javascript">
var button = tabris.create("Button", {
  layoutData: {left: 10, top: 10, right: 10},
  text: "Take a picture"
}).appendTo(parent).on("select", function() {
  navigator.camera.getPicture(onSuccess, onFail, {
    quality: 50,
    targetWidth: 1024,
    targetHeight: 1024,
    destinationType: window.Camera.DestinationType.FILE_URI
  });
  function onSuccess(imageUrl) {
    imageView.set("image", {src: imageUrl});
  }
  function onFail(message) {
    console.log("Camera failed because: " + message);
  }
});
var imageView = tabris.create("ImageView", {
  layoutData: {top: [button, 20], left: 20, right: 20, bottom: 20}
}).appendTo(parent);
</pre>

In this example, the camera plugin is being used to take a picture. The picture is then retrieved and onSuccess is being applied to the imageView.

Screenshot_2015-05-19-13-34-45

With Tabris.js you’re not limited to just the 7 plugins listed here. Any Cordova plugin can be integrated with your Tabris.js build and used in your app (with one caveat — plugins that make use of WebViews cannot be used).

Additional Cordova Plugins can be specified in your config.xml. See the build documentation for more information.

<pre lang="xml">
<?xml version='1.0' encoding='utf-8'?>
<widget
    id="my.first.app"
    version="1.0.0"
    xmlns:gap="https://phonegap.com/ns/1.0"
    xmlns="https://www.w3.org/ns/widgets"
    xmlns:cdv="https://cordova.apache.org/ns/1.0">
    ...
  <gap:plugin name="org.apache.cordova.camera" />
  <gap:plugin name="org.apache.cordova.dialogs" />
</widget>
</pre>

If you’re a mobile app developer and are worried about the extensibility of cross-platform mobile toolkits, checkout Tabris.js and the Cordova Plugin support. Special thanks goes out to Holger Staudacher for designing the Tabris.js cordova support and to Moritz Post, Jordi Böhme López and Johannes Eickhold for implementing the native parts. For more information on Tabris.js and to hear about the Top 3 Tabris.js features, follow us on Twitter.

No Comments

Sorry, the comment form is closed at this time.