Sencha Touch 2 Tutorial - Component & Container -

Using Components in Sencha Touch 2

What is a Component?

센차터치(Sencha touch)에서 눈에 보이는 부분을 담당하는 대부분의 클래스들은 컴포넌트(Component) 입니다. 센차터치의 모든 컴포는트는 Ext.Component의 서브클래스 입니다. 그 의미는 아래와 같다는 겁니다.

- templet을 사용하는 페이지에 자신들을 Render  한다.
- 어느 때든지 자신들을 보이도록 하거나 안보이도록 한다.
- 스크린에 자신들을 중앙에 위치 시킨다.
- Enable 하거나 Disable 하도록 할 수 있다.

이 컴포넌트들은 좀 더 진보된 것들을 할 수 있습니다.

- 다른 컴포넌트 위에서 떠 있는다. (윈도우, 메세지 박스와 overlay들)
- 애니메이션을 위해 스크린에서 사이즈와 포지션을 변경한다.
- 자신 내부에 다른 컴포넌트를 위치시킨다. (툴바에서 유용하게 사용함)
- 다른 컴포넌트들에 맞춰 정열한다. 자신들이 drag 될 수 있도록 한다. 자신들의 content를 스크롤 가능하게 한다. 등등

What is a Container?

여러분이 생성한 모든 컴포넌트는 위에 열거한 기능들을 모두 가지고 있습니다. 애플리케이션들은 수많은 컴포넌트들로 만들어 집니다. 대개 다른 컴포넌트 안에 다른 컴포넌트가 있고.. 하는 식으로 사용됩니다. 컨테이너도 컴포넌트와 마찬가지입니다. render하고 그 안에 child Component들이 있고 하는 그런 기능들이 마찬가지로 있는데 그 규모가 좀 다릅니다. 예를들어 메일앱에서 Viewport 컨테이너의 두 children 은 메세지 리스트와 이메일 미리보기 pane 이 필요할 겁니다. 

컨테이너는 다음과 같은 추가 기능들이 있습니다.

- 초기화 단계와 runtime 에서 child Component들을 add 할 수 있다.
- child Components 들을 remove 할 수 있다.
- Layout 을 지정할 수 있다.

Layout은 스크린에 child Component들을 어떻게 배치할 것인가를 결정하는 겁니다. 메일 앱 예제에서 우리는 HBox layout을 사용했습니다. 그래서 우리는 왼쪽에 이메일 리스트를 위치시키고 스크린의 부분에 preview pane 을 위치시킬 수 있었습니다. 센차 터치 2에는 몇가지 레이아웃이 있습니다. 모두 앱의 화면 구성을 정해 주는 겁니다. 레이아웃에 대한 좀 더 자세한 내용은 Layout guide를 참조하세요.

Instantiating Components

컴포넌트는 센차터치의 다른 모든 클래스들과 같은 방법으로 생성됩니다. Ext.create 를 사용합니다. 여기 어떻게 Panel 을 생성할 수 있는지 예제가 있습니다.

var panel = Ext.create('Ext.Panel', {
    html: 'This is my panel'
});

이렇게 하면 Panel instance가 생성될 겁니다. 그리고 아주 기본적인 HTML 이 있습니다. Panel은 HTML을 render 할 수 있는 간단한 컴포넌트 입니다. 그리고 다른 아이템들을 포함합니다. 이 경우에 우리는 Panel instance를 생성했지만 아직 스크린에 그 판넬이 보이지는 않을겁니다. 왜냐하면 아이템들은 instantiated 됐다고 그 즉시 render 되는것이 아니기 때문이죠. 이렇게 함으로서 우리는 어떤 컴포넌트들을 생성하고 rendering 하기 전에 움직여서 배치할 수 있습니다. rendering 한 다음에 움직이는 것보다 훨씬 빠른 방법이죠.

이 패널을 스크린에 보이도록 하려면 이것을 global Viewport 에 add 하기만 하면 됩니다.

Ext.Viewport.add(panel);

패널도 또한 컨테이너 입니다. 그러므로 다른 컴포넌트들을 포함할 수 있습니다. 그리고 layout을 통해서 정열 시킬 수도 있죠. 위의 예제를 고쳐보겠습니다. 이번에는 패널을 두개의 child 컴포넌트와 hbox 레이아웃으로 만들어 보겠습니다.

