Sencha Touch - Profil Perangkat

Dalam dunia teknologi saat ini, kami memiliki banyak perangkat seperti seluler, tablet, desktop, dan laptop dengan ukuran layar berbeda. Oleh karena itu, ada kebutuhan untuk mengembangkan aplikasi yang dapat diakses dari semua perangkat dengan tampilan dan nuansa yang baik. Namun, mengembangkan kode yang berbeda untuk perangkat yang berbeda sangat memakan waktu dan biaya.

Sencha Touch membantu kami dalam hal ini, dengan menawarkan fitur profil perangkat. Berdasarkan profil aktif, berbagai dependensi akan dijalankan dan diterapkan.

Kami dapat mendeklarasikan profil perangkat saat menulis kode aplikasi. Kami dapat memiliki banyak perangkat sebagai -

Ext.application({
   name: 'MyApp',
   profiles: ['Phone', 'Tablet']
});

Setelah selesai, profil akan dimuat sebagai -

• MyApp.profiles.Phone.js
• MyApp.profiles.Tablet.js

Menulis profil telepon sederhana

Ext.define('Mail.profile.Phone', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Phone',
      views: ['phoneView']
   },

   isActive: function() {
      return Ext.os.is('Phone');
   }
});

Menulis profil tablet sederhana

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet',
      views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
});

Seperti yang bisa kita lihat di profil, kita memiliki fungsi isActive yang menentukan apakah perangkat tertentu aktif. Jika perangkat aktif, dependensi terkait akan dimuat dan dibuat instance-nya.

Seperti yang disebutkan dalam contoh di atas, jika kita menggunakan perangkat ponsel maka fungsi isActive profil ponsel akan kembali menjadi true dan dependensi yang terkait dengan perangkat ponsel akan dimuat; di sini phoneView akan dimuat. Jika perangkatnya tablet maka fungsi isActive profil ponsel akan mengembalikan false dan fungsi isActive profil tablet akan menampilkan true dan ketergantungan tabletView akan dimuat.

Proses Peluncuran

Satu hal lagi yang perlu diperhatikan di sini adalah ketika kita memiliki profil di aplikasi, maka pemuatan dan pembuatan kode aplikasi akan dengan urutan sebagai berikut:

• Pengontrol dibuat terlebih dahulu dan setiap fungsi init pengontrol akan dimuat.
• Fungsi peluncuran profil akan dipanggil.
• Fungsi peluncuran aplikasi akan dipanggil.

Baik fungsi profil dan peluncuran aplikasi bersifat opsional, jadi jika kita tidak menentukan salah satunya, fungsi tersebut tidak akan dipanggil.

Perhatikan kode berikut untuk memeriksa di mana dan bagaimana fungsi peluncuran dan init yang berbeda dapat didefinisikan.

Fungsi init pengontrol

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',
   
   init : function (){
      Ext.Msg.alert('Controller's init method');
   },
   
   config: {
      refs: {
         tab: '#divId
     }
   }
});

Fungsi peluncuran profil

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet', views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
   launch : function() {
      Ext.Msg.alert('profile's launch function');
   }
});

Fungsi peluncuran aplikasi

Ext.application({
   name: 'Sencha', launch: function() {
      Ext.Msg.alert(Application's launch function);
   }
});