기능, 크기, 위치, 디자인 등등 Component의 많은 부분을 다룰 수 있고,
nexacro로 화면을 만들고 개발을 하는데 있어 상당 시간의 작업이 소요되는 부분이기도 합니다.
(물론 Script를 제외하고요~ ^^)
Component의 종류 20여가지가 넘고, 각각의 Component 별로 다른 property 도 있기 때문에
하나의 포스트에서 모든 내용을 다루는 것은 양이 너무 많고,
많은 양을 한번에 다루면 정작 필요한 내용을 찾아보는 것도 어려울 수 있어서 Component 별로 특징적인 부분만 다루고,
실무 개발시 필요한 세부적인 내용은 각 Component를 설명할 때 다루도록 하겠습니다.
이번 포스트는 Properties View의 레이아웃과 필자가 공통적인 항목이라고 판단되는 내용에 대해서만 다루도록 하겠습니다.
nexacro View에 대한 부분은 "nexacro studio 화면 구성" 편에서 다루었으니 궁금하신 분은 여기로 들어가셔서 살펴보시면 됩니다.
Properties View는 현재 열린 파일에 따라 보여지는 내용이 바뀌도록 되어있는데
가장 내용이 많이 사용이 되는 Component에서 나타나는 Properties 를 기준으로 살펴보죠~
Properties View는 아래 그림에서와 같이 크게 3개 영역으로 나뉘어 있습니다.
1. Properties 종류 구분 2. 종류별 Properties 3. Properties/Style 탭
이 중에서 1번, 2번 영역에 대해서 자세히 살펴보도록 하겠습니다.
1번 영역을 선택하는 것에 따라서 2번 영역이 달라집니다.
일종의 Tab 이라고 보면 되고, 마우스를 올리면 각 버튼별 명칭과 간단한 설명을 볼수 있는 Tooltip이 나타납니다.
앞쪽 3개 버튼은 Component의 Properties에 대한 버튼입니다.
2개는 Properties를 Category 형태로 볼지 Alphabet 형태로 볼지를 선택하는 버튼이고,
나머지 1개는 Properties를 선택하는 버튼입니다.
그 오른쪽의 나머지 버튼들은
Component의 이벤트 설정 Component의 Binding 설정 Component의 초기값 설정
을 적용 또는 수정하는 영역으로 하는 Properties 를 전환하는 버튼입니다.
실제 개발시 주로 사용하게 되는 부분은 Property, Event, Bindable 입니다.
첫번째로 설명할 것은 Property 입니다.
Property 부분은 Component의 크기, 위치, 명칭, 디자인 등의 많은 부분을 다룰 수 있습니다.
디자인 부분에서 수정을 해야할 경우가 없을 정도로 잘 구성이 되어있다면, 사용빈도는 줄어들기도 하겠지만 그렇지 않다면 디자인 부분까지 작업을 해야하므로 사용빈도가 높은 편입니다.
Property의 카테고리를 보면
Component를 구분하는 id와 정의된 css class를 적용하는 Information
Enable/Diable, Visible/Unvisible, Toolip를 컨트롤하는 Action
위치, 크기를 지정하는 Position
Component에 대해 눈으로 보이지 않는 Style에 해당하는 부분을 다루는 Appearance
Component의 background, font, color 등의 디자인 영역의 Style
웹접근성과 연관된 내용을 컨트롤하는 Accessibility
이렇게 6가지로 구성되어 있습니다.
Information
Information 카테고리에 포함되는 부분은 3가지 뿐입니다.
그 중에서 주로 사용되는 부분은 id와 cssclass 부분입니다.
id는 필수적인 부분이라 작성을 안할 수 없는 부분이지만 Toolbar에서 Component를 끌어다 놓아 생성을 하거나 다른 화면에서 복사를 하거나 자동으로 부여되는 부분이라 작업을 잘 안하는 부분이긴 하지만 잘 부여해두면 어떤 Component인지 역할이 무엇인지를 직관적으로 구분할 수 있기도 하므로 중요한 부분 하나입니다.
cssclass는 Component별로 만들어진 css에서 적용할 class를 작성하는 부분입니다.
css 내에 기본 Component로 지정이 된 디자인을 적용한다면 기재하지 않아도 무방하지만 특정 디자인을 적용해야 한다면 필수로 작성해야 하는 부분입니다.
Style 카테고리에서 직접 적용을 할 수 없는 디자인 부분들이 있기 때문에 별도의 디자인을 적용하려면 css 에 작성하고 cssclass에 적용할 class를 적어주어야 합니다.
Action
Action 카테고리에 많은 property 들이 있습니다만 몇 가지만 주로 사용합니다.
enable은 Component를 활성화/비활성화 시킬 때 사용합니다.
비활성화되었을 때에는 마우스 클릭이나 키보드 타이핑이 되지 않으며, Tab key로 이동할 때에도 스킵이 됩니다.
text는 Button, Static, Div 등과 같이 Action이나 Display 영역에 관여하는 Component가 화면에 보일 때 명칭의 용도로 사용되고 Edit, MaskEdit, Combo, TextArea 등과 같이 편집기에 해당하는 경우에는 Component의 값을 표시하는 용도로 사용됩니다.
visible은 Component를 화면에서 보이거나 안보이게 할 때 사용합니다.
x-platform 초창기에는 visible만 처리할 경우 화면에서는 보이지 않지만 Tab key로 이동시 선택이 되는 문제가 있었으나 nexacro에서는 Tab key로 이동시에도 스킵처리가 됩니다.
다만, 화면을 읽어주는 Screen reading 프로그램에서는 읽힐 수 있으므로 enable과 같이 사용하는 것이 좋습니다.
그 외에 taborder나 tooltiptext/tooltiptype 도 가끔 사용하기는 합니다.
하지만 taborder의 경우 Properties 창이 아닌 화면에서 지정하는 방법이 편하기도 하고 직관적입니다.
그리고 tooltiptext/tooltiptype은 화면에서 보이는 영역이 좁을 경우에 text에 표시되는 내용이나 설명을 풍선도움말로 보여주기 위한 용도로 사용되는데 x-platform까지는 Component를 고정크기로만 사용할 수 있어 빈도수가 좀 있는 편이었으나 nexacro에서는 Component의 크기를 동적으로 적용할 수 있어 빈도수가 낮아졌습니다.
Tip. default 상태로 두면 마우스가 Component 위로 이동했을 때 해당 Component의 tooltip이 나오지 않으므로 hover나 hover,mouseleave로 선택해두어야 합니다.
tooltiptext를 적용할 때에는 tooltiptype을 반드시 수정해 주어야 합니다.
Position
Position은 Component의 크기나 위치를 지정할 때 사용됩니다.
nexacro 이전 platform tool(Mi Platform, X-Platform)에서는 Component가 시작되는 x축(top), y축(left)과 넓이(width), 높이(height) 만 지정해서 화면의 좌측을 기준으로 크기가 고정되는 방식이었지만 nexacro에서는 right, bottom이 추가되어서 넓이와 높이가 화면의 크기에 따라서 가변적으로 변할 수 있게 되었습니다.
property의 값을 입력하는 조합에 따라서 좌측, 우측, 상단, 하단을 기준으로 Component의 크기가 가변적으로 변하는 방식을 여러가지 형태로 만들 수 있습니다.
Style
Style은 Component의 css 영역에서 지정하는 디자인 속성 중 전체 또는 일부분을 화면에서 수정할 수 있는 property를 제공하고 있습니다.
디자인 영역에 대한 부분이므로 되도록이면 css에서 작성된 cssclass를 사용하는 것이 속도면에서 유리합니다.
Comments