Sencha Touch-ネイティブAPI

Sencha Touchの最大の利点は、ネイティブAPIを使用したパッケージ化を提供することです。

Ext.device APIは、さまざまなネイティブAPIへのアクセスを提供するために使用されます。ラッパーとして機能し、さらにExt.device.Camera、Ext.device.ConnectionなどのさまざまなAPIにアクセスするために使用できます。

Ext.deviceは次のAPIを提供します-

Sr.No	API & Description
1	Ext.device.Camera このAPIを使用すると、アプリで写真をクリックして、カメラギャラリーの画像にアクセスできます。
2	Ext.device.Connection このAPIは、デバイスがインターネットに接続されているかどうかを確認します。
3	Ext.device.Notification このAPIは、ネイティブメッセージウィンドウを表示するために使用されます。
4	Ext.device.Orientation このAPIは、ポートレートやランドスケープなど、モバイルの向きを確認するために使用されます。

カメラ

このAPIは、デバイスのカメラを使用して写真をクリックし、電話ギャラリーで利用可能な画像へのアクセスを許可します。

APIにアクセスするには、Ext.require（ 'Ext.device.Camera'）を使用してそのAPIを要求する必要があります

このAPIを使用して画像をクリックするには、次のコードを使用します。

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

上記の例では、ソースをカメラとして使用して画像をキャプチャしました。ギャラリーの画像にアクセスするためのライブラリとしてソースを使用することもできます。

Successは、画像が正常にキャプチャされたときに呼び出されるコールバック関数です。画像が正常にキャプチャされない場合、失敗コールバックを使用できます。

上記の例では、カメラアプリを開き、写真をクリックします。

接続

このAPIは、デバイスがインターネットに接続されているかどうかを確認するために使用されます。最近では、ほとんどすべてのアプリケーションを実行するためにインターネットが必要です。したがって、このAPIを使用して事前に確認し、まだ接続されていない場合はネットワークに接続するよう通知を送信できます。

次のプログラムは、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>

それは次の結果を生成します-

お知らせ

このAPIは、複数のボタンを使用して、通知をExt.Msgとして表示するために使用されます。

次のプログラムは、通知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.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>

それは次の結果を生成します-

オリエンテーション

このAPIは、現在のデバイスの向きを示します。次の例は、現在の方向を示しています。ハンドラーは、変更が検出されるたびに登録します。

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

Sencha-touch-native-apis

目次

Sencha Touch-ネイティブAPI

カメラ

接続

お知らせ

オリエンテーション