Sencha Touch: API nativas

El mejor beneficio de Sencha Touch es que proporciona paquetes con API nativas.

La API de dispositivo externo se utiliza para proporcionar acceso a diferentes API nativas. Actúa como un contenedor que además se puede utilizar para acceder a diferentes API, como Ext.device.Camera, Ext.device.Connection, etc.

Ext.device proporciona las siguientes API:

No Señor	API y descripción
1	Ext.device.Camera Esta API permite que su aplicación haga clic en imágenes y acceda a imágenes de la galería de la cámara.
2	Ext.device.Connection Esta API sirve para comprobar si el dispositivo está conectado a Internet o no.
3	Ext.device.Notification Esta API se utiliza para mostrar la ventana de mensajes nativos.
4	Ext.device.Orientation Esta API se utiliza para comprobar la orientación de su móvil, como vertical u horizontal.

Cámara

Esta API permite hacer clic en las imágenes con la cámara del dispositivo y otorga acceso a las imágenes disponibles en la galería del teléfono.

Para acceder a cualquier API, necesitamos requerir esa API usando Ext.require ('Ext.device.Camera')

El siguiente código se usa para hacer clic en una imagen usando esta API.

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

En el ejemplo anterior, hemos utilizado la fuente como cámara para capturar imágenes. También podemos tener fuente como biblioteca para acceder a las imágenes de la galería.

El éxito es una función de devolución de llamada, llamada cuando la imagen se captura correctamente. Podemos tener una devolución de llamada de falla cuando la imagen no se captura correctamente.

El ejemplo anterior abre la aplicación de la cámara y hace clic en una imagen.

Conexión

Esta API se utiliza para verificar si su dispositivo está conectado a Internet o no. Casi todas las aplicaciones requieren Internet para funcionar en estos días. Por lo tanto, esta API se puede utilizar para verificar previamente y enviar una notificación para conectarse a la red, si aún no está conectado.

El siguiente programa muestra el uso de la API de conexión

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

Producirá el siguiente resultado:

Notificación

Esta API se utiliza para mostrar una notificación como Ext.Msg, con varios botones.

El siguiente programa muestra cómo funciona la API de notificaciones.

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

Producirá el siguiente resultado:

Orientación

Esta API muestra la orientación del dispositivo actual. El siguiente ejemplo muestra la orientación actual. El manejador lo registra, siempre que se detecta algún cambio.

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

↰ Previous page