AX5UI - 소개(JavaScript UI Component)

웹으로 업무용 프로그램을 개발 하면서 사용자 인터페이스로 사용되는 컴포넌트들 중 가장 복잡한 것은 GRID 인것 같습니다. 그래서 기능도 좋고 사용하기 편리한 제품이 있는지 종종 찾아보게 됩니다.

 

ActiveX, Flash, JavaScript 등으로 만들어진 많은 제품 들이 있습니다만, 요즘은 웹표준과 크로스 브라우저를 원하는 경우가 많아서 ActiveX 나 플래시 제품보다는 HTML5를 지원하는 JavaScript 제품에 대한 선호가 높아지고 있습니다.

 

이러한 웹용 UI 컴포넌트들은 아주 고가이거나, 오픈소스이면 GPL 로 배포되므로 상업용으로 사용할 수 없는 경우가 대부분입니다. 그러던 중, MIT 라이센스 이면서 국내 개발자들에 의해 개발되고 있는 JavaScript UI 컴포넌트인 AX5UI 를 발견하게 되었습니다. 데모를 보니 충분히 사용할 수 있을 것 같아서 자세히 테스트 해보기로 하였습니다.

 

1. 구할 수 있는 곳

 

사이트는 http://axisj.com 입니다. 여러가지 오픈소스 프로젝트를 진행중인것 같습니다. 이중에 AX5UI가 HTML5 UI 컴포넌트입니다. 프로그램을 github 에서 다운 받아서 사용할 수도 있고 CDN 도 제공 되고 있습니다.

 

 

 

2. AX5UI 구성

 

다음과 같은 다양한 UI 컴포넌트들이 제공되고 있습니다. 각각의 컴포넌트는 필요한 것들만 따로 받아서 사용할 수도 있고, 전체를 포함하는 파일도 있습니다.

 

- ax5core : AX5UI 에서 사용되는 공통 유틸리티 함수들을 모아둔 것 입니다.

- ax5ui-kernel : 모든 컴포넌트를 다 모아둔 것으로 보입니다.

- ax5ui-menu : 컨텍스트 메뉴를 만듭니다.(마우스 오른쪽 키를 클릭하여 팝업 메뉴를 띄웁니다.)

- ax5ui-grid : 테이블 형식으로 데이터를 표현할 수 있는 컴포넌트 입니다.

- ax5ui-docker : 화면을 분할하고, 분할된 영역의 크기를 조절할 수 있으면, 각 영역들을 이동할 수도 있는 컴포넌트 입니다.

- ax5ui-mask : 레이어로 화면을 마스킹 할 수 있는 컴포넌트입니다. 주로 특정 작업 처리중 화면에 Action 을 할 수 없도록 막는 용도로 사용됩니다.

- ax5ui-autocomplete : 입력필드에 입력값 제안 기능을 줄 수 있 컴포넌트 입니다.

- ax5ui-binder : 폼의 각 필드들과 binder 객체를 맵핑하여 binder 객체의 값을 변경하는것으로 폼 엘리먼트의 값을 변경하거나, 폼 엘리먼트 값을 쉽게 가져올 수 있게 해 줍니다.

- ax5ui-layout : 보통 웹 화은 상단 메뉴 영역, 좌측 메뉴영역, 가운데 컨텐츠 영역 등으로 레이아웃을 만들어 사용합니다. 이러한 레이아웃을 쉽게 만들 수 있게 해줍니다.

- ax5ui-combobox : 콤보박스 컴포넌트 입니다.

- ax5ui-media-viewer : 동영상 갤러리 형태의 컴포넌트인 것으로 보입니다.

- ax5ui-select : 콤보박스내에 여러 항목을 선택할 수 있는 컴포넌트 입니다.

- ax5ui-formatter : 날짜, 숫자 등의 표시형식을 지원하는 컴포넌트 입니다.

- ax5ui-picker : 숫자 키패드, 캘린더 등의 입력 방식을 제공하는 입력 컴포넌트 입니다.

- ax5ui-calendar : 달력 컴포넌트 입니다.

- ax5ui-modal : 모달 윈도우를 만들어주는 컴포넌트 입니다.

- ax5ui-toast : 임시 메시지 레이어를 띄어 줍니다.

- ax5ui-dialog : 레이어로된 alert, confirm, prompt 윈도우를 띄울 수 있습니다.

- ax5ui-uploader : 드래그 앤 드랍으로 파일을 선택하여 업로드 할 수 있는 기능을 제공합니다.

 

앞으로 각 컴포넌트들에 대하 하나씩 알아보도록 하겠습니다.