지난번 이야기한것처럼 미투데이에 글 작성시 포함된 사진을 조회해보는 기능을 추가해보겠습니다.
미투데이 API를 보면 media 라는 태그가 있습니다.
아무것도 없는 상태에서 글을 작성하게 되면 media 태그에 값이 들어가지 않습니다.
하지만 동영상이나 사진, 글감이 포함되면 해당 영역에 내용을 확인할 수 있습니다.
여기서 필요한 것은 해당 글에 사진이 있는지 여부와
사진이 포함된 URL을 가져와 화면에 보여주는 것입니다.
* 사진 포함 여부
사진이 포함되면 다음과 같이 XML에 담기게 됩니다.
<media>
<me2photo>
<provider>nphoto_inf</provider>
<photoUrl>
http://me2daythumb.phinf.naver.net/20110624_175/fx_sulli_1308905231450XqyAF_JPEG/fx_sulli_1308905231_10586.png?type=w500
</photoUrl>
<photoId>phinf6t2co</photoId>
<permalink>http://me2day.net/front/me2photo?id=phinf6t2co</permalink>
</me2photo>
</media>
photoUrl과 permalink는 결국에는 같은 링크로 연결되지만 퍼머링크는 직접 이미지로 연결되는 것이
아니기때문에 여기에서는 photoUrl을 사용해야 합니다.
일단 Dataset에서 사진을 포함한 url을 추가할 수 있도록 컬럼을 추가합니다.
편의상 media 라는 컬럼을 추가합니다.
(최초 설계가 좀 문제가 있어서..ㅠㅠ)
그리고 화면상에는 이미지를 볼 수 있도록 ImageViewer 를 추가합니다.
컴포넌트에서 가져와 화면상에 넣어주면 됩니다.
이제 image URL을 Dataset에 담을 수 있또록 스크립트를 일부 수정합니다.
앞에서 Dataset 의 컬럼수만큼 반복하면서 소스를 가져오게 해놓았는데요.
이번에는 media 컬럼일 경우에는 자식노드가 있는지 확인하고
(없을 수도 있습니다).
있다면 me2photo/photoUrl 이 있는지 다시 한번 확인하고 해당 값을 가져오게 합니다.
if(Dataset00.getColID(nCol)=='media' && ColVal.get_item(0).childNodes != null)
{
var PhotoVal = ColVal.get_item(0).getElementsByPath("me2photo/photoUrl");
if(PhotoVal)
{
Dataset00.setColumn(nCurRow, Dataset00.getColID(nCol), PhotoVal.get_item(0).textContent);
}
}
그럼 사진이 있는 경우에는 사진에 맞게 데이터를 설정합니다.
이제 남은 것은 ImageViewer에 어떻게 사진을 연결해줄지를 설정하는 겁니다.
이 과정은 의외로 간단합니다.
그냥 Dataset을 ImageViewer에 연결하기만 하면 됩니다.
Dataset을 마우스로 드래그해서 ImageViewer에 올려놓으면 위의 그림과 같은 대화상자가 나타나고
속성과 컬럼 ID만 지정해주면 됩니다.
그럼 Source 창에 아래와 같은 소스가 추가됩니다.
<Bind>
<BindItem id="item0" compid="ImageViewer00" propid="image" datasetid="Dataset00" columnid="media"/>
</Bind>
물론 그냥 바인딩을 하게 되면 중간에 컨트롤을 할 수가 없는 문제가 있긴 합니다.
자 이제 실행을 해보면 다음과 같은 결과가 나옵니다.
* 몇가지 문제
- 사진이 있는지 없는지 그리드상에 표현이 안되는 문제
- 사진 Resize가 안되는 문제
- 처음 바인딩되면서 사진이 다 바인딩되는 문제
이런 문제들은 다음 시간에 해결해보죠. ㅠㅠ
프로젝트 폴더가 약간 바뀌었네요.