XPLATFORM 101

[엑스플랫폼] 그림을 그려보자 - GraphicPath (상)

엑스플랫폼 기초
애플리케이션을 만들면서 그림을 그리는 일이 있을까 싶지만
일반 컴포넌트만으로 부족한 부분을 채워주기 위해 그래픽 처리를 지원해주는 컴포넌트가 있다는 것이
얼마나 고마운지 모릅니다. 그렇지 않다면 정말 힘들게 표현을 해야 하거든요.

엑스플랫폼에서는 GraphicPath 라는 컴포넌트를 제공합니다.
폼 위에 도형을 직접 그릴 수 있는 컴포넌트로 GraphicPathData 정보를 가지고 선이나 곡선을 그릴 수 있습니다.

data 속성에 대해서 먼저 알아보겠습니다.
해당 속성값에 들어가는 인자값은 type과 argument 순으로 들어갑니다.
type은 대소문자 구분없이 들어갈 수 있습니다.

M : moveTo 이동에 대한 속성입니다. GraphicPath 시작점(또는 마지막 위치)에서부터 이동하게 됩니다. 인자값은 X,Y 좌표가 들어가게 됩니다.
L : lineTo 선을 그릴 수 있는 속성입니다. moveTo와 마찬가지로 이동하게 됩니다.
H : horizontal lineTo 수평선을 그릴 수 있는 속성입니다. 수평선이기 때문에 Y좌표는 배제하고 X축만큼만 이동하게 됩니다.
V : vertical lineTo 수직선입니다. 수평선의 반대로 X좌표는 배제하고 Y축만큼만 이동하게 됩니다.
여기까지는 우리가 알고 있는 좌표축을 생각하면 되니깐 어렵지 않습니다.

코드에서는 직접 태그 속성으로 입력해도 되고
<GraphicPath id="GraphicPath00" text="GraphicPath00" position="absolute 0 0 794 584" data="M 100.0 100.0 A 100.0 50.0 180.0 1 1 300.0 300.0"/>
스크립트에서 id 값에 data 속성으로 넣어주어도 됩니다.

A : elliptical arc 타원을 그려줍니다. 
타원을 그리기 위해서는 좀 다른 시각에서 접근해야 합니다.
어린 시절(?) 사용하던 콤파스를 생각하면 되지 않을까 싶었는데
정원이 아니라면 콤파스로 그릴 수 없지 않나요. ㅠㅠ

그래서 타원을 그릴 수 있는 콤파스가 나오기도 하구요.


컴파스만으로 타원을 그리는 방법에 대한 퍼즐 문제도 있다고 합니다.
184.—HOW TO DRAW AN OVAL.Can you draw a perfect oval on a sheet of paper with one sweep of the compasses? It is one of the easiest things in the world when you know how.
알고 보면 쉽다는데 영 모르겠다는..ㅎㅎ
If you place your sheet of paper round the surface of a cylindrical bottle or canister, the oval can be drawn with one sweep of the compasses.
- Amusements in Mathematics (Henry Dudeney)

뭐 하여간. 타원 그리는게 생각보다 쉽지 않네요. ㅠㅠ
타원부터는 다음 시간에...

http://cafe.naver.com/xplatform101/30 
XPLATFORM 101

[엑스플랫폼] 콤보 컴포넌트

엑스플랫폼 기초
콤보는 여러 종류의 음식이 섞여 나오는 것을 의미한다고 합니다. 극장에 가서 팝콘이랑 콜라랑 같이 주문을 할때
콤보세트로 주문을 하게 되면 좀 더 가격이 저렴해지거나 합니다.
또는 게임을 할때 몇가지 명령을 조합해서 내리는 경우 새로운 공격을 할 수 있는
명령이 만들어지는데 이것도 콤보라고 표현합니다.


그냥 콤보라고만 하면 좀 혼란스러워 콤보박스라고 이야기합니다.
엑스플랫폼에서는 컴포넌트명이 Combo 입니다.
그리고 일반적으로 콤보박스와 드롭다운을 구별하여
텍스트 영역을 편집 가능하다면 콤보박스 그렇지 않다면 드롭다운이라고 구분하기도 합니다.
엑스플랫폼에서는 type 으로 이를 구분할 수 있게 지원합니다.

UX 스튜디오에서 Combo의 모습은 달력 컴포넌트의 기본 모습과 동일합니다.
내부적으로 들어가면 동일한 컴포넌트의 조합으로 이루어져 있기 때문이죠.
메뉴얼에 있는 이미지를 보면 좀 더 쉽게 이해가 되실겁니다.


왼쪽이 Combo 이고 오른쪽이 달력입니다.
달력 컴포넌트가 MaskEdit 이긴 하지만 포커스가 가기 전에는 티가 나지 않기 때문에
동일하게 보입니다.

위에서 type을 이야기했는데 엑스플랫폼에서는 3가지 옵션을 제공합니다.
dropdown, search, filter 옵션입니다.
dropdown의 경우는 일반적으로 많이 접할 수 있는 콤보박스입니다.
항목이 많지 않고 직관적으로 정렬이 되어 표시되는 경우에 적합합니다.
search는 이름 그대로 항목을 찾을때 유용합니다. 대신 정확한 이름을 알고 있어야 합니다.
사용자가 알고 있는 무언가를 찾을때 적합합니다.
filter는 search와 유사한것 같지만 조금 다릅니다.
예를 들어 다음과 같은 Dataset이 있다고 할때
일반적으로는 텍스트를 기준으로 정렬을 하겠지만 다른 항목 기준과 섞여 있어 곤란하다고 한다면
원하는 항목을 찾기가 쉽지 않을 겁니다.


