nexacro.DomParser 오브젝트 소개

XML 문자열을 DOMDocument 오브젝트로 생성합니다. XML 데이터를 받아서 다른 형식으로 표현해야 하는 경우 사용할 수 있습니다.

XML 형식의 Open API 연결해서 Grid 컴포넌트에 표시하기

도시 별 날씨 정보를 제공하는 Open API를 이용해 선택한 도시의 5일간 날씨 정보를 표시합니다.

예제

도시 코드를 미리 설정해놓은 목록 중에서 원하는 항목을 선택하면 현재 시간 이후 5일간의 날씨 정보를 표시합니다. 선택한 국가에 따라 한국어, 일본어, 영어로 날씨 상태 설명을 툴팁으로 표시합니다.

sample_nexacro_domparser_01.xfdl

예제에서 사용한 핵심 기능

onreadystatechange

XMLHttpRequest 오브젝트에서 요청한 호출의 응답 상태에 따라 결과를 처리할 콜백 함수를 설정합니다. 예제에서는 날씨 API 주소를 호출하고 응답받은 XML 값을 nexacro.DomParser 오브젝트에서 처리합니다.

parseFromString

XML 문자열을 DOMDocument 오브젝트 형태로 변환해줍니다. 오브젝트의 속성이나 메소드는 실행 환경에 따라 달라질 수 있습니다. 아래 예제는 NRE, IE11, Chrome에서 확인한 기능을 사용했습니다.

예제 구현 방법

해당 컬럼 데이터는 API 호출 시에만 사용합니다.

데이터는 API 호출 후 처리 과정에서 추가합니다.

temperature, pressure, humidity 3개의 컬럼은 displaytype 속성값을 "number"로 수정하고 icon 컬럼은 displaytype 속성값은 "imagecontrol", tooltiptext 속성값은 "bind:status", imagestretch 속성값은 "fixaspectratio"로 설정합니다.

this.Grid01_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	var id = this.Dataset01.getColumn(e.row, 2);
	var lang = this.Dataset01.getColumn(e.row, 4);
	this.fn_getWeatherInfo(id, lang);
};

mode 속성값을 지정하지 않으면 JSON 형식으로 데이터를 받습니다. 예제에서는 XML 데이터를 다루기 때문에 mode 속성값을 "xml"로 지정합니다. lang 속성을 설정하면 해당 언어로 데이터값을 받을 수 있습니다.

var appid = "[app id]";

this.fn_getWeatherInfo = function(id, lang)
{
	var objXhr = new XMLHttpRequest();
	objXhr.onreadystatechange = this.XHR_onreadystatechange;
	objXhr.open("POST", "https://api.openweathermap.org/data/2.5/forecast?mode=xml&units=metric&appid="+appid+"&id="+id+"&lang="+lang);
	objXhr.send();
};

var that = this;

this.XHR_onreadystatechange = function()
{
	if(this.readyState == 4)
	{
		that.fn_setData(this.responseText);
	}
}

데이터를 처리하기 위한 함수를 호출하기 위해 this(Form) 변수를 전역 변수로 지정해 사용합니다. 아래 함수 내에서 this는 XMLHttpRequest 오브젝트를 가리킵니다.

DomParser 오브젝트의 parseFromString 메소드를 사용해 문자열 형태로 전달된 XML 본문을 오브젝트 형태로 변환하고 필요한 데이터에 접근합니다.

this.fn_setData = function(strXML)
{
	var domDoc;
	var objDom = new nexacro.DomParser();
	domDoc = objDom.parseFromString(strXML);

	var timezone = domDoc.getElementsByTagName("timezone")[0].childNodes[0]
	timezone = timezone.data;
	var domElement = domDoc.getElementsByTagName("forecast")[0].childNodes;
	var domCnt = domElement.length;
	var msg="";
	
	this.Dataset00.set_enableevent(false);
	this.Dataset00.clearData();
	for(var i=0;i<domCnt;i++)
	{
		var rIdx = this.Dataset00.addRow();
		var domElement = domDoc.getElementsByTagName("forecast")[0].childNodes[i];

		this.Dataset00.setColumn(rIdx, 0, this.fn_localDate(domElement.getAttribute("to"), timezone)); // to date
		this.Dataset00.setColumn(rIdx, 1, domElement.getElementsByTagName("symbol")[0].getAttribute("name")); // status
		this.Dataset00.setColumn(rIdx, 2, domElement.getElementsByTagName("temperature")[0].getAttribute("value")); // temperature 
		this.Dataset00.setColumn(rIdx, 3, domElement.getElementsByTagName("pressure")[0].getAttribute("value")); // pressure  
		this.Dataset00.setColumn(rIdx, 4, domElement.getElementsByTagName("humidity")[0].getAttribute("value")); // humidity  
		this.Dataset00.setColumn(rIdx, 5, "http://openweathermap.org/img/wn/"+domElement.getElementsByTagName("symbol")[0].getAttribute("var")+".png");
	}
	this.Dataset00.set_enableevent(true);
	this.Grid00.scrollTo(0,0);
	
};

API에서는 UTC 기준으로 날짜값을 던져줍니다. 선택한 도시의 타임존에 맞게 시간을 보정해주어야 합니다.

this.fn_localDate = function(strDate, timezone)
{
	var d = new nexacro.Date(strDate);
	d.addSeconds(Number(timezone));
    var year = d.getFullYear().toString().padLeft(4, "0");
    var month = (d.getMonth()+1).toString().padLeft(2, "0");
    var day = d.getDate().toString().padLeft(2, "0");
	var hour = d.getHours().toString().padLeft(2, "0");
	var minute = d.getMinutes().toString().padLeft(2, "0");
	return year+"/"+month+"/"+day+" "+hour+":"+minute;
}