OpenSocialTutorial-9
IDtail.com API
목차 |
[편집] 현재 가젯 뷰타입 알기 & 다른 뷰로 가기
IDtail.com에서 제공하는 viewType은 FULL_PAGE(canvas) 와 DASHBOARD(profile) 입니다.
- POP_UP viewType은 아직 지원되지 않습니다.
또한 sandbox의 preview에서 viewType은 아직 profile viewType밖에 없기 때문에 canvas모드로 전환할 수 없습니다.
[편집] IDtail에서 제공하는 viewType
IDtail.com에서 제공하는 viewType은 다음과 같습니다.
| Name | Code to retrieve | Maps on Idtail |
|---|---|---|
| DASHBOARD (alias : "profile", "default") | supported_views[gadget.views.ViewType.DASHBOARD] | profile |
| FULL_PAGE (alias : "canvas") | supported_views[gadget.views.ViewType.FULL_PAGE] | canvas |
opensocial의 views 객체를 사용하기 위해 반드시 다음과 같이 gadget views feature를 ModulePrefs에 작성해야 됩니다.
<ModulePrefs title="Views example">
<Require feature="views" />
</ModulePrefs>
[편집] 현재 viewType을 알기
현재의 viewType을 알기 위해서는 다음과 같이 작성합니다. viewType에 대한 가젯의 CSS 적용이나 사이즈가 큰 가젯을 canvas에서만 보여주고 싶을 때 유용합니다.
var currentViewName = gadgets.views.getCurrentView().getName(); document.write(currentViewName);
[편집] 다른 view 전환하기
다른 view로 전환 할 필요가 있을 때 유용합니다. 현재 IDtail.com에서는 view 전환 요청시 profile에서 canvas, canvas에서 profile로 전환 됩니다.
- 밑에 code중 requestNavigateTo를 호출할 시 option parameters를 넘길 수 있습니다.
이 option parameter object는 다른 view로 전환 될 시에 호출될 가젯의 Url parameter값으로 바뀌게 됩니다.
따라서 현재 가젯에서 내가 입력 한 값이나 상태를 view가 바뀐후 에도 유지할 수 있습니다.
예를 들어 맵을 이용한 가젯에서 자신이 입력한 좌표 값을 viewType이 바뀌어도 알 수 있습니다.
option parameter는 반드시 object여야만 하며, object의 속성들의 value값은 문자열 이어야만 합니다.
ex) object{ key : value (문자열 타입)}
function navigateTo(viewMode, opt_params)
{
var supportedViews = gadgets.views.getSupportedViews();
gadgets.views.requestNavigateTo(supportedViews[viewMode], opt_params);
}
function gotoCanvas() {
var opt_params = {'favorite_fruite' : document.getElementById('favoriteFruite').value};
navigateTo(gadgets.views.ViewType.FULL_PAGE, opt_params);
}
function gotoProfile() {
var opt_params = {'favorite_fruite' : document.getElementById('favoriteFruite').value};
navigateTo(gadgets.views.ViewType.DASHBOARD, opt_params);
}
[편집] 예제
- 밑에 예제는 opensocial 0.7버전 기준으로 작성되었습니다.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Sample Application 1">
<Require feature="opensocial-0.7"/>
<Require feature="views"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<h2>좋아하는 과일을 입력해 주세요</h2>
<input id="favoriteFruit" type="text" value="" />
<input id="testbtn" type="button" value="Navigate to full page (open social api)" />
<h2>새 Owner</h2>
<input id="idtail_owner" type="text" value="" />
<input id="testbtn2" type="button" value="Navigate to other's full page (idtail only)" />
<div id="message"></div>
<script>
gadgets.util.registerOnLoadHandler( init );
function init()
{
var viewName = gadgets.views.getCurrentView().getName();
document.getElementById('message').innerHTML = "현재 view type : " + viewName;
var testBtn = document.getElementById('testbtn');
if(viewName == gadgets.views.ViewType.FULL_PAGE){
testBtn.value = 'navigate To Profile';
testBtn.onclick = function(){gotoProfile();};
}else{
testBtn.value = 'navigate To Canvas';
testBtn.onclick = function(){gotoCanvas();};
}
document.getElementById('testbtn2').onclick = function(){gotoCanvas();};
var viewParams = gadgets.views.getParams();
if(viewParams['favorite_fruit']){
document.getElementById('favoriteFruit').value = viewParams['favorite_fruit'];
}
}
function navigateTo(viewMode, opt_params)
{
var supportedViews = gadgets.views.getSupportedViews();
gadgets.views.requestNavigateTo(supportedViews[viewMode], opt_params);
}
function gotoCanvas() {
/****
gadgets.views.ViewType.FULL_PAGE;
gadgets.views.ViewType.DASHBOARD;
'canvas' -> alias FULL_PAGE
'profile' -> alias DASHBOARD
'default' -> alias DASHBOARD
****/
var opt_params = {'favorite_fruit' : document.getElementById('favoriteFruit').value, 'idtail_owner': document.getElementById('idtail_owner').value };
navigateTo(gadgets.views.ViewType.FULL_PAGE, opt_params);
}
function gotoProfile() {
var opt_params = {'favorite_fruit' : document.getElementById('favoriteFruit').value, 'idtail_owner': document.getElementById('idtail_owner').value };
navigateTo(gadgets.views.ViewType.DASHBOARD, opt_params);
}
</script>
]]>
</Content>
</Module>