こんばんわー。
相変わらずスローペースでいろいろ勉強しています。
今回は、画面の遷移について勉強してみたいと思います。
Check
アプリを作っていくと、画面が一つだけでは足りない場合があります。
そういった場合に、複数の画面を使わないといけないのですが、今回はそのやり方を考えてみます。
今回考えるのは、画面が3つほど有り、それぞれをリンクで行き来する、という感じです。
===初期画面===
☆初期画面だよ！☆
・画面1へのリンク
===============
====画面1=====
☆画面１だよ！☆
・画面2へのリンク
・画面3へのリンク
===============
====画面2=====
☆画面2だよ！☆
・画面1へのリンク
・画面3へのリンク
===============
====画面3=====
☆画面3だよ！☆
・画面1へのリンク
・画面2へのリンク
===============
↑のような簡単な画面を作ってみます。
■情報収集
●コードの記述
mixiのページによると、viewの遷移をするときに、パラメータを指定できるようです。
ということは、どの画面へ遷移するか、という情報をココに記述できそうです。
画面の遷移を起こすための関数は、下記のように書くと良いようです。
var view = gadgets.views.getSupportedViews()["canvas"];
var params = {destination: "VIEW01"};
gadgets.views.requestNavigateTo(view, params);
まずはviewのオブジェクトを生成して、パラメータの"destination"に"VIEW01"(画面1と解釈)を設定、その後遷移させる、という手はずです。
●Javascriptの記述
長いことWEB関連をいじってなかったので、すっかりJavascriptを忘れていました。
やりたいことは・・・
- 画面XXへのリンク、というものをクリックすると、画面を遷移させたい。
- 画面を遷移させるには、先ほど書いた関数を実行させることが必要。
- リンクをクリックしたときに、その関数を実行させたい。
まあ、link文字列をクリックしたときに"OnClick"などというハンドラを実行させることができるみたいなので、それを実行します。
また、ボタンでやった方が若干楽そうですが、かっこわるいのでリンク文字にします。
下記のようにすると、文字をクリックしたときにOnClickイベントが走りそうです。
<a href="javascript:void(0);" onclick="TransitView('VIEW01');">画面1へ遷移</a>
<script language="text/javascript">
function TransitViews(dest) {
//OnClickイベントハンドラ。
//ココにコードを記述
}
</script>
■やってみよう
というわけで、必要な情報が整ったので、早速実験してみようと思います。
●実験その１
リンクをクリックしたら、画面に文字が追加されるようにしました。
ここでは、「画面1へ遷移」の文字をクリックしたら、「画面1へのリンクがクリックされた」との
文字列が表示されるようにしました。
そのときのコードを掲載します。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="TransitView" author_email="koichi_hasegawa@altemasoft.com">
<Require feature="opensocial-0.8" />
<Require feature="views" />
</ModulePrefs>
<Content type="html" view="canvas"><![CDATA[
テスト<br>
<a href="javascript:void(0);" onclick="TransitView('VIEW01');">画面1へ遷移</a>
<script type="text/javascript" src="http://localhost:8080/transitview/canvas.js"></script>
<script type="text/javascript">
function TransitView(dest) {
if(dest == 'VIEW01'){
document.getElementById("bottom_view").innerHTML = '画面1へのリンクがクリックされた';
} else {
document.getElementById("bottom_view").innerHTML = 'そのほかのリンクがクリックされた';
}
}
</script>
<!-- The code for Canvas view is here. -->
<div id="bottom_view"></div>
]]></Content>
</Module>
●実験その２
それじゃあ実際に遷移させてみよう！
というわけで、「画面1へのリンク」をクリックしたら、「画面1」がロードされるようにしたいと思います。
・canvasビューの初期画面が下記で
・リンクがクリックされると、「画面1へ遷移しています」と表示されるようにします。
・遷移が正常に行われたら、「ようこそ画面1へ」という文字が表示されるようにします。
このときのコードを記載しておきます。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="TransitView" author_email="koichi_hasegawa@altemasoft.com">
<Require feature="opensocial-0.8" />
<Require feature="views" />
</ModulePrefs>
<Content type="html" view="canvas"><![CDATA[
テスト<br>
<a href="javascript:void(0);" onclick="TransitView('VIEW01');">画面1へ遷移</a>
<script type="text/javascript" src="http://localhost:8080/transitview/canvas.js"></script>
<script type="text/javascript">
var params = gadgets.views.getParams();
var dest_view = params["destination"];var init = function() {
if(dest_view == 'VIEW01'){
//「画面1」用の表示
document.getElementById("bottom_view").innerHTML = 'ようこそ画面1へ';
} else {
document.getElementById("bottom_view").innerHTML = 'ようこそ初期画面へ';
}
}//リンクをクリックしたときのイベントハンドラ
function TransitView(dest) {
if(dest == 'VIEW01'){
//「画面1」に遷移する
document.getElementById("bottom_view").innerHTML = '画面１に遷移しています。';
var view = gadgets.views.getSupportedViews()["canvas"];
var params = {destination: "VIEW01"};
gadgets.views.requestNavigateTo(view, params);
} else {
document.getElementById("bottom_view").innerHTML = '初期画面に遷移しています。';
var view = gadgets.views.getSupportedViews()["canvas"];
var params = {destination: "INIT"};
gadgets.views.requestNavigateTo(view, params);}
}gadgets.util.registerOnLoadHandler(init);
</script>
<!-- The code for Canvas view is here. -->
<div id="bottom_view"></div>
]]></Content>
<Content type="html" view="home"><![CDATA[
テスト_ここはhome<br><!-- The code for Canvas view is here. -->
<div id="bottom_view"></div>
]]></Content>
</Module>
とりあえず今日はこれで終了です。
残りの3つの画面間の遷移は、また後日書きます。
※念のため、メモ的なもの
ビューの遷移をディバッグしているときに、下記の行を実行したところで"Invalid auth token"なるエラーが発生しました。
var view = gadgets.views.getSupportedViews()["canvas"];
var params = {destination: "VIEW01"};
gadgets.views.requestNavigateTo(view, params);
再起動したらなおったので、なんだったのかよくわかりません。
