TabSet 객체 : 탭 객체는 탭전체를 아우르는 부모 컨테이너에 위치합니다. 프로그램 상으로, 탭 객체는 각 탭 객체들의 배열입니다.
Tab 객체 : 하나의 탭 객체는 색인된 탭들의 배열 중 하나의 탭을 가리킵니다. 일반적인 HTML 구현은 "name container'로 API상에 언급된 <td> 요소로 구현됩니다. 이 HTML은 gadgets.Tab.getNameContainer() 함수를 통해 접근 가능합니다.
콘텐츠 컨테이너 : 하나의 콘텐츠 컨테이너는 각각의 탭 객체를 가진 콘텐츠를 포함합니다. 일반적인 HTML 구현은 "content container"로 API상에 언급된, <div> 요소로 구현되고, gadgets.Tab.getContentContainer() 함수을 통해서 이 HTML에 접근 가능합니다.
1.2. 동작 방법
gadgets.TagSet() 생성자를 사용하여, 탭 객체(탭들의 set을 포함하는 객체)를 생성할 수 있습니다.
var tabs = new gadgets.TabSet(__MODULE)ID__, "Tab");
일단, 탭 객체를 생성했다면, 개개의 탭을 addTab() 함수를 사용해서 추가할 수 있습니다.
탭은 index, name과 unique ID 세개의 구성요소를 가집니다.
각각의 ID는 <div> 태그의 ID와 매칭됩니다. 그 <div>는 탭의 콘텐츠가 위치하는 곳에 기술됩니다. 만약, <div> 컨테이너를 제공하지 않는다면, 탭 라이브러리는 기본적으로 하나를 생성합니다.
addTab(String tabName, Object opt_params) 함수는 아래와 같은 파라미터가 필요합니다.
String tabName : 생성할 탭의 이름
Object opt_params : 선택적 파라미터 객체
contentContainer(선택적) : 현재 탭의 콘텐츠 컨테이너로써 사용되고 있는 HTML 부분들. 이 부분을 생략하면, 탭 라이브러리가 하나를 기본으로 생성.
callback(선택적) : 탭이 선택될 때 실행될 함수
index(선택적) : 탭에 삽입될 순서 번호. 생략하면 새로운 탭은 맨 끝으로 추가된다.
addTab()은 탭 컨테이너 id DOM을 포함하는 String을 반환한다.
아래와 같은 방법으로 탭들을 탭셋에 추가하고, 콘텐츠를 동작시킬 수 있습니다.
방법 1 : 생성한 탭의 ID를 인식해서, 탭에 대응하는 <div>에 콘텐츠를 추가하기 위해 ID를 사용한다.
var one_Id = tabs.addTab("One");
document.getElementById(one_Id).innerHTML = "Content for tab One.";
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Tabs Demo" height="140" scrolling="true" >
<Require feature="tabs" />
</ModulePrefs>
<Content type="html">
<![CDATA[
<script type="text/javascript">
// 탭을 초기화하고, 기본으로 선택될 탭의 이름으 지정합니다. (Two 탭은 삽입되어야 합니다.)
var tabs = new gadgets.TabSet(__MODULE_ID__, "Two");
function init() {
// 방법 1 : 생성한 탭의 ID를 인식해서, 탭에 대응하는 <div>에 콘텐츠를 추가하기 위해 ID를 사용한다.
var one_Id = tabs.addTab('<div style="color: red; font-weight: bold; background-color:#ccf;">One</div>');
document.getElementById(one_Id).innerHTML = "스크립트로 생성한 1번탭";
// 방법 2 : 탭을 만들고, 위젯/가젯의 HTML 부분에 해당하는 <div>를 추가하는 방법 - 정적 콘텐츠를 <div>안에 위치시킨다.
tabs.addTab("Two", {
contentContainer: document.getElementById("two_id")
});
// 방법 4 : 탭 추가시 이름으로 사용하기 위해서, addTab(tabName, opt_params)을 사용한다.
tabs.addTab("Four", {
contentContainer: document.getElementById("four_id"),
callback: callback,
tooltip: "I'm special"
});
// 방법 3 : 탭을 만들고, 위젯/가젯의 HTML 부분에 해당하는 <div>를 추가하는 방법 - 정적 콘텐츠를 <div>안에 위치시킨다.
// 추가로 정적 콘텐츠에 동적인 콘텐츠를 추가하기 위해서 콜백 함수를 사용합니다.
// 인덱스를 넣어 2번째(0번째부터 시작)탭으로 넣어준다. index가 없으면 제일 뒤에 추가된다.
tabs.addTab("Three", {
contentContainer: document.getElementById("three_id"),
callback: callback,
index : 2
});
}
// 3번째와 4번째 탭에서 불릴 동적 콘텐츠 함수이다.
function callback(tabId) {
var p = document.createElement("p");
// 선택된 탭을 받아옵니다.
var selectedTab = tabs.getSelectedTab();
p.innerHTML = '탭 "' + selectedTab.getName() + '"에서 불린 동적 콘텐츠';
document.getElementById(tabId).appendChild(p);
}
// 위젯/가젯이 로딩될 때 init를 호출한다.
gadgets.util.registerOnLoadHandler(init);
</script>
<div id="two_id" style="display:none">2번탭의 콘텐츠로 사용될 영역</div>
<div id="three_id" style="display:none">3번탭의 콘텐츠로 사용될 정적 영역</div>
]]>
</Content>
</Module>
1.3 색인으로 탭 조작하기
탭 API는 index에 의해 탭을 조작할 수 있도록 하는 함수들을 제공합니다. 탭들은 0부터 n까지 인덱싱 되어 있고, 0이 첫번째입니다.(탭이 3개일 경우 0, 1, 2)
탭을 프로그램상에서 선택하기 위해 인덱스를 사용할 수 있고, 두개의 탭 순서를 변경할 때 사용하기도 합니다.
탭의 ID가 상수로 지정되면, index는 작동하지 않습니다.
아래는 프로그램상으로 탭을 선택하거나 탭의 위치를 변경하는 예시입니다.
CSS로 커스터마이징
탭의 CSS는 탭의 레이아웃을 표현할 수 있는 HTML 요소들을 포함하고 있습니다. 다음의 CSS클래스들을 정의하여 기본 탭 모양을 변경할 수 있습니다.
tablib_table : 탭들을 포함하는 HTML 테이블에 적용
tablib_selected : 선택된 탭에 적용
tablib_unselected : 선택되지 않은 모든 탭에 적용
tablib_spacerTab : 각 탭 간의 여백 요소에 적용
tablib_emptyTab : 탭 주변의 시작과 끝 여백을 조정
tablib_navContainer : 모든 탭에 연관된 컨텐트를 포함하는 부모 컨테이너에 적용(즉, 탭 헤더와 각각의 컨텐트 컨테이너들 전체에)
자바스크립트를 이용하여 탭의 header 컨테이너의 스타일을 적용할 수 있다. getHeaderContainer() 함수는 원하는대로 수정할 수 있도록, 탭의 HTML 테이블을 반환합니다.
각각의 탭 요소들을 불러와서 스타일을 지정할 수도 있습니다.
var tabs = new gadgets.TabSet();
tabs.addTab("One");
...
// 테이블을 불러와서 스타일 적용
var table = tabs.getHeaderContainer();
table.style.fontSize = "10px";
table.style.marginTop = "15px";
...
// 첫번째 탭에 스타일 적용
var firstTab = tabs.getTabs()[0].getNameContainer();
firstTab.style.backgroundColor = "#999999";
firstTab.style.color = "#ffffff";
탭 정렬 변경하기
기본적으로 탭들은 가운데 정렬이지만, 탭의 정렬도 변경이 가능합니다. alignTabs() 함수를 사용해서, 변경합니다. 이 함수의 기본 파라미터는 "left", "right", "center"로써, 정렬방향을 나타냅니다. 또한 부가적인 파라미터로 offset을 지정할 수도 있습니다. offset의 기본값은 3(px)입니다.
var tabs = new gadgets.TabSet();
...
// 탭의 정렬을 왼쪽으로 수정하고 10픽셀의 거리를 둔다.
tabs.alignTabs("left", 10);
탭 숨기기 displayTabs() 함수를 사용하여 탭과 내용 표시를 변경시킬 수 있습니다.
파라미터를 true로 하여 보여주고, false로 숨깁니다.
<input onclick="toggleTabs()" type="button" value="Show/Hide"/>
<script>
var tabs = new gadgets.TabSet();
...
var showTabs = true;
function toggleTabs() {
showTabs = !showTabs;
tabs.displayTabs(showTabs);
}
</script>
2. 미니메시지
미니메시지는 위젯/가젯안에서 사용자에게 보여주는 임시적인 메시지입니다. 미니메시지는 사라지도록 설계되었고, 프로그램상으로 또는 유저에 의해 사라집니다.
미니메시지의 형태는 다음의 세가지가 있습니다.
사용자가 [x]를 클릭하여 사라지게 하는 메시지
타이머를 사용하여 일정시간이 지난후 사라지게 하는 메시지
프로그램적으로 사라지게 하는 메시지
미니메시지를 사용하기 위해서는 <ModulePrefs> 하위에 <Require feature="minimessage" /> 태그를 포함시켜 미니메시지 라이브러리를 로드해야합니다.
다음과 같은 경우 사용하면 유용합니다.
프로모션 : 위젯/가젯 안에 프로모션 메시지를 표시합니다.
상태 : 많은 위젯/가젯들은 백단에서 데이터를 불러와야 하는 경우가 있습니다. 이럴 때 "로딩 중 .. "과 같은 상태 표시에 사용할 수 있습니다.
디버그/에러 : 위젯/가젯이 에러를 발생시킬 때 아무 반응 없이 있지 않고 사용자에게 에러 상태를 표시해 줄 수 있습니다
기타 : 사용자에게 알림 메시지를 주여야 하는 경우가 있습니다. 미니메시지는 작고, 휘발성이 있으므로 정보를 사용자에게 알리고자 할때 이용할 수 있습니다.
2.1 동작 방법
위젯/가젯에서 미니메시지를 추가하는 기본적인 순서는 다음과 같습니다
1. 미니메시지 라이브러리 포함하기 2. MiniMessage() 생성자를 사용하여, 미니메시지 초기화하기 3. 특정 텍스트로 미니메시지 생성
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="MiniMessage">
<!-- 1. 라이브러리 추가 -->
<Require feature="minimessage"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<script>
// 2. 미니메시지 초기화
var msg = new gadgets.MiniMessage(__MODULE_ID__);
// 3. 메시지 생성
msg.createDismissibleMessage("미니메시지입니다.");
...
</script>
]]>
</Content>
</Module>
위의 내용은 위젯/가젯 상단에 [x]를 클릭하여 사라지게 하는 메시지를 추가합니다.
2.2 다른 위치에서 메시지 생성하기
기본적으로 메시지는 위젯/가젯의 최상단 HTML 요소 컨테이너 안에 위치합니다. 각각의 연속적인 메시지들은 컨테이너에 top-down 순서로 컨테이너에 자식노드로써 추가됩니다.
다음의 방식을 사용하면 메시지를 다른 위치에 지정할 수 있습니다.
모든 메시지의 위치 지정하기
컨테이너에 <div>로 HTML요소를 전달함으로써 메시지 컨테이너의 기본 위치값을 지정할 수 있습니다. 이 요소는 메시지가 삽입되고 표시되는 메시지 컨테이너가 됩니다.
<div>
<h3>최상단</h3>
</div>
<div id="messageBox"></div>
<script type="text/javascript">
// messageBox div를 메시지 컨테이너로 지정
var msg = new gadgets.MiniMessage(__MODULE_ID__, document.getElementById("messageBox"));
msg.createDismissibleMessage("첫번째 메시지");
msg.createDismissibleMessage("두번째 메시지");
msg.createDismissibleMessage("세번째 메시지");
</script>
단일 메시지의 위치 지정하기
사라질 수 있는 메시지를 메시지 컨테이너에 추가하는 대신에 특정위치를 대체할 수 있습니다. createDismissibleMessage()의 첫번째 파라미터로 HTML 요소를 넣어주면 됩니다.
<div id="msgDiv">이곳이 메시지 형태로 변합니다.</div>
<script type="text/javascript">
var msg = new gadgets.MiniMessage(__MODULE_ID__);
// 메시지 형태로 대체할 영역을 createDismissibleMessage의 파라미터로 넣어준다.
msg.createDismissibleMessage(document.getElementById("msgDiv"));
</script>
2.3 DOM 메소드를 사용해서 메시지 생성하기
HTML DOM 메소드를 사용해서 메시지를 생성할 수도 있습니다. 메시지는 DOM 안에 존재하지 않기 때문에, 이것은 메시지 컨테이너에 기본값으로 추가되어 있습니다.
<script type="text/javascript">
var msg = new gadgets.MiniMessage(__MODULE_ID__);
// 메시지로 사용할 DOM TODTJD
var div = document.createElement("div");
div.innerHTML = "W3C DOM을 사용해서 생성한 메시지";
// DOM 스타일 설정
div.onmouseover = function() {
div.style.backgroundColor = "green";
};
div.onmouseout = function() {
div.style.backgroundColor = "";
};
msg.createDismissibleMessage(div);
</script>
2.4 타이머 메시지 생성하기
타이머 메시지는 일정 시간이 지나면 자동으로 사라지도록 만들어진 메시지입니다. createTimerMessage() 함수를 사용하여 생성할 수 있다. createTimerMessage()는 두개의 파라미터가 필요한데 하나는 메시지 문자열, 하나는 메시지가 나타날 시간(초 단위)입니다.
var msg = new gadgets.MiniMessage(__MODULE_ID__);
msg.createTimerMessage("5초후에 사라집니다.", 5);
2.5 정적 메시지 생성하기
정적 메시지는 dismissMessage()에 의해 삭제될 수 있습니다.
<div id="staticMsg">[x]가 없습니다.</div><br />
<a href="javascript:void(0)" onclick="dismissMsg()">메시지 지우기</a>
<script>
var msg = new gadgets.MiniMessage(__MODULE_ID__);
var staticMsg = msg.createStaticMessage(document.getElementById("staticMsg"));
function dismissMsg() {
msg.dismissMessage(staticMsg);
}
</script>
2.6 맞춤형 미니메시지 보여주기
미니메시지의 기본 모양을 변형할 수 있는 방법은 두가지가 있습니다.
단일 메시지 모양 변경하기
DOM 함수를 사용하여 메시지의 스타일을 적용할 수 있습니다.
<script type="text/javascript">
var msg = new gadgets.MiniMessage(__MODULE_ID__);
var statusMsg = msg.createDismissibleMessage("하나의 메시지 모양 변경하기");
// 메시지에 스타일 적용
statusMsg.style.backgroundColor = "red";
statusMsg.style.color = "white";
</script>
전체 메시지 모양 변경하기
탭처럼 미니메시지도 특정 클래스를 가지고 있어 CSS를 사용하여 모든 메시지의 스타일을 일괄적으로 변형할 수 있습니다.
다음은 미니메시지에 적용되는 클래스입니다.
.mmlib_table : 메시지를 포함한 HTML 테이블에 적용
.mmlib_xlink : 메시지를 사라지게 하는 [x] 버튼에 적용
3. 플래시
위젯/가젯안에 플래시 무비파일(.swf)을 삽입할 수 있도록 flash 라이브러리를 사용할 수 있습니다. 플래시 콘텐츠를 삽입하기 위해서는 <ModulePrefs> 하위에 <Require feature="flash" /> 태그를 사용하여 라이브러리를 로딩하고, gadgets.flash.embedFlash() 함수를 호출합니다.
플래시 라이브러리는 다음과 같은 함수들이 있습니다.
gadgets.flash.embedFlash(swf_url, swf_container, swfVersion, opt_params) : sef_url로 지정된 .swf 파일을 삽입하고, swf_container로 지정된 위젯/가젯상의 위치에 표시한다. opt_params는 파라미터를 포함하는 선택적 파라미터입니다.
* 만약 성능이슈로 표시되지 않는다면 명시적으로 vmode를 "window"로 셋팅한다. (gadgets.flash.embedFlash("example.swf", "wrapper", {wmode: "window"});)
gadgets.flash.getMajorVersion() : 플래쉬 플레이어의 주요 버전정보를 반환한다. 만약 플래쉬 플레이어가 인식되지 않으면 0를 반환한다.
위젯/가젯의 콘텐츠 크기에 따라 위젯/가젯의 높이를 자동으로 조정할 수 있습니다. 이 기능을 사용하기 위해서는 <ModulePrefs> 하위에 <Require feature="dynamic-height" /> 태그를 사용하여 라이브러리를 로딩하고, gadgets.window.adjustHeight() 함수를 호출합니다.
window 라이브러리는 다음과 같은 기능을 제공합니다.
gadgets.window.adjustHeight(opt_height) : opt_height 높이로 조절하고, 값이 없을 경우 위젯의 크기에 맞게 자동으로 조절합니다.
gadgets.window.getViewportDimensions() : 현재 위젯의 높이와 너비를 반환합니다.
