KoreaSenchaUserGroup/Lab1 — Issue #6: Sencha Touch - Intro to Layouts
Author: tisohjung
Created: 2012-03-05 02:12:01+00:00
State: open

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