VIDEO 03. [Concepts] Intro to Layouts (교정완료)

원문 : http://docs.sencha.com/touch/1-1/#!/video/15888504

번역 : https://github.com/KoreaSenchaUserGroup/Lab1/wiki/VIDEO-02.%5BConcepts%5D-Intro-to-List-Component

글쓴이 : 이민호 (Github:tisohjung), 한국센차유저그룹 SenchaCon 번역팀

위에는 바로 (다듬어진)번역, 아래는 드래프트 영/한 번역입니다.

Sencha Touch - Intro to Layouts

센차 터치에서 인터페이스를 구성하는 기본적인 구조는 panel(판넬)이다. 각 panel은 html 문서를 출력할 수 있으며 다른 panel을 포함하는 컨테이너가 될 수도 있다. 센차 터치는 panel과 컨테이너의 관계에서 서로 다른 두 가지 메커니즘을 제공한다. 하나는 panel을 컨테이너의 가장 위 또는 가장 아래에 배치하여 이상적인 툴바를 만드는 것이고 또 다른 하나는 하나 이상의 panel 의 위치를 조절하는 레이아웃으로 쓰는 것이다.

레이아웃은 내부 panel들이 공간을 나눠 가질 수 있게 깔끔히 배열하거나 panel을 한 번에 하나씩 보여주면서 화면전환을 한다. 이번 섹션에서는 서로 다른 layout의 종류를 살펴보고 더 나아가 여러 가지 layout을 혼합해서 사용하는 방법을 살펴보겠다.

layout의 기본값은 ‘auto’이다. ‘auto’는 panel을 html의 블록요소처럼 동작하게 한다. panel은 가로 영역은 모두 차지하지만 세로영역은 필요한 만큼 즉, 콘텐츠의 높이만큼만 차지한다. 만약 panel이 세로영역을 모두 차지하게 하고 싶다면 layout을 ‘fit’으로 지정한다. layout을 ‘fit’으로 지정하면 panel이 가로와 세로 모든 영역을 차지하게 된다. 따라서 ‘fit’은 panel에 하나의 요소만 넣고 싶을 때 적합하다. layout을 ‘fit’으로 설정하고 하나 이상의 구성요소를 넣으면 작동시킬 때 문제가 발생한다.

‘card’ layout은 ‘fit’과 같이 하나의 panel만 보여준다. 하지만 ‘fit’ layout은 한 가지 요소만 넣을 수 있고 ‘card’ layout은 하나 이상의 요소를 넣을 수 있다. 이 예제에서는 rootPanel을 자바스크립트 콘솔에서 접근하기 위해 전역변수로 할당했다. rootPanel의 layout은 ‘card’이며 “red, amber, green” 3개의 패널로 구성돼있다. 아래 예제를 실행해 보면 첫 번째 요소인 “red”가 보인다.

콘솔에서 rootPanel의 ActiveItem을 다음과 같이 1로 지정하면 red panel이 amber panel로 바뀌고, rootPanel의 ActiveItem을 다음과 같이 2로 지정하면 panel이 green panel로 바뀌는 것을 확인할 수 있다.

rootPanel.ActiveItem(1)
rootPanel.ActiveItem(2)
rootPanel.ActiveItem(0)

‘card’ layout은 코드로 panel을 전환할 수 있지만, UI(사용자인터페이스)는 지원하지 않는다.

센차 터치에는 UI를 지원하는 두 가지 panel이 있다. 하나는 Carousel이고 다른 하나는 TabPanel이다. 지금부터 UI를 지원하는 두 가지 panel을 살펴보겠다.

panel을 TabPanel로 바꾸고 실행해보면 탭 형식의 UI가 생기며 각 이름을 클릭해서 panel을 전환할 수 있다. TabPanel 화면 전환의 기본값은 ‘slide’ 형식이지만 ‘fade’, ‘slide’, ‘flip’, ‘cube’, ‘wipe’ 등으로 설정할 수 있다.

