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 にわけられているので、それらを展開して表示させる。
やることが多いので、このあたりはベーステンプレートにまとめておいたほうが良さそうだ。