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에 가까울수록 불투명해집니다.



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

그럼 좋은 하루 보내세요~

끝_


edc에서 group은 비교적 군더더기 없이 만들어져 있습니다.

group을 사용할 때, '충돌'이나 '이해할 수 없는 동작'을 고민할 필요가 없습니다.


group과 얽힌 재미난 에러를 하나쯤 언급하기 위해 기억을 더듬고 있지만,

도통 떠오르지 않네요.

비교적 간단한 역할을 담당하고 있으니 실구현에도 어려움은 없는 녀석이었나봅니다.

여러분도 그럴 것이라 믿어의심치 않습니다. :)



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


edc를 작성할 때 group은 하나의 완결된 구성이 됩니다.

c파일에서 elm_layout_add(), elm_layout_file_set() 콤보로 가져다 쓰는 단위가 group입니다.

하나의 collections에 수많은 group이 있다면,

c에서 필요한 group만큼 elm_layout_add()를 불러서 사용하면 됩니다.


그렇다면 완결된 구성을 위해서는 그 안에 어떤 요소를 담고 있어야 할까요?

그룹이 가진 많은 요소 중에 가장 중요한 요소는 parts와 programs 두가지입니다.

parts는 화면을 구성하는 part의 상위 블록이고,

programs는 part에 움직임을 부여할 수 있는 program의 상위 블록이지요.


