지난번에 이벤트에 대해 이야기하면서
미투데이 API로 제공되는 글을 어떻게 가져오는지 다루었습니다.
혹시 못보셨다면 아래 글을 참고하세요.
이벤트가 어떻게 처리되는지 다루는 내용이었기 때문에
버튼 이벤트를 어떻게 처리하는지만 다루었습니다.
이제 좀 제대로 된 셜리의 이야기를 들어볼 수 있는
간단한 애플리케이션을 만들어봅시다.
먼저 화면 디자인은 아래 그림과 같습니다.
그냥 '셜리 불러오기'라는 버튼 하나와
간단한 그리드 하나만 있습니다.
그리드를 처음 생성하면 아무것도 보이지 않을 겁니다.
그리드에서는 본문, 댓글수, 미투수만 보이게 할텐데 조금 뒤에서 다루겠습니다.
그리고 데이터를 받아서 처리해주어야 하기 때문에
Dataset을 하나 만듭니다. 컬럼은 아래와 같이 설정합니다.
여기에서는 나중에 작업 편의를 위해 실제 XML 값의 요소를 컬럼 id로 설정했습니다.
미투데이 API에서 제공하는 XML 구조는 아래 링크를 참고하시구요.
그리고 Rows 항목에 적당히 테스트할 데이터를 집어넣습니다.
컬럼의 크기를 조정하기 위한 것이니 1개만 넣으면 됩니다.
이제 그리드에 Dataset을 바인딩해주어야 합니다.
binddataset 속성을 직접 채워주거나 Design 모드에서 Dataset을 마우스로 드래그해서 그리드위에 올려놓으면 됩니다.
이렇게 하고 불러온 데이터를 연결해주면서 데이터를 기준으로 그리드의 포맷을 만들어지면
아래와 같은 그림이 나올겁니다.
상단 헤더도 XML 요소값을 그대로 사용했고 텍스트가 너무 길어 제대로 표현되지 않습니다.
포맷을 자동으로 맞추어주는 것은 좋지만 뭔가 맘에 들지 않습니다.
이 경우에는 이미 들어올 데이터의 유형을 알고 있기 때문에
그리드의 포맷을 약간 수정해줄 수 있습니다.
Design 모드에서 그리드를 더블클릭하게 되면 Grid Contents Editor 가 나타납니다.
여기서 그리드와 관련된 다양한 속성을 수정할 수 있습니다.
먼저 헤더에 표시될 이름을 바꾸어봅시다.
해당하는 컬럼의 헤더를 선택하고 text 값을 수정합니다.
헤더값을 다 수정했으면 각 컬럼의 길이를 조금씩 조정해줍니다.
본문이 가장 길고 나머지 댓글이나 미투는 숫자만 표시되기 때문에
그렇게 길게 표기할 필요는 없습니다.
컬럼의 길이를 수정할때에는 해당 컬럼 영역을 선택해야 합니다.
형광색으로 표기되는 부분이 선택된 영역입니다.
컬럼을 선택하고 size 값을 수정해주거나 컬럼과 컬럼를 엑셀에서 하듯이 마우스로 조정해줄 수 있습니다.
마찬가지 방법으로 헤더나 본문의 로우에 대한 크기를 수정해줄 수 있습니다.
그리고 헤더나 데이터 모두 기본적으로 가운데 정렬을 제공하는데
본문의 경우에는 왼쪽 정렬을 시키고 글자가 제공되는 셀의 크기를 벗어나는 경우에
내려쓰기를 하려고 합니다.
이런 경우에는 본문의 로우 영역을 선택하고 wordwrap 속성과 align 속성을 수정해주면 됩니다.
Cell에서 wordwrap 속성은 5가지가 있습니다. 여기에 정규표현식을 추가할 수도 있구요.
- none : 사용하지 않습니다. 기본값
- word : 멀티바이트 문자단위에 대해 단어단위로 새로운 라인에 출력
- english : 영문자 단위에 대해 단어단위로 새로운 라인에 출력
- both : 영문자와 멀티바이트 둘 다 적용
- char : 글자(캐릭터) 단위로 개행
차이가 좀 명확하지는 않지만 하여간 그렇다고 합니다.
자 이제 이렇게 하면 그리드 포맷에 대한 설정이 어느정도 작업되었습니다.
이제 데이터를 가져오는 부분을 살펴보도록 하겠습니다.
앞에서 본 것처럼 DomDocument 의 url 속성으로 미투데이 API 주소를 설정하고
버튼 클릭시 DomDocument 가 로드되도록 하고 onload 이벤트를 걸었습니다.
그렇게 하면 이벤트를 타고 API에서 제공하는 전체 DOM 구조가 넘어옵니다.
하지만 그렇게 하면 우리가 원하는 Dataset 구조가 아닙니다.
Dataset 구조를 만들기 위해서는 약간의 작업이 필요합니다.
먼저 해당 XML 파일의 구조를 알려주어야 합니다.
XML 파일을 보면 posts 요소 아래 post 요소가 중첩되어 있는 것을 알 수 있습니다.
var Rows = obj.getElementsByPath('/posts/post');
이렇게 하면 Rows 라는 오브젝트에 각 본문단위로 데이터가 담겨지게 됩니다.
이제 각 데이터를 Dataset에 넣어주어야 합니다.
이미 Dataset에서 데이터 구조에 맞게 컬럼 ID가 설정되었기 때문에 이를 활용할 것입니다.
반복문에서 넘어온 데이터 숫자만큼 반복하면서 Dataset에 로우를 추가합니다.
for(var i = 0; i < Rows.length;i++)
{
var Row = Rows[i];
var nCurRow = Dataset00.addRow();
for(var nCol = 0; nCol < Dataset00.getColCount(); nCol++)
{
var ColVal = Row.getElementsByPath(Dataset00.getColID(nCol));
if(ColVal.length == 0) continue;
Dataset00.setColumn(nCurRow, Dataset00.getColID(nCol), ColVal.get_item(0).textContent);
}
}
addRow()는 새로운 로우를 추가하는 메소드입니다. 새로운 로우를 추가하면서
해당 로우의 위치 인덱스값을 던져줍니다.
그리고 setColumn() 메소드는 로우의 위치값, 컬럼의 인덱스값에 해당 데이터를 설정해줍니다.
이렇게 하면 선택된 Dataset에 데이터가 설정됩니다.
이제 마지막으로 테스트했던 데이터가 보이지 않도록
form의 onload 이벤트에 Dataset의 deleteAll() 메소드를 배정해줍니다.
아니면 그냥 데이터를 날려버려도 무관합니다.
자 이렇게 간단하게 셜리의 미투데이를 가져올 수 있는 간단한 애플리케이션을 만들었습니다.
그런데 이렇게 올려진 글만 보려고 이런걸 만드는 건 아니거든요.
다음 번에는 사진을 어떻게 가져올 수 있는지 살펴보도록 하겠습니다.
* 해당 파일은 아래에서 확인할 수 있습니다.