일반 panel에서는 여러 가지 layout을 설정할 수 있지만 TabPanel은 ‘card’ 형식의 layout만 사용할 수 있다. 따라서 TabPanel에서 다른 형식의 layout으로 변경하여도 값이 무시되며 ‘card’ 형식으로만 보인다. 탭 형식의 UI뿐만 아니라 setActiveItem() 함수로 panel 간의 전환을 콘솔을 통해서도 할 수 있다.

이번에는 Carousel을 실습해 보기 위해 TabPanel을 Carousel로 변경하고 브라우저에서 새로 고침을 한다. TabPanel에서와 같이 layout을 card로 설정하였기 때문에 하나의 패널만 보인다. Carousel에서는 탭이 아닌 스와이프로 화면을 전환할 수 있다. 또한 아랫부분에 있는 인디케이터를 통해 몇 개의 panel이 있으며 현재 몇 번째 페이지에 있는지 알 수 있다. Carousel은 기본으로 수평으로 스와이프하지만 direction을 ‘vertical’로 변경하면 수직으로 스와이프할 수 있다.

지금까지 한 개의 panel을 보여주기에 적합한 ‘fit’ layout과 한 번에 하나의 panel만 보여줄 수 있지만 여러 개의 panle을 가질 수 있는 ‘card’ layout을 살펴보았다. 그렇다면 여러 개의 panel을 동시에 보여주려면 어떻게 해야 할까? 바로 hbox와 vbox 레이아웃을 사용하면 된다.

‘card’ layout을 vbox로 변경한 뒤 브라우저에서 새로 고침을 해 보면 3개의 panel이 동시에 보이는 것을 확인할 수 있다. 하지만 각 panel의 콘텐츠의 너비와 높이만큼만 차지하게 된다. panel의 너비를 꽉 채우려면 align 변수를 stretch로 설정해 준다. align을 ‘stretch’로 설정한 결과는 layout이 ‘auto’일 때와 같다. 하지만 ‘vbox’ layout은 ‘auto’ layout보다 더 많은 제어를 제공한다.

pack 속성의 기본값은 ‘start’이며 ‘center’와 ‘end’로 변경할 수 있다. pack 속성으로 panel의 세로 위치를 변경할 수 있다. 세로 높이는 flex 속성을 이용해 조절할 수 있으며 panel이 차지할 세로 공간의 비율을 조절한다. 예를 들어 각 panel의 flex 값을 모두 1로 설정하면 모두 같은 비율의 높이를 차지하게 된다.

예제에서는 모든 panel의 속성으로 flex 값을 설정했지만 더 빠르고 쉬운 방법도 있다. 바로 디폴트 변수에 해시 값으로 flex 속성을 넣는 방법이다. 다음과 같이 디폴트 변수에 해시 값으로 flex 값을 설정하면 각 panel에서 설정한 flex 값을 지워도 같은 결과가 출력된다.

vbox layout은 세로로 panel을 나눠서 배치하고 hbox layout은 가로로 panel을 나눠서 배치한다. hbox layout 역시 vbox layout과 같이 align, pack, flex 속성을 이용할 수 있다. 하지만 각 패널을 위에서 아래로가 아닌 왼쪽에서 오른쪽으로 배치한다.

모든 panel은 자기 자신에 포함된 요소로 볼 수 있으며 다른 panel을 포함할 수 있는 컨테이너로도 볼 수 있다. 따라서 panel은 서로 다른 layout을 이용해서 서로 포함할 수 있다.

예제에서는 스크린을 꽉 채우는 루트 레벨의 panel을 생성했으며 이 루트 레벨의 panel은 align과 flex가 설정된 ‘vbox’ layout으로 정렬된 3개의 panel을 포함한다. 또한 vbox layout으로 정렬된 panel인 topChanger, centerChanger, bottomChanger panel은 서로 다른 3가지 색의 panel을 포함하는 carousel이다.