collections {
   group {
      parts {
         part{}
         part{}
         part{}
         part{}
      }
      programs {
         program{}
         program{}
         program{}
         program{}
      }
   }


지난
collections 포스팅에서도 언급한 블록도에서 programs를 추가해봤습니다.

위의 블록도처럼 group에 parts와 programs만 있으면 화면에 무언가 그려낼 수 있습니다.

parts와 programs 블록은 각각 며칠씩 공을 들여 설명해보도록 하겠습니다.


group에는 parts와 programs 외에 다른 요소들도 있습니다.

name, inherit, min, max.

위의 요소들은 parts와 programs에 비하면 아주 간단하게 설명할 수 있습니다.


- name: [group name];

   그룹의 이름을 지정합니다.

   위에서 잠깐 언급한 elm_layout_file_set()에서 세번째 인자가 그룹 name입니다.

   c파일에서는 group이 있는 파일명과 여기서 지정한 그룹명으로 그룹에 접근할 수 있습니다.

   만약 group 이름이 동일하다면 새로운 group이 이전 group을 완전히 override해버립니다.

   edc에서 group override를 의미있게 사용하는 것을 보질 못해서,

   이 부분은 컴파일을 위한 편의가 아닐까 추정하고 있습니다.

   어쨌든, override되지 않게 그리고 문맥에 맞게 사용하려면 group명을 잘 지어주세요.

   언제나 모든 것은 적절한 네이밍에서 시작하지요.


- min: [width] [height];

   min의 의미는 "최소한 이 사이즈를 확보해주세요"입니다.

   group이 어디에 포함되어 들어가든 min 사이즈만큼은 확보가 됩니다.

   min에서 지정한 사이즈보다 group이 작아질 수는 없습니다.

   원칙적으로 그렇습니다.

   min에서는 그룹의 높이와 너비를 지정하겠지요.

   그룹의 높이/너비가 확정되어 있고 '절대로 변할 일이 없다'면,

   group 차원에서 정의해도 무방합니다.

   하지만, group이 상태에 따라 사이즈가 바뀐다면,

   여기서 min을 사용하면 안됩니다.

   min은 mandatory가 아니기에 상황에 따라 사용하면 됩니다.

   참고로 전 group에서 min을 사용하지 않습니다.

   min은 다른 곳에서 더 재미있는 형태로 사용할 수 있습니다.


- max: [width] [height];

   max는 min과는 반대의 개념입니다.

   "최대한 이 사이즈를 넘지 않도록 해주세요" 입니다.

   max의 중요성은 min에 비해 상당히 떨어지는데요,

   각각의 요소들이 사이즈를 잡을때 min을 기준으로 잡기 때문입니다.

   max는 느슨한 가이드라인이지요.

   그렇다고 사용하지 않는다는 것은 절대 아닙니다.

   차후에 min/max에 대해서는 계속 설명할 기회가 있을 겁니다.

   어쨌든 그룹이 max 값을 넘지 않게 합니다.

   min처럼 mandatory가 아니기 때문에 필요에 의해 사용하면 됩니다.


- alias: [additional group name];

   alias에서 그룹에 별칭을 지정할 수 있습니다.

   하나의 그룹이 다수의 이름을 가질 필요가 있을때 사용합니다.

   그룹을 하나 만들었는데 여러 군데에서 사용할 수 있고,

   각각에 고유한 네이밍을 하길 원할 때가 있습니다.

   그 때 alias는 의미있는 선택이 될 수 있습니다.


group의 모든 요소를 골고루 사용하는 define문을 icon.edc에서 찾았습니다.

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

Branch : tizen_2.3

File : data/themes/widgets/icon.edc


#define GROUP_ALIAS_ICON(Name, Alias, File, Min, Max)                   \
   group { name: "elm/icon/"##Name##"/default"; min: Min Min; max: Max Max; \
      images.image: File COMP; parts { part { name: "base";             \
            description { aspect: 1.0 1.0; aspect_preference: BOTH;     \
               image.normal: File; } } } }
/*** 생략 ***/
GROUP_ALIAS_ICON("home", "toolbar/home", "icon_home.png", 32, 0);
GROUP_ALIAS_ICON("close", "toolbar/close", "icon_close.png", 32, 0);
GROUP_ALIAS_ICON("apps", "toolbar/apps", "icon_apps.png", 32, 0);
GROUP_ALIAS_ICON("arrow_up", "toolbar/arrow_up", "icon_arrow_up.png", 32, 0);
GROUP_ALIAS_ICON("arrow_left", "toolbar/arrow_left", "icon_arrow_left.png", 32, 0);
GROUP_ALIAS_ICON("arrow_right", "toolbar/arrow_right", "icon_arrow_right.png", 32, 0);
GROUP_ALIAS_ICON("chat", "toolbar/chat", "icon_chat.png", 32, 0);
GROUP_ALIAS_ICON("clock", "toolbar/clock", "icon_clock.png", 32, 0);
GROUP_ALIAS_ICON("delete", "toolbar/delete", "icon_delete.png", 32, 0);
GROUP_ALIAS_ICON("edit", "toolbar/edit", "icon_edit.png", 32, 0);
GROUP_ALIAS_ICON("refresh", "toolbar/refresh", "icon_refresh.png", 32, 0);
GROUP_ALIAS_ICON("folder", "toolbar/folder", "icon_folder.png", 32, 0);
GROUP_ALIAS_ICON("file", "toolbar/file", "icon_file.png", 32, 0);
GROUP_ALIAS_ICON("no_photo", "photo/no_photo", "head.png", 32, 0);


위에서 난데없는 #define이 나와서 당황하셨을 지도 모르겠군요.

C언어에서처럼 #define을 유사하게 사용할 수 있습니다.

우리가 살펴봐야할 부분은 GROUP_ALIAS_ICON의 Name, Alias, Min, Max입니다.

실제로 #define이 사용되는 부분을 보면,

Name, Alias, Min값을 주로 사용하고 있군요.

Max는 마지막 인자로 '0'을 넣어주고 있네요.

최대 크기가 0이라는 의미는 아니고 Max를 사용하지 않겠다는 의미입니다.

이 예시에서는 그룹의 Name과 Alias를 지정하고,

최소/최대 사이즈를 지정하였습니다.


group에 대한 설명은 이것으로 간단하게 마치겠습니다.

다음 시간에는 part에 대해서 살펴보도록 하겠습니다.


그럼 좋은 하루 보내세요~

끝_



+ Recent posts