Contents

Skin

개요

Skin이란?

넷퍼넬의 Skin 기능을 활용하면 넷퍼넬 대기창의 UI를 원하는 형태로 변경하거나 여러 개의 UI 중에서 하나를 선택할 수 있습니다. 별도의 Skin을 지정하지 않으면 netfunnel.js 에 포함된 디폴트 Skin을 사용합니다.

주의 사항

Skin 용도로 만들어진 Javascript 파일은 netfunnel.js 아래 쪽에 include 해야 합니다. 별도의 설정(NetFunnel.TS_SKIN_ID)이 없다면 제일 마지막에 추가된 Skin이 해당 페이지의 Skin이 됩니다.

아래와 같이 netfunnel.js 아래에 test_skin.js 파일이 include 되었다면 test_skin.js 에 입력된 Skin이 대기창으로 출력됩니다.

	

Function 및 Data Format

Skin 추가 Function

  • Prototype

    NetFunnel.SkinUtil.add(id,oData,type)

  • Parameters
    Parameter Type 설명
    id String Skin 이름
    (주의)‘default’는 netfunnel.js에 포함된 이름이므로 id에 ‘default’를 쓰면 netfunnel.js의 ‘default’값을 overriding하게 된다.
    Data Object Skin 정의 Data
    type String Skin Type ['normal'|'mobile']
  • Return

    NULL

Data Format(oData)

Object 형태의 데이터 구조로 포함할 수 있는 내용은 아래와 같습니다.

key Type 설명
prepareCallback Function Skin이 초기에 생성될때 실행되는 Function
updateCallback Function NetFUNNEL 서버에서 자료를 가져올 때마다 실행되는 함수
htmlStr String Skin의 UI정보가 입력되는 값

htmlStr의 Predefined Data

Data Format의 htmlStr 부분에는 대기창 UI로 쓰일 HTML 자료가 들어갑니다. 이 부분에 미리 정의된 몇 가지 id와 Function을 사용하면 동적인 대기창을 만들 수 있습니다.

NetFunnel_Skin_Top

Skin의 최상위 DIV의 id는 반드시 “NetFunnel_Skin_Top”으로 설정해야 합니다.

대기자 수 (Optional)

대기자 수는 Object의 id가 “NetFunnel_Loading_Popup_Count”인 Object를 통해서 출력할 수 있습니다.
필요한 위치에 <span id="NetFunnel_Loading_Popup_Count"></span> 와 같은 방식으로 입력하세요. 해당 SPAN 태그의 innerHTML 값으로 대기자 숫자가 출력됩니다.

후 순위 대기자 수 (Optional)

후 순위 대기자 수는 Object의 id가 “NetFunnel_Loading_Popup_NextCnt” 인 Object를 통해서 출력할 수 있습니다.

대기 시간 (Optional)

예상 대기시간은 Object의 id가 “NetFunnel_Loading_Popup_TimeLeft” 인 Obejct 를 통해서 출력할 수 있습니다.
필요한 위치에 <span id="NetFunnel_Loading_Popup_TimeLeft"></span>과 같은 방식으로 입력하세요. 해당 SPAN 태그의 innerHTML 값으로 대기 시간이 “00시간 00분 00초” 형태로 출력됩니다. 만약 “00시간 00분 00초”가 아닌 다른 방식이나 다른 언어로 출력하려면 class 어트리뷰트를 이용하세요.
“00h:00m:00s” 형태로 출력하려면 <span id="NetFunnel_Loading_Popup_ TimeLeft" class="%02H:%02M:%02S^:^false" ></span>과 같이 class 어트리뷰트에 해당 포맷을 쓰세요.

  • class 어트리뷰트

    class 어트리뷰트에 입력되는 값은 “<format>^<delimiter>^<force>” 이고, “^”를 구분자로 3개의 값이 들어갑니다.

    • format (String)

      C언어의 printf의 포멧과 유사하며, 가능한 값은 %H(시간) %M(분) %S(초) 3가지로 앞 뒤 Padding을 위해 ‘-’, ‘숫자’ 값이 추가됩니다.

    • delimiter (String)

      포맷의 각 인자를 구분하기 위한 구분자로 뒤의 인자인 force와 결합해서 없는 정보를 출력할 것인지에 대한 기준이 됩니다.

    • force (Boolean)

      값이 없는 항목을 출력할 것인지에 대한 설정입니다.
      예를 들의 포맷이 “%02H:%02M:%02S”이고 delimiter가 “:” 이고 force가 “false” 인 경우 실제 대기 시간이 100초라면 “00:01:40”이 아니라 “01:40”만 출력됩니다. 전자와 같이 출력하고자 한다면 force 값을 “true”로 변경하세요.

  • 대기 시간은 100초라고 가정합니다.

    • “%S^^false” - 100
    • “%H:%M:%S^:^false” - 1:40
    • “%H:%M:%S^:^true” - 0:1:40
    • “%02H:%02M:%02S^:^true” - 00:01:40
    • “%02Hh:%-4Mm:%04Ss^:^true” - 00h:1 m:0040s

대기 중지 함수 (Optional)

대기창 출력 중에 대기를 멈추고 원상태로 돌아가고 싶다면 “NetFunnel.countdown_stop()” 함수를 호출하세요.

ProgressBar (Optional)

대기창에 ProgressBar를 출력하고 싶다면 Object의 id가 “NetFunnel_Loading_Popup_Progressbar”인 Object를 통해서 출력할 수 있습니다.

\ Test UI
\ 대기자수 :
\ 대기시간 :
\ [중지] \
\

Callback

prepareCallback

대기창이 출력될 때, 최소 한 번 이상 실행되는 함수들입니다.

변수 값의 초기화나 Object 생성을 할 수 있습니다.

  • Prototype
    prepareCallback()
  • Parameters
    NULL
  • Return
    NULL

updateCallback

대기창이 출력된 후, 자료가 업데이트 될 때마다 호출되는 함수들입니다.

  • Prototype
    updateCallback(percent,nwait,totwait,timeleft)
  • Parameters

    Parameter Type 설명
    percent Number 진행률
    nwait Number 현재 남아있는 대기자수
    totwait Number 전체 대기자수
    timeleft Number 남아있는 대기시간
  • Return
    NULL

Sample

test_skin.js

if(typeof NetFunnel == "object"){
	NetFunnel.SkinUtil.add('test',{	
		prepareCallback:function(){
			var progress_print = document.getElementById("Progress_Print");
			progress_print.innerHTML="0 % (0/0) - 0 sec";
		},
		updateCallback:function(percent,nwait,totwait,timeleft){
			var progress_print = document.getElementById("Progress_Print");
			var prog=totwait - nwait;
			progress_print.innerHTML=percent+" % ("+prog+"/"+totwait+") - "+timeleft+" sec";
		},
		htmlStr:'
\
\ <div style="text-align:left;font-size:9pt;color:#001f6c;padding-left:10px;"> \ 접속대기 중..
\ - 대기자수 :
\ - 대기시간 :
\ <div id="Progress_Print" \ style="text-align:center;padding:5px;font:bold 20px Trebuchet MS,굴림,Gulim;color:gray">
\
\
' },'normal'); }

위 Skin을 이용하면 화면에 아래와 같은 대기창이 출력됩니다.

Skin 결과 화면