Sencha Touch - Cihaz Profili

Günümüzün teknoloji dünyasında, farklı ekran boyutlarına sahip mobil, tablet, masaüstü ve dizüstü bilgisayar gibi birden çok cihazımız var. Bu nedenle, tüm cihazlardan iyi bir görünüm ve his ile erişilebilen uygulamalar geliştirmeye ihtiyaç vardır. Ancak, farklı cihazlar için farklı kod geliştirmek çok zaman alıcı ve maliyetlidir.

Sencha Touch, bir cihaz profili özelliği sunarak bu konuda bize yardımcı oluyor. Aktif profile bağlı olarak, farklı bağımlılıklar çalıştırılacak ve uygulanabilir.

Bir uygulama kodu yazarken cihaz profilini tanımlayabiliriz. Birden çok cihazımız olabilir -

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

Tamamlandığında, profiller şu şekilde yüklenecektir -

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

Basit bir telefon profili yazmak

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

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

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

Basit bir tablet profili yazmak

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

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

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

Profilde görebileceğimiz gibi, belirli bir cihazın aktif olup olmadığını belirleyen isActive fonksiyonumuz var. Cihaz etkinse, ilgili bağımlılıklar yüklenecek ve somutlaştırılacaktır.

Yukarıdaki örnekte belirtildiği gibi, telefon cihazı kullanıyorsak, telefon profilinin isActive işlevi true olarak dönecek ve telefon cihazı ile ilgili bağımlılıklar yüklenecektir; burada phoneView yüklenecek. Cihaz bir tablet ise, telefon profilinin isActive işlevi yanlış döndürür ve tablet profilinin isActive işlevi doğru döndürür ve bağımlılık tabletView yüklenir.

Başlatma Süreci

Burada dikkat edilmesi gereken bir nokta daha, uygulamada profillere sahip olduğumuzda, uygulama kodunun yüklenmesi ve somutlaştırılması aşağıdaki sırada olacaktır -

• İlk önce denetleyiciler başlatılır ve her denetleyicinin başlatma işlevi yüklenecektir.
• Profilin başlatma işlevi çağrılacaktır.
• Uygulamanın başlatma işlevi çağrılacaktır.

Hem profilin hem de uygulamanın başlatma işlevleri isteğe bağlıdır, dolayısıyla bunlardan herhangi birini tanımlamazsak çağrılmazlar.

Farklı başlatma ve başlatma işlevlerinin nerede ve nasıl tanımlanabileceğini kontrol etmek için aşağıdaki koda bir göz atın.

Denetleyicinin başlatma işlevi

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

Profilin başlatma işlevi

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

Uygulamanın başlatma işlevi

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