Sencha Touch - API native

Il miglior vantaggio di Sencha Touch è che fornisce pacchetti con API native.

Ext.device API viene utilizzata per fornire l'accesso a diverse API native. Funziona come un wrapper che può essere ulteriormente utilizzato per accedere a diverse API come Ext.device.Camera, Ext.device.Connection, ecc.

Ext.device fornisce le seguenti API:

Suor n API e descrizione
1

Ext.device.Camera

Questa API consente alla tua app di fare clic sulle immagini e accedere alle immagini dalla galleria della fotocamera.
2

Ext.device.Connection

Questa API serve per verificare se il dispositivo è connesso a Internet o meno.
3

Ext.device.Notification

Questa API viene utilizzata per mostrare la finestra del messaggio nativo.
4

Ext.device.Orientation

Questa API viene utilizzata per controllare l'orientamento del tuo cellulare, ad esempio verticale o orizzontale.

telecamera

Questa API consente di fare clic sulle immagini utilizzando la fotocamera del dispositivo e garantisce l'accesso alle immagini disponibili nella galleria del telefono.

Per accedere a qualsiasi API, dobbiamo richiedere tale API utilizzando Ext.require ('Ext.device.Camera')

Il codice seguente viene utilizzato per fare clic su un'immagine utilizzando questa API.

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

Nell'esempio sopra, abbiamo usato la sorgente come fotocamera per catturare le immagini. Possiamo anche avere una fonte come libreria per accedere alle immagini della galleria.

Il successo è una funzione di callback, chiamata quando l'immagine viene acquisita correttamente. Possiamo avere un callback di errore quando l'immagine non viene acquisita correttamente.

L'esempio precedente apre l'app della fotocamera e fa clic su un'immagine.

Connessione

Questa API viene utilizzata per verificare se il tuo dispositivo è connesso a Internet o meno. Quasi tutte le applicazioni richiedono Internet per funzionare in questi giorni. Quindi, questa API può essere utilizzata per controllare e inviare una notifica per connettersi alla rete, se non è già connesso.

Il seguente programma mostra l'uso dell'API di connessione

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

Produrrà il seguente risultato:

Notifica

Questa API viene utilizzata per mostrare una notifica come Ext.Msg, con più pulsanti.

Il seguente programma mostra come funziona l'API di notifica.

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

Produrrà il seguente risultato:

Orientamento

Questa API mostra l'orientamento del dispositivo corrente. L'esempio seguente mostra l'orientamento corrente. Il gestore lo registra, ogni volta che viene rilevata una modifica.

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