Sencha Touch - โปรไฟล์อุปกรณ์
ในโลกแห่งเทคโนโลยีในปัจจุบันเรามีอุปกรณ์มากมายเช่นมือถือแท็บเล็ตเดสก์ท็อปและแล็ปท็อปที่มีขนาดหน้าจอที่แตกต่างกัน ดังนั้นจึงมีความจำเป็นในการพัฒนาแอพพลิเคชั่นซึ่งสามารถเข้าถึงได้จากอุปกรณ์ทั้งหมดที่มีรูปลักษณ์และความรู้สึกที่ดี อย่างไรก็ตามในการพัฒนาโค้ดที่แตกต่างกันสำหรับอุปกรณ์ต่างๆนั้นใช้เวลานานและมีค่าใช้จ่ายสูง
Sencha Touch ช่วยเราในเรื่องนี้โดยนำเสนอคุณสมบัติโปรไฟล์อุปกรณ์ ขึ้นอยู่กับโปรไฟล์ที่ใช้งานการอ้างอิงที่แตกต่างกันจะถูกเรียกใช้และมีผลบังคับใช้
เราสามารถประกาศโปรไฟล์อุปกรณ์ขณะเขียนรหัสแอปพลิเคชัน เราสามารถมีอุปกรณ์หลายเครื่องเป็น -
Ext.application({
name: 'MyApp',
profiles: ['Phone', 'Tablet']
});
เมื่อเสร็จแล้วโปรไฟล์จะถูกโหลดเป็น -
- MyApp.profiles.Phone.js
- MyApp.profiles.Tablet.js
การเขียนโปรไฟล์โทรศัพท์ง่ายๆ
Ext.define('Mail.profile.Phone', {
extend: 'Ext.app.Profile',
config: {
name: 'Phone',
views: ['phoneView']
},
isActive: function() {
return Ext.os.is('Phone');
}
});
การเขียนโปรไฟล์แท็บเล็ตอย่างง่าย
Ext.define('Mail.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
name: 'Tablet',
views: ['tableView']
},
isActive: function() {
return Ext.os.is('Tablet');
}
});
ดังที่เราเห็นในโปรไฟล์เรามีฟังก์ชั่น isActive ซึ่งกำหนดว่าอุปกรณ์นั้นใช้งานอยู่หรือไม่ หากอุปกรณ์ทำงานอยู่การอ้างอิงที่เกี่ยวข้องจะถูกโหลดและสร้างอินสแตนซ์
ดังที่ได้กล่าวไว้ในตัวอย่างข้างต้นหากเราใช้อุปกรณ์โทรศัพท์ฟังก์ชัน isActive ของโปรไฟล์โทรศัพท์จะคืนค่าจริงและการอ้างอิงที่เกี่ยวข้องกับอุปกรณ์โทรศัพท์จะถูกโหลด ที่นี่ phoneView จะถูกโหลด หากอุปกรณ์เป็นแท็บเล็ตฟังก์ชัน isActive ของโปรไฟล์โทรศัพท์จะส่งกลับเท็จและฟังก์ชัน isActive ของโปรไฟล์แท็บเล็ตจะส่งคืนค่า true และแท็บเล็ตแบบพึ่งพาจะโหลด
เปิดตัวกระบวนการ
อีกจุดหนึ่งที่ต้องสังเกตคือเมื่อเรามีโปรไฟล์ในแอปพลิเคชันแล้วการโหลดและการสร้างอินสแตนซ์ของรหัสแอปพลิเคชันจะเป็นไปตามลำดับต่อไปนี้ -
- ตัวควบคุมถูกสร้างอินสแตนซ์ก่อนและฟังก์ชัน init ของคอนโทรลเลอร์แต่ละตัวจะถูกโหลด
- ฟังก์ชันการเรียกใช้โปรไฟล์จะถูกเรียกใช้
- จะมีการเรียกใช้ฟังก์ชันเปิดตัวแอปพลิเคชัน
ทั้งโปรไฟล์และฟังก์ชั่นการเปิดตัวของแอปพลิเคชันเป็นทางเลือกดังนั้นหากเราไม่ได้กำหนดอย่างใดอย่างหนึ่งฟังก์ชันเหล่านี้จะไม่ถูกเรียก
ดูโค้ดต่อไปนี้เพื่อตรวจสอบว่าสามารถกำหนดฟังก์ชัน launch และ init ที่แตกต่างกันได้อย่างไร
ฟังก์ชัน init ของคอนโทรลเลอร์
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
init : function (){
Ext.Msg.alert('Controller's init method');
},
config: {
refs: {
tab: '#divId
}
}
});
ฟังก์ชั่นเปิดตัวโปรไฟล์
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');
}
});
ฟังก์ชันเปิดตัวแอปพลิเคชัน
Ext.application({
name: 'Sencha', launch: function() {
Ext.Msg.alert(Application's launch function);
}
});