페이지 트리
메타 데이터의 끝으로 건너뛰기
메타 데이터의 시작으로 이동




Network Control 



Start Release No : 7.0.400.20230210 / Update Release No : 7.0.400.20230713

프로젝트명 : (BCRM#D0328) Network 컨트롤 신규 추가

작성자 : 한재모          / 검수자 : 

기능 정보
  • API Open
  • UI Open
  • Read Only
  • Not Use
  • Hidden
  • Not Recommend

기능 설명

  1. 실행 경로 : [i-AUD Designer > UI Bot > Add-In 컨트롤 생성 > 우측 PropertyGrid 의 "Class" 속성을 "Network" 로 변경]
  2. 사용 방법
    1. i-AUD Designer > UI Bot > Add-In 컨트롤 생성 > 우측 PropertyGrid 의 "Class" 속성을 "Network" 로 변경 ( 기본 컨트롤 생성 )



    2. Node, Link 관련 DataSet 생성

      • Network 컨트롤을 구성하는 Node, Link 에 대한 DataSet 이 1개씩 필요
        1. Node 관련 DataSet
          • 해당 DataSet 은 아래와 같은 컬럼 구조를 가져야 한다.
          • 필수 항목: KEY, VALUE
            1. 컬럼의 이름은 동일하지 않아도 가능하다.
            2. 옵션을 통해, 특정 컬럼을 KEY, VALUE 등에 적용하도록 하는 기능을 지원하고 있다. ( ※ 명시하지 않으면, KEY, VALUE 라는 이름의 컬럼을 찾음 )



        2. Link 관련 DataSet
          • 해당 DataSet 은 아래와 같은 컬럼 구조를 가져야 한다.
          • 필수 항목: FROM, TO, VALUE
            1. 컬럼의 이름은 동일하지 않아도 가능하다.
            2. 옵션을 통해, 특정 컬럼을 FROM, TO 등에 적용하도록 하는 기능을 지원하고 있다. ( ※ 명시하지 않으면, FROM, TO 라는 이름의 컬럼을 찾음 )



    3. DataSet 연결 및 컨트롤 실행

      1. Script 에서 Network Class 불러오기
        1. OnLoadComplete 이벤트에서 아래와 같이 Add-In 컨트롤의 API 를 통해 Network Class를 불러오기

          Example code
          /**************************************
           * 문서가 로드되고 AutoRefresh가 완료되는 시점에 발생합니다.
           * * arguments :  
           *		 bool	Success (Readonly:False) : 성공여부 
           *		 string	Message (Readonly:False) : 에러 메시지 
          **************************************/
           var OnLoadComplete  = function(sender, args){
          	var AddIn = Matrix.getObject("AddIn");
          	var NetworkClass = AddIn.getScriptClass("Network");
          }
        2. Network 컨트롤에서 사용할 Node, Link DataSet 연결 후, 컨트롤의 Update 함수 호출

          Example code
          Network.NodeDataSet = [Node DataSet Object];
          Network.LinkDataSet = [Link DataSet Object];
          
          Network.Update();			// Network 컨트롤 Update





    4. 옵션 설정 방법
      1. Network 에 대한 옵션은 객체 형태로 Node, Link 에 대한 각각의 옵션 설정이 가능하다.
      2. 설정한 옵션은 Update 함수 호출 시, 인자 값으로 전달하면 된다.

        Example code
        var opt = {
        	node: {},
        	link: {}
        }


대분류

기능 유형

세부 기능 명내용
옵 션
Node














keyField
  • Node 에서 [KEY] 필드로 사용할 데이터셋의 컬럼을 지정
  • String ( Default : KEY )
captionField
  • Node 에서 [CAPTION] 필드로 사용할 데이터셋의 컬럼을 지정
  • String ( Default : CAPTION )
valueField
  • Node 에서 [VALUE] 필드로 사용할 데이터셋의 컬럼을 지정
  • String ( Default : VALUE )
colorField
  • Node 에서 [COLOR] 필드로 사용할 데이터셋의 컬럼을 지정
  • String ( Default : COLOR )
highlightedColor
  • Node 가 Highlighted 된 상태의 Node 색상 값을 지정
  • 기본적으로는 Node 색상이 표현됨.
  • String ( Default : '' )
selectionuse
  • Selection 에 대한 사용 여부를 설정
  • Boolean ( Default : true )

backgroundColor
  • Selection 의 배경 색상을 지정
  • String ( Default : #1E90FF )

borderColor
  • Selection 의 배경 색상을 지정
  • String ( Default : #FFFFFF )

borderWidth
  • Selection 의 테두리 두께를 지정
  • Number ( Default : 3 )
captionuse
  • Node 의 Caption 사용 여부를 설정
  • Boolean ( Default : false )

font
  • Node 의 Caption 에 대한 글자 스타일을 지정
    • bold : 글꼴 Bold 사용 여부 ( Default : false )
    • size: 글자 크기 설정 ( Default : 8pt )
    • family : 글꼴 설정 ( Default : sans-serif )
    • color : 글자 색상 설정 ( Default : black )

  • Object
borderuse
  • Node 의 테두리 사용 여부를 설정
  • Boolean ( Default : true )

width
  • 테두리 두께를 지정
  • Number ( Default : 1 )

color
  • 테두리 색상을 지정
  • String ( Default : black )
tooltipuse
  • Node 의 Tooltip 사용 여부를 설정
  • Boolean ( Default : false )

formatter
  • 사용자 지정 Tooltip 설정
  • Function ( Default : undefined )
  • DOM 구조의 문자열을 return 하면, 해당 DOM 을 Tooltip 으로 표시

    Example code
    /*
    * args
    * 	: row (DataRow)
    */
    formatter: function(args) {
    	return "<div></div>"
    }
  • arguments 정보
    1. row [DataRow] : MouseOver Node 에 대한 DataRow 정보
eventclick
  • Node Click 에 대한 이벤트 기능을 정의
  • Function ( Default : undefined )
  • 단일 및 다중 선택된 노드들에 대한 데이터 정보를 반환

    Example code
    click: function(s, args) {
    	(...)
    }
  • arguments 정보
    1. s [Network] : 해당 Network Component 객체
    2. args
      1. selectedNodes [Array] : 선택된 노드들에 대한 데이터 정보 배열
      2. dataSet [DataSet] : 전체 Node 데이터 셋 정보
        1. idx [Number] : Node 에 대한 Index
        2. row [DataRow]: Node 에 대한 데이터 정보
nodeSizeFix
  • Node 크기를 고정으로 사용할 지 여부를 설정
  • Boolean ( Default : false )
size
  • Node 크기를 설정
  • 해당 옵션은 [nodeSizeFix] 가 활성화 되어 있는 경우에만 적용되는 옵션
  • Number ( Default : 10 )
min
  • Node 크기의 최소 사이즈를 설정 ( ※ Value 기준의 크기를 지정 )
  • Number ( Default : 10 )
max
  • Node 크기의 최대 사이즈를 설정 ( ※ Value 기준의 크기를 지정 )
  • Number ( Default : 300 )
Link











fromField
  • Link 에서 [FROM] 필드로 사용할 데이터셋의 컬럼을 지정
toField
  • Link 에서 [TO] 필드로 사용할 데이터셋의 컬럼을 지정
valueField
  • Link 에서 [VALUE] 필드로 사용할 데이터셋의 컬럼을 지정
colorField
  • Link 에서 [COLOR] 필드로 사용할 데이터셋의 컬럼을 지정
linkColor
  • Link 의 기본 색상을 지정
  • String ( Default : #000000 )
  • Link 의 DataSet 상의 색상에 대한 컬럼이 있는 경우, 해당 컬럼 값에 색상 값으로 설정된다.

  • 우선순위
    1. DataSet Color > [linkColor] 속성 > Default Link Color
highlightedColor
  • Node 가 Highlighted 된 상태의 Link 색상 값을 지정
  • String ( Default : #FF0000 )
useArrow
  • Link 의 화살표 사용 여부를 설정
  • Boolean ( Default : true )
captionuse
  • Node 의 Caption 사용 여부를 설정
  • Boolean ( Default : false )

font
  • Link 의 Caption 에 대한 글자 스타일을 지정
    • bold : 글꼴 Bold 사용 여부 ( Default : false )
    • size: 글자 크기 설정 ( Default : 8pt )
    • family : 글꼴 설정 ( Default : sans-serif )
    • color : 글자 색상 설정 ( Default : black )

  • Object
useFixedWidth
  • Link 굵기를 고정으로 사용할 지 여부를 설정
  • Boolean ( Default : false )
size
  • Link 굵기를 설정
  • 해당 옵션은 [useFixedWidth] 가 활성화 되어 있는 경우에만 적용되는 옵션
  • Number ( Default : 1 )
min
  • Link 의 최소 굵기 사이즈를 설정 ( ※ 화면 상에 기준의 굵기를 지정 / [VALUE] 의 값을 기준으로 설정하면, 너무 커지는 현상이 발생 )
  • Number ( Default : 1 )
max
  • Link 의 최대 굵기 사이즈를 설정 ( ※ 화면 상에 기준의 굵기를 지정 / [VALUE] 의 값을 기준으로 설정하면, 너무 커지는 현상이 발생 )
  • Number ( Default : 30 )
DefaultscrollBaruse
  • Network Diagram 에 스크롤바 사용 여부를 설정
  • Boolean ( Default : true )
eventclick
  • Diagram 의 빈 영역에서 Click 이벤트에 대한 기능 정의
  • Function ( Default : undefined )

    Example code
    click: function(s) {
    	(...)
    }
  • arguments 정보
      1. s [Network] : 해당 Network Component 객체
verticalAlign
  • Diagram 의 수직 정렬 옵션
  • String ( Default : Center )
  • 유형 : Top, Center, Bottom
horizontalAlign
  • Diagram 의 수평 정렬 옵션
  • String ( Default : Center )
  • 유형 : Left, Center, Right
함 수

IncreaseZoom()
  • Network 의 Zoom 을 증가시키는 함수

DecreaseZoom()
  • Network 의 Zoom 을 감소시키는 함수

InitializeZoom()
  • Network 의 Zoom 을 초기 설정으로 다시 돌리는 함수

제약 사항

  • 만약, [FROM - TO] 에 대한 Link Record 가 여러 개이면, Node 간 Link 수 는 SQL 의 ROW 수 만큼 그려진다.
  • 해당 ROW 들에 대한 합계를 통한 하나의 Link 로 표현하고자 한다면, SQL 처리 과정이 필요

샘플 정보

  파일 변경됨
파일 Network Component(개선안_230719).mtsd 2023-07-19 by AUD팀
파일 Network Control.mtsd 2023-02-21 by AUD팀

변경 전/후 제품 버전

변경 전(제품 버전)변경 후(제품 버전)

변경 전 :

변경 후 :

참고 자료

 여기를 클릭하여 펼치기...

  파일 변경됨
파일 Network Component(개선안_230719).mtsd 2023-07-19 by AUD팀
파일 Network Component(개선안_230719).mtsz 2023-07-19 by AUD팀
파일 Network Control.mtsd 2023-02-21 by AUD팀
PNG 파일 네트워크 조회.png 2023-02-21 by AUD팀
PNG 파일 Link DataSet.png 2023-02-21 by AUD팀
PNG 파일 Node DataSet.png 2023-02-21 by AUD팀
PNG 파일 기본 네트워크.png 2023-02-21 by AUD팀
PNG 파일 Add-In.png 2023-02-21 by AUD팀

문서 수정 이력

버전 날짜 댓글
현재 버전 (v. 9) 2023-08-30 17:00 AUD팀
v. 8 2023-08-02 13:49 AUD팀
v. 7 2023-08-02 09:08 AUD팀
v. 6 2023-07-19 11:13 AUD팀
v. 5 2023-06-19 14:55 AUD팀
v. 4 2023-06-19 13:13 AUD팀
v. 3 2023-06-09 09:22 AUD팀
v. 2 2023-05-31 10:09 AUD팀
v. 1 2023-02-21 11:36 AUD팀

BCRM 정보

(BCRM#D0328) Network 컨트롤 신규 추가