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 함수가 true를 반환하고 전화 장치와 관련된 종속성이로드됩니다. 여기에 phoneView가로드됩니다. 장치가 태블릿 인 경우 전화 프로필의 isActive 함수는 false를 반환하고 태블릿 프로필의 isActive 함수는 true를 반환하고 종속성 tabletView가로드됩니다.

시작 프로세스

여기서 주목해야 할 또 하나의 점은 애플리케이션에 프로필이있을 때 애플리케이션 코드의로드 및 인스턴스화가 다음 순서로 진행된다는 것입니다.

컨트롤러가 먼저 인스턴스화되고 각 컨트롤러의 초기화 기능이로드됩니다.
프로필의 시작 기능이 호출됩니다.
응용 프로그램의 시작 기능이 호출됩니다.

프로필과 애플리케이션의 시작 함수는 모두 선택 사항이므로 둘 중 하나를 정의하지 않으면 호출되지 않습니다.

다른 시작 및 초기화 기능을 정의 할 수있는 위치와 방법을 확인하려면 다음 코드를 살펴보십시오.

컨트롤러의 초기화 기능

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