Q3 ドロップ可能なタブを作ろう
【carlist_tab.sql】

GENERATE HTML
{
{
  {  
    [ sinvoke(ca.name@{class=carname},
        file="http://www.db.ics.keio.ac.jp/ssql/
              ajax_tutorial/query/cardata_tab.sql",
           att=ca.id)
      @{dragto=Tab} ]!
  },
  embed(file="http:///www.db.ics.keio.ac.jp/ssql/
              ajax_tutorial/query/cardata.html")
     @{tab=droppable,class=cardata}
   
}@{tableborder=0}
}@{cssfile=demo.css}
FROM car ca, country cou, company co, cartype ct
WHERE ca.type = ct.id AND
ca.company = co.id AND
co.country = cou.id AND
ca.id <= 20

【cardata_tab.sql】

GENERATE HTML
{  
   { ca.name@{class=name}}!
   { imagefile(ca.id+".jpg",
        path="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/pic")
          @{class=image} }!
   {"製造者"@{class=datatitle},          co.name@{class=data} }!
   {"値段"@{class=datatitle},            ca.price@{class=data}   }!
   {"乗車可能人数"@{class=datatitle},    ca.capacity@{class=data}  }!
   {"レイアウト"@{class=datatitle2},     ca.layout@{class=data2}   }!
   {"ドア数"@{class=datatitle2},	     ca.door_num@{class=data2} }!
   {"全長"@{class=datatitle2},           ca.length@{class=data2}   }!
   {"全幅"@{class=datatitle2},           ca.width@{class=data2}    }!
   {"全高"@{class=datatitle2},           ca.height@{class=data2}   }

}@{cssfile=demo.css}
FROM car ca, company co
WHERE ca.company=co.id ;

					
Q3の解説
Tabインターフェースを作るためには、embed関数の装飾子として tab=yes を記述します。 例の場合、ドロップ可能なTabインターフェースを作成しているので、tab=droppable と装飾子に記述しています。 carlist_tab.sqlでは車種名を縦反復( []! )し、それとembed関数を横結合( , )しています。

またTabへのドラッグを可能にするためには、sinvoke関数の装飾子、dragtoに Tab を指定します。

carlist_tab.sqlで、ca.id<=20 という記述がありますが、これは表示件数を調整するために 加えているものであり、必ず必要な記述ではありません。
Q4 リンク先をパネル上に出そう
【cardata_panel.sql】

GENERATE HTML
{  
   { ca.name@{class=name}, 
        sinvoke("詳細データ",
                file="http://www.db.ics.keio.ac.jp/ssql/
                      ajax_tutorial/query/cardatadetail.sql",
                att=ca.id)
       @{panel=yes} 
   }!
   { imagefile(ca.id+".jpg",
               path="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/pic")
      @{class=image} 
   }!
   {"製造者"@{class=datatitle}, co.name@{class=data} }!
   {"値段"@{class=datatitle},   ca.price@{class=data}   }!
   {"乗車可能人数"@{class=datatitle}, ca.capacity@{class=data} }
}@{cssfile=demo.css}
FROM car ca, company co
WHERE ca.company=co.id AND ca.id=1;

【cardatadetail.sql】
GENERATE HTML
{
{  
   { ca.name@{class=name}}!
   { imagefile(ca.id+".jpg",
               path="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/pic")
     @{class=image} 
   }!
   {"製造者"@{class=datatitle},	 co.name@{class=data} }!
   {"値段"@{class=datatitle},	 ca.price@{class=data}   }!
   {"乗車可能人数"@{class=datatitle},	 ca.capacity@{class=data} }!
   {
     { {"レイアウト"@{class=datatitle2}, ca.layout@{class=data2} }, 
       {"ドア数"@{class=datatitle2},	 ca.door_num@{class=data2} } 
     }!
     { {"全長"@{class=datatitle2},	 ca.length@{class=data2}  }, 
       {"全幅"@{class=datatitle2},	 ca.width@{class=data2}  } 
     }!	
     { {"全高"@{class=datatitle2},	 ca.height@{class=data2}  },
       {"ホイールベース"@{class=datatitle2},	 ca.wheelbase@{class=data2}}
     }!	
     { {"重量"@{class=datatitle2},	 ca.weight@{class=data2} },
       {"ギア"@{class=datatitle2},	 ca.gear@{class=data2} } 
     }
    }
}
}@{cssfile=demo.css}
FROM car ca, company co
WHERE ca.company=co.id;

					
Q4の解説
パネルを生成する場合、リンク先をパネル上に表示する形を取ります。 そのためsinvoke関数の装飾子として panel=yes と記述することによって、リンク先をパネル上に表示します。 リンク先を生成するクエリは一般的になSuperSQLクエリです。

ただしタブ上にデータを表示するためのクエリにpanelを使うことはできません。 すなわちQ3のcardata_tab.sqlに panel=yes を含むようなsinvoke関数を利用することはできません。
Q5 アルバムを作ろう
【cardata_album.sql】

GENERATE HTML
{  
   { ca.name@{class=name}}!
   { imagefile(ca.id+".jpg",
               path="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/pic")
     @{class=image} 
   }!
   { embed(file="http://www.db.ics.keio.ac.jp/ssql/
                 ajax_tutorial/query/image.sql",
           where="ca.id=",att=ca.id) 
   }!
   {"製造者"@{class=datatitle},          co.name@{class=data} }!
   {"値段"@{class=datatitle},            ca.price@{class=data}   }!
   {"乗車可能人数"@{class=datatitle},    ca.capacity@{class=data} }!
   {"レイアウト"@{class=datatitle2},     ca.layout@{class=data2}   }!
   {"ドア数"@{class=datatitle2},         ca.door_num@{class=data2} }!
   {"全長"@{class=datatitle2},           ca.length@{class=data2}   }!
   {"全幅"@{class=datatitle2},           ca.width@{class=data2}    }!
   {"全高"@{class=datatitle2},           ca.height@{class=data2}   }

}@{cssfile=demo.css}
FROM car ca, company co
WHERE ca.company=co.id AND ca.id=1;

【image.sql】

GENERATE HTML
{
   [imagefile(ci.image,path="http://www.db.ics.keio.ac.jp
                             /~tk/ajaxdemo/pic")
    @{lightbox=thumb,class=thumb}
   ],
}@{tableborder=0}
FROM car ca, carimage ci
WHERE ca.id = ci.car_id

					
Q5の解説
ポップアップ風albumを作成するためにはimagefile関数の装飾子に lightbox=thumb を指定します。 この例ではimagefile関数を別クエリとして分割していますが、分割をしなくてもきちんと動作します。 imagefile関数を横反復( [], )することで、サムネイルを横方向にリストしています。 lightbox=thumb を指定した場合、サムネイル表示のために元画像も表示してしまうので、 スタイルシートで大きさを調整しておく必要があります。

複数の画像にまたがるアルバムではなく、単一の画像をポップアップ風に拡大表示したい場合には、 lightbox=yes と記述することで、指定したimagefile関数で貼り付けられた画像のみが表示されます。