Sunday, March 12, 2017

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 other 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 following APIs:

API Description
Ext.device.Camera This API allows your app to click pictures and access images from camera gallery.
Ext.device.Connection This API is to check if device is connected with internet or not.
Ext.device.Notification This API is used for showing native message window.
Ext.device.Orientation This API is used to check orientation of your mobile such as portrait or landscape.

Camera

This API allows to click pictures using device camera and have access to images which are 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 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 camera this we use to capture images, we can have source as library to access gallery images.
success is a callback function which is called when the image is captured successfully. we can have failure callback is image is not captured successfully.
The above example opens camera app and clicks a picture.

Connection

This API is used to check if your device is connected with internet or not. As almost all the application now a days require internet to run so this API can be used for prior checking and providing notification to connect to network if not.
Following program shows use of Connection API
<!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>

Notification

This API is used to show notification as Ext.Msg, with multiple buttons
The belwo program shows how notification API works.
<!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>

Orientation

This API shows current device orientation. The below example shows the current orientation and 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);
});
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)