[웹스퀘어 WebSquare] 그룹안에 여러 컴포넌트 접근하기

안녕하세요 자유로이 입니다.

오늘은 화면 UI 개발을 위한 통합개발도구 중 웹스퀘어(WebSquare)라고하는 UI 툴에 대한 내용입니다.

웹 표준을 준수한 UI 프레임워크라고도 하는데요

 

대략적인 배경입니다.

• 화면은 XML로 되어있음

  • 즉, 최초 접속시 웹스퀘어 엔진을 내려주어서 엔진의 파싱으로 실시간으로 HTML 돔으로 변환해줌 -> 렌더링

  • 실시간으로 HTML로 바뀔 뿐, HTML 파일을 따로 관리하지 않음

• 제이쿼리를 못 쓰는 것은 아니나 메모리 누수등의 문제로 권장하지 않음

• 통신하는 방식이 일반적인 폼태그가 아님

  • AJax 방식을 응용 -> Submission

• Oxyzen까지만 공식적으로 지원.

• 프로젝트는 Dynamic Web Project의 형태로 구성되어있음

• 웹스퀘어 관련한 파일은 모두 Webcontent(WEB 루트) 아래에 있음

화면을 구성하면서 그룹안에 여러 컴포넌트들에 대한 접근이나 값들을 체크하고 싶을때가 있을텐데요

컴포넌트가 몇개면 그냥 id로 접근하면되지만 그 안에 많은 컴포넌트들이 있을 경우 사용하는 방법중 하나입니다.

 

일단 그룹안에 접근하려면 그룹명.element 이런식으로 접근할 수 있는데요

 

아래는 예시로 그룹안에 컴포넌트들의 값을 확인하는 코드입니다.

var cnt = 0;
for(var index = 0; index < searchGroup.element.childElementCount; index++) {
					targetId = searchGroup.element.children[index].id;
					
					//searchGroup안에 확인하고 싶은 컴포넌트 설정
					if(targetId == "내가 찾고 싶은 컴포넌트" ) {
													
                         			if(eval(searchGroup.element.children[index].id).getValue().length > 0 && eval(searchGroup.element.children[index].id).getValue() != null) {
                             				cnt++;		
                          			}
						
					}
				}

 

하지만 여기서 문제가 발생합니다.

IE에서는 .element 로 접근하는게 안되는거 경우가 있더라고요..

(크롬에서는 되지만 익스플로러에서는 안된다는...ㅠㅠ)

 

웹스퀘어에서는 많이 쓰이는 Utility 성격의 API를 제공하는데요.

WebSquare.util 를 사용하여 문제를 해결하였습니다.

 

var cnt = 0;
var searchGroup = WebSquare.util.getChildren(searchGroup, {
		//제외할 컴포넌트 타임도 설정할 수 있습니다(저는 사용자 입력이 가능한 컴포넌만 확인을 위한 설정입니다)
		excludePlugin : "output group image",
		recursive : false
});
			    
for(var index = 0; index < searchGroup.length; index++) {
		var obj = searchGroup[index];
		if(eval(obj.id).getValue().length > 0 && eval(obj.id).getValue() != null ) {
			cnt++;		
		}
}

 

이상 웹스퀘어에서 util을 사용해서 그룹안에 컴포넌트들을 조회하는 코드를 알아보았습니다.