달력 컴포넌트 사용해보기

날짜를 입력하는 방식에는 여러가지가 있지만 가장 편한 방법은

직접 텍스트로 입력하는게 아닌가 싶습니다.

하지만 직접 입력하는 방식은 실제 가능한 날짜인지 검증하는데 어려움이 있습니다.

그래서 많은 개발 도구에서 다양한 기능을 가지는 달력 컴포넌트를 제공하고 있습니다.

개발 과정에서 처음에 단순한 달력을 원하다가 점점 기능이 추가되더니

스케쥴 관리 애플리케이션이 되어버릴 수도 있습니다.

 
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