NANA C++ LIBRARY의 레이아웃 관리 방법 (작성중)

 

Nana 라이브러리는 레이아웃을 관리할 때 Div-Text라는 방식을 사용합니다.

 

 

 

작성중....

 

 

 

 

필드(field)는 위치에 대한 기본적인 개념입니다. 필드에는 네 가지 타입이 존재합니다. 각 타입은 위젯을 어떻게 위치시키는지에 따라 나눠집니다. 이하는 필드 타입입니다.

필드 타입	설명
수평 (Horizontal)	위젯을 윈도우즈의 작업 표시줄처럼 수평으로 위치시킵니다. 이것이 기본값입니다.
수직 (Vertical)	위젯을 드롭다운(drop-down) 메뉴처럼 수직으로 위치시킵니다.
격자 (Grid)	위젯을 마이크로소프트 엑셀의 셀처럼 표 형식의 격자로 위치시킵니다.
스플리터 (Splitter)	스플리터는 양 측면의 크기를 조정하는데 사용됩니다.
독 (Dock)	자식 필드들을 고정합니다.
전환가능 (Switchable)	자식 필드들 중 하나만 보여줍니다.

 

 

Div 문법

심볼과 키워드 (Symbols and keywords)

< 와 >, |, %, [ 와 ], arrange, collapse, gap, grid, margin, min 혹은 max, repeated, variable, vertical 혹은 vert, weight,

 

필드 정의 (Define a field)

<>

서로 중첩된 필드 (Nest fields within each other)

<<>>

루트 필드 (Root field)

묵시적인 필드입니다. Div로 정의된 모든 필드는 이 루트 필드의 하위 필드입니다. (HTML의 태그와 비슷합니다.)

스플리터 바 (Splitter bar)

<a>|<b> 또는 <a>|30<b> 또는 <a>|30%<b>   <horizontal <a>|<b>>   <vertical <a>|<b>>

a필드와 b필드 사이에 사용합니다. horizontal이나 vertical도 사용할 수 있습니다.

 |  뒤에 작성된 숫자는 우측 필드의 초기 가중치(weight)나타냅니다. 30%는 (a필드 + b필드)*30%와 같이 전체 픽셀의 퍼센트로 계산됩니다. 이러한 경우 a나 b에 명시된 위젯의 속성값은 무시될 것입니다.

배열 (Arrays)

[1,2,3]

1, 2, 3이란 세 요소를 가진 배열

반복되는 요소 (Repeated elements)

[1,2,3,repeated]

repeated 키워드는 반복되는 무한한 배열을 나타냅니다. (예를들어 1,2,3,1,2,3,1,2,3,······)

변수 (Variables)

[1,2,variable,3]

variable 키워드는 지정되지 않은 값입니다.  이 키워드는 필드의 속성(arrange, gap, margin)에 따라 다르게 해석됩니다. 자세한 내용은 필드의 속성값 항목을 참조하세요.

 

 

필드의 속성 지정 (Specify attributes for a field)

이름 (Name)

필드 이름의 식별자를 지정합니다.

< __id_you_specified__ >

필드를 id_you_specified로 명명했고, 아래와 같이 참조할 수 있습니다.

place_obj.field("id_you_specified")

혹은

place_obj["id_you_specified"]

수평 레이아웃 (Vertical layout)

vertical 혹은 vert 을 지정하여 모든 자식 필드들이 수직으로 정렬되는 필드를 생성합니다.

place plc(fm);      // fm is an instance of ::nana::form

plc.div("<abc>");
plc.field("abc") << btn0 << btn1 << btn2 << btn3 ; // These buttons are children of fm.
plc.collocate();

아래 라인을

plc.div("<abc>");

이렇게 수정합니다.

plc.div("<vertical abc>");

그러면 이렇게 변합니다.

가중치 (Weight)

가중치는 필드의 높이나 너비를 지정하는데 사용됩니다. 본인이 속한 필드의 레이아웃 타입에 따라 달라집니다.

픽셀에 대한 가중치 적용

<abc><weight=200 def>

(만약 폼의 넓이가 1000px라면 abc필드는 800px를, def필드는 200px의 너비를 가집니다.)

혹은 백분율로도 가능합니다.

<abc><weight=60% def><ghi>

(만약 폼의 넓이가 1000px라면 abc필드는 200px를, def필드는 600px를, ghi필드는 200px의 너비를 가집니다.)

최솟값 혹은 최댓값 (Minimum or maximum)

