포스트백
======
Web 어플리케이션은 다음과 같은 두 가지 경우로 많이 사용됩니다.
* 서버를 위해 사용하는 경우: 스마트폰을 위한 RESTful API를 만들거나, 다른 웹사이트를 위한 웹서비
* 사람을 위해 사용하는 경우: 인터랙티브한 웹 서비스
Web 프레임워크를 기반으로 Xitrum은 이 두가지를 쉽게 사용할 수 있는것을 목표로 하고 있습니다.
1번째 케이스를 사용하기 위해서、:doc:`RESTful actions ` 를 적용하여 대응하고、
2번째 케이스를 사용하기 위해、Ajax폼을 사용하고 있습니다.
아래 링크에서 postback에 대한 개념을 알 수 있습니다.
* 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`` 으로 postback을 보냅니다.
``
``#myform`` 은 JQuery의 선택요소로 폼의 추가 파라미터를 선택하여 보내게 됩니다.
Ajax로딩중 이미지 로딩
-----------------
아래의 로딩 이미지가 Ajax 통신중에 표시됩니다:
.. Use ../img/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};
};