예제코드를 브라우저에서 실행해 보면 3가지 색의 panel이 가로로 늘려져 화면을 꽉 채우는 것을 볼 수 있다. 이것이 vbox의 성격이다. 하지만 각 세 가지 색은 layout이 card인 패널 그 자체이다. 따라서 각 panel을 좌우로 스와이핑해서 색을 섞고 짜 맞출 수 있다. 이제 다음 단계로 넘어가서 style을 cls 클래스로 변경해보자.

css에 각 panel에 들어가는 carousel의 배경 이미지에 적용될 함수를 지정했다. 또한 background-size를 contain으로 설정해 패널 크기에 따라 크기가 변하게 하였다. 이 예제코드를 브라우저에서 실행해보면 몬스터의 머리, 몸, 다리를 바꿀 수 있는 화면이 나온다. 이 몬스터를 구성하는 이미지는 flickr에서 찾았으며 creative commons에 저작권이 등록되어있으며 반드시 저작자와 출처를 필수로 표시해야 한다. 따라서 제작자의 웹사이트로 갈 수 있는 링크를 담을 panel을 하나 더 만들었다. 링크를 담은 credits panel을 items 배열에 바로 넣으면 다음과 같이 4개의 panel이 화면을 균등하게 나눠갖는다. 예제에서는 credits panel에 필요한 만큼의 높이만 주고 panel의 가장 아래에 붙이기 위해 credits panel을 items 배열에서 빼서 dockedItems에 넣었다. dock 변수를 “buttom”으로 설정해 컨테이너의 하단에 붙여주면 원하는 결과를 얻을 수 있다.

예제에서 센차터치가 제공하는 모바일 앱을 만들기 위해 흔히 사용하는 여러 인터페이스 패턴을 볼 수 있다. 하지만 위에서 다룬 panel들은 자주 거론되는 것을 만들 때 많은 도움이 될 것이다.

Sencha Touch - Intro to Layouts

In Sencha Touch the basic building block for creating an interface is the panel. Each panel can display html content or it can be treated as a container to hold other panels. Sencha Touch provides two distinct mechanisms for positioning panels with respect to their containers. You can either dock a panel, so that it sticks to one of the edges of its container, which is ideal for creating toolbars, or you can use a layout that will handle the positioning of one or more panels.

센차 터치에서 인터페이스를 만드는 기본적인 구조는 'panel' 입니다. 각 panel은 html 문서를 표시 할 수 있으며 다른 panel을 포함하는 컨테이너가 될 수 있습니다. 센차 터치는 panel과 컨테이너의 관계에 있어서 두가지의 서로 다른 메커니즘을 제공합니다. panel 을 컨테이너에 처음이나 끝에 넣어서 이상적인 툴바를 만들거나, 하나 이상의 panel 위치를 조절하는 레이아웃에 쓸 수 있습니다.

The layouts work either by neatly arranging inner panels to use the available space or by just showing one panel at a time and providing someway of changing the focus between panels. in this screen cast i will demonstrate each of the different layout types than go on to show how they can be combined in anyway you can think of.

레이아웃은 내부 panel들이 공간을 잘 차지하게 깔끔히 배열하거나, panel을 한번에 하나씩 보여주며 시점변화를 조절 합니다. 이 화면에서는 각각의 다른 layout 종류를 시연하고 더 나아가 혼합해서 쓰는것을 보여드리겠습니다.

0:54 layout:auto

The default layout type is auto. This causes a panel to behave much like a regular block level element in a html document. The panel will fill the entire available width, but it will only occupy as much height as is required to accommodate the content.

레이아웃의 디폴트값은 'auto' 입니다. 이것은 panel을 하여금 블록단위의 html 요소 처럼 동작하게 합니다. panel은 가로로 가능한 크기를 모두 차지 하지만, 세로로는 필요한 만큼만 차지합니다.

1:11 Layout:fit

if you want to make a panel fill the entire available space, you can use the fit layout type. As u can c, this causes the panel to stretch vertically as well as horizontally. The fit layout is perfect, if u only want to add a single component to a panel. But it won't work if u add any additional component after that.

