Swallow 타입을 이용하여,

C에서 생성한 오브젝트를 edc에 넣을 수 있습니다.

사실 edc에서 사용하는 모든 타입은 C에서도 그대로 만들 수 있습니다.

이 말은 굳이 edc를 사용하지 않아도 C로만 화면 구성을 할 수 있다는 것이지요.


하지만, edc는 레이아웃에 특화 되어 있습니다.

화면 구성을 edc 빼고 논할 수는 없지요.

그래서 edc에서는 화면 구성을 하고,

나머지 필수 요소는 Swallow 타입을 이용하여,

C에서 코딩하곤 합니다.



안녕하세요, Tizen 개발자 윤진입니다.


SWALLOW는 파트의 기본적인 타입 중에 하나입니다.

C에서 생성한 오브젝트를 edc의 SWALLOW에 넣을 수 있습니다.


collections - group - part { ... type: SWALLOW ... }


SWALLOW 파트로만 이뤄진 그룹을 하나 보겠습니다.

repo. : git://review.tizen.org/framework/uifw/elementary

branch : tizen_2.3

source : data/themes/widgets/conformant.edc


group { name: "elm/conformant/base/default";
   parts {
      part { name: "elm.swallow.indicator";
         type: SWALLOW;
         description { state: "default" 0.0;
            fixed: 0 1;
            align: 0.0 0.0;
            rel2.relative: 1.0 0.0;
         }
      }
      part { name: "elm.swallow.content";
         type: SWALLOW;
         description { state: "default" 0.0;
            fixed: 0 1;
            align: 0.5 0.5;
            rel1.relative: 0.0 1.0;
            rel1.to_y: "elm.swallow.indicator";
            rel2.relative: 1.0 0.0;
            rel2.to_y: "elm.swallow.clipboard";
         }
      }
      part { name: "elm.swallow.clipboard";
         type: SWALLOW;
         description { state: "default" 0.0;
            fixed: 0 1;
            align: 0.0 1.0;
            rel1.relative: 0.0 0.0;
            rel1.to_y: "elm.swallow.virtualkeypad";
            rel2.relative: 1.0 0.0;
            rel2.to_y: "elm.swallow.virtualkeypad";
         }
      }
      part { name: "elm.swallow.virtualkeypad";
         type: SWALLOW;
         description { state: "default" 0.0;
            fixed: 0 1;
            align: 0.0 1.0;
            rel1.relative: 0.0 0.0;
            rel1.to_y: "elm.swallow.softkey";
            rel2.relative: 1.0 0.0;
            rel2.to_y: "elm.swallow.softkey";
         }
      }
      part { name: "elm.swallow.softkey";
         type: SWALLOW;
         description { state: "default" 0.0;
            fixed: 0 1;
            align: 0.0 1.0;
            rel1.relative: 0.0 1.0;
         }
      }
   }
}


위의 소스에 SWALLOW 타입을 사용할 때 주의해야하는 점이 있습니다.

우선, rel1 / rel2에서 영역을 제대로 잡아주지 않고 있는 것을 기억하세요.

위의 rel1 / rel2는 '면'으로 영역을 확정하지 않고 '점'이나 '선'이 되도록 설정하고 있습니다.

'점'이나 '선'은 크기가 없지요.


그렇다면 크기는 어디서 설정해주고 있는 것일까요?

위의 edc 파일에서는 min이 전혀 보이지 않으므로 c 파일에서 min을 설정해주었다고 유추할 수 있습니다.

C에서 evas_object_size_hint_min_set() 함수로 영역의 최소값을 정하였겠지요.

C 파일단에서 크기를 확정하고 Swallow 영역에 대입한다는 사실에 주목해야 합니다.


fixed가 사용되고 있는 점도 주의하세요.

(fixed와 관련해서는 이 포스트를 참고해주세요.)

c에서 설정한 min값으로 부모 영역의 크기에 영향을 주지 않기 위해서 fixed를 사용했습니다.


