277168
[Spec] WZDAPI
12580
2009-09-29T05:18:21Z
http://pyo.springnote.com/pages/277168
2007-06-01T07:26:37Z
<h1>WZD Widget API Specification</h1>
<ul>
<li> 이 문서는 위자드닷컴에서 사용하는 위젯 프로그램의 규약을 정의합니다.</li>
</ul>
<p> </p>
<h2>개요</h2>
<ul>
<li>위자드웍스는 일반 사용자와 업체에서 자유로이 웹 위젯을 제작하여 위자드닷컴(http://wzd.com)에 등록할 수 있는 기능을 제공합니다.</li>
<li>WZDAPI를 이용해 개발되는 웹 위젯들은 이 규약에 명시되어 있는 제반 기능을 사용할 수 있으며, 언급된 몇 가지 제약 조건들을 만족해야 합니다.</li>
</ul>
<p> </p>
<h2>예제</h2>
<ul>
<li>이 문서에서는 다음과 같이 예제를 표현합니다.</li>
</ul>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p>이 문단은 코드를 나타냅니다.<br />
<span style="COLOR: #0000ff;">파란색은 사용자의 의도에 따라 변경될 부분을 의미합니다.</span><br />
<span style="COLOR: #009966;">초록색은 이 글에서 설명 중인 부분을 의미합니다.</span><span style="COLOR: #ff0000;">붉은색은 오류가 있는 부분임을 의미합니다.</span></p>
</div>
<p> </p>
<h2>구성</h2>
<ul>
<li>WZDAPI를 따르는 위젯은 다음 조건들을 만족해야 합니다.
<ul>
<li>위젯은 XHTML 형식의 파일 하나로 구성됩니다.</li>
<li>이 파일은 UTF-8 문자셋으로 작성되어야 합니다.</li>
<li>이 파일의 XML namespace로 <a href="http://wzdapi.com/widget/">http://wzdapi.com/widget/</a> 을 포함해야 합니다.</li>
</ul>
</li>
<li>위 조건들을 만족하지 않는 경우 해당 위젯 파일은 위자드닷컴에 정상적으로 등록이 불가능하므로 유의하십시오.</li>
<li>이 파일에 주어진 외부 CSS나 외부 자바스크립트 파일은 위자드닷컴에 등록할 때 자동으로 제외됩니다. 개발 및 테스트를 마친 후 위자드닷컴에 등록하실 때는 반드시 필요한 외부 CSS나 외부 자바스크립트 파일을 XHTML 문서 안에 포함시켜 등록하십시오.</li>
</ul>
<p> </p>
<h2>위젯 이름</h2>
<ul>
<li>위젯 XHTML 문서는 head 태그 안에 위젯 이름을 포함한 여러가지 정보를 담게됩니다.</li>
<li>위젯의 이름은 다음과 같이 표현됩니다.</li>
</ul>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p><title><span style="COLOR: #0000ff;">이 위젯의 이름이 여기에</span></title></p>
</div>
<p> </p>
<h2>위젯 정보</h2>
<ul>
<li>이름을 제외한 나머지 정보는 meta 태그를 통해 표현됩니다. 형식은 다음과 같습니다.</li>
</ul>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p><meta name="항목 이름" content="항목 값" /></p>
</div>
<ul>
<li>위젯이 필수적으로 포함하여야 할 정보들은 다음과 같습니다.</li>
</ul>
<table class="datatable">
<thead>
<tr>
<th>항목 이름</th>
<th>의미</th>
</tr>
</thead>
<tbody>
<tr>
<td>apiVersion</td>
<td>이 위젯이 사용한 API 버전, 반드시 값은 "1.0"이어야 합니다.</td>
</tr>
<tr>
<td>author</td>
<td>이 위젯을 제작한 사람·단체의 이름</td>
</tr>
</tbody>
</table>
<ul>
<li>그 밖에 아래와 같은 정보들을 명시할 수 있습니다.</li>
</ul>
<table class="datatable">
<thead>
<tr>
<th>항목 의미</th>
<th>의미</th>
</tr>
</thead>
<tbody>
<tr>
<td>website</td>
<td>이 위젯을 제작한 사람·단체의 웹사이트의 주소</td>
</tr>
<tr>
<td>description</td>
<td>이 위젯에 대한 설명</td>
</tr>
<tr>
<td>version</td>
<td>이 위젯의 버전</td>
</tr>
<tr>
<td>autoRefresh</td>
<td>이 위젯이 내용을 갱신할 시간 간격 (분 단위)</td>
</tr>
</tbody>
</table>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p><meta name="apiVersion" content="1.0" /><br />
<meta name="author" content="Bart Simpson" /><br />
<meta name="website" content="<a href="http://www.thesimpsons.com/">http://www.thesimpsons.com/</a>" /><br />
<meta name="description" content="All the things about the Simpsons." /><br />
<meta name="version" content="0.99" /><br />
<meta name="autoRefresh" content="60" /></p>
</div>
<p> </p>
<h2>아이콘</h2>
<ul>
<li>위젯 목록이나 제목표시줄에 나타날 아이콘을 다음과 같이 지정합니다. 위자드닷컴에서는 32 × 32 이상 48 × 48 이하의 크기를 지원합니다.</li>
</ul>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p><link rel="icon" type="image/png" href="<a href="http://mysite.com/myicon.png">http://mysite.com/myicon.png</a>" /></p>
</div>
<p> </p>
<h2>설정창 구성</h2>
<ul>
<li>위젯의 설정창은 preferences 태그를 통해서 표현하며, 이 태그는 <a href="http://wzdapi.com/widget/namespace">http://wzdapi.com/widget/namespace</a> 에 속해 있습니다. 일반적인 사용 패턴은 다음과 같습니다.</li>
</ul>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p style="MARGIN-LEFT: 1em;">...</p>
<p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"</p>
<p style="MARGIN-LEFT: 1em;">"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>"></p>
<p><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"</p>
<p style="MARGIN-LEFT: 1em;"><span style="COLOR: #009966;">xmlns:widget="</span><a href="http://wzdapi.com/widget/"><span style="COLOR: #009966;">http://wzdapi.com/widget/</span></a>"></p>
<p><head></p>
<p style="MARGIN-LEFT: 1em;"><title>SampleWidget</title></p>
<p style="MARGIN-LEFT: 1em;"><widget:preferences><br />
...<br />
<span style="COLOR: #009966;"></widget:preferences></span><br />
...</p>
</div>
<ul>
<li> preferences 태그는 다수의 preference 태그를 포함하며 이 태그의 형식은 다음과 같습니다.</li>
</ul>
<p> </p>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p><widget:preference name="<span style="COLOR: #0000ff;">이름</span>" type="<span style="COLOR: #0000ff;">종류</span>" label="<span style="COLOR: #0000ff;">설명</span>" defaultValue="<span style="COLOR: #0000ff;">기본값</span>" min="<span style="COLOR: #0000ff;">최소값</span>" step="<span style="COLOR: #0000ff;">간격</span>" max="최대값" /></p>
</div>
<ul>
<li>이름에는 자바스크립트를 통해 값에 접근할 때 사용할 이름을 표시합니다.</li>
<li>종류에는 text, boolean, hidden, list, range, textarea 중 하나가 들어갈 수 있습니다. 생략하면 text로 가정합니다. 각각의 역할에 대해서는 아래에서 설명합니다.</li>
<li>설명에는 실제 설정창에서 표시될 해당 란에 대한 설명을 넣습니다. 종류가 hidden인 경우 설정창에서 보이지 않기 때문에 이 값은 무시됩니다.</li>
<li>기본값에는 위젯을 처음으로 사용할 때 사용할 값을 넣습니다.</li>
<li>최소값, 간격, 최대값은 종류 값이 range인 경우 사용됩니다. 자세한 내용은 아래에서 설명합니다.</li>
</ul>
<table class="datatable">
<thead>
<tr>
<th>종류</th>
<th>설명</th>
<th>
<p>기본값</p>
<p>(속성이 생략 되었을 경우)</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>일반 문자열을 입력 받을 수 있는 기입란을 보여줍니다.</td>
<td>(빈 문자열)</td>
</tr>
<tr>
<td>textarea</td>
<td>여러 줄의 문자열을 입력 받을 수 있는 기입란을 보여줍니다.</td>
<td>(빈 문자열)</td>
</tr>
<tr>
<td>hidden</td>
<td>입력란을 외부에 보여주지 않습니다.</td>
<td>(빈 문자열)</td>
</tr>
<tr>
<td>boolean</td>
<td>참과 거짓을 선택할 수 있는 선택란을 보여줍니다.</td>
<td>
<p>false</p>
</td>
</tr>
<tr>
<td>list</td>
<td>widget:option 태그를 이용하여 다수의 항목을 정의하게 되며, 이들 중 하나를 고를 수 있는 선택란을 보여줍니다.<br />
widget:option의 사용법은 아래의 예를 참고하세요.</td>
<td>(첫 번째 항목)</td>
</tr>
<tr>
<td>range</td>
<td>list와 비슷하나 widget:option 태그 대신 min, step, max속성을 사용하여<br />
다수의 숫자 목록에서 고를 수 있는 선택란을 보여줍니다.</td>
<td>(가장 작은 값)</td>
</tr>
</tbody>
</table>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p><widget:preferences></p>
<p style="MARGIN-LEFT: 1em;"><widget:preference name="name" type="text" label="이름" defaultValue="홍길동" /></p>
<p style="MARGIN-LEFT: 1em;"><widget:preference name="ssn" type="hidden" label="주민등록번호" defaultValue="800101-2143657" /></p>
<p style="MARGIN-LEFT: 1em;"><widget:preference name="sex" type="boolean" label="성별" defaultValue="true"/></p>
<p style="MARGIN-LEFT: 1em;"><widget:preference name="age" type="range" label="나이대" defaultValue="20" min="0" step="10" max="100" /></p>
<p style="MARGIN-LEFT: 1em;"><widget:preference name="address" type="textarea" label="주소" defaultValue="지하철 1호선 시청역&#10;3번 출구 25번째 계단" /></p>
<p style="MARGIN-LEFT: 1em;"><widget:preference name="occupation" type="list" label="띠" defaultValue="0"></p>
<p style="MARGIN-LEFT: 2em;"><widget:option label="쥐" value="0" /></p>
<p style="MARGIN-LEFT: 2em;"><widget:option label="소" value="1" /></p>
<p style="MARGIN-LEFT: 2em;"><widget:option label="호랑이" value="2" /></p>
<p style="MARGIN-LEFT: 2em;"><widget:option label="토끼" value="3" /></p>
<p style="MARGIN-LEFT: 2em;"><widget:option label="용" value="4" /></p>
<p style="MARGIN-LEFT: 2em;"><widget:option label="뱀" value="5" /></p>
<p style="MARGIN-LEFT: 2em;"><widget:option label="말" value="6" /></p>
<p style="MARGIN-LEFT: 2em;"><widget:option label="양" value="7" /></p>
<p style="MARGIN-LEFT: 2em;"><widget:option label="원숭이" value="8" /></p>
<p style="MARGIN-LEFT: 2em;"><widget:option label="닭" value="9" /></p>
<p style="MARGIN-LEFT: 2em;"><widget:option label="개" value="10" /></p>
<p style="MARGIN-LEFT: 2em;"><widget:option label="돼지" value="11" /></p>
<p style="MARGIN-LEFT: 1em;"></widget:preference></p>
<p></widget:preferences></p>
</div>
<p> </p>
<h2>CSS</h2>
<ul>
<li>위젯 XHTML 문서에서 style 태그를 사용하여 CSS을 포함할 수 있습니다. 제약 조건은 다음과 같습니다.
<ul>
<li>style 태그의 media 문은 무시됩니다.</li>
<li>@rule은 사용할 수 없습니다.</li>
<li>CSS rule은 html, head와 그 아래에 속하는 태그를 포함할 수 없습니다.</li>
<li>CSS rule은 특정 HTML id를 지칭하는 # 제어자를 사용할 수 없습니다.</li>
</ul>
</li>
<li>다른 사항에 대해서는 사용자가 이용하는 브라우저의 기능을 따릅니다.</li>
</ul>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p><style><br />
<span style="COLOR: #ff0000;">@import 'http://wzd.com/candy.css';</span><br />
* { margin: 0; }<br />
<span style="COLOR: #ff0000;">html { font-family: sans-serif; }</span><br />
body { font-size: 75%; }<br />
a { color: blue; }<br />
a:hover { color: red; }<br />
p { color: green; }<br />
<span style="COLOR: #ff0000;">#container { width: 10em; }</span><br />
.item { background: silver }<br />
</style></p>
</div>
<ul>
<li>위자드웍스에서 기본적으로 적용하는 CSS는 다음과 같습니다.</li>
</ul>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p> * { margin: 0; padding: 0; }<br />
body { font: 75% sans-serif; }<br />
a { text-decoration: none; }<br />
a:hover { text-decoration: underline; }</p>
</div>
<p> </p>
<h2>HTML</h2>
<ul>
<li>위젯 XHTML 문서의 body 태그 안에 구성은 사용자의 위자드닷컴에 접속하여 위젯을 불러올 때나 위젯을 새로 추가했을 때 그대로 적용됩니다.</li>
<li>제약 조건은 다음과 같습니다.</li>
<li><br />
<ul>
<li>id, accesskey 속성을 사용할 수 없습니다.</li>
<li>onclick, onmouseover 등과 같은 이벤트 핸들러 속성을 사용할 수 없습니다. 자바스크립트를 통해 동적으로 이벤트를 지정하십시오.</li>
<li>a 태그의 href 속성은 "javascript:"로 시작하는 값을 가질 수 없습니다.</li>
<li>Internet Explorer에서 인식하는 conditional comment는 위자드닷컴에서는 지원하지 않습니다.</li>
<li>h1, h2, h3 태그는 위자드닷컴에서 다른 용도로 사용중이므로 문서의 구조화를 위해 사용을 지양 해 주십시오.</li>
</ul>
</li>
</ul>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p><body><br />
<ol class="football_club"><br />
<li>Liverpool</li><br />
<li>Manchester United</li><br />
<li>Arsenal</li><br />
<li>Chelsea</li><br />
</ol><br />
<form id="search"><br />
<fieldset><br />
<legend>선수 이름으로 검색</legend><br />
<input type="text" onfocus="highlight(this)" /><br />
<input type="submit" class="submit" value="찾기" /><br />
</fieldset><br />
</form><br />
<p><a href="javascript:window.open('http://www.premierleague.com/')">EPL</a></p><br />
</body></p>
</div>
<p> </p>
<h2>Javascript</h2>
<h3 style="MARGIN-LEFT: 1em;">XHTML과 Javascript</h3>
<ul style="MARGIN-LEFT: 1em;">
<li>XHTML에서는 script 태그 안에서도 <, >, & 등의 문자를 반드시 이스케이핑 해야하므로 javascript 코드를 쓰기에는 불편하므로 이를 위해 보통 XML의 CDATA 기능을 사용하게 됩니다. 이 경우,XHTML을 완벽히 지원하지 않는 브라우저에 위해 다음과 같은 방법으로 문제를 피할 수 있습니다.</li>
</ul>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p style="MARGIN-LEFT: 1em;"> <script><br />
//<![CDATA[<br />
// 여기에 javascript 코드가 들어갑니다.<br />
//]]><br />
</script></p>
</div>
<p> </p>
<h3 style="MARGIN-LEFT: 1em;">DOM</h3>
<ul style="MARGIN-LEFT: 1em;">
<li>WZDAPI에서는 일반 웹페이지에서와는 달리 DOM의 최상위 window나 document 등의 객체를 사용할 수 없습니다. 아래에 나올 widget 객체를 이용하여 위젯과 위자드닷컴이 동작하게 됩니다.</li>
</ul>
<p> </p>
<h3 style="MARGIN-LEFT: 1em;">라이브러리</h3>
<ul style="MARGIN-LEFT: 1em;">
<li>
<p>다음 외부 라이브러리를 지원합니다.</p>
<ul>
<li>Prototype† 1.5.1의 일부 기능
<ul>
<li>(Array 확장과 $A, Hash 확장과 $H, Event, widget.$element를 이용한 Element 확장 기능)</li>
<li>† Prototype에 대해서는 해당 웹사이트(<a href="http://www.prototypejs.org/">http://www.prototypejs.org/</a>)를 참고하십시오.</li>
<li>Prototype의 공개 메뉴얼의 번역본은 이 사이트(<a href="http://openframework.or.kr/framework_reference/prototype_js/1.4.0/prototype.js.html">http://openframework.or.kr/framework_reference/prototype_js/1.4.0/prototype.js.html</a>)를 참고하십시오. 번역본은 구버전을 기준으로 작성되었으므로 주의하십시오.</li>
</ul>
</li>
</ul>
</li>
</ul>
<p> </p>
<h3 style="MARGIN-LEFT: 1em;">widget 객체</h3>
<h4 style="MARGIN-LEFT: 2em;">이벤트 핸들러</h4>
<table class="datatable">
<thead>
<tr>
<th>종류</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>onLoad</td>
<td>위젯이 사용자의 웹브라우저에서 새로 시작할 때 호출됩니다.</td>
</tr>
<tr>
<td>onRefresh</td>
<td>위젯의 autoRefresh 설정에 의해, 또는 사용자가 설정값을 변경하여 저장하는 순간 호출됩니다.</td>
</tr>
<tr>
<td>onResize(Number width, Number height)</td>
<td>사용자에 의해 위젯의 크기가 변경되었을 경우 호출됩니다. 인자로는 폭과 높이를 넘겨줍니다.</td>
</tr>
<tr>
<td>onUpdateTitle(String newTitle)</td>
<td>
<p>사용자에 의해, 또는 widget.setTitle 메소드에 의해 위젯 제목이 변경되었을 경우 호출됩니다. 인자로 새 제목을 넘겨줍니다.</p>
</td>
</tr>
</tbody>
</table>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p>widget.onLoad = function() {</p>
<p style="MARGIN-LEFT: 1em;">widget.body.removeClassName('loading');</p>
<p style="MARGIN-LEFT: 1em;">var region = widget.getValue('region');</p>
<p style="MARGIN-LEFT: 1em;">MyWidget.setup(region);</p>
<p>};<br />
widget.onRefresh = function() {</p>
<p style="MARGIN-LEFT: 1em;">var region = widget.getValue('region');</p>
<p style="MARGIN-LEFT: 1em;">MyWidget.setup(region);</p>
<p>};</p>
<p>widget.onResize = function(width, height) {</p>
<p style="MARGIN-LEFT: 1em;">var elem = widget.body.getElementsByTagName('ul')[0];</p>
<p style="MARGIN-LEFT: 1em;">elem.style.width = width + 'px';</p>
<p style="MARGIN-LEFT: 1em;">elem.style.height = height - 65 + 'px';</p>
<p>};</p>
<p>widget.onUpdateTitle = function(newTitle) {</p>
<p style="MARGIN-LEFT: 1em;">widget.setValue('myTitle', newTitle);</p>
<p>};</p>
</div>
<p> </p>
<h4 style="MARGIN-LEFT: 2em;">메소드</h4>
<table class="datatable">
<thead>
<tr>
<th>종류</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>log(String msg)</td>
<td>웹브라우저가 지원하는 경우 javascript 콘솔 창에 메시지를 보여 줍니다.</td>
</tr>
<tr>
<td>setTitle(String newTitle)</td>
<td>위젯의 제목을 newTitle로 변경합니다.</td>
</tr>
<tr>
<td>getValue(String name)</td>
<td>위젯 설정의 name을 이름으로 하는 설정 값을 가져옵니다.</td>
</tr>
<tr>
<td>setValue(String name, Object value)</td>
<td>위젯 설정의 name을 이름으로 하는 설정을 value를 값으로 변경합니다.</td>
</tr>
<tr>
<td>createElement(String tagName)</td>
<td>tagName을 태그의 이름으로 하는 DOM element를 생성합니다.</td>
</tr>
<tr>
<td>openURL(String url)</td>
<td>웹주소 url을 새 창으로 엽니다.</td>
</tr>
</tbody>
</table>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p>var MyWidget = {</p>
<p style="MARGIN-LEFT: 1em;">onHit: function() {</p>
<p style="MARGIN-LEFT: 2em;">widget.log("You've just clicked!");</p>
<p style="MARGIN-LEFT: 2em;">var hit = widget.getValue('hit') + 1;</p>
<p style="MARGIN-LEFT: 2em;">widget.setValue('hit', hit);</p>
<p style="MARGIN-LEFT: 2em;">widget.setTitle('MyGreatWidget (' + hit + ')');</p>
<p style="MARGIN-LEFT: 2em;">widget.openURL('http://ie7.com');</p>
<p style="MARGIN-LEFT: 2em;">return false;</p>
<p style="MARGIN-LEFT: 1em;">}</p>
<p>};</p>
<p>widget.onLoad = function()</p>
<p>{</p>
<p style="MARGIN-LEFT: 1em;">var elem = widget.createElement('img');</p>
<p style="MARGIN-LEFT: 1em;">elem.src = '/anEvil.gif';</p>
<p style="MARGIN-LEFT: 1em;">elem.onclick = MyWidget.onHit;</p>
<p style="MARGIN-LEFT: 1em;">widget.body.appendChild(elem);</p>
<p>};</p>
</div>
<p> </p>
<h4 style="MARGIN-LEFT: 2em;">속성</h4>
<table class="datatable">
<thead>
<tr>
<th>종류</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>body</td>
<td>일반 HTML 문서의 document.body에 해당하는 위젯의 최상위 DOM element를 가리킵니다. 이 element는 기본적으로 UWA.$element 확장이 적용되어 있습니다. 자세한 내용은 아래를 참고하세요.</td>
</tr>
<tr>
<td>lang</td>
<td>사용자의 언어 설정을 알려줍니다. ISO 639-1을 따르는 두 개의 소문자 알파벳으로 표현됩니다. (ko, en, ja, 등)</td>
</tr>
<tr>
<td>locale</td>
<td>사용자의 지역 설정을 알려줍니다. ISO 3166-1 alpha-2을 따르는 두 개의 대문자 알파벳으로 표현됩니다. (KR, US, JP, 등)</td>
</tr>
</tbody>
</table>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p>var MyTranslation = {</p>
<p style="MARGIN-LEFT: 1em;">ko: {</p>
<p style="MARGIN-LEFT: 2em;">title: '심슨',</p>
<p style="MARGIN-LEFT: 2em;">text: '호머, 마지, 바트, 매기, 리사',</p>
<p style="MARGIN-LEFT: 2em;">locale: {</p>
<p style="MARGIN-LEFT: 3em;">KR: '한국',</p>
<p style="MARGIN-LEFT: 3em;">US: '미국',</p>
<p style="MARGIN-LEFT: 3em;">unknown: '알 수 없는 지역'</p>
<p style="MARGIN-LEFT: 2em;">}</p>
<p style="MARGIN-LEFT: 1em;">},</p>
<p style="MARGIN-LEFT: 1em;">en: {</p>
<p style="MARGIN-LEFT: 2em;">title: 'The Simpsons',</p>
<p style="MARGIN-LEFT: 2em;">text: 'Hormer, Marge, Bart, Maggie, Lisa',</p>
<p style="MARGIN-LEFT: 2em;">locale: {</p>
<p style="MARGIN-LEFT: 3em;">KR: 'South Korea',</p>
<p style="MARGIN-LEFT: 3em;">US: 'United States',</p>
<p style="MARGIN-LEFT: 3em;">unknown: 'Unknown location'</p>
<p style="MARGIN-LEFT: 2em;">}</p>
<p style="MARGIN-LEFT: 1em;">}</p>
<p>};</p>
<p>widget.onLoad = function()</p>
<p>{</p>
<p style="MARGIN-LEFT: 1em;">var aTranslation = MyTranslation[widget.lang] || MyTranslation.ko;</p>
<p style="MARGIN-LEFT: 1em;">widget.setTitle(aTranslation.title);</p>
<p style="MARGIN-LEFT: 1em;">widget.body.innerHTML = aTranslation.text + ' / ' +</p>
<p style="MARGIN-LEFT: 2em;">(aTranslation.locale[widget.locale] || aTranslation.locale.unknown);</p>
<p>};</p>
</div>
<p> </p>
<h3 style="MARGIN-LEFT: 1em;">UWA 객체</h3>
<table class="datatable">
<thead>
<tr>
<th>종류</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>$element(DOMElement el)</td>
<td>DOM element를 확장시킵니다. 확장된 DOM element에 대한 설명은 아래에서 다룹니다.</td>
</tr>
</tbody>
</table>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p>var elem = widget.body.getElementsByClassName('EPL')[0];<br />
elem = UWA.$element(elem);<br />
elem = elem.getElementsByClassName('LiverpoolFC')[0];</p>
</div>
<p> </p>
<h4 style="MARGIN-LEFT: 2em;">UWA.Data 객체</h4>
<table class="datatable">
<thead>
<tr>
<th>종류</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>getText(String url, Function callback)</td>
<td>웹주소 url로 부터 내용을 받아 문자열 형태로 callback 함수에 넘겨줍니다.</td>
</tr>
<tr>
<td>getJson(String url, Function callback)</td>
<td>웹주소 url로 부터 JSON 형태의 데이터를 받아 callback 함수에 넘겨줍니다. 해당 데이터가 올바른 JSON 형식이 아닐 경우 callback은 호출되지 않습니다.</td>
</tr>
<tr>
<td>getXml(String url, Function callback)</td>
<td>웹주소 url로 부터 XML 형태의 데이터를 받아 callback 함수에 넘겨줍니다. 해당 데이터가 올바른 XML 형식이 아닐 경우 callback은 호출되지 않습니다.</td>
</tr>
<tr>
<td>getFeed(String url, Function callback)</td>
<td>웹주소 url로 부터 RSS 형태의 데이터를 받아 callback 함수로 넘겨줍니다. 넘겨주는 데이터의 구조는 아래에서 설명합니다.</td>
</tr>
<tr>
<td>request(String url, Object options)</td>
<td>웹주소 url로 부터 데이터를 받아 callback 함수로 넘겨줍니다. options는 Prototype 라이브러리의 Ajax.Request 클래스가 두 번째 인자로 받아들이는 옵션 구조체와 같습니다. 이 메소드는 위의 네 가지 메소드로는 해결하기 어려운 HTTP 요청을 보내야 할 경우를 위해 준비되었습니다.</td>
</tr>
</tbody>
</table>
<ul style="MARGIN-LEFT: 2em;">
<li>UWA.Data.getFeed를 통해 넘겨 받은 데이터의 구조는 다음과 같습니다.
<ul>
<li>htmlUrl : RSS피드를 제공하는 사이트의 주소입니다.</li>
<li>title : RSS피드의 제목입니다.</li>
<li>content : RSS피드의 요약문입니다.</li>
<li>items (배열) : RSS피드가 가진 모든 글을 배열로 가지며 각각은 다음의 항목을 가집니다.
<ul>
<li>title : 글의 제목입니다.</li>
<li>link : 글의 웹페이지 주소입니다.</li>
<li>content : 글의 내용 또는 요약본입니다.</li>
<li>date : 글의 작성 시각입니다.</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p>UWA.Data.getText('http://asdf.com', function(text) {</p>
<p style="MARGIN-LEFT: 1em;">widget.body.innerHTML = text.escapeHTML();</p>
<p>});</p>
<p>UWA.Data.getFeed('http://blog.wzd.com/rss', function(feed) {</p>
<p style="MARGIN-LEFT: 1em;">widget.setTitle(feed.item[0].title + ' - ' + feed.title);</p>
<p style="MARGIN-LEFT: 1em;">widget.body.innerHTML = feed.item[0].content.escapeHTML();</p>
<p>});</p>
</div>
<p> </p>
<h4 style="MARGIN-LEFT: 2em;">UWA.Controls.Pager</h4>
<ul style="MARGIN-LEFT: 2em;">
<li>이 클래스는 페이지 컨트롤을 생성합니다.</li>
</ul>
<table class="datatable">
<thead>
<tr>
<th>종류</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>생성자()</td>
<td>새 페이지 컨트롤을 생성합니다.</td>
</tr>
<tr>
<td>onChange(Number pageNo)</td>
<td>사용자가 페이지를 전환하기 위해 버튼을 누르면 이 이벤트가 호출되며, 인자로 페이지 번호를 넘겨줍니다.</td>
</tr>
<tr>
<td>setMaxPageNumber(Number pageNo)</td>
<td>
<p>총 페이지 수를 pageNo로 설정합니다.</p>
</td>
</tr>
<tr>
<td>selectPage(Number pageNo)</td>
<td>페이지 번호 pageNo를 선택합니다.</td>
</tr>
<tr>
<td>appendTo(DOMElement el)</td>
<td>페이지 컨트롤을 el의 마지막 자식으로 붙입니다.</td>
</tr>
</tbody>
</table>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p>var pager = new UWA.Controls.Pager();</p>
<p>pager.onChange = function(pageNo) {</p>
<p style="MARGIN-LEFT: 1em;">widget.body.getElementsByClassName('contents')[0].innerHTML = '총 3페이지 중 ' + pageNo + '번째 페이지';</p>
<p>};</p>
<p>pager.setMaxPageNumber(3);</p>
<p>pager.selectPage(0);</p>
<p>pager.appendTo(widget.body.getElementsByClassName('pagerHere')[0]);</p>
</div>
<p> </p>
<h4 style="MARGIN-LEFT: 2em;"> UWA.Controls.TabView</h4>
<ul style="MARGIN-LEFT: 2em;">
<li>이 클래스는 탭 컨트롤을 생성합니다.</li>
</ul>
<table class="datatable">
<thead>
<tr>
<th>종류</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>생성자(Type type)</td>
<td>type 형태의 탭 컨트롤을 생성합니다. type 값에는 UWA.Controls.TabView.TYPE1 (기본값), UWA.Controls.TabView.TYPE2가 들어갈 수 있으며 생략 가능합니다. 이 두 값은 차후에 변경될 예정입니다.</td>
</tr>
<tr>
<td>appendTo(DOMElement el)</td>
<td>탭 컨트롤을 el의 마지막 자식으로 붙입니다.</td>
</tr>
<tr>
<td>observe(String type, Function callback)</td>
<td>
<p>type은 항상 문자열 'activeTabView'입니다. 사용자가 탭을 선택할 때 마다 callback을 호출합니다. callback은 인자 하나를 받으며, addTab에 사용된 id가 넘어옵니다.</p>
<p>Pager와는 달리 onChange를 제공하지 않습니다.</p>
</td>
</tr>
<tr>
<td>addTab(String id, { text: html })</td>
<td>고유이름을 id로 하는 새 탭을 추가합니다. 탭 내용에는 html이 들어가며, 문자열에 들어있는 HTML 코드는 적용됩니다.</td>
</tr>
<tr>
<td>selectTab(String id)</td>
<td>고유이름이 id인 탭을 선택합니다.</td>
</tr>
</tbody>
</table>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p>var tabView = new UWA.Controls.TabView();</p>
<p>tabView.observe('activeTabView', function(id) {</p>
<p style="MARGIN-LEFT: 1em;">widget.body.getElementsByClassName('contents')[0].innerHTML = 'Have you got any question to ' + id + '?';</p>
<p>});</p>
<p>tabView.addTab('Hormer', { text: 'Hormer' });</p>
<p>tabView.addTab('Marge' , { text: 'Marge' });</p>
<p>tabView.addTab('Bart' , { text: 'Bart' });</p>
<p>tabView.addTab('Maggie', { text: 'Maggie' });</p>
<p>tabView.addTab('Lisa' , { text: 'Lisa' });</p>
<p>tabView.selectTab('Bart');</p>
<p>tabView.appendTo(widget.body.getElementsByClassName('tabHere')[0]);</p>
</div>
<p> </p>
<h4 style="MARGIN-LEFT: 2em;">UWA.Controls.Drawer</h4>
<ul style="MARGIN-LEFT: 2em;">
<li>이 클래스는 접기 버튼을 생성합니다.</li>
</ul>
<table class="datatable">
<thead>
<tr>
<th>종류</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>생성자()</td>
<td>새 접기 컨트롤을 생성합니다. 펼쳐진 상태로 시작합니다.</td>
</tr>
<tr>
<td>show()</td>
<td>펼친 상태로 변경합니다.</td>
</tr>
<tr>
<td>hide()</td>
<td>접은 상태로 변경합니다.</td>
</tr>
<tr>
<td>toggle()</td>
<td>접은 경우 펼친 상태, 펼쳐진 경우 접은 상태로 변경합니다.</td>
</tr>
<tr>
<td>onChange(Boolean folded)</td>
<td>사용자가 버튼을 누르면 이 이벤트가 호출되며, 인자로 접힌 상태인지의 여부를 넘겨줍니다.</td>
</tr>
<tr>
<td>appendTo(DOMElement el)</td>
<td>접기 컨트롤을 el의 마지막 자식으로 붙입니다.</td>
</tr>
</tbody>
</table>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p>var drawer = new UWA.Controls.Drawer();<br />
drawer.hide();<br />
drawer.onChange = function(folded) {</p>
<p style="MARGIN-LEFT: 1em;">widget.body.getElementsByClassName('ul')[0][folded ? 'hide' : 'show']();</p>
<p>};<br />
drawer.appendTo(widget.body.getElementsByClassName('drawerHere')[0]);</p>
</div>
<p> </p>
<h4 style="MARGIN-LEFT: 2em;">HTMLElement의 UWA.$element 확장</h4>
<ul style="MARGIN-LEFT: 2em;">
<li>UWA.$element 메소드에 의해 DOM element를 확장할 수 있으며, 확장된 DOM element는 Prototype 라이브러리의 Element 메소드와 함께 아래의 메소드를 추가적으로 갖게 됩니다.</li>
</ul>
<table class="datatable">
<thead>
<tr>
<th>종류</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>getChildren()</td>
<td>자식 element 배열을 얻습니다.</td>
</tr>
<tr>
<td>getParent()</td>
<td>부모 element를 얻습니다.</td>
</tr>
<tr>
<td>setHTML(String html)</td>
<td>내용을 html로 채웁니다. 문자열에 들어있는 HTML 코드가 적용됩니다.</td>
</tr>
<tr>
<td>setText(String text)</td>
<td>내용을 text로 채웁니다. 문자열에 들어있는 HTML 코드는 표현되지 않고 문자 그대로 표시됩니다.</td>
</tr>
<tr>
<td>appendText(String text)</td>
<td>element의 마지막에 text를 추가합니다. HTML 코드는 표현되지 않고 문자 그대로 표시됩니다.</td>
</tr>
<tr>
<td>setContent(String content)</td>
<td>setHTML과 같습니다.</td>
</tr>
<tr>
<td>addContent(String content)</td>
<td>element의 마지막에 div 태그를 추가하고 content를 그 내용물로 채웁니다. HTML 코드가 적용됩니다.</td>
</tr>
</tbody>
</table>
<p> </p>
<h4 style="MARGIN-LEFT: 2em;">String 확장 메소드</h4>
<table class="datatable">
<thead>
<tr>
<th>종류</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>Boolean isEmail()</td>
<td>문자열이 E-mail 주소 형식이면 참을 돌립니다.</td>
</tr>
<tr>
<td>String trim()</td>
<td>앞뒤의 공백을 제거한 문자열을 돌립니다.</td>
</tr>
<tr>
<td>String truncate(Number length)</td>
<td>length 만큼 문자열을 자른 후, 마지막에 ...을 붙입니다.</td>
</tr>
</tbody>
</table>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p>var str = '\tbill@gates.net\n';<br />
str.isEmail(); // true<br />
str = str.trim(); // str == <a href="/pages/mailto:%27bill@gates.net%27">'bill@gates.net'</a><br />
str = str.truncate(10); // str == <a href="/pages/mailto:%27bill@gates%27">'bill@gates'</a></p>
</div>
<p> </p>
<h4 style="MARGIN-LEFT: 2em;">Array 확장 메소드</h4>
<table class="datatable">
<thead>
<tr>
<th>종류</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>Array normalize(Number sum)</td>
<td>배열의 모든 값의 합이 sum이 되도록 각 값을 같은 비율로 곱한 배열을 돌립니다.</td>
</tr>
<tr>
<td>Boolean equals(Array anArray)</td>
<td>anArray와 순서대로 각 항목의 값이 같은지 비교합니다.</td>
</tr>
</tbody>
</table>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p>var a = [10, 20, 30, 40];<br />
a = a.normalize(10); // a == [1, 2, 3, 4]<br />
a.equals([1, 2, 3, 4]); // true<br />
a.equals([4, 3, 2, 1]); // false</p>
</div>
<p> </p>
<p> </p>
<h2>예제</h2>
<ul>
<li>아래 예는 간단한 메모 위젯입니다. 전체 구조를 파악하는데 참고하십시오.</li>
</ul>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"</p>
<p style="MARGIN-LEFT: 1em;"><a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" title="" class="external">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></a></p>
<p><html <a href="/pages/xmlns=" title="xmlns=" class="external">xmlns="http://www.w3.org/1999/xhtml"</a></p>
<p style="MARGIN-LEFT: 1em;"><a href="http://wzdapi.com/widget/" title="xmlns:widget=" class="external">xmlns:widget="http://wzdapi.com/widget/"></a></p>
<p><head></p>
<p style="MARGIN-LEFT: 1em;"><title>메모장</title></p>
<p style="MARGIN-LEFT: 1em;"><meta name="author" content="WzdWorks" /></p>
<p style="MARGIN-LEFT: 1em;"><meta name="description" content="간단한 메모장입니다." /></p>
<p style="MARGIN-LEFT: 1em;"><meta name="apiVersion" content="1.0" /></p>
<p style="MARGIN-LEFT: 1em;"><widget:preferences></p>
<p style="MARGIN-LEFT: 2em;"><preference name="memo" type="hidden" /></p>
<p style="MARGIN-LEFT: 1em;"></widget:preferences></p>
<p style="MARGIN-LEFT: 1em;"><style></p>
<p style="MARGIN-LEFT: 1em;">/*<![CDATA[*/</p>
<p style="MARGIN-LEFT: 2em;">textarea {</p>
<p style="MARGIN-LEFT: 3em;">border: 1px solid black;</p>
<p style="MARGIN-LEFT: 3em;">width: 100%;</p>
<p style="MARGIN-LEFT: 3em;">height: 100%;</p>
<p style="MARGIN-LEFT: 3em;">overflow: auto;</p>
<p style="MARGIN-LEFT: 2em;">}</p>
<p style="MARGIN-LEFT: 1em;">/*]]>*/</p>
<p style="MARGIN-LEFT: 1em;"></style></p>
<p style="MARGIN-LEFT: 1em;"><script></p>
<p style="MARGIN-LEFT: 1em;">//<![CDATA[</p>
<p style="MARGIN-LEFT: 2em;">var Memo = {</p>
<p style="MARGIN-LEFT: 3em;">onChange: function() {</p>
<p style="MARGIN-LEFT: 4em;">widget.setValue('memo', this.value);</p>
<p style="MARGIN-LEFT: 3em;">}</p>
<p style="MARGIN-LEFT: 2em;">};</p>
<p style="MARGIN-LEFT: 2em;">widget.onLoad = function()</p>
<p style="MARGIN-LEFT: 2em;">{</p>
<p style="MARGIN-LEFT: 3em;">var elem = widget.body.getElementsByTagName('textarea')[0];<br />
elem.value = widget.getValue('memo');<br />
elem.onchange = Memo.onChange;</p>
<p style="MARGIN-LEFT: 2em;">};</p>
<p style="MARGIN-LEFT: 1em;">//]]></p>
<p style="MARGIN-LEFT: 1em;"></script></p>
<p></head></p>
<p><body></p>
<p style="MARGIN-LEFT: 1em;"><textarea></textarea></p>
<p></body></p>
<p></html></p>
</div>
<p> </p>
<h2>에뮬레이터 사용하기</h2>
<ul>
<li>작성한 위젯을 테스트하기 위해서는 emulator.js를 문서에 연결하셔야 합니다. 아래와 같이 외부 js로 연결하면 위자드닷컴에 위젯을 올릴 때 별도의 수정을 하지 않아도 되는 장점이 있습니다. 단, 반드시 다른 스크립트보다 앞에 위치해야 합니다.</li>
</ul>
<div class="section" style="BACKGROUND-COLOR: rgb(249,249,216);">
<p><head><br />
...<br />
<span style="COLOR: #009966;"><script src="http://wzdapi.com/widget/emulator.js"></script></span></p>
<p><script><br />
//<![CDATA[<br />
...<br />
//]]><br />
</script><br />
...<br />
</head></p>
</div>
<p> </p>
<h2>타 규약과의 호환성</h2>
<ul>
<li>WZDAPI는 Netvibes (<a href="http://dev.netvibes.com/">http://dev.netvibes.com/</a>)의 UWA와 최소한의 호환성을 제공합니다.</li>
</ul>
<p> </p>
<h2>개정 이력</h2>
<ul>
<li>2007년 6월 3일 - WZDAPI 1.0 Specification (Beta) 제정</li>
</ul>
<p> </p>
<p> </p>
<p>2006-2007 © The WiZarD Works ¦ <a href="http://wzdworks.com/">http://wzdworks.com/</a></p>
<p>DNFL</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
http://pyo.myid.net/
mintz77
152