반응형
Using Views in your Applications 02
Custom Configurations and Behavior
Sencha Touch 2는 예측 가능한 API들을 제공하고 깔끔한 코드와 쉬운 테스트가 가능하도록 하하기 위해 configuration system에 extensive를 사용합니다. 개발자들에게도 클래스를 만들 때 같은 방식으로 만들기를 강하게 권장합니다.
이미지를 tap했을 때 이미지에 대한 정보가 팝업으로 뜨는 이미지 뷰어를 한번 만들어 봅시다. 우리의 목표는 이미지 url, title 그리고 description이 있을 수 있는 재사용 가능한 뷰를 만드는 것입니다. 그리고 이 이미지를 tap했을 때 title과 description을 표시해 줄 겁니다. 이 모든 기능을 재사용 가능하도록 하는 클래스를 만들어 보겠습니다.
이미지를 표시하기 위해서는 Ext.Img 컴포넌트를 사용해야 합니다. 아래처럼 subclass를 만들어 보겠습니다.
Ext.define('MyApp.view.Image', {
extend: 'Ext.Img',
config: {
title: null,
description: null
},
//sets up our tap event listener
initialize: function() {
this.callParent(arguments);
this.element.on('tap', this.onTap, this);
},
//this is called whenever you tap on the image
onTap: function() {
Ext.Msg.alert(this.getTitle(), this.getDescription());
}
});
//creates a full screen tappable image
Ext.create('MyApp.view.Image', {
title: 'Orion Nebula',
description: 'The Orion Nebula is rather pretty',
src: 'http://apod.nasa.gov/apod/image/1202/oriondeep_andreo_960.jpg',
fullscreen: true
});
이 소스를 보시면 우리의 클래스에 두개의 configuration들을 달았습니다. 이 두개는 null로 정의했습니다. 이 새 클래스의 인스턴스를 생성할 때 title과 description config를 pass 할 겁니다.
초가화와 onTap 함수가 일어날 때 어떤 동작들을 하게 됩니다. initialize 함수는 컴포넌트가 instant될 때 불려 집니다. 그러니까 이 위치는 이벤트 리스너와 같은 behavior를 셋업하기 아주 좋은 장소 입니다. 첫번째로 우리가 해야 할 일은 이 initialize 함수를 사용하는 것 입니다. (역자주:자바의 생성자가 연상되네요.) callParent(인수) 는 initialize 함수를 부른 superclass 입니다. 이 부분은 아주 중요합니다. 이것을 빼먹으면 여러분의 component는 정확하게 동작하지 않을 겁니다.
callParent를 한 다음에 tap 리스너를 달았습니다. 이 리스너를 단 객체를 tap 하게 되면 onTap 함수가 call 될 겁니다. Sencha Touch 2이 모든 컴포넌트들은 이런 식으로 DOM 객체나 styling을 추가하거나 제거할 때 또는 Ext.dom.Element에서 하는 일반적인 작업들에 대한 이벤트를 listen하기위해 사용할 수 있는 한개의 element property 가 있습니다.
onTap 함수는 아주 간단합니다. 이 함수를 부시면 이 이미지에 대한 정보를 pop up으로 보여주기 위해 Ext.Msg.alert을 사용했습니다. 여기서 title과 description 두개의 config들을 봅시다. 둘 다 getter 함수를 receive 받습니다. (getTitle, getDescription) 이렇게 되면 setter 함수(setTitle, setDescription)도 generate 되게 됩니다.
Advanced Configurations
클래스에 새 configuration option을 생성할 때 getter와 setter 함수들이 생성됩니다. 그래서 아래 코드에서 border는 자동적으로 getBorder와 setBorder 함수를 받게 됩니다.
Ext.define('MyApp.view.MyView', {
extend: 'Ext.Panel',
config: {
border: 10
}
});
var view = Ext.create('MyApp.view.MyView');
alert(view.getBorder()); //alerts 10
view.setBorder(15);
alert(view.getBorder()); //now alerts 15
getter와 setter만 생성되는 것은 아닙니다. applyBorder와 updateBorder도 같이 생성이 됩니다.
Ext.define('MyApp.view.MyView', {
extend: 'Ext.Panel',
config: {
border: 0
},
applyBorder: function(value) {
return value + "px solid red";
},
updateBorder: function(newValue, oldValue) {
this.element.setStyle('border', newValue);
}
});
우리의 applyBorder함수는 border configuration이 세팅되거나 바뀔 때 내부적으로 불려지게 됩니다. 여기에 유저가 (혹은 앱 실행중에) 값을 바꿀 때 어떤 변화를 주는 동작을 넣기에 아주 좋습니다. 이 예제에서는 border 의 width를 받아서 CSS border specification string에 전달을 해 줄 겁니다.
예를
Custom Configurations and Behavior
Sencha Touch 2는 예측 가능한 API들을 제공하고 깔끔한 코드와 쉬운 테스트가 가능하도록 하하기 위해 configuration system에 extensive를 사용합니다. 개발자들에게도 클래스를 만들 때 같은 방식으로 만들기를 강하게 권장합니다.
이미지를 tap했을 때 이미지에 대한 정보가 팝업으로 뜨는 이미지 뷰어를 한번 만들어 봅시다. 우리의 목표는 이미지 url, title 그리고 description이 있을 수 있는 재사용 가능한 뷰를 만드는 것입니다. 그리고 이 이미지를 tap했을 때 title과 description을 표시해 줄 겁니다. 이 모든 기능을 재사용 가능하도록 하는 클래스를 만들어 보겠습니다.
이미지를 표시하기 위해서는 Ext.Img 컴포넌트를 사용해야 합니다. 아래처럼 subclass를 만들어 보겠습니다.
Ext.define('MyApp.view.Image', {
extend: 'Ext.Img',
config: {
title: null,
description: null
},
//sets up our tap event listener
initialize: function() {
this.callParent(arguments);
this.element.on('tap', this.onTap, this);
},
//this is called whenever you tap on the image
onTap: function() {
Ext.Msg.alert(this.getTitle(), this.getDescription());
}
});
//creates a full screen tappable image
Ext.create('MyApp.view.Image', {
title: 'Orion Nebula',
description: 'The Orion Nebula is rather pretty',
src: 'http://apod.nasa.gov/apod/image/1202/oriondeep_andreo_960.jpg',
fullscreen: true
});
이 소스를 보시면 우리의 클래스에 두개의 configuration들을 달았습니다. 이 두개는 null로 정의했습니다. 이 새 클래스의 인스턴스를 생성할 때 title과 description config를 pass 할 겁니다.
초가화와 onTap 함수가 일어날 때 어떤 동작들을 하게 됩니다. initialize 함수는 컴포넌트가 instant될 때 불려 집니다. 그러니까 이 위치는 이벤트 리스너와 같은 behavior를 셋업하기 아주 좋은 장소 입니다. 첫번째로 우리가 해야 할 일은 이 initialize 함수를 사용하는 것 입니다. (역자주:자바의 생성자가 연상되네요.) callParent(인수) 는 initialize 함수를 부른 superclass 입니다. 이 부분은 아주 중요합니다. 이것을 빼먹으면 여러분의 component는 정확하게 동작하지 않을 겁니다.
callParent를 한 다음에 tap 리스너를 달았습니다. 이 리스너를 단 객체를 tap 하게 되면 onTap 함수가 call 될 겁니다. Sencha Touch 2이 모든 컴포넌트들은 이런 식으로 DOM 객체나 styling을 추가하거나 제거할 때 또는 Ext.dom.Element에서 하는 일반적인 작업들에 대한 이벤트를 listen하기위해 사용할 수 있는 한개의 element property 가 있습니다.
onTap 함수는 아주 간단합니다. 이 함수를 부시면 이 이미지에 대한 정보를 pop up으로 보여주기 위해 Ext.Msg.alert을 사용했습니다. 여기서 title과 description 두개의 config들을 봅시다. 둘 다 getter 함수를 receive 받습니다. (getTitle, getDescription) 이렇게 되면 setter 함수(setTitle, setDescription)도 generate 되게 됩니다.
Advanced Configurations
클래스에 새 configuration option을 생성할 때 getter와 setter 함수들이 생성됩니다. 그래서 아래 코드에서 border는 자동적으로 getBorder와 setBorder 함수를 받게 됩니다.
Ext.define('MyApp.view.MyView', {
extend: 'Ext.Panel',
config: {
border: 10
}
});
var view = Ext.create('MyApp.view.MyView');
alert(view.getBorder()); //alerts 10
view.setBorder(15);
alert(view.getBorder()); //now alerts 15
getter와 setter만 생성되는 것은 아닙니다. applyBorder와 updateBorder도 같이 생성이 됩니다.
Ext.define('MyApp.view.MyView', {
extend: 'Ext.Panel',
config: {
border: 0
},
applyBorder: function(value) {
return value + "px solid red";
},
updateBorder: function(newValue, oldValue) {
this.element.setStyle('border', newValue);
}
});
우리의 applyBorder함수는 border configuration이 세팅되거나 바뀔 때 내부적으로 불려지게 됩니다. 여기에 유저가 (혹은 앱 실행중에) 값을 바꿀 때 어떤 변화를 주는 동작을 넣기에 아주 좋습니다. 이 예제에서는 border 의 width를 받아서 CSS border specification string에 전달을 해 줄 겁니다.
예를