min과 max는 필드의 최솟값과 최댓값을 지정할 수 있습니다. 만약 필드에 가중치 (Weight)와 min 또는 max가 같이 사용된다면, 가중치 (Weight) 속성이 무시됩니다.

배치 (Arrangement)

arrange는 위젯 그룹의 가중치 (weight)를 지정합니다.

place.div("<abc arrange=[50,100]>");
place.field("abc") << btn0 << btn1;

아래처럼 필드 안에 있는 위젯의 개수가 배치 (arrange)의 개수보다 많을 경우, 나머지 위젯들은 자동적으로 크기가 조정됩니다.

place.div("<abc arrange=[50,100]>");
place.field("abc") << btn0 << btn1 << btn2 << btn3;

 

 

배열(array) 안에 위젯의 가중치 (weight)를 명시하지 않고 variable로 작성하면 위젯의 크기가 위치에 따라서 조정됩니다.

place.div("<abc arrange=[30,variable,60,repeated]>");
place.field("abc") << btn0 << btn1 << btn2 << btn3 << btn4 << btn5 << btn3;

격자 [X, Y] (grid [X, Y])

grid는 자식 위젯들을 필드에 격자로 배치합니다. 예를들어 3x2 격자를 생성하려면 다음과 같습니다.

<grid [3, 2]>

3x3의 경우는 아래와 같습니다.

place plc(fm);
plc.div("< abc grid=[3,3]> ");
std::vector<std::shared_ptr<button>> btns;

for(auto i = 0; i < 9; ++i) {
    btns.emplace_back(new button(fm));
    btns.back()->caption("Button");
    plc["abc"] << btns.back()->handle();
}

접기 (Collapses)

collape는 엑셀의 셀 병합 기능처럼 블록을 병합합니다. collapse(열 번호, 행 번호, 병합할 열 개수, 병합할 행 개수)

<grid=[3,2] collapse(0,1,3,1)>

위의 collapse는 0번째 열과 1번째 행부터 시작하여 3개의 열과 1개의 행을 병합합니다

두개 이상의 접기를 사용할 수는 있지만, 중복된 항목은 무시됩니다. 아래의 경우 두 번째 접기는 첫 번째 접기와 중복되기 때문에 무시됩니다.

<grid=[3,2] collapse(0,1,3,1) collapse(1,1,2,2)>

(필자 주. 이러한 경우 코드 순서가 아닌, 배열상에서 먼저 실행되는게 우선되는 걸로 보입니다. 1열1행보다 0열1행이 먼저 있기 때문에 collapse(0,1,3,1)이 우선순위를 가집니다.)

간격 (Gaps)

gap은 모든 위젯간에 픽셀 간격을 생성합니다. (HTML의 margin 속성과 비슷하지만 gap은 필드에만 적용됩니다.)

<grid=[3, 2] gap=5>

필드가 grid일 때 하나의 배열에 gap을 명시할 수도 있습니다. 그럴 경우 반드시 첫 번째 요소로 지정해줘야 합니다. 다른 모든 요소들은 무시됩니다.

gap 배열의 첫 번째 요소가 variable일 경우, variable은 0으로 해석합니다.

<grid=[3,3] gap=[variable]>

위는 다음과 동일합니다.

<grid=[3,3] gap=0>

gap은 arrange와 함께 사용할 수도 있습니다.

<arrange=80 gap=5>

gap=5는 gap=[5,repeated]와 동일합니다.

gap은 위젯 사이에서만 적용됩니다. gap은 다른 모든 속성들과 다르게 배열처럼 해석됩니다. 자세한 내용은 margin과 arrange을 참조하세요.

여백 (Margin)

margin은 HTML의 margin 속성처럼 필드 주변에 빈 공간을 추가합니다. 한개부터 네개 모두까지 사용 가능합니다.

<margin=[10,20,30,40]>

위쪽 여백 = 10

오른쪽 여백 = 20

아래쪽 여백 = 30

왼쪽 여백 = 40

<margin=[10,20,30]>

위쪽 여백 = 10

오른쪽 여백 = 20

아래쪽 여백 = 30

<margin=[10,20]>

상하 여백 = 10

좌우 여백 = 20

<margin=[10]>

위쪽 여백 = 10 (대괄호 []가 있음에 유의하십시오)

<margin=20>

상하좌우 여백 = 20 (대괄호가 없습니다.)

variable이 지정되면 0으로 적용됩니다.

<margin=[variable]>

위쪽 여백 = 0

<margin=[variable,repeated]>

상하좌우 여백 = 0

 

 

 

참조

https://github.com/qPCR4vir/nana-docs/wiki/Using-place-for-layouts

qPCR4vir/nana-docs