4. 과제관리시스템 개발 방법 - 작업 할당 I

과제 관리 시스템(Project Management System)에서

하나의 프로젝트를 생성하면

해당 프로젝트를 수행하는 세부 과정을 등록한다.

예로, 어떤 개발 프로젝트를 진행한다고 하면

세부 과정은 분석/설계, 구현, 테스트 등으로 구성될 것이다.

다시 각 과정은 더 세분화된 과정으로 나눌 수 잇다.

분석/설계는 시스템 분석, 업무 분석, 화면설계, DB설계 등이 될 것이다.

이러한 세부화된 과정을 작업(Task)이라고 하고

이 작업은 계층형의 트리 구조를 가지게 된다.

따라서 작업 할당에서는

이러한 계층 데이터를 표시하는데 유용한 treegrid를 이용한다.

본격적인 작업전에 필요 기술에 대해서 정리한다.

각 개별 작업을 관리(등록, 수정, 삭제)하는 방법으로

easyui에서 제공하는 treegrid를 활용할 것이다.

따라서, 이 treegrid를 사용하는 방법을 익히고

쉽게 개발하기 위한 사전 준비 작업을 진행한다.

다운로드 받은 easyui 라이브러리 파일에서

jquery-easyui-1.5.1\demo\treegrid 폴더에 있는

editable.html 파일을 웹 브라우저에서 실행한다.

전체 코드

실행 결과가 화면 설계서와 비슷한 것을 알 수 있다.

화면 설계서 작성시 고려한 것도 있고,

작업(task)을 할당하는 업무 자체가 비슷한 것도 있다.

easyui의 예제를 실행해보면

화면 설계서와 가장 유사한 것이 editable.html인데,

두 가지 보완이 필요하다.

1. 이 예제에는 작업을 추가하고, 삭제할 수 있는 기능이 없다.
2. 데이터 설정이 같은 스크립트(파일) 내에서 지정되어야 하는데 treegrid_data2.json 파일로 외부에 있다.
   

이 두가지 기능을 보완하는 작업을 먼저 진행한다.

먼저 추가/삭제 기능은 contextmenu.html 예제에 있다.

contextmenu.html예제에서

append()와 removeIt() 함수가 추가하고 삭제하는 함수이므로

복사해서 editable.html파일에 넣어준다.

var idIndex = 100;
function append(){
    idIndex++;
    var d1 = new Date();
    var d2 = new Date();
    d2.setMonth(d2.getMonth()+1);
    var node = $('#tg').treegrid('getSelected');
    $('#tg').treegrid('append',{
        parent: node.id,
        data: [{
            id: idIndex,
            name: 'New Task'+idIndex,
            persons: parseInt(Math.random()*10),
            begin: $.fn.datebox.defaults.formatter(d1),
            end: $.fn.datebox.defaults.formatter(d2),
            progress: parseInt(Math.random()*100)
        }]
    })
}
function removeIt(){
    var node = $('#tg').treegrid('getSelected');
    if (node){
        $('#tg').treegrid('remove', node.id);
    }
}

각 작업마다 식별을 위해 고유 번호가 필요한데

idIndex 변수가 이 역할을 한다.

따라서, idIndex, append(),removeIt()를

복사해서 editable.html파일에 넣어준다.

(수정된 editable.html 내용은 다음과 같다.)

그리고, 이 기능을 수행할 버튼(link)을 추가해 주고 [라인 110, 111]

Click 이벤트에서 이 함수를 호출하도록 한다 .

두 번째로 HTML table 태그(treegrid 배치 정보 제공)에서

data-options 속성에 지정된

외부 데이터 지정 정보(url: 'treegrid_data2.json')를 지운다.

대신 웹 페이지 로딩이 완료된 후에 [라인 12]

Treegrid를 실행하면서 데이터를 읽어오도록 한다 [라인 25].

treegrid_data2.json 파일에 있는 Json 데이터를 복사해서

editable.html파일에 넣어주는 데

다음 코드의 13 번째 라인과 같이 변수를(dataSet) 지정한다 [라인 13].

Treegrid를 실행시키면서 이 변수를 파라메타로 넘겨주면 된다 [라인 26].

이제 실행해서

추가, 삭제, 수정이 잘되는지 확인한다.

코드의 양이 많아서 어렵게 느껴질 수 있는데,

editable.html, contextmenu.html, treegrid_data2.json을

적당하게 잘 합쳐주는 작업을 진행한 것이다.

조금더 상세하게

Treegrid의 data-options에 대해서 정리한다.

먼저, 데이터 구조(필드, Json 키, dataSet)가

id, name, begin, end, progress, iconCls로 되어 있다.

각각 키 필드(id), 작업 이름(name), 시작일자(begin),

종료일자(end), 진행율(progress), 상태(state),

아이콘 CSS 클래스명(iconCls)이다 [라인 14~].

이 이름(Json 키)들이 데이터를 조작할 때 사용하는 이름이 된다.

Treegrid의 data-options은 두 가지로 사용된다.

Table 태그에서 사용되는 것은 [라인 114]

전체적인 옵션으로 용어(영어)를 세심하게 보면

기능을 쉽게 알 수 있어서 넘어가고

idField(id)와 treeField(name)에 대해서만 정리한다.

idField는 고유키 값을 가진 데이터 필드를 의미하고 [라인 121]

앞서 Json으로 구성된 키 필드(id)를 사용하는 것으로 지정하였다.

treeField는 트리처럼 계층형(들여쓰기)으로

보여줄 필드를 지정하는 것으로

