Sencha Touch - Geräteprofil
In der heutigen Welt der Technologien verfügen wir über mehrere Geräte wie Mobilgeräte, Tablets, Desktops und Laptops mit unterschiedlichen Bildschirmgrößen. Daher müssen Anwendungen entwickelt werden, auf die von allen Geräten mit gutem Erscheinungsbild zugegriffen werden kann. Das Entwickeln von unterschiedlichem Code für verschiedene Geräte ist jedoch sehr zeitaufwändig und kostspielig.
Sencha Touch hilft uns in dieser Hinsicht, indem es eine Geräteprofilfunktion anbietet. Basierend auf dem aktiven Profil werden die verschiedenen Abhängigkeiten ausgeführt und gelten.
Wir können das Geräteprofil deklarieren, während wir einen Anwendungscode schreiben. Wir können mehrere Geräte haben als -
Ext.application({
name: 'MyApp',
profiles: ['Phone', 'Tablet']
});
Sobald dies erledigt ist, werden die Profile als - geladen
- MyApp.profiles.Phone.js
- MyApp.profiles.Tablet.js
Schreiben eines einfachen Telefonprofils
Ext.define('Mail.profile.Phone', {
extend: 'Ext.app.Profile',
config: {
name: 'Phone',
views: ['phoneView']
},
isActive: function() {
return Ext.os.is('Phone');
}
});
Schreiben eines einfachen Tablet-Profils
Ext.define('Mail.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
name: 'Tablet',
views: ['tableView']
},
isActive: function() {
return Ext.os.is('Tablet');
}
});
Wie wir im Profil sehen können, haben wir die Funktion isActive, die bestimmt, ob das bestimmte Gerät aktiv ist. Wenn das Gerät aktiv ist, werden die entsprechenden Abhängigkeiten geladen und instanziiert.
Wie im obigen Beispiel erwähnt, gibt die isActive-Funktion des Telefonprofils bei Verwendung eines Telefongeräts true zurück und die mit dem Telefongerät verbundenen Abhängigkeiten werden geladen. Hier wird phoneView geladen. Wenn es sich bei dem Gerät um ein Tablet handelt, gibt die isActive-Funktion des Telefonprofils false und die isActive-Funktion des Tablet-Profils true zurück und die Abhängigkeit tabletView wird geladen.
Prozess starten
Ein weiterer Punkt, der hier beachtet werden muss, ist, wenn wir Profile in der Anwendung haben, das Laden und Instanziieren des Anwendungscodes in der folgenden Reihenfolge erfolgt:
- Controller werden zuerst instanziiert und die Init-Funktion jedes Controllers wird geladen.
- Die Startfunktion des Profils wird aufgerufen.
- Die Startfunktion der Anwendung wird aufgerufen.
Sowohl die Startfunktionen des Profils als auch der Anwendung sind optional. Wenn wir also keine definieren, werden sie nicht aufgerufen.
Sehen Sie sich den folgenden Code an, um zu überprüfen, wo und wie die verschiedenen Start- und Init-Funktionen definiert werden können.
Init-Funktion des Controllers
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
init : function (){
Ext.Msg.alert('Controller's init method');
},
config: {
refs: {
tab: '#divId
}
}
});
Startfunktion des Profils
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');
}
});
Startfunktion der Anwendung
Ext.application({
name: 'Sencha', launch: function() {
Ext.Msg.alert(Application's launch function);
}
});