Postbacks
=========
Có 2 use case chính của ứng dụng web:
* Để phục vụ các thiết bị: bạn cần tạo các RESTful APIs cho smartphones, web service cho các web site khác.
* Để phục vụ các người dùng cuối: bạn cần tạo giao diện web.
Như một web framework thông thường, Xitrum hướng tới việc hỗ trợ giải quyết các use case một cách dễ dàng. Để giải quyết use case đầu tiên, xem :doc:`RESTful APIs `. Để giải quyết use case thứ hai, bạn có thể sử dụng tính năng Ajax form postback của Xitrum.
Bạn có thể xem thêm các trang dưới đây để biết thêm về postback:
* http://en.wikipedia.org/wiki/Postback
* http://nitrogenproject.com/doc/tutorial.html
Tính năng postback của Xitrum có liên hệ tới `Nitrogen `_.
Layout
------
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}
)
}
Form
----
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)
}
}
Khi sự kiện ``submit`` của JavaScript trong form xảy ra, form sẽ postback về ``ArticlesCreate``.
Thuộc tính ``action`` của ``
``#myform`` là một jQuery selector để chọn form có chứa các parameter được thêm vào.
Hiển thị ảnh chờ khi load Ajax
--------------------------------
Mặc định, ảnh sau sẽ được hiển thị khi load Ajax:
.. Use ../img/ajax_loading.png for PDF (make latexpdf) because it can't include animation GIF
.. image:: ../img/ajax_loading.gif
Để hiển thị ảnh, bạn có thể gọi JS snippet này sau khi đã include ``jsDefaults`` (đã include
`xitrum.js `_) trong view template của bạn:
::
// 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};
};