만일 panel이 모든 공간을 차지하게 하기 원하면, fit layout을 사용하시면 됩니다. 여기에서 볼 수 있듯이, panel이 세로 가로 모든 영역을 차지하는것을 볼 수 있습니다. fit layout은 panel에 하나의 요소만을 넣기 원할때 적합합니다. 추가적인 구성 요소를 넣게되면은 작동시 문제가 생깁니다.

01:32 Layout:card

The card layout is similar to fit in that it only displays a single panel at a time. Where as the fit layout can only accept a single item, the card layout will accommodate multiple components. In this example i have deliberately assigned the "rootPanel" to a global variable, so that i can access it in the javascript console. The root panel uses a card layout and contains 3 items "red, amber, green" panels. If we look at it in the browser, u'll c that only the first component is visible.

card layout은 하나의 panel만 보여주는 점에있어서 fit 와 비슷합니다. fit layout은 한가지 아이템을 수용 할 수 있는 반면, card layout은 여러개의 요소를 수용 할 수 있습니다. 이 예제에서는 rootPanel을 자바스크립트콘솔에서 접근하기 위해 의도적으로 전역변수로 할당했습니다. rootPanel은 card layout을 쓰며, 3개의 아이템인 "red, amber, green"패널로 구성되있습니다. 브라우저를 보면은, 첫번째 요소가 보이는것을 알 수 있습니다.

But if i open the console i can manipulate the rootPanel programmatically calling rootPanel.setActiveItem(1) will reveal the amber panel, and calling rootPanel.setActiveItem(2) will reveal the green panel. The card layout provides a programmatic interface for switching focus between panels. But it doesn't provide a user interface. In sencha touch there are two specialized kinds of panel that do provide a user interface to the card layout, the Carousel, and the TabPanel. So lets have a look at these.

콘솔을 열면 rootPanel을 조작해서 rootPanel.setActiveItem(1)을 하면 amber 패널을, rootPanel.setActiveitem(2)를 하면 green패널이 보이는것을 볼 수 있습니다. card layout은 패널간에 초점을 전환하기 위한 프로그래밍 인터페이스를 지원합니다. 하지만 UI(유저인터페이스)는 지원하지 않습니다. 센차 터치에는 두가지 UI를 지원하는 panel 이 있습니다. Carousel과 TabPanel입니다. 한번 살펴볼까요

02:45 TabPanel

If i change this panel into a TabPanel, then refresh the page in the browser, u'll c that it has created a tabbed user interface. I can click on each title to activate its corresponding penal. By default the tabPanel will use a slide transition when switching focus. But u can override this values with 'fade', 'slide', 'flip', 'cube', or 'wipe'. Where as a regular panel allows u to specify the layout, the tabPanel requires a layout of 'card'. So if you try to set it to anything else, the value will just be ignored. I still have access to the setActiveItem function. And i can use this to change the inner panels programmatically.

제가 이 panel을 TabPanel로 바꾸고, 브라우저를 새로고치면, 탭형식의 유저인터페이스가 생긴것을 볼 수 있습니다. 각각의 이름을 클릭해서 각 패널을 활성화 시킬 수 있습니다. 디폴트값으로 tabPanel은 슬라이드 형식의 화면전환을 사용합니다, 하지만 'fade', 'slide', 'flip', 'cube', or 'wipe' 등으로 재정의 할 수 있습니다. 일반 panel에서는 layout을 설정 할 수 있는 반면, tabPanel은 'card'형식의 layout만을 사용 할 수 있습니다. 때문에 다른것으로 재정의해도 값이 무시될 것입니다. 여전히 setActiveItem 함수는 사용 할 수 있으며, 내부 패널간의 전환을 콘솔을 통해 할 수 있습니다.

03:33 Carousel

Now i'm going to switch the tabPanel for a Carousel, and refresh the page in the browser. Again this uses a card layout, so only one panel is visible at a time. But instead of using tab to switch, I can just swipe from side to side. Notice too have the indicator at the bottom gives a sense of how many panels there are, and which page u r on. By default the carousel works horizontally. But the direction parameter can be set to either horizontal or vertical.

