 |
|
자바스크립트 라이브러리
가젯을 만들 때 사용할 수 있는 자바스크립트 라이브러리에는 두 종류가 있다. 바로 핵심(core) 라이브러리와 기능 특화(feature-specific) 라이브러리다. 이번 절에서는 사용자 환경설정에 관한 기본 동작을 수행하는 핵심 라이브러리를 다루겠다. 이 튜토리얼의 Part 2에서는 탭 기반 인터페이스, 끌어다놓기 기능과 같은 기능 특화 라이브러리에서 사용 가능한 다른 여러 기능들을 살펴볼 것이다.
핵심 자바스크립트 기능
표 2는 핵심 기능들을 각각 간략한 설명과 함께 보여준다. 다음에 이어질 절에서는 이 기능들을 생성자, 게터(getting values), 세터(setting values) 세 그룹으로 나눠 설명하고 이 각각을 사용하는 예제 코드와 함께 자세히 살펴보겠다.
표 2. 핵심 자바스크립트 함수들
Functions
| 함수 | 설명 |
|---|
| _IG_Prefs(gadgetId) | 생성자 |
|---|
| dump() | 환경설정을 보여준다(디버깅을 위해 사용한다). |
|---|
| getArray(userpref) |
List 데이터 유형의 내용을 배열로 반환한다. |
|---|
| getBool(userpref) | 환경설정 내용을 Boolean 값으로 반환한다. |
|---|
| getInt(userpref) | 환경설정 내용을 Integer 값으로 반환한다. |
|---|
| getString(userpref) | 환경설정 내용을 String 값으로 반환한다. |
|---|
| set(userpref, value) | 설정 내용을 특정 값으로 설정한다. |
|---|
| setArray(userpref, [values]) |
List 데이터 유형을 값의 배열로 설정한다. |
|---|
생성자
생성자 함수를 사용하여 코드 안에서 사용자 환경설정에 접근할 수 있다. 생성자를 호출하면 __MODULE_ID__가 넘겨지고 가젯이 로딩될 때 이 값을 가젯의 식별자로 사용하게 된다(Listing 11). 다음 절에서 이 기능을 구현하는 예제를 보겠다.
Listing 11. 생성자 호출하기
<script type="text/javascript">
...
var user_prefs = new _IG_Prefs(__MODULE_ID__);
...
</script>
|
값 가져오기
값을 가져오는 함수 네 개가 있는데 각각 boolean, integer, array, string 데이터 유형을 가져온다. Listing 12의 처음 여덟 줄은 Listing 7에서 가져왔다. 이곳에서 Astrological Sign과 저장할 값을 입력 받아 저장한다. 16~20번 행은 이 두 개의 사용자 환경설정 값을 가져오는 자바스크립트를 호출한다.
Listing 12. 사용자 환경설정 값 가져오기
1 <?xml version="1.0" encoding="UTF-8" ?>
2 <Module>
3 <ModulePrefs title="Setting Preferences" height="300" />
4 <UserPref name="theName" display_name="Name" required="true"
default_value="Your name here"/>
5 <UserPref name="theSign" display_name="Astrological Sign"/>
6 <UserPref name="thePrefs" display_name="Save?" datatype="bool"
default_value="true"/>
7 <UserPref name="thePrefs2" datatype="bool"
default_value="true"/>
8 <Content type="html">
9 <![CDATA[
10
11 ...
12
13 <script type="text/javascript">
14 var user_prefs = new _IG_Prefs(__MODULE_ID__);
15
16 // Get the user preference to save (or not)
17 var bSave = user_prefs.getBool("thePrefs");
18
19 // Get the astrological sign
20 var sSign = user_prefs.getString("theSign");
21
22 ...
23
24 </script>
25
26 ...
27
28 ]]>
29 </Content>
30 </Module>
|
값 설정하기
사용자 환경설정 값을 set()이나 setArray()를 호출하여 설정할 수 있다. 첫 번째 함수는 boolean, hidden, integer 또는 string 데이터 유형을 설정할 때 사용한다. 두 번째 함수는 list 데이터 유형을 다룰 때만 사용한다.
set 함수들을 사용하기 전에 반드시 setprefs 라이브러리를 추가해야 한다. Listing 13은 setArray() 함수를 호출하는 예제를 보여준다.
Listing 13. 사용자 환경설정에 값 설정하기
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Setting Preferences" height="300" />
<UserPref name="theList" datatype="list" display_name="List"/>
<Content type="html">
<![CDATA[
<script type="text/javascript">
var user_prefs = new _IG_Prefs(__MODULE_ID__);
...
// Set list contents
user_prefs.setArray("theList", ["Stout", "IPA", "Brown Ale", "ESB"]);
...
</script>
]]>
</Content>
</Module>
|
사용자 환경설정과 관계 없는 추가적인 자바스크립트 함수를 가젯에서 사용할 수 있다. 참고자료에 있는 링크를 보면 핵심 함수들을 참조할 수 있다.
| 
