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