ポストバック
============
Webアプリケーションには主に以下の2つのユースケースが考えられます。
* 機械向けのサーバー機能: スマートフォンや他のWebサイトのためのWebサービスとしてRESTfulなAPIを作成する必要があるケース
* 人間向けのサーバー機能: インタラクティブなWebページを作成する必要があるケース
WebフレームワークとしてXitrumはこれら2つのユースケースを簡単に解決することを目指しています。
1つ目のユースケースには、:doc:`RESTful actions ` を適用することで対応し、
2つ目のユースケースには、Ajaxフォームポストバックを適用することで対応します。
ポストバックのアイデアについては以下のリンク（英語）を参照することを推奨します。
* http://en.wikipedia.org/wiki/Postback
* http://nitrogenproject.com/doc/tutorial.html
Xitrumのポストバック機能は `Nitrogen `_ を参考にしています。
レイアウト
----------
AppAction.scala
::
import xitrum.Action
import xitrum.view.DocType
trait AppAction extends Action {
override def layout = DocType.html5(
{antiCsrfMeta}
{xitrumCss}
{jsDefaults}
Welcome to Xitrum
{renderedView}
{jsForView}
)
}
フォーム
--------
Articles.scala
::
import xitrum.annotation.{GET, POST, First}
import xitrum.validator._
@GET("articles/:id")
class ArticlesShow extends AppAction {
def execute() {
val id = param("id")
val article = Article.find(id)
respondInlineView(
{article.title}
{article.body}
)
}
}
@First // Force this route to be matched before "show"
@GET("articles/new")
class ArticlesNew extends AppAction {
def execute() {
respondInlineView(
)
}
}
@POST("articles")
class ArticlesCreate extends AppAction {
def execute() {
val title = param("title")
val body = param("body")
val article = Article.save(title, body)
flash("Article has been saved.")
jsRedirectTo(show, "id" -> article.id)
}
}
``submit`` イベントがJavaScript上で実行された時、フォームの内容は ``ArticlesCreate`` へポストバックされます。
``
``#myform`` はJQueryのセレクタ形式で追加パラメーターを含むエレメントを指定します。
ローディングイメージの表示
----------------------------
以下のローディングイメージがAjax通信中に表示されます:
.. Use ajax_loading.png for PDF (make latexpdf) because it can't include animation GIF
.. image:: ../img/ajax_loading.gif
カスタマイズするには、テンプレート内で、``jsDefaults`` (これは `xitrum.js `_
をインクルードするための関数です) の後に次を追加します:
::
// target: The element that triggered the postback
xitrum.ajaxLoading = function(target) {
// Called when the animation should be displayed when the Ajax postback is being sent.
var show = function() {
...
};
// Called when the animation should be stopped after the Ajax postback completes.
var hide = function() {
...
};
return {show: show, hide: hide};
};