메인화면

교육과정소개는 투비소프트 교육서비스팀에서 진행되는 모든 과정을 개발자과정과 퍼블리싱 과정으로 나눠서 확인할 수 있습니다.

화면구성

소스참고
EduHub\mobile\Mobile_frmEduInfo.xfdl

1 Button
개발자과정과 퍼블리싱과정으로 나눠져 있는 두 개의 과정을 선택하여 해당 정보를 이용합니다.

개발자, 퍼블리싱 과정소개

화면구성

소스참고
EduHub\mobile\Mobile_frmEduInfo_Developer.xfdl
EduHub\mobile\Mobile_frmEduInfo_publisher.xfdl

1 Div
과정의 타이틀 부분을 나타냅니다. 

2 Div
과정의 상세 부분을 나타냅니다. 

두 개의 Div에 Arrangement를 활용하여 상세내역을 접었다 폈다 볼 수 있도록 구현하였습니다.

주요 기능

접기버튼(^) 클릭

접기버튼을 클릭하면 상세내역의 Div의 사이즈를 0으로 설정하여 화면에 안보이게 구현합니다.

1. 화면에 있는 여러개의 접기버튼은 fn_MenuClick 함수 하나를 호출합니다.

2. fromobject를 이용하여 현재 이벤트가 발생한 버튼의 id를 구합니다.

3. 구해진 Button의 parent 즉, 해당 Div의 정보를 가져와서 사이즈를 0으로 조정하여 세부내역을 감춥니다.

4. Div는 Arrangement가 적용되어 있어 컴포넌트의 위치를 조정하며 resetScroll 메소드는 컴포넌트를 현재 화면 상태에 맞게 갱신합니다.

this.fn_MenuClick = function(e, obj, gubun)
{
	var sDivID; 
	if(gubun == "Div")
	{
		sDivID = e.fromobject.parent.id;
	} else {
		sDivID = e.fromobject.parent.parent.id;
	}	
	var objSubDiv = this.components[sDivID+"1"];


	if(objSubDiv.height > 0){
		objSubDiv.set_height(0);
		obj.set_cssclass("btn_WF_EduInfoOpen");
		this.resetScroll();
		return;
	}  
	this.fn_init();

		
	var nBaseH = objSubDiv.form.stHeight.text;	// 펼쳐질때 div 사이즈(stHeight에 걍 세팅)
	objSubDiv.set_height(nBaseH);
	obj.set_cssclass("btn_WF_EduInfoClose");
	this.resetScroll();	
}