넥사크로 Static 컴포넌트 동적 생성/삭제/이벤트적용 예시

ㅇ생성

1. new 연산자를 이용해 동적 Static 컴포넌트 생성

2. 자식컴포넌트에 등록 및 화면에 렌더링

3. 동적 컴포넌트관리를 위해 배열에 저장

let arrDynamicComponents = new Array(); //컴포넌트 저장배열 (글로벌 변수)

this.createStaticComponent = function() {
    for(let i = 0; i < 10; i++){
        //동적 컴포넌트 객체 생성
         // id, left, top, width, height
        const objStatic = new Static("Static" + i, 100 + (i*10), 100 , 30, 30);
        
        objStatic.set_text(i); 
        
        //동적생성한 컴포넌트를 자식컴포넌트로 추가, 화면에 표시
        this.addChild("Static" + i, objStatic);
        objStatic.show();

        //생성된 Static 컴포넌트 저장
        arrDynamicComponents.push(objStatic);
    }
}

 

ㅇ삭제 

동적 컴포넌트를 담은 배열을 순회하여 생성된 컴포넌트를 삭제한다.

1. 배열의 최상단 컴포넌트 pop()

2. removeChild()를 이용해 부모로부터 제외

3. destroy()를 이용해 컴포넌트 화면에서 제거

//동적생성 컴포넌트 제거
function destroyStaticComponent () {
    const nLength = arrDynamicComponents.length; 

    for(let i = 0; i < nLength; i++){
        const dynamicComponent   = arrDynamicComponents.pop();
        const dynamicComponentId = dynamicComponent.id;
        const destroyComponent   = this.removeChild(dynamicComponentId); //id를 이용해 제거
        destroyComponent.destroy();
    }
}

 

 

ㅇ이벤트 생성 및 적용

동적생성한 컴포넌트에 addEventHandler를 이용해 이벤트를 적용할 수도 있다. 아래의 예시 이벤트는 마우스가 들어갔다 나올 때 마다, 동적 생성한 컴포넌의 투명도를 바꾸는 이벤트이다.

// 이벤트 선언
this.static_onmouseenter= function(obj:nexacro.Static,e:nexacro.ClickEventInfo){
	obj.set_opacity(1);	//투명도
}
this.static_onmouseleave= function(obj:nexacro.Static,e:nexacro.ClickEventInfo){
	obj.set_opacity(0.7); //투명도
}

// 이벤트 지정
// Param1: 이벤트조건 Param2: 호출이벤트함수 Param: 적용대상
objStatic.addEventHandler("onmouseenter", this.static_onmouseenter, this);
objStatic.addEventHandler("onmouseleave", this.static_onmouseleave, this);

 

 

이전 내용 숨김 (코드개선 - 2024.03.28)

해당 코드 보다 효율적인 관리방법을 적용하였으므로 단순 참고만 바랍니다.

 

생성

함수가 실행될 때 마다 기존에 생성된 컴포넌트는 지우고 새로운 컴포넌트를  만들기 위해 removeCnt 변수를 둔다. 

removeCnt 는 생성된  컴포넌트가 몇개인지 저장한 다음 함수가 호출될 때 만들었던 컴포넌트를 삭제하기 위해 사용한다.

 

var removeCnt = 0;	//global 변수

//동적 컴포넌트 객체 생성
for(var i = 1; i <= 10; i++){
  var objStatic = new Static("Static" + i, 100, 100 , 30, 30); // id, left, top, width, height

  //css 설정 예시
  objStatic.set_borderRadius("30px");  // 둥글게 처리
  objStatic.set_opacity(0.7); //투명도
  objStatic.set_text("text"); //텍스트 주기

  //동적생성한 컴포넌트를 추가 : 화면에 표시
  this.addChild("Static" + i, objStatic);
  objStatic.show();
  removeCnt++; //생성된 갯수 카운트(생성된 컴포넌트를 삭제하기 위함)
  
}

 

삭제

화면에 생성된 모든(정적/동적) 컴포넌트들은 this.components에서 가져올 수 있다. 동적 컴포넌트는 마지막에 생성되었기 때문에 배열의 마지막에 위치하므로 this.components의 마지막 요소부터 생성한 동적 그리드 갯수 만큼 Static.destroy를 수행해주면 동적 컴포넌트가 제거된다.

그러나 다른 요소를 삭제할 수도 있기 때문에 예시코드에선 가져온 id 값을 비교해가며 제거해주었다. Static 객체를 생성할 때 id 값으로 Static1, Static2, Static3...을 주었으므로 components 이름을 판단할 때, "Static" + t 를 이용했다.

 

destroy 메소드

 

//동적생성 컴포넌트 제거
var delObj;
for(var t = 0; t < removeCnt; t++){
    //나중에 생성된 컴포넌트일 수록 뒤에있다
    for(var i=this.components.length-1; i >= 0; i--){
        // 생성할 때 사용했던 [Static + i] 형식의 id를 찾아 제거한다. 
        if(this.components[i].name == "Static" + t){
            // 제거하는 과정
            delObj = this.removeChild("Static" + t);
            delObj.destroy();
        }
    }
}
removeCnt = 0; //모두 제거한 뒤 초기화