이번에는 tabPanel에서 Carousel로 바꿔보고 브라우저에서 새로고침해보겠습니다. 전과같이 card layout을 사용했기에 하나의 패널만이 보이는것을 알 수 있습니다. 하지만 탭을 이용해 화면을 전환 하지 않고 스와이프를 통해 전환 할 수 있습니다. 아래 부분에는 몇개의 페이지가 있고 현재 몇번째 페이지에 있는지 표시가 되있는걸 볼 수 있습니다. 디폴트값으로 carousel은 수평 이동합니다. 하지만 direction 변수를 이용해 바꿀 수 있습니다.

04:10 Boxlayout

So far i've shown that the fit layout is suitable for a single panel, and that the card layout can hold multiple panels, but it will only display one at a time. So what if you want to display more than one panel simultaneously? Thats when the HBox and the VBoxLayouts come in.

여기까지 하나의 패널에는 fit layout이 적합하다고, card layout은 한번에 하나씩밖에 보여주진 않지만 여러개의 패널을 가질 수 있다는 것을 보여드렸습니다. 그렇다면 여러개의 패널을 동시에 보여주려면 어떻게 할까요? 바로 hbox와 vbox 레이아웃을 사용하면됩니다.

Here i'm going to switch the card layout for "vbox". When i refresh the browser, u'll c that all three panels r visible. But they only occupy as much height and width as their contents requires. To make the panels use all available horizontal space, i can set the align parameter to "stretch". This makes it look just the same as if layout was set to auto. But the vbox layout offers much more control over where components occupy vertical space. The pack perimeter is set to the "start" by default.

여기에 card layout을 vbox로 교체해보겠습니다. 브라우져를 새로고치면, 3개 패널이 다 보이는것을 알 수 있습니다. 하지만 내용이 필요한 만큼의 넓이와 높이만 가지게 됩니다. 패널의 넓이를 꽉 채우기 위해서는 align 변수에 "stretch"를 지정해주면 됩니다. 이제 보시면은 layout이 auto 였을때와 같아졌을겁니다. 하지만 vbox layout은 세로 영역에 대해 더 많은 제어를 제공합니다. pack 변수는 디폴트값으로 start로 되어있습니다.

But it can also take the values "center" and "end". This affects the vertical positioning of the panels. U can control the vertical height of each individual panel using the flex parameter. This specifies the proportion of the vertical space that the each panel will occupy. If i set flex to 1 for each panel, they will occupy the same amour of height.

하지만 "center"와 "end" 값을 줄 수 있습니다. 이것은 panel의 세로 위치를 변경합니다. 세로 높이는 flex변수를 이용해 조절 할 수 있습니다. 이것은 각각의 패널이 차지할 세로 공간의 비율을 조절합니다. 각 패널의 flex값 모두 1로 설정하면 모두 같은 비율의 높이를 차지하게 됩니다.

What i've done here is to specify the value for flex on every panel within the box. But there is a quicker and a dryer way of doing this. which is to create a hash of default values, including the flex parameter. Now i can remove the setting for each individual panel. The vbox layout distributes panels vertically. There is also an hbox layout which arranges panels horizontally. This can also be tweaked using align, pack, and flex parameters. But each one works from left to right, rather than from top to bottom.

여기서는 모든 패널의 박스 안에 flex값을 설정했습니다. 하지만 더 빠르고 쉬운 방법으로 할 수 있습니다. 바로 디폴트 변수에 해시값으로 flex변수를 넣는것입니다. 이제 각각의 패널에 있는 값을 지워도 됩니다. vbox 레이아웃은 세로로 패널을 나누는반면 hbox 레이아웃은 가로로 페널을 배치합니다. 이것 역시 align, pack, flex 변수 등을 이용해 수정 할 수 있습니다. 하지만 각각을 위에서 아래로 정의하는게 아닌 좌에서 우로 정의합니다.

06:07 Mix&Match

Every panel can be treated as a component in itself, or as a container for other panels. so it's possible to nest panels together using different layouts for each one. Here i've created a root level panel that fills the screen. It contains 3 panels arranged using a vbox layout with align and flex set setup, so as to use all of the available space. The topChanger, centerChanger, and the bottomChanger panels are all carousels, each containing three panels of different colors.

