50.nexacro.DomParser

Edit

50.1nexacro.DomParser 오브젝트 소개

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

nexacro.DomParser 오브젝트는 17.0.0.2200 버전부터 지원합니다.

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

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

날씨 Open API는 openweathermap 에서 제공하는 정보를 활용했습니다.

데이터 형식과 기타 자세한 내용은 아래 링크를 참고하세요.

https://openweathermap.org/forecast5#XML

50.2.1예제

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

sample_nexacro_domparser_01.xfdl

50.2.2예제에서 사용한 핵심 기능

onreadystatechange

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

parseFromString

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

50.2.3예제 구현 방법

1

Grid 컴포넌트를 화면에 배치합니다.

2

첫 번째 Grid 컴포넌트와 바인딩할 Dataset 오브젝트를 추가합니다.

3

Dataset 오브젝트에 아래와 같이 데이터를 설정합니다.

사용할 수 있는 도시 정보는 아래 링크에서 확인할 수 있습니다.

http://bulk.openweathermap.org/sample/

4

첫 번째 Grid 컴포넌트에 Dataset 오브젝트를 바인딩합니다.

5

Grid Contents Editor를 실행하고 locale, lang 2개 컬럼은 삭제합니다.

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

6

두 번째 Grid 컴포넌트와 바인딩할 Dataset 오브젝트를 추가합니다.

7

Dataset 오브젝트에 아래와 같이 컬럼 정보만 설정합니다.

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

8

두 번째 Grid 컴포넌트에 Dataset 오브젝트를 바인딩합니다.

9

Grid Contents Editor를 실행합니다.

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

10

첫 번째 Grid 클릭 시 API를 호출하는 스크립트를 아래와 같이 작성합니다.

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

11

ID값을 받아서 API를 호출하는 함수를 아래와 같이 작성합니다.

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

API KEY(appid)는 회원 가입 후 받을 수 있습니다.

https://openweathermap.org/appid

12

API 호출 후 응답을 처리하는 함수를 아래와 같이 작성합니다.

var that = this;

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

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

13

날씨 정보를 표시할 Dataset 오브젝트에 데이터를 추가하기 위한 함수를 아래와 같이 작성합니다.

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

14

날짜값 처리를 위한 함수를 작성합니다.

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

15

QuickView(Ctrl + F6)로 실행한 후 도시를 선택했을때 날씨 정보가 표시되는지 확인합니다.