8일차 : Sencha Touch 2 Floating Components

Intro

가령 화면에 꽉 차지 않고, 화면의 일부를 차지하는 형태로 components 들을 보여주고 싶을 때가 있다. 

즉, 배경 백그라운드가 있고 그 위에 components 가 떠 있는 효과를 내고 싶을 때 쓴다.

이는 세 가지 형태로 나타나는데 아래와 같다.

- center any component on the screen : 화면의 정 가운데 나타내기

- absolutely position it on the screen (just like CSS) : 절대 위치를 잡아줘서 화면에 표현하기

- or show it by another component : 다른 컴포넌트에 의해 보이기??!! (showBy)

1. Centering a Component : 컴포넌트를 가운데 두기

Ext.Viewport.add({

    xtype: 'panel',

    html: 'This is a centered panel',

    centered: true

});

centered 속성을 사용해야 한다. 결과 화면은 아래와 같다.

가운데에 component 를 두게 되면, 가로와 세로 길이는 내부 내용물(content) 의 크기를 따라가는데, 보통 content의 크기가 동적으로 바뀔 경우(가령 스크롤이 있는 경우) 에는 가로와 세로 길이를 지정해 주는게 좋다. (width, height 를 를 사용하면 된다.) 

아래는 그렇게 수정한 코드 이다.

Ext.Viewport.add({
    xtype: 'panel',
    scrollable: true,
    html: 'This is a scrollable centered panel with some long content so it will scroll.',
    centered: true,
    width: 100,
    height: 100
});

width 와 height 가 각각 100 씩 적용된 것을 볼 수 있다. 

결과는 아래와 같다.

자, 근데 지금까지 코드는 Viewport 에 모두 아이템을 넣었기 때문에 centered 라는 속성을 쓰게 되면 딱 화면의 정 가운데에 올 수 있었다.

이는 Viewport 가 화면 전체를 차지하기 때문이다.

그러나 프로그래머가 원한다면 다른 container 안에 소속되게 할 수도 있다. 아래 코드를 보자.

Ext.Viewport.add({

    xtype: 'container',

    layout: 'hbox',

    items: [

        {

            flex: 1,

            html: 'left item',

            style: 'background:#eee;'

        },

        {

            flex: 2,

            html: 'right, item',

            style: 'background:#aaa;',

            items: [

                {

                    xtype: 'panel',

                    html: 'This is a centered panel within this container',

                    centered: true

                }

            ]

        }

    ]

});

2 번째 component 에서 items 안에서 centered 가 true 로 되 있는 것을 볼 수 있을 것이다. 그러므로 이 때 만들어진 Panel 은 flex 가 2 인 아이템의 크기를 기준으로 가운데로 오게 될 것이다. 결과는 아래 화면과 같다.

참고로 centered 속성도 getter setter 를 가진다!

2. Absolutely positioning a Component : 절대 위치로 나타내기

component 에는 top, right, bottom, left 라는 속성이 있다. 자신이 포함된 Container 기준으로 절대 위치를 나타낸다. 

Ext.Viewport.add({
    xtype: 'panel',
    html: 'A floating component',
    top: 50,
    right: 5
});

가령 위의 코드는, Viewport 화면에서 상단으로 부터 아래로 50px, 우측으로 부터 5px 를 띄워서 나타내라는 뜻이다.

아래 코드를 보자.

var panel = Ext.Viewport.add({
    xtype: 'panel',
    defaultType: 'button',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [
        {
            text: 'up',
            handler: function() {
                panel.setTop(panel.getTop() - 5);
            }
        },
        {
            text: 'down',
            handler: function() {
                panel.setTop(panel.getTop() + 5);
            }
        },
        {
            text: 'left',
            handler: function() {
                panel.setLeft(panel.getLeft() - 5);
            }
        },
        {
            text: 'right',
            handler: function() {
                panel.setLeft(panel.getLeft() + 5);
            }
        }
    ],

    top: 50,
    left: 5
});

네 개의 버튼을 가지는 Panel 을 viewport 에 더했다. 각 버튼을 누를 때 마다, 버튼에서 명시한 방향으로 해당 panel 이 5 칸 씩 이동하도록 한다.

결과 화면은 아래와 같다.

(app.js 를 수정하여 Ext.Viewport.add(Ext.create('Sample.view.Main')); 이 부분을 주석 처리 한 뒤 그 자리에 위의 코드를 넣어주고 실행했다.)

3. Modal Components : modal components 만들기

modal : 자기 자신 밑에 있는 모든 component 들에 마스크를 씌워서 자기 자신이 사라질 때 까지는 사용자와 interaction 을 하지 못하게 하는 속성을 이른다. 

modal components를 만든다는 것은 floating 혹은 centered 된 container 를 만든 뒤, 해당 container 의 모든 parent container 는 마스크 처리하는 것을 이른다.

아래 코드를 보자.

Ext.Viewport.add({

    xtype: 'panel',

    html: 'This is a centered and modal panel',

    modal: true,

    centered: true

});

Ext.Viewport.setHtml('This content is in the viewport and masked because the panel is modal.');

Ext.Viewport.setStyleHtmlContent(true);

modal 이 true 인 것을 알 수 있다. 그리고 centered 는 true 로 되 있으므로 가운데로 정렬될 것이다. 

결과는 아래와 같다.

(modal components 를 만들고 나서) 마스크 부분을 터치해서 해당 modal components 를 없애고 싶다면, hideOnMaskTap 속성을 사용하자.

코드는 아래와 같다.

Ext.Viewport.add({

    xtype: 'panel',

    html: 'This is a centered and modal panel',

    modal: true,

    hideOnMaskTap: true,

    centered: true

});

Ext.Viewport.setHtml('This content is in the viewport and masked because the panel is modal.<br /><br />You can also tap on the mask to hide the panel.');

Ext.Viewport.setStyleHtmlContent(true);

hideOnMaskTap 이 true 이기 때문에 해당 modal components 가 add 되고 나서 mask 처리 된 부분을 선택해면 해당 modal components 는 사라지게 된다.

(위의 코드 결과는 직접 해 보길 바란다. 캡쳐 사진으로는 한계가 있다.)

참고로 modal 은 Ext.Container 나 혹은 이를 상속한 component 들에만 포함될 수 있다.