모든 패널은 자기자신에 포함된 요소로 볼 수 있으며 다른 패널을 포함 할 수 있는 컨테이너로도 여길 수 있다. 그래서 panel은 서로 다른 레이아웃을 이용해서 서로를 포함할 수 있다. 여기서는 스크린을 꽉 채우는 루트레벨의 패널을 생성했다. 이것은 모든 공간을 사용하기위한 방법으로 align과 flex가 설정된 vbox layout으로 정렬된 3개의 패널을 포함한다. topChanger, centerChanger, 그리고 bottomChanger panel들이 각각 3개의 다른 색의 패널을 포함하는 carousels다. If we take a look at this in the browser u'll c three strips of colors stretching to fill the available vertical space. That's the vbox behavior. But each colored panel is itself, just one of 3 cards arranged in a carousel. So i can swipe each of these to mix & match the colors. Let's take this to the next level, and switch out the inline styles(style:) for classes(cls:).

브라우저에서 보면, 3개의 색줄이 좌우로 늘려져 위아래 화면은 꽉 채우는것을 볼 수 있다. 이것이 vbox의 성격이다. 하지만 각각의 색은 3개의 card로된 패널 그 자체이다. 그래서 각각을 좌우로 슬라이드 해서 색을 섞고 짜맞출 수 있다. 그럼 다음 단계로 넘어가서 style를 cls클래스로 바꿔보자.

In my style-sheet i've created rules that apply a background image to each panel in the carousel. i'm also using the background-size contain rule which will scale the image to fit when the panels change size. Now when i refresh the browser, i get to switch the head, torso, and the legs of a little monster. i found these illustrations on flickr, and they are distributed under "creative commons" license. That means i can remix and redistribute them as long as i give credit to the original artist. So i want to add one more panel containing link to the illustrator's website. let's c what happens if i add this directly to the items array. the vbox layout causes this item to occupy the same amount of vertical space as the three carousels. I'd prefer to make the panel containing the credits, take up no more room than it needs to. ideally i just like to stick it to the bottom of the containing panel. This can be achieved by moving the credits panel from the items array to the dockedItems array. setting the dock property to "bottom" fixes it to the bottom of its' container. And that achieves the desired result.

내 스타일-시트에서는 각각의 패널에 들어가는 carousel의 배경 이미지에 적용될 함수를 지정해줬다. 또한 background-size에 contain을 적용시켜 패널 크기에 변화에따라 크기가 맞게 했다. 브라우저를 새로고치면, 몬스터의 머리, 몸, 다리를 바꿀 수 있는화면이 나온다. 이 이미지들은 flickr에서 찾았으며 creative commons 에 저작권 등록이되있다. 이뜻은 이미지의 제작자 크레딧을 주는 대신 가져다 쓸 수 있다. 때문에 제작자의 웹사이트에 링크를 거는 panel을 하나 더 만들어야한다. items 배열에 바로 집어넣으면 어떻게 되는지 보자. vbox 레이아웃은 위의 3개 carousel과 같은 높이를 차지하는 패널을 만들어준다. 나는 크레딧 패널에 필요한 만큼의 높이만을 주고싶다. 이상적으로 패널의 제일 밑에 붙이고싶다. 이것은 items배열에서 credit패널을 빼서 dockedItems에 넣는것으로 해결된다. dock변수를 "bottom"으로 정이하면 컨테이너의 하단에 붙여준다. 짜잔~원하는 결과다.

08:17 Outro

In practice u'll find that many common interface patterns for building mobile applications r provided by one of sencha touch's more specialized panel types. But the layouts covered in this episode will be a great help on those occasions when u need to build something more of the spoke.

연습에서는 센차터치의 세부 패널 타입이 모바일 앱을 만들기 위한 많은 인터페이스 패턴을 제공하는 것을 볼 수 있다. 하지만 위에서 했던 내용은 자주 거론되는 것을 만들때에 많은 도움을 줄 것이다.