Sencha Touch - Native APIs

The best benefit of Sencha Touch is it provides packaging with native APIs.

Ext.device API is used to provide access to different native APIs. It acts as a wrapper which further can be used to access different APIs such as Ext.device.Camera, Ext.device.Connection, etc.

Ext.device provides the following APIs −

Sr.No API & Description
1

Ext.device.Camera

This API allows your app to click pictures and access images from the camera gallery.
2

Ext.device.Connection

This API is to check if the device is connected with internet or not.
3

Ext.device.Notification

This API is used for showing native message window.
4

Ext.device.Orientation

This API is used to check the orientation of your mobile, such as portrait or landscape.

Camera

This API allows to click pictures using the device camera and grants access to images available in the phone gallery.

To access any API, we need to require that API using Ext.require('Ext.device.Camera')

Following code is used to click a picture using this API.

Ext.device.Camera.capture({
   source: 'camera',
   destination: 'file',
   success: function(url) {
      Ext.create('Ext.Img', {
         src: url,
         fullscreen: true
      });
   }
});

In the above example, we have used source as a camera to capture images. We can also have source as a library to access gallery images.

Success is a callback function, called when the image is captured successfully. We can have a failure callback when the image is not captured successfully.

The above example opens the camera app and clicks a picture.

Connection

This API is used to check if your device is connected with the Internet or not. Almost all applications require Internet to run these days. Hence, this API can be used to prior check and send a notification to connect to the network, if not already connected.

Following program shows the use of Connection API

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.require('Ext.device.Connection');
         Ext.application({
            name: 'Sencha',
            launch: function() {
               if (Ext.device.Connection.isOnline()) {
                  Ext.Msg.alert('You are currently connected');
               } else {
                  Ext.Msg.alert('You are not currently connected');
               }
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

It will produce the following result −

Notification

This API is used to show a notification as Ext.Msg, with multiple buttons.

Following program shows how notification API works.

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.require('Ext.device.Notification');
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.device.Notification.show({
                  title: 'Multiple Buttons',
                  message: 'This is a notification with multiple buttons.',
                  buttons: ["Yes", "No", "Cancel"],
                  callback: function(button) {
                     Ext.device.Notification.show({
                        message: 'You pressed: "' + button + '"'
                     });
                  }
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

It will produce the following result −

Orientation

This API shows the orientation of the current device. Following example shows the current orientation. The handler registers it, whenever any change is detected.

Ext.device.Orientation.on('orientation', function(e) {
   var alpha = Math.round(e.alpha),
   beta = Math.round(e.beta),
   gamma = Math.round(e.gamma);
   console.log(alpha, beta, gamma);
});
sencha_touch_packaging.htm
Advertisements