* 점검 때는 웹페이지를 열 수 없기 때문에 이벤트 보기가 불가능 합니다. * 현재 오던 샘플 XML에 문제가 있어서 위젯에서 오던 페이지가 열리지 않습니다. * 오던 샘플 페이지 수정되었습니다.
* ㅠㅠ 갑작스럽게 많은 분들이 들어오셔서 문제가 발생하네요. 서버가 구해지는대로 새로 등록해놓을게요.
오늘의 던파 라는 컨텐츠가 있습니다. 바로 던전앤파이터(링크) 웹페이지에서 제공하는 게임정보 컨텐츠 입니다.
던전앤파이터(이하 던파) 는 꽤 많은 유저가 즐기는 게임인데요, 그만큼 많은 컨텐츠가 생산되고 소비됩니다. 이런 컨텐츠들을 좀 더 효율적으로 이용할 수 있도록 하는 위젯이 있다면 더 좋지 않을까요?
웹의 컨텐츠는 너무나도 쉽게 얻을 수 있습니다. 물론 쉽게 얻을 수 있다고 함부로 사용하면 안되겠지만요. 오늘은 위젯을 만들기 위해 던파의 컨텐츠를 사용해보겠습니다.
웹 컨텐츠를 쉽게 사용할 수 있도록 하는 기술이 먼저 필요합니다. 요즘 주목받고 있는 ADOBE 사의 AIR 를 사용하여 정말 매우 간단하게 위젯을 만들어보겠습니다.
Flex Builder 4 beta2를 다운받고 설치하셨다면 만들기 준비는 다 끝났습니다. 새 프로젝트를 한번 만들어볼까요?
프로젝트 이름을 적당하게 작성하고, Application Type 을 Desktop 으로 선택한 뒤 Finish 버튼을 누릅니다.
처음 프로젝트를 생성하면 아래와 같은 코드가 보입니다.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:WindowedApplication>
이게 기본 프로젝트 인데요, 여기 패널을 추가하고, 네비게이션을 추가할 예정입니다.
Source 뷰에서 Design 뷰로 전환하여 width 와 height 값을 각각 450, 230 으로조정하여 줍니다.
그리고 컴포넌트 윈도우에서 Panel 과 TabNavigator 컴포넌트를 찾아서 추가해줍니다.
둘 다 width 값과 height 은 100%, x, y 값은 비워둡니다.
탭 네비게이션을 추가했으면 Label을 변경해야 합니다. 위와 같이 레이블 이름을 변경하고 새 탭을 하나 더 추가해줍니다.
그리고 탭네비게이션에 VGroup 를 하나 추가하고, width, height 를 100%로 설정합니다.
VGroup 안에 링크버튼 다섯개를 적당히 배치해줍니다.
두개의 탭에 모두 설정해줍니다.
이제 레이아웃은 얼추 잡힌듯 한데요, 이제 XML을 읽어와 링크버튼에 바인딩 하는 코드를 넣어야 합니다.
웹컨텐츠의 XML 파싱은 각자 편한대로 하시면 되는데요, 미리 샘플을 하나 제공해드리겠습니다.
첫번째 type이 text/html 으로 되어 있는 부분은 검색어를 넘겼을 때 실제 검색을 처리하는 부분입니다.
바로 검색창에 검색어를 입력하고, 돋보기 아이콘을 클릭했을 때 실제 검색어를 처리하는 부분이죠.
중요한것은 get 방식으로 넘길 때 인자를 구분하는 &의 값을 & 로 써주셔야 합니다.
그 아래 type이 application 으로 되어 있는 부분은 option 입니다. (제가 지금 IE7 이라서 이미지는 주말이 지나서 추가해야 할 듯 싶습니다.)
이미지와 함께 제공되는 검색어 추천을 사용하고 싶다면 저 부분을 따로 개발하여 넣으면 됩니다. +xml 이라고 되어 있으면 xml 타입으로 개발을 해야 하고, +json 으로 표기를 하면 json 으로 출력되도록 개발하시면 됩니다. 나머지 부분은 굳이 신경쓰지 않으셔도 되고, 한번 보시면 다 아실 내용이라 생각됩니다.
이 XML을 서버에 올려놓고 이제 XML을 추가할 수 있도록 "무엇인가" 를 만들어야 겠지요.
위와 같이 window.external.AddSearchProvider() 라는 프로퍼티에 xml위치에 해당하는 인자값 하나만 넣어주면 완성이고, 이 링크를 클릭하면 검색공급자 등록을 할 수 있습니다.
위와 같은 메시지가 뜨면, 공급자 추가를 선택하여 검색공급자를 등록할 수 있습니다.
이제 검색공급자가 추가된 것을 확인하실 수 있습니다.
공급자를 DNF item 으로 변경하고, 검색어를 입력하면 이제 검색된 내용을 볼 수 있게 됩니다.
어때요, 참 쉽죠?
이건 단순한 검색공급자 를 만드는 것이었고, 이제 핵심기능인 비쥬얼서치를 살펴볼까요?
이것또한 별것 없습니다.
<Url type="application/x-suggestions+xml" template="http://ottd.iruis.net/~onionmen/dic_test.xml" />
이 부분 기억 하시나요. 여기 들어있는 dic_test.xml 이라는 부분이 바로 비쥬얼서치에 사용될 부분입니다. 지금은 예제로 간단한 xml을 만들었는데, 이부분은 프로그래밍이 들어가야 하는 부분입니다. 검색어에 의해서 관련된 xml이 생성되도록 해야 하지요.
아래 xml은 역전 이라는 검색어를 입력하면 그와 관련된 추천검색어와 비쥬얼서치의 모습을 보여주는 xml 입니다.
DnfWidget.air
