Gadgets/Gadget2 の変更点

追加された行はこの色です。
削除された行はこの色です。
Gadgets/Gadget2 へ行く。
Gadgets/Gadget2 の差分を削除
*サイドバーから切り離し [#r75f25f6]

RIGHT:更新日 &lastmod();

サイドバーから切り離したときのプログラミングについては、htmlでは<div>タグを利用してレイヤーを切り替えることを行う。その時表示大きさなどをを変更する。ちなみに<LAYER>タグはIEでは使用できない。~

サイドバーからの出し入れに発生するイベントは次の関数で拾う。~
起動時にサイドバーに入っているか否か処理をonloadの中なんかで行う必要がある。行わと、起動時サイドバーから出ている状態でサイドバーが起動するとデフォルト処理になってしまう。

 if (System.Gadget.docked){
            サイドバーの中にある時の処理
 }else{
            サイドバーの外にある時の処理
 }
 
 System.Gadget.onUndock = function (){
        [サイドバーから出したときの処理]
 }
 
 System.Gadget.onDock = function (){
        [サイドバーに入れた処理したときの処理]
 }

**具体例 [#nf4e772d]
***表示ページ [#kb88794b]

''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();
   }

**外部URLのページの取得 [#w9856da2]
Ajaxで外部URLの内容を取得する。取得データを処理しやすいようにTEXTで取得する
[[ここ:http://allabout.co.jp/internet/javascript/closeup/CU20050515A/]]のぺーじを参考にした。

&color(red){注)指定URLに"?'+(new Date).getTime();"をつけることで毎回違う内容にアクセスするように見せかける。そうしないPC内にキャッシュされた内容をもってきて実際のURLに2回目からアクセスしない};

''XMLHttpRequest の通信の状態''~
-0 = uninitialized（読み込み開始前の初期状態）
-1 = loading（読み込み中）
-2 = loaded（とりあえず読み込んだ）
-3 = interactive（読み込んだデータを解析中）
-4 = complete（読み込んだデータの解析完了、または失敗した。）

''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){
   //onDock時の処理
        //レスポンスを取得
        res  = oj.responseText //
        
        //ダイアログで表示
        alert(res);
        //受け取った内容を配列に分解（トークンは";")
        data = res.split(";");
 }

 
   function on_loaded2(oj, host){
   //onUnDock時の処理
        //レスポンスを取得
        res  = oj.responseText //
        
        //ダイアログで表示
        alert(res);
        //受け取った内容を配列に分解（トークンは";")
        data = res.split(";");
 }


''&color(red){注）};以下のようにhttpoj.onreadystatechangeの中でdocument.write(res)で書くとなぜかhtml自体が書き換えられしまうそこで、以下のようにhtml内部でかくといいけどhttpoj.open( 'GET' , host , false )でこのように同期を指定しないとデータを取得する前にdocument.write(res)が実行されてしまう''

  jsonRead();
  document.write(res);

 


**JSON [#p49a7a2e]
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';
    }
  }