ProgressBar 소개

ProgressBar는 작업의 진행 상태를 사용자에게 알려줄 때 사용하는 컴포넌트입니다. 파일의 업/다운로드나 로딩이 오래 걸리는 페이지 오픈 시 작업이 완료되려면 얼마나 걸릴지, 정상적으로 진행되고 있는 건지 사용자가 시각적으로 확인할 수 있게 진행 정보를 제공합니다.

진행 상태는 긴 막대에 배열된 사각형의 빈 영역을 채워 전체 작업 대비 현재 작업의 진행률을 표시합니다. 속성의 설정에 따라 ProgressBar의 모양이나 속도, 방향 등을 설정할 수 있습니다.

사용 예

다음은 ProgressBar가 사용되는 실제 예입니다. 파일을 다운로드하는 상황에서 ProgressBar와 속도, 용량, 시간을 함께 제공하여 사용자가 진행 상황을 확인하며 완료되기까지 얼마나 기다려야 할지 예측할 수 있게 합니다.

ProgressBar는 페이지 로딩 시에도 사용할 수 있습니다. 예를 들어, 웹 메일 페이지를 오픈 시 시간이 오래 걸릴 수 있는데 사용자로서는 페이지가 정상적으로 오픈되고 있는지 확인할 방법이 없습니다. 최악의 경우 서비스에 문제가 생겨도 이를 인지할 수 없어 빈 화면만 바라보며 하염없이 기다리는 경우가 생깁니다. 그러나 페이지 로딩 상태를 ProgressBar로 표시해 주면 사용자는 진행 상태를 보며 문제가 있는지 판단할 수 있습니다.

ProgressBar 만들기

툴바에서 ProgressBar 를 선택한 후, 폼 위에 적당한 크기로 드래그하여 생성합니다.

ProgressBar는 기본 생성만으로 동작하지 않습니다. 시간, 파일의 용량 등과 같이 진행의 척도를 가늠할 수 있는 정보를 바탕으로 ProgressBar의 막대 위치를 알맞게 변경하는 작업이 필요합니다. 이는 스크립트로 작성해야 하는데 자세한 정보는 다음 장에서 다룹니다.

QuickView(Ctrl + F6)로 실행합니다.

진행 상태 표시하기

ProgressBar는 어떤 작업의 진행 상태를 사용자에게 제공하는 용도로 사용합니다. 따라서 진행 상태를 표시하기 위한 정보가 있어야 하며 그런 정보는 서버나 서비스를 통해 받을 수 있습니다.

예제

다음은 ProgressBar의 예입니다. 예제의 단순성을 위해 작업 진행 상태 정보를 타이머로 대신했기 때문에 시간의 흐름에 따라 일정한 속도로 동작합니다. 그리고 속성을 다르게 설정한 두 개의 ProgressBar를 두어 속성의 설정에 따라 모양과 동작이 어떻게 변하는지 보여줍니다.

sample_progressbar_02.xfdl

예제에서 사용한 핵심 기능

max

ProgressBar의 pos 속성이 가질 수 있는 최대값을 설정하는 속성입니다.

pos

ProgressBar에 표시되는 진행바의 위치를 설정하는 속성입니다.

step

ProgressBar의 stepIt 메소드 수행 시 pos 속성에 더해지는 값을 설정하는 속성입니다.

smooth

ProgressBar의 진행바를 공백없이 연속된 형태로 표시할지 설정하는 속성입니다.

stepIt

진행표시줄의 진행바 위치를 step 속성값만큼 변경하는 메소드입니다.

setTimer

주기적으로 ontimer 이벤트를 발생시키는 타이머를 생성하는 메소드입니다.

killTimer

setTimer 메소드로 생성한 타이머를 삭제하는 메소드입니다.

예제 구현 방법

툴바에서 ProgressBar , Button 컴포넌트를 생성하여 예제 화면과 같이 폼에 배치합니다.

생성한 ProgressBar00, ProgressBar01의 속성을 각각 다음과 같이 설정합니다.

• ProgressBar00의 설정

• ProgressBar01의 설정

생성한 Button00, Button01의 속성을 각각 다음과 같이 설정합니다.

• Button00의 설정

• Button01의 설정

• Start 버튼의 onclick 이벤트 함수

Start 버튼의 onclick 이벤트 함수를 등록하고 다음과 같이 스크립트를 작성합니다.

100밀리초(0.1초)마다 ontimer 이벤트를 발생시키는 타이머를 생성합니다. 타이머 ID는 0으로 설정합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.setTimer(0, 100);
};

• 폼의 ontimer 이벤트 함수

폼에 타이머에 의해 호출되는 ontimer 이벤트 함수를 추가하고 다음과 같이 스크립트를 작성합니다.

this.Form_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo)
{
	//각 진행표시줄에 표시할 진행률을 계산합니다.
	var varProgressValue00 = parseInt((this.ProgressBar00.pos / this.ProgressBar00.max) * 100);
	var varProgressValue01 = parseInt((this.ProgressBar01.pos / this.ProgressBar01.max) * 100);

	//ID가 0인 타이머
	if(e.timerid == 0)
	{
		//진행이 완료되면 타이머를 종료시킵니다.
		if(this.ProgressBar00.pos == this.ProgressBar01.max && this.ProgressBar01.pos == this.ProgressBar01.max)
		{
			this.killTimer(0);
		}
		
		//각 진행바를 step 속성값만큼 변경합니다.
		this.ProgressBar00.stepIt();
		this.ProgressBar00.set_text(varProgressValue00 + " %");
		
		this.ProgressBar01.stepIt();
		this.ProgressBar01.set_text(varProgressValue01 + " %");
	}
};

• Reset 버튼의 onclick 이벤트 함수

Reset 버튼의 onclick 이벤트 함수를 등록하고 다음과 같이 스크립트를 작성합니다.

각 ProgressBar의 막대 위치 정보를 초기화하고 타이머를 종료시킵니다.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.ProgressBar00.set_pos(0);
	this.ProgressBar00.set_text("ProgressBar00");
	
	this.ProgressBar01.set_pos(0);
	this.ProgressBar01.set_text("ProgressBar01");
	
	this.killTimer(0);
};

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다.

Start 버튼을 눌러 각 진행표시줄이 시간에 따라 변화하는지 확인합니다. ProgressBar00은 왼쪽에서 오른쪽으로, ProgressBar01은 오른쪽에서 왼쪽으로 진행됩니다. 진행바가 끝까지 진행되면 자동으로 멈춥니다.

Reset 버튼을 누르면 진행표시줄이 모두 초기화됩니다.