![[PukiWiki]](image/../localimages/Atom.gif "[PukiWiki]")
サイドバーから切り離したときのプログラミングについては、htmlでは<div>タグを利用してレイヤーを切り替えることを行う。その時表示大きさなどをを変更する。ちなみに<LAYER>タグはIEでは使用できない。
サイドバーからの出し入れに発生するイベントは次の関数で拾う。
起動時にサイドバーに入っているか否か処理をonloadの中なんかで行う必要がある。行わと、起動時サイドバーから出ている状態でサイドバーが起動するとデフォルト処理になってしまう。
if (System.Gadget.docked){
サイドバーの中にある時の処理
}else{
サイドバーの外にある時の処理
}
System.Gadget.onUndock = function (){
[サイドバーから出したときの処理]
}
System.Gadget.onDock = function (){
[サイドバーに入れた処理したときの処理]
}
htmlファイル
<!-- サイドバーに入っている時の表示内容 blockで初期値レイヤー表示 --> <div name"LAY1" id="LAY1" style="display: block;"> <!--バックの画像指定z-index:-1はz方向に-1つまり下方向に表示 --> <g:background id="bgimage" style="position:absolute;z-index:-1" /> <SCRIPT> writedata(); document.write(doc); </SCRIPT> </div> <!-- サイドバーから出たときの表示内容 noneでレイヤー初期値非表示 --> <div name"LAY2" id="LAY2" style="display: none;"> <SCRIPT> writedata2(); document.write(doc); </SCRIPT> </div>
jsファイル
//起動時にサイドバーあるか否かのチェック
function onload(){
if (System.Gadget.docked){
inDock();
}else{
outDock();
}
}
//サイドバーから出したとき
System.Gadget.onUndock = function ()
{
outDock();
}
outDock()(){
onDockflag = 0;
document.body.style.width = '300px'; <==出たときに表示の大きさ指定
document.body.style.height = '330px';
bgimage.style.width = '280px'; <==画像の大きさ指定 bgimageはg:backgroundのid
bgimage.style.height = '330px'; <==これがないと画像が大きさどおり表示されない
bgimage.src = "url(l-bg.png)"; <==画像を指定
//サイドバーに入っている時の表示内容のレイヤーを非表示
document.getElementById("LAY1").style.display='none';
//サイドバーから出たときの表示内容のレイヤーを表示
document.getElementById("LAY2").style.display='block';
svread0();
}
//サイドバーに入れたとき
System.Gadget.onDock = function ()
{
inDock();
}
function inDock(){
onDockflag = 1;
document.body.style.width = '138px';
document.body.style.height = '200px';
bgimage.style.width = '138px';
bgimage.style.height = '200px';
bgimage.src = "url(s-bg.png)";
document.getElementById("LAY1").style.display='block';
document.getElementById("LAY2").style.display='none';
svread0();
}
Ajaxで外部URLの内容を取得する。取得データを処理しやすいようにTEXTで取得する ここのぺーじを参考にした。
注)指定URLに"?'+(new Date).getTime();"をつけることで毎回違う内容にアクセスするように見せかける。そうしないPC内にキャッシュされた内容をもってきて実際のURLに2回目からアクセスしない
XMLHttpRequest の通信の状態
jsファイル
//XMLHttpRequestオブジェクト生成
function createHttpRequest(){
//Win ie用
if(window.ActiveXObject){
try {
//MSXML2以降用
return new ActiveXObject("Msxml2.XMLHTTP") //
} catch (e) {
try {
//旧MSXML用
return new ActiveXObject("Microsoft.XMLHTTP") //
} catch (e2) {
return null
}
}
} else if(window.XMLHttpRequest){
//Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用
return new XMLHttpRequest() //
} else {
return null
}
}
//XMLHttpRequestオブジェクト生成
var httpoj = createHttpRequest() //
//open メソッド
if (host =='uso5005'&& onDockflag == 1){
url = 'http://www.abc-u.ac.jp/~okada/?'+(new Date).getTime();
//method , fileName , async
httpoj.open( 'GET' , url , true ) //
//受信時に起動するイベント
httpoj.onreadystatechange = function() //
{
//readyState値は4で受信完了
if (httpoj.readyState==4) //
{
//コールバック
if(onDockflag == 1){
on_loaded(httpoj, host);
}else{
on_loaded2(httpoj, host);
}
}
}
//send メソッド
httpoj.send( '' ) //
}
function on_loaded(oj, host){
//レスポンスを取得
res = oj.responseText //
//ダイアログで表示
alert(res);
//受け取った内容を配列に分解（トークンは";")
data = res.split(";");
}
注）以下のようにhttpoj.onreadystatechangeの中でdocument.write(res)で書くとなぜかhtml自体が書き換えられしまうそこで、以下のようにhtml内部でかくといいけどhttpoj.open( 'GET' , host , false )でこのように同期を指定しないとデータを取得する前にdocument.write(res)が実行されてしまう
jsonRead(); document.write(res);
JSON（ジェイソン、JavaScript Object Notation[表記（法）]）はJavaScriptにおけるオブジェクト表記法、JSONテキストはUnicodeでエンコードするとされている。デフォルトのエンコーディングはUTF-8である。
JSONテキスト
{"item":[
{"itemNo":"1",
"itemName":"Sum",
"itemData":"1538400"},
{"itemNo":"2",
"itemName":"Used",
"itemData":"647612"},
{"itemNo":"3",
"itemName":"Free",
"itemData":"890788"}
]
}
Javascriptでは以下のようにしてデータを受け取るjsDataは上記httpojと同じ変数
function on_loaded(jsData){
resultdata = 'TEST <BR>';
var data = eval("("+jsData.responseText+")");
for(var i=0; i<data.item.length; i++){
var itemNo = data.item[i].itemNo; // No
var itemName = data.item[i].itemName; // 名前
var itemData = data.item[i].itemData; //内容
resultdata = resultdata + itemNo + ':' + itemName + ':' + itemData +'<BR>\r\n';
}
}