위와 같은 데이터가 있는데 소녀시대만 값을 보고 싶다면 데이터가 별로 없을때는 상관없지만
수백건일 경우에는 난감해질 수 있습니다.
그럴때 filter 기능을 사용하면 쉽게 데이터를 찾을 수 있습니다.
요즘에는 순간검색 같은 것도 나오는지라..그렇게 새로운 것은 아니지만 ^^
업무 처리시에는 성능과 연계된 부분이기 때문에
잘 활용하면 생산성을 높이는데 도움이 됩니다.
XPLATFORM 101

[엑스플랫폼] 달력 컴포넌트 사용해보기

엑스플랫폼 기초
날짜를 입력하는 방식에는 여러가지가 있지만 가장 편한 방법은
직접 텍스트로 입력하는게 아닌가 싶습니다.
하지만 직접 입력하는 방식은 실제 가능한 날짜인지 검증하는데 어려움이 있습니다.
그래서 많은 개발 도구에서 다양한 기능을 가지는 달력 컴포넌트를 제공하고 있습니다.
개발 과정에서 처음에 단순한 달력을 원하다가 점점 기능이 추가되더니
스케쥴 관리 애플리케이션이 되어버릴 수도 있습니다.


UX 스튜디오는 기업용 애플리케이션 제작에 필요한 강력한 달력 컴포넌트를 제공하고 있습니다.
메뉴얼을 찾아보면 다음과 같이 설명되고 있습니다.
 
Calendar는 날짜와 시간을 입력받기위한 Component입니다.
날짜와 시간의 출력보다 입력 관련된 기능이 많습니다.
월단위로 보고 입력하는 방식과 편집영역에 직접입력하는 방식중에서 고를 수 있습니다.
 
위에서 이야기한것처럼 직접 텍스트로 입력할 수 있는 기능을 기본적으로 제공합니다.
물론 여기에 날짜값을 검증할 수 있는 기능을 제공하구요.

도구에서 아이콘은 아래와 같이 생겼습니다.


다른 컴포넌트와 마찬가지로 선택하고 마우스로 드래그해주면 됩니다.
처음 컴포넌트를 생성해놓으면 버튼같이 생긴녀석에 우측에 드롭다운 메뉴를 표시할 것 같은
아이콘만 보입니다.
(물론 테마에 따라 다를 수 있습니다).


이때 주의할 점은 화면에 선택한 날짜값이 보여질때 글꼴 크기에 따라 달리질 수 있습니다.
너무 작게 컴포넌트를 생성하면 글자가 가려질 수 있기 때문에
디자인 단계에서 해당 내용을 점검할 필요가 있습니다.
디자인 가이드가 있다면 지정된 크기를 선택하면 되고
그렇지 않다면 displaynulltext 에 임의의 값을 지정하면
그림과 같이 확인할 수 있습니다.
원래는 '날짜를 선택하세요' 그런 문구를 넣기 위한 의도이지만
활용하기 나름입니다.
displaynulltext 속성으로 지정된 값은 포커스가 오면 사라지고 편집할 수 있게 변경됩니다.

편집(날짜를 수정)할때에도 보여지는 값과 수정해야 되는 값을 구별해줄 수 있습니다.
예를 들어 dateformat 은 yyyy-MM-dd ddd 일 경우에 날짜값과 함께 요일까지 사용자가 지정할 필요는 없습니다.
날짜가 정해지면 요일은 자동으로 정해지기 때문이죠.
그래서 editformat 을 구별해서 지정할 수 있게 제공합니다.

UX 스튜디오에서 기본으로 제공하는 컴포넌트의 타입(type 속성)은 3가지입니다.
위와 같은 기본 타입과 달력 형태가 바로 노출되는 monthonly 그리고 spin이 있습니다.
최근에는 spin 보다는 드롭다운 형태를 선호하고 있는데 뭐 요구사항에 따라 달라지는 것이니깐요.


monthonly 에서도 2011.05 라는 텍스트 영역을 선택하면 각 년도와 월을 spin 형식으로 선택할 수 있게 제공합니다.
컴포넌트니깐 당연히 데이터와 바인딩을 지원합니다.

또 한가지 제공되는 기능중에 usetrailingday 라는 것이 있습니다.
trailingday를 표시할 것인지 선택하는 항목입니다.


위의 그림처럼 5월은 31일이 마지막 날인데 나머지 여백공간에 6월 날짜를 채울것인지 결정하는 것입니다.
기본값은 사용하지 않게 되어 있습니다. 그래서 필요하다면 해당 항목을 사용하는 것으로 변경해주어야 합니다.
색상이나 투명도를 지정해서 해당월 날짜와 구별되게 표시할 수 있구요.
trailing은 질질 끌리는, 길게 나부끼는과 같은 의미를 가진다고 합니다.

그 외에도 다른 기능이 있을텐데 나중에 다시 살펴보도록 하겠습니다.

http://cafe.naver.com/xplatform101/28 

티스토리툴바