본문 바로가기

AX5UI8

AX5UI - toast를 사용한 시스템 메세지 출력하기 AX5UI-toast는 웹 애플리케이션 화면상에서 시스템 메세지를 보여주는 라이브러리입니다. 메세지를 출력하면 화면상의 지정된 장소에 메세지가 지정된 시간동안 보여진 다음에 자동으로 사라집니다. 예제 소스는 글 하단에 첨부하여 두었습니다. 사용하는 방법을 알아보겠습니다. 1. 필요한 라이브러리들- jQuery 1.x 이상이 필요합니다.- ax5core 라이브러리가 필요합니다.- ax5toast 라이브러리가 필요합니다.- ax5toast 스타일 시트가 필요합니다.- 샘플에 나오는 테마와 ICON을 사용하기 위해서는 Font Awesome 스타일 시트가 필요합니다. 2. toast 객체를 생성합니다.$(document.body).ready(function () { var toast = new ax5.ui.t.. 2018. 5. 15.
AX5UI - GRID 6 (페이징) 그리드에서 페이징을 사용하는 방법을 알아봅니다. 먼저 실행된 화면 입니다. 그리드 좌측 하단에 페이징 정보가 보입니다. 우측 하단에는 현재 페이지내의 데이터중 어느 부분이 보이고 있다는 것을 나타냅니다. 테스트용 코드는 화면에서 조회 버튼을 누르면 조회된 데이터를 그리드에 넣는다는것을 가정해서 작성해 보았습니다. 1. 필요한 스크립트들을 로드합니다. 2. 그리드 변수를 선언합니다. 그리드 객체를 나타내는 firstGrid 변수를 전역 변수로 선언합니다. 나중에 조회등의 작업에서 사용할 수 있어야 하기 때문입니다. 3. 그리드 설정에 페이징 정보를 추가합니다. page: { navigationItemCount: 9, height: 30, display: true, firstIcon: '||', onChan.. 2018. 4. 9.
AX5UI - GRID 5 (인라인 에디트) 그리드의 내용을 바로 수정할 수 있는 inline edit 를 테스트 해 보았습니다. 인라인 에디터는 다음과 같은 7가지 타입이 있습니다. - text 타입 : 한줄 입력 필드입니다. - money 타입 : money포맷 숫자 입니다. - number 타입 : 숫자만 입력됩니다. - date 타입 : 캘린더로 날짜를 입력할 수 있습니다. 날짜 포맷은 yyyy-mm-dd 입니다. - select 타입 : 셀렉트 박스로 아이템을 선택할 수 있습니다. - checkbox 타입 : 체크박스로 선택 할 수 있습니다. 값은 문자열 "true" 또는 "false" 입니다. - textarea 타입 : 여러행의 글을 입력할 수 있습니다. 사용방법을 보도록 하겠습니다. 1. 필요한 스트일시트와 js 파일을 불러 들입니다.. 2018. 4. 9.
AX5UI - GRID 4 (총계와 소계) 이번에는 그리드에서 총계와 소계를 표현하는 방법을 알아 봅니다. 1. 그리드에 계산열 추가 - 그리드내의 다른 컬럼 값으로 계산된 값을 가지는 컬럼을 추가 합니다. - "unitPrice"는 그리드의 데이터에는 없는 값이지만, 금액을 주유량으로 나눈값으로 리터당 단가를 표시합니다. columns: [ { key: "unitPrice", label: "단가", formatter: function() { return ax5.util.number(this.item.price / this.item.amount, {"money": true}); }, align:"center" } ] 2. 그리드내의 소계 - 소계는 지정된 기준 컬럼에 대해 오름차순으로 정렬할 후 동일한 값끼리 그룹핑하여 소계를 보여줍니다.(처음 .. 2018. 4. 4.
AX5UI - GRID 3 (Row 와 Column 다루기) 이번에는 AX5UI 그리드에서 행과 열을 추가, 수정, 삭제 하는 방법을 알아 봅니다. "AX5UI - GRID 1 (기본 사용법)" 에서 사용된 예제에 기능을 추가해서 테스트 했습니다. 다음 내용들이 테스트 소스에 수정 및 추가된 내용들 입니다. 행을 추가하는 addRow 메소드 실행시 오류가 #31 번 패치로 수정되었는데, ax5ui-kernel에는 아직 반영되지 않은것 같습니다. ax5grid.min.js 를 직접 사용합니다. 이때는 ax5core.min.js도 함께 포함해야 합니다. 버튼을 추가합니다. 행 추가 행 삭제 행 업데이트 열 추가 열 삭제 열 수정 이벤트 핸들러를 추가합니다. 실행화면입니다. 1. 행 추가 행의 추가는 그리드의 addRow 메소드를 사용합니다. ax5grid.addRow.. 2018. 4. 4.
AX5UI - GRID 2 (설정 상세) 그리드 설정에 대한 상세한 내용을 알아 보겠습니다. 1. 헤더 그룹 그리드의 colums 설정값으로 헤더 그룹을 만들 수 있습니다. 아래 예는 기본 정보 그룹에 내에 주행거리, 금액을 가지는 예입니다. - 헤더와 데이터행 모두 기본 정보를 가지게 되므로 멀티 라인이 됩니다. columns: [ {key: "date", label: "날짜", formatter: "date", align: "center"}, {key: "type", label: "구분", align: "left"}, {key: "repair", label: "정비내역", align: "center"}, {key: "amount", label: "주유량", align: "center"}, { key: "basic", label: "기본정보".. 2018. 4. 4.
AX5UI - GRID 1 (기본 사용법) 업무용 웹 프로그램에서 데이터를 표현하는데 테이블 형식을 많이 사용합니다. 초기 웹 프로그래밍에서는 지금도 많이 사용되는 게시판 프로그래밍처럼 데이터는 태그를 사용해서 보여주고, 내용의 입력 또는 수정 작업을 위해서는 다른 페이지로 이동하여 작업을 하는 형태를 사용했습니다. 이러한 형태는 화면전환이 계속 발생하게 됩니다. 다음으로 사용하던 형태는 테이블의 각 셀에 입력 필드(inut tag)를 사용해서 데이터를 보여주고, 입력/수정할 수도 있게 하고, 실제 데이터를 서버로 전송해서 처리하는 작업은 JavaScript를 이용해서 숨겨진 iframe을 통해 처리하는 방식을 사용했습니다. 화면 전환 없이 한 화면에서 모두 처리할 수 있었습니다. 업무용 C/S 프로그램들이 웹프로그램으로 점점 더 많이 전환되기 .. 2018. 4. 3.
AX5UI - 소개(JavaScript UI Component) 웹으로 업무용 프로그램을 개발 하면서 사용자 인터페이스로 사용되는 컴포넌트들 중 가장 복잡한 것은 GRID 인것 같습니다. 그래서 기능도 좋고 사용하기 편리한 제품이 있는지 종종 찾아보게 됩니다. ActiveX, Flash, JavaScript 등으로 만들어진 많은 제품 들이 있습니다만, 요즘은 웹표준과 크로스 브라우저를 원하는 경우가 많아서 ActiveX 나 플래시 제품보다는 HTML5를 지원하는 JavaScript 제품에 대한 선호가 높아지고 있습니다. 이러한 웹용 UI 컴포넌트들은 아주 고가이거나, 오픈소스이면 GPL 로 배포되므로 상업용으로 사용할 수 없는 경우가 대부분입니다. 그러던 중, MIT 라이센스 이면서 국내 개발자들에 의해 개발되고 있는 JavaScript UI 컴포넌트인 AX5UI 를.. 2018. 4. 3.
반응형

티스토리툴바