타이머 구현하기

시간을 선택하고 지정된 시간이 지나면 알람을 표시하는 것이 타이머의 기본 기능입니다. 예제에서는 간단한 타이머 동작 방식을 구현해봅니다.

예제

Combo 컴포넌트에서 시간을 선택하고 버튼을 클릭하면 타이머가 동작합니다.

sample_date_01.xfdl

예제에서 사용한 핵심 기능

Date: 날짜나 시간값을 처리하기 위해 Date 오브젝트를 생성하고 시간 표기를 처리합니다.

예제 구현 방법

화면 구성하기

화면에 Combo, Button, Static 컴포넌트를 배치합니다. Static 컴포넌트는 타이머 시간 표시를 담당합니다.

Combo 컴포넌트 innerdataset 설정하기

Combo 컴포넌트는 타이머 시간을 지정하기 위해 사용합니다. 예제에서는 5개의 보기만을 제공합니다. innerdataset 속성 항목 옆에 [...]으로 표시된 버튼을 클릭하면 InnerDataset을 입력할 수 있는 창이 나타납니다.

버튼 onclick 이벤트 함수 작성하기

Combo 컴포넌트에서 선택한 값을 기준으로 타이머가 동작할 시점을 계산합니다. 계산을 위해 밀리세컨드로 값을 변환하고 시간을 표시하기 전에 다시 이를 사용자에게 보여줄 수 있는 시간으로 변환합니다.

this.session_Endtime= null;
this.curTime = null;

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var holding_time = this.Combo00.value*60*1000;
	this.session_time = new Date().valueOf();
	this.session_Endtime = new Date(this.session_time + holding_time);  
	var millis = this.session_Endtime- this.session_time;
	var t = this.millisToTime(millis);
	this.Static00.set_text("It will be logout after " + t[1]+"Minute and "+t[2]+ " Seconds automatically.");     
	this.setTimer(100,1000);
};

this.millisToTime =  function (millis)
{
	//Hour
	var hours = Math.floor(millis/(1000*60*60), 0);
	//Minute
	var minutes = Math.floor(millis/(1000*60) % 60, 0);
	//Seconds
	var seconds = Math.floor((millis/1000) % 60, 0);
	return [hours,minutes,seconds];
};

Form 오브젝트의 ontimer 이벤트 함수 작성하기

ontimer 이벤트가 발생할때마다 Static 컴포넌트에 표시되는 시간을 변경합니다. 표시할 시간이 더 이상 없으면 (if(t[2] <= 0)) 타이머가 끝났음을 표시합니다.

this.sample_date_01_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo)
{
	if(e.timerid == 100)
	{
		this.session_time = new Date().valueOf();
		var millis = this.session_Endtime- this.session_time;
		var t = this.millisToTime(millis);
		if(t[2] <= 0 )
		{
			this.Static00.set_text("Session is terminated, it is logout automatically. ");
			return;
		}
		this.Static00.set_text("It will be logout after " + t[1]+" Minute and "+t[2]+ " Seconds automatically.");
	}
};

QuickView로 확인하기

QuickView(Ctrl + F6)를 실행하고 Combo 컴포넌트에서 타이머 시간을 선택해 타이머를 실행해봅니다.

입력된 날짜에서 정보 구하기

문자열로 입력받은 날짜를 Date 오브젝트로 변환하고 관련된 정보를 추출합니다.

예제

날짜를 입력하고 버튼을 클릭하면 관련 정보를 출력합니다.

sample_date_02.xfdl

예제에서 사용한 핵심 기능

addDate: 지정한 날짜만큼 더하는 메소드입니다. 음수로 지정하는 경우에는 지정한 날짜만큼 뺄 수 있습니다.

getDay: Date 오브젝트의 날짜에 해당하는 요일값을 반환합니다. 0부터 6까지 인덱스값을 반환하기 때문에 텍스트로 표기할 때는 해당하는 문자열을 매칭해 처리합니다.

예제 구현 방법

화면 구성하기

MaskEdit 컴포넌트와 Button 컴포넌트, TextArea 컴포넌트를 배치합니다. MaskEdit 컴포넌트의 format 속성값은 "####/##/##"로 지정하고 type 속성값은 "string"으로 지정합니다.

onclick 이벤트 함수 작성하기

여러 정보를 처리하고 TextArea 컴포넌트에 표시하기 때문에 정보를 처리하는 함수를 분리해 처리합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.TextArea00.set_value("lastDay: "+this.fn_lastDay(this.MaskEdit00.value)+"\n"
		+"korean week: "+this.fn_hanGulWeek(this.MaskEdit00.value));
};

마지막 날짜 구하기 함수

입력받은 날짜 문자열을 Date 오브젝트에 설정합니다. 입력받은 값이 없는 경우에는 오늘 날짜를 기준으로 처리합니다. Month에 해당하는 값은 0부터 11까지로 처리됩니다. 예를 들어 new Date(2000,11,1)은 2000년 12월 1일입니다.

this.fn_lastDay = function(sDate) 
{
    var dDate = "";
	
	if (sDate == null || sDate == "" || sDate == "undefined")  
	{
		dDate = (new Date()).addMonth(1);
	    dDate.addDate((new Date(dDate)).getDate()*-1);
    }
    else 
    {
	    dDate = new Date(parseInt(sDate.substr(0,4)), parseInt(sDate.substr(4,2)), 1);
	    dDate.addDate(-1);	
    }
	
    var sRtn =  dDate.getFullYear()
	+ (dDate.getMonth()+1).toString().padLeft(2, "0")
	+ dDate.getDate().toString().padLeft(2, "0");  
	
	return sRtn;
};

요일 구하기 함수

표시할 요일 문자열을 배열로 만들고 getDay() 메소드에서 구한 값을 배열의 인덱스로 지정합니다.

this.fn_hanGulWeek = function(sDate) 
{
    var dDate    = new Date(parseInt(sDate.substr(0,4))
						  , parseInt(sDate.substr(4,2))-1
						  , parseInt(sDate.substr(6,2)));
    var sDay     = dDate.getDay();
	var arrweek  = new Array("일", "월", "화", "수", "목", "금", "토");		
	var sRtn     = arrweek[sDay];

	return sRtn;
};

QuickView로 확인하기

QuickView(Ctrl + F6)를 실행하고 날짜 문자열을 입력하고 결과값을 확인합니다.