Sencha Touch - API natives

Le meilleur avantage de Sencha Touch est qu'il fournit un emballage avec des API natives.

L'API Ext.device est utilisée pour fournir un accès à différentes API natives. Il agit comme un wrapper qui peut en outre être utilisé pour accéder à différentes API telles que Ext.device.Camera, Ext.device.Connection, etc.

Ext.device fournit les API suivantes -

Sr. Non API et description
1

Ext.device.Camera

Cette API permet à votre application de cliquer sur des images et d'accéder aux images de la galerie de caméras.
2

Ext.device.Connection

Cette API permet de vérifier si l'appareil est connecté à Internet ou non.
3

Ext.device.Notification

Cette API est utilisée pour afficher la fenêtre de message native.
4

Ext.device.Orientation

Cette API est utilisée pour vérifier l'orientation de votre mobile, comme portrait ou paysage.

Caméra

Cette API permet de cliquer sur les images à l'aide de l'appareil photo de l'appareil et donne accès aux images disponibles dans la galerie du téléphone.

Pour accéder à n'importe quelle API, nous devons exiger que l'API utilise Ext.require ('Ext.device.Camera')

Le code suivant est utilisé pour cliquer sur une image à l'aide de cette API.

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

Dans l'exemple ci-dessus, nous avons utilisé la source comme caméra pour capturer des images. Nous pouvons également avoir la source comme bibliothèque pour accéder aux images de la galerie.

Le succès est une fonction de rappel, appelée lorsque l'image est capturée avec succès. Nous pouvons avoir un rappel d'échec lorsque l'image n'est pas capturée avec succès.

L'exemple ci-dessus ouvre l'application appareil photo et clique sur une image.

Connexion

Cette API est utilisée pour vérifier si votre appareil est connecté à Internet ou non. Presque toutes les applications nécessitent Internet pour fonctionner de nos jours. Par conséquent, cette API peut être utilisée pour vérifier préalablement et envoyer une notification pour se connecter au réseau, si elle n'est pas déjà connectée.

Le programme suivant montre l'utilisation de l'API de connexion

<!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>

Il produira le résultat suivant -

Notification

Cette API est utilisée pour afficher une notification en tant que Ext.Msg, avec plusieurs boutons.

Le programme suivant montre comment fonctionne l'API de notification.

<!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>

Il produira le résultat suivant -

Orientation

Cette API montre l'orientation de l'appareil actuel. L'exemple suivant montre l'orientation actuelle. Le gestionnaire l'enregistre chaque fois qu'un changement est détecté.

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);
});