[Tutorial] 위젯 구성 살펴보기

330727 [Tutorial] 위젯 구성 살펴보기 12580 2009-09-29T05:23:38Z http://pyo.springnote.com/pages/330727 2007-06-26T06:16:22Z   <h1>WZDAPI 기본 구성</h1> <ul> <li>WZDAPI는 기본적으로 한 개의 XHTML 파일과 한 개의 아이콘 파일로 구성됩니다.</li> <li>XHTML 파일 아래에서 일반적인 XHTML 문서를 만드시는 방법과 거의 동일한 방법으로 만들어 집니다.</li> </ul>   <h1>에뮬레이터</h1> <ul> <li>작성한 위젯이 플랫폼에 탑재되었을 때의 모습을 가상으로 구현한 에뮬레이터를 지원합니다.</li> <li>에뮬레이터 사용중 문의 사항은 <a href="http://wzdapi.com/" title="http://wzdapi.com" class="external">http://wzdapi.com</a> 내 질문 답변 게시판에 문의해 주시면 신속히 답변해 드리겠습니다.</li> </ul>   <h1>위젯 파일(XHTML) 구조 살펴보기</h1> <ul> <li>위젯 파일은 기본적으로 아래와 같은 구조를 가집니다.</li> </ul> <img title="1.jpg" class="attachment" src="/pages/330727/attachments/140440" alt="1.jpg" />   [위 그림에서 빨간 동그라미] ① Title 태그안에는 위젯의 이름이 들어갑니다. ② 위젯 제목 표시줄(Title Bar)에 출력될 아이콘을 지정할 수 있습니다. ③ 에뮬레이터를 연결하면 위젯이 실제 WZD.COM에 올라갔을 때의 모습을 확인하며 개발할 수 있습니다.     (에뮬레이터 URL은 <a href="http://wzdapi.com/widget/emulator.js" title="http://wzdapi.com/widget/emulator.js" class="external">http://wzdapi.com/widget/emulator.js</a> 입니다.)   [위 그림에서 검은 동그라미] ① 위젯 개발자, API 버전, 위젯 설명, 제작자 웹사이트 등의 기본정보들이 들어갑니다. ② <widget:preference> 태그 안에서는 위젯 설정창을 구성합니다. ③ 위젯에 적용될 stylesheet는 여기에서 작성합니다. ④ 위젯의 실제 로직을 여기에서 구현합니다. ⑤ 위젯이 보여질 기본 구조를 body 태그 안에 코딩합니다. body 태그 안의 내용은 위젯이 onLoad될 때(위젯을 새로 추가하거나 불러올 때) 보여집니다. 단, 제약 조건이 있으니 WZDAPI 스펙의 HTML 부분을 반드시 주의해서 읽어주세요.   (검은 동그라미 번호 기준으로) ① -> ② -> ⑤ -> ③,④ 의 순서로 위젯을 개발하시는 것을 추천해 드립니다.   <h1>위젯 개발 따라해보기</h1> 자, 그럼 저희가 추천해 드리는 순서대로 아주 간단한 위젯을 한 번 만들어 볼까요? 천천히 따라해 보시고 보다 좋은 위젯 개발을 위해서는 (당연~히) WZDAPI 스펙을 직접 확인해 주세요 ^.^ ① meta 태그에는 위젯에 대한 정보를 적어주세요. apiVersion과 author는 꼭 쓰셔야 작동한답니다! ② 설정할 내용이 있을 경우 이 태그를 씁니다. 예는 아래와 같습니다. 시계나 도량형 환산기와 같이 설정창에 마땅히 들어갈 내용이 없으면 건너뛰십시오.   <img title="pref_1.PNG" class="attachment" src="/pages/330727/attachments/198333" alt="pref_1.PNG" />   위와 같이 설정창을 꾸미고 실제 에뮬레이터에 돌려 보면 다음과 같은 결과를 얻을 수 있습니다.   <img title="pref_2.PNG" class="attachment" src="/pages/330727/attachments/198334" alt="pref_2.PNG" />   ⑤ 위젯의 가장 기본적인 표현 구조를 body 태그 안에 코딩합니다. 여기서는 위젯 로딩 후 javascript가 동적으로 처리하는 부분 외에 변하지 않는 부분을 말합니다. body 태그 안의 내용은 위젯이 onLoad될 때(위젯을 새로 추가하거나 불러올 때) 보여집니다. (단, 여기에는 일부 제약 조건이 있으니 WZDAPI 스펙의 HTML 부분을 반드시 주의해서 읽어주세요.)   <img title="2.png" class="attachment" src="/pages/330727/attachments/140441" alt="2.png" /> <img title="3.png" class="attachment" src="/pages/330727/attachments/140442" alt="3.png" />   ③ 이제 위젯에 CSS를 적용합니다.   <img title="4.png" class="attachment" src="/pages/330727/attachments/140443" alt="4.png" />   ④ 위젯 내에서 일어나는 모든 동작을 javascript로 코딩합니다. 위젯이 시작될 때 일어나는 모든 내용은 widget.onLoad 함수에 써 주세요. 대부분의 위젯은 onLoad와 onRefresh의 기능이 같으므로 아래와 같이 쓰면 됩니다. 단, appendTo, appendChild 나 += 연산자를 사용할 경우, onRefresh될 때 element가 계속 추가될 수 있으니 유의하세요. 자세한 사항은 WZDAPI 스펙을 참고해 주세요.   <img title="5.png" class="attachment" src="/pages/330727/attachments/140444" alt="5.png" />   여기까지 작성한 결과를 에뮬레이터에 돌려 보면 다음과 같은 결과를 얻을 수 있습니다. 축하드립니다! 아래 화면이 정상 출력되면 위젯 하나를 성공적으로 만드신거랍니다! ^0^   <img title="6.png" class="attachment" src="/pages/330727/attachments/140445" alt="6.png" />   <h1 style="TEXT-ALIGN: left;">보다 다양한 UI 사용하기</h1> WZDAPI 스펙 상에서 제공하는 UWA.Controls 객체를 사용하면 자주 쓰이는 UI를 보다 편리하게 구현하실 수 있습니다. 아래는 UWA.Controls.TabView, UWA.Controls.Pager 그리고 UWA.Contols.Drawer를 사용해 만든 위젯 예제입니다.   <img title="uwa_1.PNG" class="attachment" src="/pages/330727/attachments/198340" alt="uwa_1.PNG" />   이렇게 코딩하시면, 아래와 같이 다채로운 UI를 사용하는 위젯을 만드실 수 있습니다. 탭(TabView)과 페이지네이션(Pager), 그리고 펼쳤다 줄였다 하는 하단 바(Drawer)가 생긴 것 보이시죠?   <img title="uwa_2.PNG" class="attachment" src="/pages/330727/attachments/198341" alt="uwa_2.PNG" /> 접었을 때   <img title="7.png" class="attachment" src="/pages/330727/attachments/140451" alt="7.png" /> 펼쳤을 때     <h1>자주 묻는 질문</h1> <ul> <li>에뮬레이터 <ul> <li> 에뮬레이터에 실어 돌려 보았는데 아무것도 나오지 않습니다. <ul> <li>위자드닷컴에서는 캐릭터셋으로 UTF-8을 사용합니다. 혹, EUC-KR로 작성되지는 않았나 확인해 주십시오.</li> <li>캐릭터셋이 UTF-8인데도 제대로 동작하지 않는 경우, <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 를 <head> 태그 내에 삽입해 주십시오.</li> </ul>   </li> <li> widget:option이 동작하지 않습니다. <ul> <li>IE에서 개발하는 경우 widget:option이 제대로 표현되지 않습니다.</li> <li>이것은 IE의 XHTML 해석 문제로, XHTML을 제대로 지원하는 다른 브라우저(Firefox, Opera등)에서 테스트해 주시기 바랍니다.</li> </ul> </li> <li> UWA.Data의 메서드를 호출해도 변화가 일어나지 않습니다. <ul> <li> Ajax의 보안문제로 다른 호스트에 요청하지 못합니다. WZD.COM 2.0 탑재 플랫폼에서는 자동으로 Proxy기법을 사용해 다른 도메인과의 데이터 통신을 지원하지만, 에뮬레이터에서는 몇가지 다른 방법을 이용해 연결해야 합니다. <ol> <li>서버프로그램과 위젯 파일을 같은 도메인에 두고 활용할 수 있는 경우 <ul> <li>위젯 파일을 서버 프로그램과 같은 도메인에 두고 request하기</li> </ul> </li> <li>서버프로그램과 위젯 파일이 다른 도메인에 있는 경우 <ul> <li>프록시를 사용해 다른 도메인으로 연결하기</li> <li>미리 데이터를 받아 두고 "1. 서버프로그램과 위젯파일을 같은 도메인에 두고 활용할 수 있는 경우" 와 같은 방법으로 개발</li> </ul> </li> </ol> </li> </ul> </li> </ul> </li> </ul>   http://pyo.myid.net/ mintz77 200