|<Content>영역은 실제로 위젯/가젯이 구현될 내용이 존재합니다. 위젯/가젯을 표현하기 위한 HTML 코드 및 Javascript 코드가 있습니다.
사용자 환경설정
|<UserPrefs>영역은 개인별 설정값이 저장됩니다.
위젯/가젯 설정
|<ModulePrefs>영역은 위젯/가젯의 정보(제목, 설명, 제작자, 크기 등)가 저장됩니다.
위젯/가젯의 XML 속성값은 특수문자 치환이 필요합니다.
&
->
&
<
->
<
>
->
>
"
->
"
'
->
'
1-1. 콘텐츠 영역
<Content> 영역은 위젯/가젯의 핵심입니다. 환경설정이 프로그램 로직과 정형화 된 정보와 어떻게 결합되어 구동되는지를 기술합니다.
콘텐츠 내용은 HTML, JavaScript, Flash 등으로 꾸밀 수 있습니다.
콘텐츠 영역안의 HTML 은 <html>, <head>, <body> 태그를 제외한 내용(<body> 영역안에서 구현될 내용)입니다.
밑의 코드는 간단하게 사진을 보여주고 클릭 시 새로운 사이트를 여는 예제입니다.
위젯/가젯에 따라서 사용자가 설정한 데이터를 보여주는 기능이 제공될 수 있습니다.<UserPrefs> 영역에 데이터형식을 설정하면 위젯/가젯을 편집할때 수정할 수 있습니다.
이 영역은 위젯/가젯이 구동 될 때, 사용자 인터페이스를 조정할 수 있도록 입력창을 기술합니다. 사용가능한 데이터타입은 string, bool, enum, hidden, list 등이 있습니다.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="사용자 데이터 설정하기" height="150"/>
<UserPref name="myname" display_name="이름" default_value="위젯뱅크"/>
<UserPref name="myphoto" display_name="이미지" default_value="http://pimg.daum-img.net/widgetbank/widgetbank_beta.gif"/>
<UserPref name="mychoice" display_name="이미지 선택" datatype="bool" default_value="true"/>
<UserPref name="mycolor" display_name="배경색" default_value="White" datatype="enum" >
<EnumValue display_value="빨간색" value="Red" />
<EnumValue display_value="노란색" value="Yellow" />
<EnumValue display_value="흰색" value="White" />
</UserPref>
<Content type="html"><![CDATA[
<div id="content_div"></div>
<script type="text/javascript">
// 사용자 데이터를 가져옵니다.
var prefs = new gadgets.Prefs();
function displayGreeting () {
var html = "";
var element = document.getElementById('content_div');
element.style.height='150px';
// 사용자가 설정한 배경색을 가져옵니다.
element.style.backgroundColor=prefs.getString("mycolor");
// 사용자가 설정한 이름을 가져옵니다.
html += "<br>반가워요! " + prefs.getString("myname") + "";
// "이미지 선택"을 선택하면 이미지를 보여줍니다.
if (prefs.getBool("mychoice") == true) {
html += '<img src="' + prefs.getString("myphoto") + '">';
}
element.innerHTML = html;
}
gadgets.util.registerOnLoadHandler(displayGreeting);
</script>
]]>
</Content>
</Module>
1-3. 위젯/가젯 환경설정
<ModulePrefs> 영역은 위젯/가젯의 특징들을 기술합니다. (제목, 크기, 저작자 등)
일반적으로 사용자는 이 부분을 변경할 수 없습니다.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="사용자 데이터 설정하기" height="400"/>
