Sencha Touch - Geçmiş Desteği

Sencha Touch, tam geçmiş desteği ve derin bağlantı olanaklarıyla birlikte gelir.

Sayfayı veya uygulamayı yenilemeden kullanıcının ekranlar arasında gezinmesine yardımcı olan en basit geri düğmesi işlevine sahiptir.

Ayrıca, kullanıcının herhangi bir URL'ye gitmesine yardımcı olan rota işlevselliği de sağlar. Tarayıcı penceresinde sağlanan URL'ye bağlı olarak, belirli bir görevi gerçekleştirmek için belirli işlevleri çağırır.

Geri düğmesi işlevi için aşağıdaki örneğe bakın.

Bu örnek, bir listenin içindeki listeden başka bir şey olmayan yuvalanmış listeyi gösterir, bu nedenle liste öğelerinden herhangi birine tıkladığınızda başka bir liste açar ve ekranın üstünde bir geri düğmesi görünür.

Kod tabanının tamamı için, Bileşenler bölümü görünümü altında Yuvalanmış Liste'yi kontrol edebilirsiniz .

Yönlendirme

En basit yol örneği

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',

   config: {
      routes: {
         login: 'showLogin',
		 'user/:id': 'userId'
      }
   },

   showLogin: function() {
      Ext.Msg.alert('This is the login page');
   },
   userId: function(id) {
      Ext.Msg.alert('This is the login page specific to the used Id provided');
   }
});

Yukarıdaki örnekte, tarayıcı URL'si https://myApp.com/#login ise, showLogin işlevi çağrılacaktır.

URL'de parametreler sağlayabiliriz ve işlevin çağrılabileceği belirli parametreye göre. Örneğin, URL https://myApp.com/#user/3 ise, o zaman başka bir işlev userId çağrılır ve özel kimlik işlevlerin içinde kullanılabilir.

Gelişmiş yönlendirme

Bazen virgül, boşluk ve özel karakterler vb. İçeren gelişmiş parametrelerimiz vardır, bunun için yukarıdaki yol yazma yolunu kullanırsak, o zaman işe yaramayacaktır. Bu sorunu çözmek için Sencha touch, parametrenin kabul etmesi gereken veri türünün koşulunu belirleyebileceğimiz koşullu yönlendirme sağlar.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login/:id: {
            action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }      
         }
      },

      showLogin: function() {
         Ext.Msg.alert('This is the login page with specific id which matches criteria');
      }     
   }
});

Dolayısıyla, yukarıdaki örnekte olduğu gibi, URL parametresi olarak hangi tür verilere izin verilmesi gerektiğini açıkça belirten koşulda regex verdik.

Aynı URL'yi farklı cihaz profilleri arasında paylaşma

Sencha touch, cihaz profili sağladığından, aynı uygulama kodu birden fazla cihazda kullanılabilir, farklı profillerin aynı URL için farklı işlevlere sahip olma olasılığı olabilir.

Bu sorunu çözmek için Sencha touch, bize ana denetleyicide yönlendirme yazma özgürlüğü verir ve çağrılan işlevi profiline özgü olanlarla tüm profilde yazılır.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login: 'showLogin'
      }
   },
});
// For phone profile
Ext.define('MyApp.controller.phone.Main, {
   extend: 'MyApp.controller.Main, showLogin: function() {
      Ext.Msg.alert('This is the login page for mobile phone profile');
   }
});
// For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
   extend: 'MyApp.controller.Main,showLogin: function() {
      Ext.Msg.alert('This is the login page for tablet profile');
   }
});

Örnek olarak gösterildiği gibi, showLogin işlevine sahip bir ana denetleyicimiz var ve iki farklı profilimiz var (Telefon / Tablet). Her iki profilin de profile özgü farklı kodlarla showLogin işlevi vardır.

Bu şekilde, aynı URL'yi belirli işlevleriyle birden çok profil cihazında paylaşabiliriz.