var panel = Ext.create('Ext.Panel', {
    layout: 'hbox',

    items: [
        {
            xtype: 'panel',
            flex: 1,
            html: 'Left Panel, 1/3rd of total size',
            style: 'background-color: #5E99CC;'
        },
        {
            xtype: 'panel',
            flex: 2,
            html: 'Right Panel, 2/3rds of total size',
            style: 'background-color: #759E60;'
        }
    ]
});

Ext.Viewport.add(panel);

이 예제에서 우리는 3개의 panel을 생성했습니다. 첫번째는 저 위의 예제에서와 같이 생성했구요 그 안에 두개의 또 다른 패널들을 생성했습니다. 패널 안의 패널은 xtype을 사용해서 정의했습니다. Xtype은 Ext.create 를 사용하고 전체 클래스 이름을 넣어서 컴포넌트를 만들 필요 없이 간편하게 컴포넌트를 생성할 수 있는 방법입니다. 단지 그 객체 안의 클래스에서 xtype을 넣어주면 됩니다. 그러면 그 프레임워크가 여러분을 위해 컴포넌트를 만들어 드릴 겁니다.

또한 top level 패널에서 레이아웃을 설정할 수 있습니다. 위 예제의 경우는 hbox를 설정했습니다. hbox는 parent 패널의 horizontal 방향으로 화면을 나눕니다. 각 child 들은 flex로 그 크기가 규정됩니다. 예를 들어 parent 패널의 너비가 300픽셀이면 첫번째 child는 100px을 차지할 것이고 두번째 child는 200px을 차지할 겁니다. 왜냐하면 첫번째는 flex: 1 이라고 했고 두번째는 flex:2라고 했으니까요.

Configuring Components

새 컴포넌트를 생성할 때는 configuration option들을 pass 할 수 있습니다. Component에서 사용할 수 있는 configuration들은 해당 class docs page의 "Config options" 섹션에 그 리스트들이 있습니다. 여러분이 컴포넌트를 instantiate 할 때 이 configuration option들을 원하는대로 사용하실 수 있습니다. 그리고 그 이후에 어느때든지 필요하면 그 내용을 수정하실 수도 있습니다. 예를 들어 html content를 생성한 이후 그 내용을 쉽게 수정할 수 있습니다.

//we can configure the HTML when we instantiate the Component
var panel = Ext.create('Ext.Panel', {
    fullscreen: true,
    html: 'This is a Panel'
});

//we can update the HTML later using the setHtml method:
panel.setHtml('Some new HTML');

//we can retrieve the current HTML using the getHtml method:
alert(panel.getHtml()); //alerts "Some new HTML"

모든 config들은 getter 메소드와 setter 메소드가 있습니다. 이 메소드들은 자동적으로 generate 되고 항상 같은 패턴을 유지합니다. 예를 들어 html 이라는 config는 getHtml과 setHtml 메소드를 받습니다. degaultType이라는 config가 있다면 getDefaultType 과 setDefaultType 메소드를 받을 겁니다.

Using xtype

xtype은 full class name 을 사용하지 않고 Component를 생성할 수 있도록 합니다. 특히 child 컴포넌트들을 포함한 컨테이너를 생성할 때 효과적입니다. xtype은 컴포넌트를 specifying 하는 간단한 방법입니다. 예를들어 Ext.panel.Panel 을 타입하는 대신 xtype: 'panel" 이라고 타입 하시면 됩니다.

Sample usage:

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'fit',

    items: [
        {
            xtype: 'panel',
            html: 'This panel is created by xtype'
        },
        {
            xtype: 'toolbar',
            title: 'So is the toolbar',
            dock: 'top'
        }
    ]
});

List of xtypes

아래 내용들은 센차 터치 2에서 가능한 모든 xtype들 입니다.