작업 이름(name) 필드를 지정하였다 [라인 122].

실행 화면에서 작업 이름에 트리가 구성된 것을 볼 수 있다.

Table의 th 태그에서도 data-options을 사용한다 [라인 127].

Treegrid의 각 필드를 데이터(Json, dataset)의 필드와 매칭시켜주고

각 필드의 속성을 지정하는 것이다.

예로 첫 번째 th는 작업 이름(name) 필드(field)의 내용을 보여주고 [라인 127]

크기(width)는 180px,

값 입력(editor)은 텍스트 박스(text)를 이용해서 입력 받는다.

옵션의 필드(field)는 앞서 선언하고

treegrid 생성시 데이터 변수로 지정한

dataSet에서 사용된 필드 이름이다 [라인 14].

값 입력(editor) 방식은

일반적인 텍스트 박스(text),

날자 입력에 사용하는 달력(datebox),

숫자만 입력할 때 사용하는 텍스트 박스(numberbox)가 있다.

진행율과 같이 입력 받은 값을

다양한 형식으로 출력하기 위한 formatter 속성이 있다 [라인 131].

formatter 속성에 사용자 함수(formatProgress)를 지정해서

다양하게 형식을 지정할 수 있는데

예제에서는 사용자가 입력한 숫자(진행율)를

바 챠트로 그려서(div 생성) 보여주도록 작성했다.

Treegrid로 지정한 Table 태그에서 title 속성값을 지우면

실행 화면에서 Treegrid 타이틀에 있는

Editable TreeGrid를 제거할 수 있다 [라인 113].

앞서 보강할 두가지 외에도

편리한 사용을 위해 Treegrid 기능을 조금더 보강한다.

하나의 행을 선택하고,

수정 버튼을 누르는 것이 불편하다.

조금 더 편하게 사용하고

TreeGrid 사용법도 익힐 겸

수정하려는 행을 마우스로

두 번 클릭하면 수정되게 작성해 본다.

다음과 같이 코드를 추가하여

셀(TD)을 더블 클릭하면 (onDblClickCell)

현재 선택된 행이 수정되게 구성할 수 있다.

            $('#tg').treegrid({
                data: dataSet,
                onDblClickCell : function(field, row) {
                        edit();
                }                   
            });

Treegrid 생성시 옵션으로

마우스 이벤트 등을 지정해서 사용할 수 있다.

Treegrid 제공되는 옵션이나 이벤트 명은

일반적인 JS에서 제공되는 이름과 유사하지만

조금씩 차이가 있기 때문에 보다 자세한 정보를

다음 사이트를 참고 하거나 인터넷으로 검색해 보길 바란다.

https://www.jeasyui.com/documentation/treegrid.php
http://www.programkr.com/blog/MUTM3ADMwYT1.html

마지막 기능 보강으로

행(노드)을 추가하는 것을 처리한다.

현재 구현된 추가(append) 기능은

선택된 행의 하위만 자식 행을 추가한다.

즉, 선택된 행이 있어야 한다.

예제는 데이터가 주어진 상태이지만

다음과 같이 특정 프로젝트에서 작업을 처음 할당할 경우

데이터가 없기 때문에 선택된 행이 없다.

    var dataSet = {"total":0,"rows":[]}

따라서, 버그가 발생하게 된다.

            var parentid = null;
            var node = $('#tg').treegrid('getSelected');
            if (node) parentid=node.id;
            $('#tg').treegrid('append',{
                parent: parentid,
                data: [{
                    id: idIndex,
                    name: 'New Task'+idIndex,
                    persons: parseInt(Math.random()*10),
                    begin: $.fn.datebox.defaults.formatter(d1),
                    end: $.fn.datebox.defaults.formatter(d2),
                    progress: parseInt(Math.random()*100)
                }

이것은 Treegrid에 행을 추가할 때,

부모행(parent)을 지정해서 해결한다.

기존 코드를 보면 선택된 행(node)의 키 값(node.id)을

지정하게 되어 있다 [라인 84].

이것을 변수(parented) 처리해서

부모가 없으면(선택하지 않았으면) Null ,

있으면 부모 키 값(node.id)을 가지도록 수정한다.

부모가 Null 이면 최상위에 노드가 생성된다.

여기서는 구현 하지 않지만

트리를 구성할 경우에는 자식도 추가하지만

형제를 추가할 수도 있다.

현재는 형제를 추가할 경우

부모를 선택해서 자식을 추가해야 한다.

(현재는 최상위 부모의 형제를 추가하는 것이 어렵다.)

이 기능 구현은 공유한 과제관리시스템에 있으니

확인해보길 권하고 여기서는 넘어간다.

행 추가 방법은

앞서 Treegrid의 초기 데이터 설정에서 한 것처럼

키 필드(id), 작업 이름(name), 시작일자(begin),

종료일자(end), 진행율(progress)에 값을 지정하고

추가(append) 메소드를 지정해 주면 된다.

최종 전체 코드

이외에도 삭제시 자식 노드 처리,

진행율에 따른 바 차트의 색깔 처리 등의

구현해야 될 기능은 더 많이 있다 (화면설계서 참조).

기본적으로 필요한 기능은 공유한 과제관리시스템을 참고하길 바라고

여기서는 개발 방법만을 정리하기 때문에 넘어간다.

이렇게 HTML로 기본 기능을 구현하였다.

이 코드를 사용하려는 jsp 파일에 복사해서 붙여넣고,

Java와 잘 연동시켜서

데이터베이스에 저장하면 작업(Task)할당 기능이 구현된다.