展覧会案内webサービスを作る(6) 週間リストを作る

google AppEngineを使って展覧会案内葉書のデータベースサービスを作りますよの続き

とりあえず、ハガキを表示する所まで作ったけど、このままだと一覧性にかけているので週間リストを表示するようにします。
pythonのコードとしてはmainページとあんまり変わらない、表示の体裁を整える為にテーブルにしたぐらい。改めてココに書くような内容はない。
次に週間リスト表示をメインページにのっける方法を考えました

最初はmainページ内に週間リストページを<iframe>で埋め込んでみたけど、全体が表示されなかったりしたのでjavascriptで週間リストページを読み込んで埋め込む様にしてみました

main.html内に<div id="week"></div> を埋め込んで、
更にjavascriptも埋め込みます

週間リストの読み込みは非同期に行いたいのでprototype.jsを使いました。僕のjavascriptの知識は日経ソフトウェアプレミアム総集編プログラミングまるごとパック (2007)
のページが殆どなので他の事はできません。とにかくprototype.jsを使えば良し

prototype.jsはアップロードしなくてもgoogleサーバから読み込めるので

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("prototype", "1.6.0.2");</script>

と書いておきます。mainページ読み込み時に週間リストも読み込むようにしておきます

<script type="text/javascript"><!--
var WEEK ='week';
function init(){
 new Ajax.Updater('week', WEEK+'?startdate={{startdate}}', {method: 'GET'});
}
function jump(str){
 new Ajax.Updater('week', WEEK+'?startdate='+str, {method: 'GET'});
}
Event.observe(window, 'load', init);
// --></script>

{{startdate}}はpythonのテンプレートで書き換えます

jump(str) 関数は '<<' '>>' ボタンで日付の移動をするために用意しました

いまのところこんなイメージです


もうちょっと、デザインをナントカしたいとか、sidebar側に関係ない色が侵入してたり、やることはまだいっぱいあります。