xtype                   Class
-----------------       ---------------------
actionsheet             Ext.ActionSheet
audio                   Ext.Audio
button                  Ext.Button
component               Ext.Component
container               Ext.Container
image                   Ext.Img
label                   Ext.Label
loadmask                Ext.LoadMask
map                     Ext.Map
mask                    Ext.Mask
media                   Ext.Media
panel                   Ext.Panel
segmentedbutton         Ext.SegmentedButton
sheet                   Ext.Sheet
spacer                  Ext.Spacer
title                   Ext.Title
titlebar                Ext.TitleBar
toolbar                 Ext.Toolbar
video                   Ext.Video
carousel                Ext.carousel.Carousel
carouselindicator       Ext.carousel.Indicator
navigationview          Ext.navigation.View
datepicker              Ext.picker.Date
picker                  Ext.picker.Picker
pickerslot              Ext.picker.Slot
slider                  Ext.slider.Slider
thumb                   Ext.slider.Thumb
tabbar                  Ext.tab.Bar
tabpanel                Ext.tab.Panel
tab                     Ext.tab.Tab
viewport                Ext.viewport.Default

DataView Components
---------------------------------------------
dataview                Ext.dataview.DataView
list                    Ext.dataview.List
listitemheader          Ext.dataview.ListItemHeader
nestedlist              Ext.dataview.NestedList
dataitem                Ext.dataview.component.DataItem

Form Components
---------------------------------------------
checkboxfield           Ext.field.Checkbox
datepickerfield         Ext.field.DatePicker
emailfield              Ext.field.Email
field                   Ext.field.Field
hiddenfield             Ext.field.Hidden
input                   Ext.field.Input
numberfield             Ext.field.Number
passwordfield           Ext.field.Password
radiofield              Ext.field.Radio
searchfield             Ext.field.Search
selectfield             Ext.field.Select
sliderfield             Ext.field.Slider
spinnerfield            Ext.field.Spinner
textfield               Ext.field.Text
textareafield           Ext.field.TextArea
textareainput           Ext.field.TextAreaInput
togglefield             Ext.field.Toggle
urlfield                Ext.field.Url
fieldset                Ext.form.FieldSet
formpanel               Ext.form.Panel

Adding Components to Containers

위에서 언급했듯이 컨테이너는 Layout으로 정렬되는 child 컴포넌트를 가질 수 있는 특별한 컴포넌트입니다. 위의 예제에서 이미 1개의 패널 안에 2개의 child 패널을 만드는 방법에 대해서 보여 드렸습니다. 그리고 이 코드를 run time 중에 일어나게 할 수도 있습니다.

//this is the Panel we'll be adding below
var aboutPanel = Ext.create('Ext.Panel', {
    html: 'About this app'
});

//this is the Panel we'll be adding to
var mainPanel = Ext.create('Ext.Panel', {
    fullscreen: true,

    layout: 'hbox',
    defaults: {
        flex: 1
    },

    items: {
        html: 'First Panel',
        style: 'background-color: #5E99CC;'
    }
});

//now we add the first panel inside the second
mainPanel.add(aboutPanel);

이 예제에서는 총 3개의 패널을 생성했습니다. 첫번째로 aboutPanel을 만들었습니다. 이것은 유저에게 앱에 대한 설명을 하는데 사용할 겁니다. 그 다음에 우리는 mainPanel을 생성했습니다. 그리고 마지막으로 이 mainPanel 안에 add 메소드를 사용해서 첫번째 패널인 aboutPanel에 넣었습니다.

이 경우 mainPane을 다른 hbox 레이아웃에 넣었습니다. 그리고 디폴트도 사용했습니다. 모든 아이템들은 패널에 추가 됐습니다. 그러므로 이 경우에는 mainPanel에 있는 모든 child가 flex: 1 configuration을 가지게 됩니다. 그 결과 스크린에 첫번째로 render 되는 것은 현재 mainPanel 입니다. 그러므로 그 child는 full width를 차지하게 될 겁니다. mainPanel.add 라인이 call 될 때 그 안에 aboutPanel 이 render 될 것입니다. 이것은 또한 flex 1이 될 겁니다.

이와 같은 방법으로 컨테이너로부터 아이템들을 remove 하는 것도 아주 쉽습니다.

mainPanel.remove(aboutPanel);

이 코드 이 후는 aboutPanel이 없어져서 display 될 겁니다. 첫번째 child panel이 mainPanel의 전체를 차지하게 되겠죠.

Showing and Hiding Components

센차터치의 모든 컴포넌트는 간단한 API를 사용해서 보이게 하거나 또는 안보이게 할 수 있습니다. 위의 mainPanel 예제를 계속 사용해서 어떻게 안보이게 할 수 있는지를 보여드리겠습니다.

mainPanel.hide();

