페이지 트리

버전 비교

  • 이 줄이 추가되었습니다.
  • 이 줄이 삭제되었습니다.
  • 서식이 변경되었습니다.




Network Control 



Start Release No : 7.0.400.20230210 / Update Release No : 7.0.400.2023062220230713

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

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


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


Node 의 Border 를 표현
도움말
iconfalse
title기능 설명
  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, COLOR
            1. 컬럼의 이름은 동일하지 않아도 가능하다.
            2. 옵션을 통해, 특정 컬럼을 KEY, VALUE 등에 적용하도록 하는 기능을 지원하고 있다. ( ※ 명시하지 않으면, KEY, VALUE 라는 이름의 컬럼을 찾음 )

              Image Modified

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

              Image Modified


    3. DataSet 연결 및 컨트롤 실행

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

  3. ( 변경 필요 )


        1. 코드 블럭
          languagejs
          themeFadeToGrey
          firstline1
          titleExample code
          linenumberstrue
          /**************************************
           * 문서가 로드되고 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 함수 호출

          코드 블럭
          languagejs
          themeFadeToGrey
          firstline1
          titleExample code
          linenumberstrue
          Network.NodeDataSet = [Node DataSet Object];
          Network.LinkDataSet = [Link DataSet Object];
          
          Network.Update();			// Network 컨트롤 Update


          Image Modified




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


        코드 블럭
        languagejs
        themeFadeToGrey
        firstline1
        titleExample code
        linenumberstrue
        var opt = {
        	node: {},
        	link: {}
        }




대분류

기능 유형

세부 기능 명내용
UseCaption
Node
Node 에 대한 Caption 을 표현














keyField
  • Node 에서 [KEY] 필드로 사용할 데이터셋의 컬럼을 지정
  • String ( Default : KEY )
captionField
  • Node 에서 [CAPTION] 필드로 사용할 데이터셋의 컬럼을 지정
  • String ( Default : CAPTION )
valueField
  • Node 에서 [VALUE] 필드로 사용할 데이터셋의 컬럼을 지정
  • String ( Default : VALUE )
colorField
  • Node 에서 [COLOR] 필드로 사용할 데이터셋의 컬럼을 지정
  • String ( Default : COLOR )
captionuse
  • 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
borderuse
  • Node 의 테두리 사용 여부를 설정
  • Boolean ( Default :
false
  • true )
UseNodeBorder

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

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

formatter
  • 사용자 지정 Tooltip 설정
String
  • Function ( Default :
#000000 LinkHighlightColor
  • Node 선택 시, 관련 Link 가 활성화 될 때 색상 설정
  • String ( Default : #FF0000 )
  • 기본 색상으로 설정하려면, undefined 로 값을 설정 후, 컨트롤 Update 함수 실행
MinNodeSize
  • Node 크기의 최소 사이즈를 설정 ( Default : 10 )
MaxNodeSize
  • undefined )
  • 기본 색상으로 설정하려면, undefined 로 값을 설정 후, 컨트롤 Update 함수 실행
    • DOM 구조의 문자열을 return 하면, 해당 DOM 을 Tooltip 으로 표시

      코드 블럭
      languagejs
      themeFadeToGrey
      firstline1
      titleExample code
      linenumberstrue
      /*
      * args
      * 	: row (DataRow)
      */
      formatter: function(args) {
      	return "<div></div>"
      }


    • arguments 정보
      1. row [DataRow] : MouseOver Node 에 대한 DataRow 정보
    eventclick
    • Node Click 에 대한 이벤트 기능을 정의
    • Function ( Default : undefined )
    • 단일 및 다중 선택된 노드들에 대한 데이터 정보를 반환

      코드 블럭
      languagejs
      themeFadeToGrey
      firstline1
      titleExample code
      linenumberstrue
      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 크기의 최대 사이즈를 설정 (
    Default : undefined
    • ※ Value 기준의 크기를 지정 )
    SetUseScrollBar
    • Number (
    use)
    • Diagram 의 ScrollBar 사용 여부를 설정하는 함수 ( Default : true / use : Boolean )
    SetUseLinkArrow(use)
    • Link 의 화살표 사용 여부를 설정하는 함수 ( Default : true / use : Boolean )
    UseTooltip
    • Tooltip 사용 여부 설정 ( Default : false )
    • 기본적으로 표시되는 항목은 Key, Value ( Caption 의 경우, UseCaption 여부에 따라 표시 )
    TooltipHTML
  • Custom 으로 작성할 Tooltip HTML 을 의미 ( Default : undefined )
  • 해당 속성값에 String 값이 설정되어 있으면, 기본으로 제공되는 Tooltip 대신 설정한 구문이 HTML 로 추가되면서 Tooltip 으로 표현됨
  • Key, Caption, Value 등은 아래 명시된 예약어를 사용하면 치환되어 표현됨
  • <@KEY@> : Node Key
  • <@CAPTION@> : Node Caption ( UseCaption 이 false 인 경우, 빈 값으로 나타남 )
  • <@VALUE@> : Node Value
    • 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 )

      코드 블럭
      languagejs
      themeFadeToGrey
      firstline1
      titleExample code
      linenumberstrue
      click: function(s) {
      	(...)
      }


    • arguments 정보
        1. s [Network] : 해당 Network Component 객체


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


    정보
    title샘플 정보

    첨부 파일
    patterns.*jsp,.*zip,.*xml,.*js,.*mtsd,.*xlsx,.*xlsb,.*mtzb,.*mtvx,.*mtx,.*mtxz,


    변경 전/후 제품 버전

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

    변경 전 :

    변경 후 :




    참고사항
    title참고 자료


    펼치기

    첨부 파일



    정보
    title문서 수정 이력
    변경 이력

    하위 페이지 표시
    alltrue



    정보
    titleBCRM 정보

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