JavascriptやCSSの取り込み
さて、ToscaWidgetでフォームを表示できたわけだが、CalendarなどJavascriptを使うウィジェットが動かなかった。
さらに追加でやることがある。
toscawidgets.api.retrieve_resources を使って、そのウィジェットに必要なJSやCSSを取得して、テンプレート側に展開しないといけない。
このあたりドキュメントがなく、サンプルコードだけが頼りだ。
以下は、resourcesの処理を、昨日のコードに追加したものだ。
def index(self): c.values = dict(name=u'aodag', introduction=u'Pythonプログラマー') c.form = UserForm() resources = retrieve_resources(c.form) return render_response("/main_index.html", resources=resources)
render_responseのキーワード引数でresourcesを渡す。
一回c.resourcesで試してみたが、うまく渡っていなかった。
コードを参照してみると、中でc.resourcesに値を設定しているので上書きされて消えてしまうようだ。
c.w にウィジェットを渡しておけば、retrive_resourceなど必要な処理をやってくれるようなので、書き換えた。
def index(self): c.values = dict(name=u'aodag', introduction=u'Pythonプログラマー') c.form = UserForm() c.w = [c.form] return render_response("/main_index.html")
上記どちらのコードでも、テンプレート内では、c.resourcesに必要なものが入っている。
次は、これらのリソース(JSLinkやCSSLinkなど)をテンプレート内で展開しないといけない。
展開するポイントは、head内, bodyの最初, bodyの最後。
# -*- coding:utf-8 -*- <?xml version="1.0"?> <html> <head> %for rsc in c.resources.get('head', []): ${rsc.display()} %endfor </head> <body> %for rsc in c.resources.get('bodytop', []): ${rsc.display()} %endfor ${c.resources} ${c.form.display(c.values, action='save')} %for rsc in c.resources.get('bodybottom', []): ${rsc.display()} %endfor </body> </html>
c.resource内にそれぞれ、head, bodytop, bodybottom にわけられているので、それらを展開して表示させる。
やることが多いので、このあたりはベーステンプレートにまとめておいたほうが良さそうだ。