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

Node 에 대한 Caption 을 표현

도움말

icon	false
title	기능 설명

실행 경로 : [i-AUD Designer > UI Bot > Add-In 컨트롤 생성 > 우측 PropertyGrid 의 "Class" 속성을 "Network" 로 변경]
사용 방법
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, COLOR
      1. 컬럼의 이름은 동일하지 않아도 가능하다.
        옵션을 통해, 특정 컬럼을 KEY, VALUE 등에 적용하도록 하는 기능을 지원하고 있다. ( ※ 명시하지 않으면, KEY, VALUE 라는 이름의 컬럼을 찾음 )
        
        Image Modified
    2. Link 관련 DataSet
      - 해당 DataSet 은 아래와 같은 컬럼 구조를 가져야 한다. ( 아래 이미지 참조 )
      - 필수 항목: FROM, TO, VALUE
      - FROM : 보내는 Node KEY
      1. 컬럼의 이름은 동일하지 않아도 가능하다.
        옵션을 통해, 특정 컬럼을 FROM, TO 등에 적용하도록 하는 기능을 지원하고 있다. ( ※ 명시하지 않으면, FROM, TO 라는 이름의 컬럼을 찾음 )
        
        Image Modified
3. DataSet 연결 및 컨트롤 실행
  1. Script 에서 Network Class 불러오기
    1. OnLoadComplete 이벤트에서 아래와 같이 Add-In 컨트롤의 API 를 통해 Network Class를 불러오기

( 변경 필요 )

코드 블럭

language	js
theme	FadeToGrey
firstline	1
title	Example code
linenumbers	true

/**************************************
 * 문서가 로드되고 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");
}

Network 컨트롤에서 사용할 Node, Link DataSet 연결 후, 컨트롤의 Update 함수 호출

코드 블럭

language	js
theme	FadeToGrey
firstline	1
title	Example code
linenumbers	true

Network.NodeDataSet = [Node DataSet Object];
Network.LinkDataSet = [Link DataSet Object];

Network.Update();			// Network 컨트롤 Update

Image Modified

옵션 설정 방법
1. Network 에 대한 옵션은 객체 형태로 Node, Link 에 대한 각각의 옵션 설정이 가능하다.
2. 설정한 옵션은 Update 함수 호출 시, 인자 값으로 전달하면 된다.
  코드 블럭
  language js
  theme FadeToGrey
  firstline 1
  title Example code
  linenumbers true
  var opt = { node: {}, link: {} }

대분류	기능 유형	세부 기능 명	내용

UseCaption

옵 션
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 : '' )
	selection	use	Selection 에 대한 사용 여부를 설정 Boolean ( Default : true )
		backgroundColor	Selection 의 배경 색상을 지정 String ( Default : #1E90FF )
		borderColor	Selection 의 배경 색상을 지정 String ( Default : #FFFFFF )
		borderWidth	Selection 의 테두리 두께를 지정 Number ( Default : 3 )
	caption	use	Node 의 Caption 사용 여부를 설정 Boolean ( Default : false )

UseNodeFontBold

font

Node

에 대한 Caption 의 Font Bold

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

false Node 의 Border 를 표현

true )

UseNodeBorder

width	테두리 두께를 지정 Number ( Default : 1 )
	color	테두리 색상을 지정 String ( Default : black )
tooltip	use	Node 의 Tooltip 사용 여부를 설정 Boolean ( Default : false

/ Color : #000000 )LinkColor

Link 색상 설정

LinkHighlightColor

Node 선택 시, 관련 Link 가 활성화 될 때 색상 설정
String ( Default : #FF0000 )
기본 색상으로 설정하려면, undefined 로 값을 설정 후, 컨트롤 Update 함수 실행

)

formatter

사용자 지정 Tooltip 설정
Function ( Default : undefined )
DOM 구조의 문자열을 return 하면, 해당 DOM 을 Tooltip 으로 표시
코드 블럭
language js
theme FadeToGrey
firstline 1
title Example code
linenumbers true
/* * args * : row (DataRow) */ formatter: function(args) { return "<div></div>" }
arguments 정보

1. row [DataRow] : MouseOver Node 에 대한 DataRow 정보

event

click

Node Click 에 대한 이벤트 기능을 정의
Function ( Default : undefined )
단일 및 다중 선택된 노드들에 대한 데이터 정보를 반환
코드 블럭
language js
theme FadeToGrey
firstline 1
title Example code
linenumbers true
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 )

기본 색상으로 설정하려면, undefined 로 값을 설정 후, 컨트롤 Update 함수 실행

Link 의 DataSet 상의 색상에 대한 컬럼이 있는 경우, 해당 컬럼 값에 색상 값으로 설정된다.
우선순위
1. DataSet Color > [linkColor] 속성 > Default Link Color

highlightedColor

Node 가 Highlighted 된 상태의 Link 색상 값을 지정
String ( Default : #FF0000 )

useArrow

Link 의 화살표 사용 여부를 설정
Boolean ( Default : true )

caption

use

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 )

Default

scrollBar

use

Network Diagram 에 스크롤바 사용 여부를 설정
Boolean ( Default : true )

event

click

Diagram 의 빈 영역에서 Click 이벤트에 대한 기능 정의
Function ( Default : undefined )
코드 블럭
language js
theme FadeToGrey
firstline 1
title Example code
linenumbers true
click: function(s) { (...) }
arguments 정보
1. 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 을 초기 설정으로 다시 돌리는 함수

참고사항

title	제약 사항

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

정보

title	샘플 정보

샘플 URL : http://rnd.bimatrix.co.kr:8080/aud7/portal/Content.jsp > 1. 샘플보고서 > 1.1. i-AUD > 기타 확장 컴포넌트 > Network Control
샘플 파일

첨부 파일

patterns	.jsp,.zip,.xml,.js,.mtsd,.xlsx,.xlsb,.mtzb,.mtvx,.mtx,.*mtxz,

변경 전/후 제품 버전

변경 전(제품 버전)

변경 후(제품 버전)

변경 전 :

변경 후 :

공간 바로가기

페이지 트리

버전 비교

이전 버전 1

새 버전 현재

키

Network Control

공간 바로가기

페이지 트리

페이지 이력

버전 비교

이전 버전 1

새 버전 현재

키

Network Control