톡틴게임 모음 위젯 제작기 Ver. 0.1

처음에 톡틴게임 위젯은 초 허접이었다.
api도 없이 게임 url을 일일이 긁어서 붙인 코드

<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="톡틴게임"   title_url="http://tocteen.daum.net/game/"   author="일리있는 이야기"   author_email="37.2@hanmail.net"   width="166"   height="125">    <Require feature="tabs" /> </ModulePrefs>

위젯에 대한 명세이다.
여기서 그나마 좀 모듈을 사용한 것은 shindig에서 제공하는 탭기능이었다.
게임의 장르가 여러개여서 여기서 제공하는 탭으로 분할했다.(역시 기본 UI는 이쁘지가 않다)

이 밑으로 실제 위젯 코드가 들어간다.

<Content type="html"> <![CDATA[ ...   // 소스코드 ...   ]]> </Content> </Module>

코드를 입력하고 닫는 부분까지 ..

이제부터 코드설명 들어갑니다.

<style type="text/css">    .gameList { padding: 5px 5px 0 5px; width:166px; }    .gameList a {        font-family: 굴림, gulim, sans-serif;        font-size: 11px;        font-weight: normal;        text-decoration:none;    }    .gameTail { padding: 5px 5px 0 5px; width:166px; }    .ssmoren {        color:#0307C3;        text-decoration:none;        font:11px "돋움",dotum;        letter-spacing:-1;    }    .moreBlit  {vertical-align:1px; }    .g_tit {color:#7a7a7a;font-size:12px;}    </style>

아무리 초기버전이라지만 약간의 UI는 가져가야하지 않겐나~ ㅎㅎ
더보기 버튼과 게임 제공처 링크 부분의 UI입니다.

우선 게임 영역으로 지정할 4개의 div를 지정합니다.

<div id="actionDiv" style="display:none" class="gameList">        <table><tr>            <td><a href="javascript:openGamePopup('451')">메탈슬러그3</a></td>            <td><a href="javascript:openGamePopup('3275')">메이플스토리</a></td>        </tr><tr>            <td><a href="javascript:openGamePopup('5')">천공대전</a></td>            <td><a href="javascript:openGamePopup('23')">라이덴X</a></td>        </tr><tr>            <td><a href="javascript:openGamePopup('1346')">챔피온</a></td>            <td><a href="javascript:openGamePopup('408')">마리오 리믹스</a></td>        </tr><tr>            <td><a href="javascript:openGamePopup('90')">파워레인져</a></td>            <td><a href="javascript:openGamePopup('1215')">드래곤볼Z</a></td>        </tr></table>    </div>

이런식으로 테이블에 게임과 게임 팝업을 띄우는 링크를 걸어놓고 'actionDiv', 'arcadeDiv', 'sportsDiv', 'comicDiv' 내게의 영역을 만들어 놓습니다.

마지막에는 게임제공처와 더보기 링크를 표시합니다.

<div class="gameTail">        <span style="margin-top:12px;text-align:right;padding-right:4px;" class="g_tit">            [제공 : 주전자닷컴]        </span>        <span>            <a href="http://tocteen.daum.net/game" class="ssmoren" target="blank">더보기</a>            <img src="http://imgsrc.search.daum-img.net/search_all/icon/more_arrow.gif" width="6" height="5" class="moreBlit">        </span>    </div>

이부분은 위쪽에 게임 장르 탭이 변하더라도 변하지 않는 정적인 부분입니다.


이제 스크립트 설명 들어갑니다.

<script type="text/javascript">    var tabs = new gadgets.TabSet(__MODULE_ID__);    // 탭을 생성하는 함수    function initTab() {            tabs.addTab("액션", {                contentContainer: document.getElementById("actionDiv")            });            tabs.addTab("오락", {                contentContainer: document.getElementById("arcadeDiv")            });            tabs.addTab("경기", {                contentContainer: document.getElementById("sportsDiv")            });            tabs.addTab("코믹", {                contentContainer: document.getElementById("comicDiv")            });    }     //게임플레이 팝업    function openGamePopup(gameId){        window.open(            'http://tocteen.daum.net/game/game/view/gamePopup.html?popurl=http://zuzunza.joins.com/daum/player.html?game_id=' + gameId, '',            'width=960,height=720,scrollbars=no,resizable no'        );    }     gadgets.util.registerOnLoadHandler(initTab);    </script>

tabs에 탭기능을 사용하겠다고 정의를 합니다.
initTab 함수는 장르별 게임탭을 지정합니다. 위에서 정의해놨던 'actionDiv', 'arcadeDiv', 'sportsDiv', 'comicDiv' 영역들을 매칭시킵니다.

openGamePopup 함수는 gameId에 맞게 게임팝업창을 띄워줍니다.
위젯이 로딩되었을때 initTab가 실행되어야 하므로 registerOnLoadHandler로 실행시켜줍니다.

허접한 게임모음 위젯의 완성입니다.
다음에는 좀 업그레이드되서 API를 사용한 톡틴게임 위젯 제작기를 올리겠습니다.
0.1버전 톡틴게임 xml도 첨부합니다.

invalid-file

톡틴게임 위젯 버전 0.1 XML 소스