어쨌든 SWALLOW 파트에 오브젝트를 넣을거면, SWALLOW 파트는 fixed 처리하는게 좋습니다.

fixed를 1로 처리 하여 SWALLOW 파트의 크기에 직접적으로 영향을 미치지 못하게 하지요.


물론, c 파일에서 설정한 min값이 SWALLOW 타입의 파트에도 적용이 되어야 한다면,

fixed를 1로 처리해서는 안됩니다.

fixed: 0 0;과 같은 방식으로 설정하면 됩니다.


SWALLOW 파트 중에 "elm.swallow.indicator" 파트에 들어가는 부분을 C에서 발췌하였습니다.

SWALLOW에 넣을 오브젝트를 생성(_create_xxxx_indicator())하고,

elm_layout_content_set()을 사용하여 레이아웃 내에 위치하는 SWALLOW 파트에 넣고 있네요.


   if (indmode == ELM_WIN_INDICATOR_SHOW)
     {
        old_indi = elm_layout_content_get(conformant, INDICATOR_PART);

        //create new indicator
        if (!old_indi)
          {
             if ((sd->rot == 90)||(sd->rot == 270))
               {
                  if (!sd->landscape_indicator)
                    sd->landscape_indicator = _create_landscape_indicator(conformant);

                  if (!sd->landscape_indicator) return;

                  evas_object_show(sd->landscape_indicator);
                  elm_layout_content_set(conformant, INDICATOR_PART, sd->landscape_indicator);
               }
             else
               {
                  if (!sd->portrait_indicator)
                    sd->portrait_indicator = _create_portrait_indicator(conformant);

                  if (!sd->portrait_indicator) return;

                  evas_object_show(sd->portrait_indicator);
                  elm_layout_content_set(conformant, INDICATOR_PART, sd->portrait_indicator);
               }

          }
        elm_object_signal_emit(conformant, "elm,state,indicator,show", "elm");


C에서는 오브젝트를 만들고,

elm_layout_content_set()을 이용하여 SWALLOW 영역에 넣어줍니다.

오브젝트를 만들고 사이즈를 관리하는 법에 대해서는 차후에 다시 설명하겠습니다.


SWALLOW 파트를 만들고,

거기에 넣을 오브젝트를 C파일에서 만들어 간단하게나마 연동해 보았습니다.


오늘은 여기까지 하겠습니다.

그럼 좋은 하루 보내세요~

끝_


part 블록을 처음 접했을때,

description 블록의 역할이 와닿지 않았습니다.

part 블록에 바로 넣어도 될만한 필드들을 굳이 description으로 감싸기 때문이죠.


하지만, program이 description 단위로 동작한다는 것을 본 이후에는,

description 파트도 치열한 고민의 산물이란 것을 깨달았습니다.



안녕하세요, Tizen 개발자 윤진입니다.


description 파트는 program에 의해 변할 수 있는 요소들을 넣어줍니다.

description에서 정의하는 모든 필드는 상태에 따라 변하는 필드라고 보시면 됩니다.

description의 필드값을 program으로 직접 변경하진 않고,

한 part 내에 위치한 다수의 description 사이에서 상태변환을 하게 되지요.


따라서 description의 이름은 name이라 부르지 않고 state라고 합니다.

part의 확정된 설정값이 아닌,

유동적으로 변모하는 상태를 나타내기 때문입니다.


우선 description에서 다루는 필드르 아래 코드에서 훑어보겠습니다.

description {
   state: "description_name" INDEX;
   inherit: "other_description_name" INDEX;
   visible: 1;
   align: 0.5 0.5;
   min: 0 0;
   max: -1 -1;
   fixed: 0 0;
   rel1 { ... }
   rel2 { ... }
   step: 0 0;
   aspect: 1 1;
}

위에 언급된 필드 중에 rel1, rel2는 다음 포스팅에서 살펴보도록 하겠습니다.

rel 블록 내에는 또 주요한 필드들이 있고 해당 필드에 대해서는 할 말이 좀 있어서요.

그 외의 필드는 하나씩 살펴보도록 하겠습니다.



- state: [이름] [인덱스];

state의 이름은 고유한 값이어야 합니다.

그리고 state 중 하나는 반드시 "default"여야만 합니다.

"default"는 파트가 load될 때 initial 상태이기 때문이지요.

그리고 인덱스는 0.0에서 1.0의 값으로 입력합니다.

인덱스가 있는 이유는 상태가 동일한 이름을 지닌다고 해도 인덱스로 구분지을 수 있기 때문이죠.

위에 언급한 "default"의 0.0 인덱스가 가장 기본이 되는 description입니다.



- inherit: [다른 description의 이름] [다른 description의 인덱스];

다른 description에서 설정한 필드를 그대로 가져올 수 있습니다.

inherit한 이후에 설정한 필드들은 inherit된 필드에 override됩니다.

inherit는 필드 한 두개만 다르고 나머지 필드는 모두 일치할 때 유용하게 사용됩니다.



- visible: [0 혹은 1];

화면에 보일지 감출지를 결정합니다.

0을 설정하면 해당 파트는 보여지지 않습니다.

1을 설정해야 비로소 화면에 보입니다.

화면에 보이지 않으면 이벤트도 그 파트에는 전달되지 않습니다.

원래부터 없는 셈치게 되죠.

default 값은 1입니다.

따로 적어주지 않으면 화면에 보이게 됩니다.



- align: [X축] [Y축];

align으로 X축 혹은 Y축 기준으로 정렬을 할 수 있습니다.

align을 지정하면 이 파트에 삽입되는 다른 요소의 정렬에 적용됩니다.

이 파트 자체가 다른 곳에 삽입될 때 적용되는 것이 아닙니다.

0.0 ~ 1.0의 값을 지정할 수 있습니다.

0.0은 왼편 정렬, 0.5는 가운데 정렬, 1.0은 오른편 정렬입니다.

double 형이니 만큼 0.25, 0.3 같은 값을 주어 애매한 정렬을 할 수도 있겠죠.

default 값은 X축, Y축 모두 가운데 정렬인 0.5 0.5입니다.



- min: [width] [height];

min 필드는 두 개의 값을 가지고 있습니다.

가로와 세로를 기준으로 파트의 min 사이즈를 지정할 수 있습니다.

min은 말 그대로 최소한의 크기입니다.

파트의 크기는 min에서 설정한 값으로 확정됩니다.

min 값은 relative로 설정한 값과 충돌을 일으킬 수 있기 때문에,

가급적이면 relative를 '점'으로 설정한 곳에 사용해야 합니다.

이에 대해선 relative를 설명할 때 다시 언급하도록 하겠습니다.



- max: [width] [height];

max 필드도 두 개의 값을 가지고 있습니다.

가로와 세로를 기준으로 파트의 max 사이즈를 지정할 수 있습니다.

max는 말 그대로 최대한의 크기입니다.

파트의 크기가 변하는 상황에서 참조하는 값입니다.

파트의 크기가 바로 max 값으로 지정되진 않지요.



- fixed: [가로, 0 or 1] [세로, 0 or 1];

fixed는 매우 중요한 필드입니다.

여기에 어떤 값을 주었느냐에 다라 다른 그룹에 지대한 영향을 미칠 수 있습니다.

인자는 2개인데 각각 가로와 세로를 의미합니다.

가로 혹은 세로를 기준으로 현재 파트의 min값의 영향력을 결정할 수 있습니다.


만약 fixed가 1이라면,

현재 파트의 min값은 현재 파트를 담고 있는 객체에 아무 영향을 주지 못합니다.

현재 파트를 담고 있는 객체의 크기가 현재 파트보다 작더라도,

현재 파트를 담을 수 있습니다.

'담다'는 용어보다는 붙여놓는다는 용어가 어울릴지도 모르겠다.


반대로 fixed가 0이라면,

현재 파트의 min값은 현재 파트를 담고 있는 객체에 영향을 줍니다.

현재 파트가 100 x 100이고 현재 파트를 담는 객체가 10 x 10인 경우,

부모 객체는 현재 파트의 min 값에 맞춰서 100 x 100이 됩니다.


따라서 fixed를 사용하려면 부모/자식 같의 크기를 잘 염두하여 사용해주세요.

특히 파트 사이즈가 변한다면 더욱 주의하셔야 합니다.

사이즈가 변하기 전에는 부모 파트의 크기가 제대로 잡혀있었는데,

자식의 사이즈가 변한 후에는 부모 파트도 같이 변해서 애초의 목적과 달라질 수 있습니다.



- step: [width] [height];

part를 resize하는 경우, step에 설정한 가로/세로 크기만큼의 단계로 확대/축소됩니다.

만약 step이 필요없다면 "0 0"으로 설정해두면 됩니다.

개인적으로 step을 사용해본 경험이 없어서 타이젠 소스를 뒤져보았습니다.

타이젠 플랫폼에서도 step을 사용한 예는 거의 없네요.


         part { name: "e.table.days"; type: TABLE;
            description { state: "default" 0.0;
               rel1.to_y: "e.table.daynames";
               rel1.relative: 0.0 1.0;
               rel1.offset: 2 2;
               rel2.offset: -3 -3;
               step: 7 5;
               table {
                  homogeneous: TABLE;
                  padding: 1 1;
                  align: 0.5 0.5;
                  min: 1 1;
               }
            }
         /* ... 생략 ... */


위처럼 TABLE을 만드는 경우 step을 사용하고 있습니다.

TABLE의 크기를 변경할 때 step에 명시된 크기 7, 5만큼 변경되겠지요.


위에서 7, 5인 이유는 캘린더를 위한 테이블이기에,

월화수목금토일을 담기 위한 7열에, 총 5주를 표기하기 위해서인 것으로 보입니다.

부모의 크기가 커지더라도 캘린더 테이블 파트는 7, 5 단위씩 커져기에,

모두가 균일한 크기를 유지할 수 있도록 합니다.



- aspect: [가로, 0 or 1] [세로, 0 or 1];

파트의 사이즈를 재조정하는 경우,

가로/세로의 사이즈가 일정 비율로 늘거나 줄어야 하는 경우가 있습니다.

이미지의 경우에는 특히 그러하지요.

그럴 때, aspect를 사용합니다.

가로/세로의 값으로 1로 주면, 이미지는 비율대로 크기가 조정됩니다.

가로/세로를 각각 1 혹은 0, 0 혹은 1로 설정하여 사용한 경우는 보지 못했습니다.

가로/세로 모두 1 아니면 0을 사용하지요.


- aspect_preference: [DIMENSION];

aspect_preference는 aspect와 함께 사용합니다.

값으로는 BOTH, VERTICAL, HORIZONTAL, NONE을 넣어줄 수 있습니다.

여기서 설정한 Dimension으로 비율이 결정됩니다.

보통의 이미지라면 BOTH로 해도 무방합니다.

세로를 기준으로 가로의 사이즈를 조절하고 싶다면 VERTICAL을,

가로를 기준으로 세로의 사이즈를 조절하고 싶다면 HORIZONTAL을,

그리고 따로 기준이 필요없다면 NONE으로 설정합니다.



- color: [Red] [Green] [Blue] [Alpha];

RGB와 Alpha 값을 설정할 수 있습니다.

RGB값으로 색상을 정하고 알파값으로 투명도를 정할 수 있습니다.

각 값은 0~255까지로 지정합니다.

숫자가 높아질수록 각각의 색상이 점차 뚜렷해집니다.

알파값의 경우 0이면 투명, 255에 가까울수록 불투명해집니다.



오늘은 여기까지 하겠습니다.

그럼 좋은 하루 보내세요~

끝_


+ Recent posts