Sencha Touch - Cấu hình thiết bị

Trong thế giới công nghệ ngày nay, chúng ta có nhiều thiết bị như di động, máy tính bảng, máy tính để bàn và máy tính xách tay với các kích thước màn hình khác nhau. Do đó, cần phải phát triển các ứng dụng có thể truy cập được từ tất cả các thiết bị với giao diện đẹp. Tuy nhiên, để phát triển các mã khác nhau cho các thiết bị khác nhau là rất tốn thời gian và chi phí.

Sencha Touch giúp chúng tôi về vấn đề này, bằng cách cung cấp tính năng cấu hình thiết bị. Dựa trên cấu hình hoạt động, các phần phụ thuộc khác nhau sẽ được chạy và áp dụng.

Chúng tôi có thể khai báo hồ sơ thiết bị trong khi viết mã ứng dụng. Chúng tôi có thể có nhiều thiết bị như -

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

Sau khi hoàn tất, các cấu hình sẽ được tải dưới dạng:

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

Viết một hồ sơ điện thoại đơn giản

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

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

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

Viết một hồ sơ máy tính bảng đơn giản

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

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

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

Như chúng ta có thể thấy trong hồ sơ, chúng ta có chức năng isActive xác định xem thiết bị cụ thể có đang hoạt động hay không. Nếu thiết bị đang hoạt động, các phần phụ thuộc tương ứng sẽ được tải và khởi tạo.

Như đã đề cập trong ví dụ trên, nếu chúng ta đang sử dụng thiết bị điện thoại thì hàm isActive của cấu hình điện thoại sẽ trả về true và các phần phụ thuộc liên quan đến thiết bị điện thoại sẽ được tải; tại đây phoneView sẽ được tải. Nếu thiết bị là máy tính bảng thì chức năng isActive của hồ sơ điện thoại sẽ trả về false và chức năng isActive của hồ sơ máy tính bảng sẽ trả về true và tabletView phụ thuộc sẽ được tải.

Quá trình khởi chạy

Một điểm nữa cần lưu ý ở đây là khi chúng ta có hồ sơ trong ứng dụng, thì việc tải và tạo mã ứng dụng sẽ theo thứ tự sau:

Bộ điều khiển được khởi tạo trước và mỗi chức năng init của bộ điều khiển sẽ được tải.
Chức năng khởi chạy của hồ sơ sẽ được gọi.
Chức năng khởi chạy của ứng dụng sẽ được gọi.

Cả chức năng khởi chạy của cấu hình và ứng dụng đều là tùy chọn, vì vậy nếu chúng tôi không xác định bất kỳ chức năng nào trong số chúng thì chúng sẽ không được gọi.

Hãy xem đoạn mã sau để kiểm tra vị trí và cách các hàm khởi chạy và init khác nhau có thể được xác định.

Chức năng init của bộ điều khiển

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

Chức năng khởi chạy của hồ sơ

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

Chức năng khởi chạy ứng dụng

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