Sencha Touch - APIs nativas

O melhor benefício do Sencha Touch é que ele fornece pacotes com APIs nativas.

A API Ext.device é usada para fornecer acesso a diferentes APIs nativas. Ele atua como um invólucro que pode ser usado para acessar diferentes APIs, como Ext.device.Camera, Ext.device.Connection, etc.

Ext.device fornece as seguintes APIs -

Sr. Não	API e descrição
1	Ext.device.Camera Esta API permite que seu aplicativo clique em fotos e acesse imagens da galeria da câmera.
2	Ext.device.Connection Esta API serve para verificar se o dispositivo está conectado à internet ou não.
3	Ext.device.Notification Esta API é usada para mostrar a janela de mensagem nativa.
4	Ext.device.Orientation Esta API é usada para verificar a orientação do seu celular, como retrato ou paisagem.

Câmera

Esta API permite clicar em fotos usando a câmera do dispositivo e concede acesso às imagens disponíveis na galeria do telefone.

Para acessar qualquer API, precisamos exigir essa API usando Ext.require ('Ext.device.Camera')

O código a seguir é usado para clicar em uma imagem usando esta API.

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

No exemplo acima, usamos a source como uma câmera para capturar imagens. Também podemos ter fonte como uma biblioteca para acessar as imagens da galeria.

Sucesso é uma função de retorno de chamada, chamada quando a imagem é capturada com sucesso. Podemos ter um retorno de chamada com falha quando a imagem não é capturada com sucesso.

O exemplo acima abre o aplicativo da câmera e clica em uma imagem.

Conexão

Esta API é usada para verificar se o seu dispositivo está conectado à Internet ou não. Quase todos os aplicativos requerem Internet para funcionar atualmente. Assim, esta API pode ser utilizada para verificação prévia e envio de notificação para conexão à rede, caso ainda não esteja conectada.

O programa a seguir mostra o uso da API Connection

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

Isso produzirá o seguinte resultado -

Notificação

Esta API é usada para mostrar uma notificação como Ext.Msg, com vários botões.

O programa a seguir mostra como a API de notificação funciona.

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

Isso produzirá o seguinte resultado -

Orientação

Esta API mostra a orientação do dispositivo atual. O exemplo a seguir mostra a orientação atual. O manipulador o registra, sempre que alguma alteração é detectada.

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