이렇게 하면 mainPanel이 안 보이게 될 겁니다. 그러면 mainPanel의 안에 있는 모든 child 컴포넌트들도 안보이게 될 겁니다. 아 컴포넌트를 다시 보이게 하는 것도 아주 쉽습니다.

mainPanel.show();

이렇게 하면 다시 mainPanel이 보이게 될 겁니다. 물론 그 안에 있는 컴포넌트들도요.

Events


모든 컴포넌트들은 이벤트를 발생합니다. 여러분들은 이 이벤트를 listen 하고 그 이벤트가 일어나면 특정 action을 하도록 할 수 있습니다 예를 들어 Text field 가 type 될때마다 이 Text field 는 change 이벤트를 발생합니다. 여러분은 리스너의 config 부분을 설정함으로서 간단히 이 이벤트를 listen 할 수 있습니다.

Ext.create('Ext.form.Text', {
    label: 'Name',
    listeners: {
        change: function(field, newValue, oldValue) {
            myStore.filter('name', newValue);
        }
    }
});

이 text field 의 값이 바뀔 때마다 change 이벤트가 발생하고 그러면 지정한 함수를 call 하게 됩니다. 이 경우에는 name에 새로운 값을 저장하게 될 겁니다. 저장하는 것 말고 다른 원하는 동작들을 얼마든지 코딩해 넣을 수 있습니다.

센차터치 컴포넌트들은 수많은 이벤트들을 발생합니다. 여러분은 어플리케이션에서 구현할 필요가 있으면 언제든지 쉽게 그 이벤트들을 catch 해서 이를 핸들링 할 수 있습니다. 이러한 것들은 그 컴포넌트를 생성하고 난 이후에 설정할 수 있습니다.

예를 들어 실시간으로 업데이트 하는 여론조사용 dashboard 가 있다고 합시다. 그런데 이 dashboard가 visible 하지 않을 때는 이 여론조사를 하고 싶지가 않습니다. 여러분은 이 dashboard의 show 와 hide 이벤트를 catch 해서 원하는 기능을 넣으실 수 있을 겁니다.

dashboard.on({
    hide: MyApp.stopPolling,
    show: MyApp.startPolling
});

이렇게 어떤 이벤트를 catch (hook) 하는 방법은 아주 쉽습니다. 더 자세한 사항은 아래 링크를 클릭해서 보세요.

• show
• hide

각 컴포넌트들의 class docs 안에 그들이 발생하는 모든 이벤트 리스트들이 있습니다.

Docking

센차터치에는 다른 컨테이너 안에 Component들을 dock 할 수 있는 기능이 있습니다. 예를 들어 hbox layout을 사용하고 윗부분에 banner를 단다고 합시다. 아것을 다른 컨테이너 안에 또 다른 nest 컨테이너를 사용하지 않고 아래와 같이 쉽게 구현할 수 있습니다.

Layout Guide 를 보시면 이 docking에 대한 자세한 설명이 있고 또 다른 layout option들에 대한 설명도 보실 수 있습니다.

Destroying Components

모바일 디바이스의 메모리는 제한된 메모리를 가지고 있습니다. 그래서 컴포넌트들을 더이상 필요로 하지 않게 될 경우 그 컴포넌트들을 destory 시킬 필요가 있습니다. 이 작업은 그 컴포넌트를 생성할 때 할 수 있는 작업은 아니죠. 나중에 기능들이 완료 되고 난 후 필요한 부분에서 예를 들어 앱을 최적화 하는 단계에서 구현하셔야 하는 기능입니다. 컴포넌트를 destroy 하는 방법은 쉽습니다.

mainPanel.destroy();

이렇게 하면 DOM으로부터 mainPanel이 remove 될 겁니다. 그리고 특정 DOM elements 에서 셋업된 이 컴포넌트의 이벤트 리스너들도 remove 될 겁니다. 그리고 이 패널이 내부적으로 사용한 인스턴스들도 destroy 할 겁니다. 그리고 또한 모든 child 컴포넌트들도 destroy 될 겁니다. 이 컴포넌트가 destroy 된 후 그 컴포넌트의 모든 children도 사라지게 되는 것이죠. 그것들은 더이상 DOM에 존재하지 않을겁니다. 그리고 더이상 그 컴포넌트들을 사용할 수 없게 됩니다.