Implementing Timer

The basic function of the timer is to select a time and display an alarm after the specified time. In the example, we will implement a simple timer operation.

Example

Select a time in the Combo component and click the button to start the timer.

sample_date_01.xfdl

Core features used in the example

Date

Creates the Date object and processes the time notation to process date or time values.

How to implement an example

Place the Combo, Button, and Static components on the screen. The Static component is responsible for displaying the timer time.

The Combo component is used to specify the timer time. The example provides only 5 views. If you click the button marked [...] next to the innerdataset property item, the window for entering InnerDataset appears.

Calculate the timing of timer operation based on the value selected in the Combo component. Convert the value to milliseconds for calculation and convert it back to the time that can be shown to the user before displaying the time.

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];
};

Whenever the ontimer event occurs, it changes the time displayed in the Static component. When there is no more time to display, (if(t[2] <= 0)) indicates that the timer has expired.

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.");
	}
};

Run QuickView (Ctrl + F6) and run the timer by selecting the timer time in the Combo component.

Getting Information from Date Entered

Convert the date input as the character string into the Date object and extract related information.

Example

Enter the date and click the button to output the relevant information.

sample_date_02.xfdl

Core features used in the example

addDate

This is the method that adds up to the specified date. If it is specified as a negative number, it can be subtracted by the specified date.

getDay

Returns the weekday value corresponding to the date of the Date object. Since the index value from 0 to 6 is returned, the corresponding string is matched and processed when displayed as text.

How to implement an example

Place the MaskEdit component, Button component, and TextArea component. Set the format property value of the MaskEdit component to "####/##/##" and the type property value to "string".

Since multiple information is processed and displayed in the TextArea component, Separate and process functions that process information.

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));
};

Set the input date string to the Date object. If there is no inputted value, then it is processed based on today's date. The value corresponding to Month is processed from 0 to 11. For example, the new Date (2000,11,1) is December 1^st, 2000.

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;
};

Create an array of the day of the week string to be displayed, and specify the value obtained by the getDay() method as the index of the array.

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("Sun.", "Mon.", "Tue.", "Wed.", "Thu.", "Fri.", "Sat.");
	var sRtn     = arrweek[sDay];

	return sRtn;
};

Run QuickView (Ctrl + F6) and enter the date string to check the result.