12、Ajax and JavaScript remoting
This chapter covers
■ Combining Ajax and JSF
■ Validating form inputs instantly
■ Invoking components from JavaScript
■ Using Seam as a GWT service
本章讲述
结合Ajax 和JSF
立即校验表单录入
从JavaScript触发部件
使用GWT作为GWT服务
When applications are ported to the web environment, something is often lost in
translation: the user experience. Even nontechnical users understand the need to
wait for a page to load after each action, evidence of the lack of continuity that
plagues many web applications. Ajax provides a way to bring the rich, interactive
application (RIA) user experience to the web.
当应用处于WEB环境,一些东西经常会在翻译时丢失:用户经验。甚至非技术人员都知道在执行每个动作后要有个加载页面的等待。这证明在很多WEB应用中缺乏连续性。Ajax提供了一种方式,可得到丰富、交互应用(RIA)的用户体验。
In the previous chapter, you learned how the mission-critical and sometimes
daunting task of securing your application is dramatically simplified thanks to Seam.
By filling in a few blanks, you’re able to blanket your application with basic security
and then fine-tune it with contextual security rules. In this chapter, you’ll witness
another example of how Seam helps you transform your application with a handful
of keystrokes by leveraging its multifaceted Ajax support. This news is especially
promising, since moving to Ajax has proven to be a more costly investment than many
product managers first anticipated. One reason is that cross-browser JavaScript is not
for the faint of heart, and its problems can put the brakes on your development schedule.
Another is that JavaScript code quickly becomes spaghetti, making it difficult to
comprehend and even harder to test.
在前一章,你学习了SEAM是多么任务导向,一些吓人的安全任务在如何大幅地被SEAM减化。通过少量地填空,你可以让你的应用具有基本的安全,然后通过上下文安全规则来进行微调。这一章,你会见到另一个例子,看看SEAM如何帮助你转换你的应用,只稍作改变,就可以使用多面的Ajax支持。这是带来希望的新闻,因为转向Ajax被证明是一个成本比任何产品经理预测都高的投资。一个理由是跨浏览器JavaScript不适合脆弱的心脏,并用它的问题可能会迫使你的开发计划停下来。另一个是JavaScript代码快速快速成了意大利面,不易理解且难于测试。
In this chapter, you’ll discover that Ajax-based JSF component libraries and Seam’s
JavaScript remoting API offer a refreshed approach to Ajax by putting separation
between the application and the low-level XMLHttpRequest object, significantly reducing
the risk of letting Ajax through the door. The Ajax-enabled JSF component libraries
covered in this chapter, Ajax4jsf and ICEfaces, execute the JSF life cycle
asynchronously in response to user interactions, resulting in partial page updates that
don’t disrupt the user’s activity. Even better, this exchange is transparent to the developer,
who doesn’t have to touch a line of JavaScript. Rather than wait for the user’s
next move, ICEfaces has a mechanism for pushing presentation changes to the
browser in response to changes in the application state. JavaScript remoting cracks
the door open to JavaScript slightly, while still managing to hide the interaction with
the server, by allowing server-side components to be executed through JavaScript
function calls. Seam’s remoting can also give alternate front ends like GWT access to
the Seam component model.
这一章,你会发现基于Ajax的JSF部件库,及Seam的JavaScript remoting API提供了一个新的方式来实现Ajax,其将应用和底层XMLHttpRequest对象分离,明显地减少了Ajax带来的风险。启用Ajax的JSF部件库会在这一章讲到,Ajax4jsf 和ICEfaces,在与用户的交互中,异步地执行JSF生命周期,只部分地更新页面内容,从而不影响用户的行为。更好的是,这种交换对开发者是透明的,不用动一行JavaScript。不是让用户等待下一步,当应用的状态发生变化时,ICEfaces有一种机制可将变化送达浏览器。JavaScript remoting则让JavaScript来得更猛烈些,通过让服务器端部件使用JavaScript函数调用的方式,希望隐藏服务器上的交互。Seam’s remoting也可以提供另一上类似GWT的前端来访问Seam部件模型。
Although simplicity remains the underlying theme in the final part of this book,
the key word in this chapter is transparency. The investment you have made in learning
about the JSF life cycle, Seam components, and the EL throughout this book pays
off and helps you get your application rich quick. We begin by looking at how Ajax
is transparently weaved into the JSF component model and the types of interactions
this enables.
虽然在本书的最后部分力求简化,但本章更力求透明。本章,你在JSF life cycle, Seam components, 及 EL上的投入会得到回报,并使你的应用快速丰富。我们先看看Ajax如何被透明的织入JSF部件模型,还有可用的交互类型。
12.1 Using Ajax with JSF
JSF beat Ajax mania to the scene by nearly a year. The order of events was unfortunate
because Ajax would have fit perfectly with the design of JSF as an event-driven framework
backed by a server-centric model. Although Ajax wasn’t included in the JSF specification
(and still isn’t as of JSF 1.2), innovators recognized the potential of Ajax to close the gap
in the JSF vision and adapted it to JSF in an intelligent and efficient manner. This section
talks about the right and wrong ways of using Ajax with JSF, the two main component
libraries that brought Ajax to JSF, and Seam’s role in Ajax-based JSF requests.
在JSF中使用Ajax
JSF涉足Ajax已近一年。事件的顺序是一种不幸。作为事件驱动的框架,JSF是由服务器为中心的模型支持的,Ajax应与此做到匹配。虽然Ajax不被包含在JSF规范中(JSF 1.2中也不没有),革新者认识到Ajax的潜力可以填充JSF版本间的断层,使JSF可以更智能、更高效地使用。本节讨论在JSF中使用Ajax的对与错的地方,两个主要的部件库就将Ajax引入了JSF,在基于Ajax的JSF请求中Seam的作用。
12.1.1 Embracing a server-centric application model
JSF uses a server-side model to handle client-side events. The server then responds
with an updated view. Unfortunately, the standard mechanism in JSF for propagating
an event from the UI to the server is to use a regular form submit followed by a fullpage
refresh. This makes for a disruptive and costly event notification, in stark contrast
with the goal of Ajax and the rich web.
拥抱服务器为中心的模型
JSF使用了一种服务器端模型来处理客户端事件,随后服务器回应一个更新的了view。不幸的是,JSF的标准的将事件从UI传到服务器的机制是使用常规的表单提更新的交完整页面。这产生了分裂的高成本的事件通告,这与Ajax的目标和富WEB的目标形成了鲜明的对比。
JSF developers with Ajax-envy (myself being one of them) initially attempted to use
Ajax in their JSF applications by stepping outside the JSF component model. User
interactions would be trapped by custom JavaScript and the HTML in the rendered
page manipulated without JSF’s knowledge. To invoke the JSF life cycle from an Ajax
request, form data had to be fabricated to trick JSF into thinking the user had initiated
the event. When the response arrived, the rendered HTML would once again be
manipulated without JSF’s knowledge.
JSF开发者中的Ajax痴(我就是其中一员)开始试图通过超越JSF部件模型来在他们的JSF应用中使用Ajax。如果没有JSF知识,用户的交互会被生成的页面自定义的JavaScript和HTML搞晕。为了从Ajax请求激活JSF生命周期,表单数据必须组装来让JSF认为用户引发了事件。当回馈到达时,生成的HTML会再一次在没有JSF的情况下被操纵。
The trouble you get into when attempting to use ad hoc Ajax in JSF is that the rendered
page gets out of sync with the server-side UI component model. The next
authentic JSF postback is utterly confused, often resulting in unexpected behavior.
Frustrated developers pointed the finger at JSF for being too rigid. The real problem,
though, is the developer not appreciating JSF’s server-centric application model and
the benefits it provides.
当试图使用ad hoc Ajax于JSF中时,你陷入的困境是生成的页面会不再与服务器端部件模型同步。下一个可靠的JSF postback则完全认人困惑,经常会导致不可预期的行为。受伤的开发者指责JSF太死板。真实的问题是开发者没有领悟JSF的服务器中心的应用模型的精华。
The intent of JSF is to let you develop enterprise applications primarily in Java, with
a reasonable amount of declarative markup for connecting Java components to user
interface components (a linkage known as binding). Ajax, on the other hand, tempts
you to become involved in the low-level concerns of hand-coded Dynamic HTML
(DHTML) and JavaScript.
JSF的主旨是让你主要用JAVA来开发企业应用,使用合理数量的声明式修饰来连接JAVA部件到用户的界面部件(这种连接叫绑定)。Ajax却会让你处于手动编写动态HTML(DHTML) 和JavaScript的底层。
Programming models aside, JSF was designed to manage the UI. When it gets left
out of the loop, an impedance mismatch develops. The proper way to use Ajax with
JSF is to put JSF in charge of the Ajax communication, thus embracing JSF’s servercentric
model. This approach extends the value proposition of JSF to cover the development
of rich Java-based applications without needing to introduce the complexity of
JavaScript to the process. Both Ajax4jsf and ICEfaces position Ajax so that it honors
the JSF model.
除了编程模型,JSF用来管理UI。当离开回路,会出现开发的阻抗不匹配。使用带JSF的Ajax正确的方式是让JSF来管理Ajax通讯,以利用JSF的服务器中心模型。这一方式扩展了JSF的值命题来包含富基于JAVA的应用的开发而不需要见到JavaScript的复杂的处理。Ajax4jsf 和ICEfaces都是面向Ajax的JSF模型。
12.1.2 Ajax4jsf and ICEfaces open a communication channel to JSF
The main draw of Ajax is that it allows communication between the browser and the
server to proceed in the background without disrupting the user. In a JSF application,
it’s just as important to keep an open channel of communication between the rendered
page and the server-side UI component tree. That’s because, as soon as an Ajax
request is issued, the rendered page is at risk of becoming stale. It must be synchronized
with the server-side UI component tree as soon as possible to prevent its integrity
from being compromised.
Ajax4jsf 和ICEfaces打开了到JSF的通道
Ajax的主要好处是服务器与浏览器间的通讯在后台进行,不会打扰用户。在JSF应用中,在生成的页面和服务器端UI部件树间保持通讯通道很重要。这是因为,一旦Ajax请求发布,生成的页面就处于过期的风险中。它也必须尽可能与服务器端的UI部件同步以防止一致性受到破坏。
Although the outlook for the JSF and Ajax marriage may seem grim from this
description, Ajax4jsf and ICEfaces each provide a lightweight Ajax bridge that keeps
the lines of communication open. Even better, it’s mostly transparent to the developer.
Although the first ICEfaces release (August 2005) came six months earlier than
Ajax4jsf (March 2006), I want to start by discussing Ajax4jsf because it enables you
introduce Ajax into JSF incrementally.
虽然JSF 与Ajax的结合的前景暗淡,Ajax4jsf 和ICEfaces都提供了轻量级的Ajax桥梁,可使通讯畅通。更进一步,其对开发者几乎透明。虽然第一个ICEfaces(August 2005)版本发布比Ajax4jsf(March 2006)早六个月,我要先从Ajax4jsf开讲,因为它能展示逐步将Ajax引入JSF。
AJAX-ENABLING JSF WITH SUPPORT FROM AJAX4JSF
The challenge of introducing Ajax into JSF is that the standard UI components, and
plenty of third-party UI components, have no awareness of Ajax. Rather than mandating
that you switch to an Ajax-based UI component set, RichFaces developer Alexander
Smirnov developed a way to weave Ajax into JSF transparently, a solution now
known as Ajax4jsf. The mechanism he invented is so transparent, in fact, that it can be
used to “Ajax-enable” any JSF page without the UI components having any awareness
they’re participating in an Ajax request. This one library took JSF from being Ajaxinept
to being one of the most compelling approaches to Ajax.
While the Ajax4jsf component library contains a broad set of UI component tags, the
tag that gets the heaviest use, almost disproportionately so, is (often written
as ). It’s used to bind a user-initiated JavaScript event to a serverside
action invoked via Ajax and to designate regions of the page that get rerendered
from the Ajax response, encompassing the essence of Ajax4jsf.
AJAX4JSF所支持的AJAX
将AJAX引入JSF的难题是标准UI部件和很多第三方UI部件对Ajax没有意识。不是强迫你使用基于Ajax的UI部件,RichFaces的制作人Alexander Smirnov开发了一种方式透明的将Ajax织入JSF,现在另一个方案名为Ajax4jsf。其引入的机制很透明,可引入到任何Ajax的JSF页,而不用UI部件知道它们正在参与Ajax请求。这种只用一个库的方式使之成为最受瞩目的使用Ajax的方式。
================
Ajax4jsf or RichFaces—which is it?
RichFaces is a visual JSF component set that’s based on the Ajax4jsf concept and
APIs. Ajax4jsf was once its own project, but now it’s bundled with RichFaces. The
Ajax4jsf tags are geared specifically toward adding Ajax capabilities to non-Ajax components,
such as the standard JSF palette. RichFaces components natively support
the Ajax4jsf interaction. The rich in RichFaces credits both its support for Ajax and its
attractive look and feel.
RichFaces是一个可视化的基于Ajax4jsf概念和API的JSF部件集。Ajax4jsf原来是独立的项目,现在绑定到了RichFaces。Ajax4jsf标签被特别地加入以增加Ajax的兼容性到非Ajax部件,如标准JSF模板。RichFaces部件生来支持Ajax4jsf交互。RichFaces的富归功于其对Ajax的支持和诱人的外观和感觉。
================
A PATCHWORK OF UPDATES
The Ajax4jsf process is depicted in figure 12.1. When a request is sent out by Ajax4jsf,
the JSF life cycle is invoked, just like with a standard JSF request. However, since the
request occurs using Ajax, the page doesn’t change, at least not immediately. To
ensure that the rendered page doesn’t become stale, Ajax4jsf lets you declaratively
control which areas of the UI to synchronize. Prior to the rendered page being sent
back to the Ajax engine, Ajax4jsf extracts the corresponding markup and returns only
a set of “patches” (i.e., XHTML fragments) to the browser. The Ajax engine cuts out
the dead areas of the UI and stitches in the replacements. Since the state of these
areas remains consistent with the server-side UI component tree, any JSF-related
actions triggered in those areas behave as expected.
升级的大拼盘
Ajax4jsf的过程在图12.1中描述。当一个请求由Ajax4jsf发送,JSF生命周期被激活,就像标准JSF请求。不管怎样,因为请求使用Ajax,页面没有改变,至少没有立即改变。为了确保生成的页面没有过期,Ajax4jsf让你声明式控制哪个区域的UI被同步。在生成的页面被送回到Ajax引擎之前,Ajax4jsf提取了对应的标记,只返回一套“补丁”(如XHTML片段)到浏览器。Ajax引擎切出UI的死区,加进替代区。因为这些区域的状态与服务器UI部件树保持一致,任何在这些区域被触发的JSF相关的actions会像期望一样动作。
Let’s put this process into practice on the golf course search screen. Right now, when
the user clicks the Search button to filter the results, it causes a full-page refresh. It would
be faster and less disruptive to simply replace the results table, the area of the page we
want to rerender. First, we need to assign an id to the results panel, giving it a “handle”:
让我们将这一过程付诸实现于高尔夫球场的搜索页面。现在,当用户点击了搜索按钮来过滤结果,它会导致完整页面的刷新。如果只更新结果表,我们想生成的那个区域,会快些并且更少打扰用户。首先我们需要指定一个ID到结果页面,给其一个“控制点”:
Course search results
Next, we nest the tag within an input field in the search form, tying a
JavaScript event triggered by this field to an invocation of the JSF life cycle. To ensure
that the search runs as soon as possible but not before the user is done typing, we
choose to bind to the input field’s onblur event (i.e., when it loses focus). We also tell
Ajax4jsf which area of the page to rerender by declaring a component id in the
reRender attribute:
然后,我们在搜索页面嵌套标签于一个输入字段,连结一个被这一字段触发的JavaScript事件到一个JSF生命周期的调用。以确保搜索尽快执行,但不会在用户完成录入之前,我们选择绑定到录入字段的onblur事件(当其失去焦点时)。我们也告诉Ajax4jsf哪个区域要用在reRender属性中声明部件ID的方法来生成:
When the user tabs or clicks away from the input field, an Ajax request is sent, invoking
the JSF life cycle just as though the user had clicked the Search button. But in this
case, the response is filtered by Ajax4jsf and only the results panel is sent back. The
page is then updated incrementally to reveal the new search results.
当用户点离或tabs开录入域,会发送一个Ajax请求。激活JSF生命周期,就像用户点击了搜索按钮。但在这种情况下,反馈会被Ajax4jsf过滤掉,只有结果集被送回。页面随后被增量更新来反映新的搜索结果。
The search is able to execute without an explicit action because the Query component
automatically detects when the search criteria has changed. You may have a
situation that requires an explicit action to be called in order for the search to
execute. Ajax4jsf lets you specify either an action or an action listener on the
tag, using the action and actionListener attributes, respectively. This
turns the tag into a UI command component, which isn’t triggered by a
click but rather a JavaScript event:
没有明确的action时,搜索也能执行。因为当查询规范变化时,查询部件会自动检测。可能某时你要请求一个明确的action来执行搜索。Ajax4jsf让你使用action 或actionListener在上指定一个action或action监听器,这会调整标签到UI命令部件,这不是被点击而是一个JavaScript事件:
action="#{hypotheticalSearchAction.search}"/>
If we were to continue Ajax-enabling every input field in the search form, the only
problem would be having to specify the reRender attribute each time. Fortunately,
Ajax4jsf supports a way to make certain branches of the tree support “autografting.”
By wrapping the tag around a region of the
page, it tells Ajax4jsf to automatically rerender that region whenever an Ajax request
passes through the Ajax engine. Let’s apply this to the search results panel:
如果我们要继续在搜索表单的每个录入域启用Ajax,唯一的问题是不得不每次指定reRender属性。幸运地,Ajax4jsf支持一种方法让一些树的分支支持自体移植。通过包装标签于页面的一个区域,无论何时Ajax请求传递到Ajax引擎,它让Ajax4jsf自动重画区域。让我们应用这个到搜索结果页面:
Course search results
With the autografting output panel in place, the tags no longer have to
specify the reRender attribute. If you’re doing other Ajax operations on the page, you
can localize the Ajax activity that triggers automatic rerendering by wrapping a portion
of the page in . In this case, you might wrap the search form and
results panel.
当自体移植输出页面就位后,标签不必指定reRender属性。如果你在页面上做其它Ajax操作,你可以定位Ajax行为。其能过包装页面的一个部分。在这种情况下,你可以包装搜索表单和结果页面。
Although it may seem like a lot of work to merge the changes back into the UI, this
work is far outweighed by the benefits. It ensures the integrity of the page is maintained,
it makes Ajax transparent to the developer, and, since the response contains
only necessary updates and not a full HTML document, JSF can behave like an efficient
event-driven framework and the user’s activity isn’t disrupted by a page refresh.
虽然它看上去将变化合并到UI中是很多工作,这个工作对于得到的益处是很值的。它确保了页面的完整性,并使Ajax对于开发者透明,当回馈中只保留必要的更新,而不是完整HTML文档,JSF会像一个有效的事件驱动的框架,用户的操作不会被页面的刷新打扰。
Ajax4jsf lets you adopt Ajax without having to write JavaScript or replace your existing
components, but it still requires that you do a fair amount of work to configure
the Ajax interactions. Depending on what you’re trying to accomplish, this can be
either a good or a bad thing. One of the limitations of Ajax4jsf is that the marked
regions of the page are synchronized even if the markup hasn’t changed. Regions that
aren’t specified are prone to falling out of date. What you are basically missing is intelligent
synchronization of the UI, a central concern in ICEfaces.
Ajax4jsf让你适应Ajax而不用写JavaScript或替代你已存在的部件,但它还需要你做很多Ajax交互的配置工作。依你要完成的内容的不同,这可能是好事也可能是坏事。Ajax4jsf的一个限制是页面中被标出的区域被同步,虽然标记没有改变。同有指定的区域则可能会过期。你基本缺少的是智能的UI的同步,这是ICEfaces的中心概念。
INTELLIGENT UI SYNCHRONIZATION WITH ICEFACES
ICEfaces is an Ajax extension for JavaServer Faces that regards Ajax as a framework
concern rather than a developer concern. Ajax-based JSF applications using ICEfaces
are virtually indistinguishable from non-Ajax JSF applications. The key lies with the
ICEfaces rendering process. Rather than rendering to a stream that’s sent directly to
the browser, each view is rendered into a Document Object Model (DOM) on the
server, another progression of the UI component tree. The changes to the DOM are
detected after each invocation of the JSF life cycle and only the corresponding
markup is sent to the browser. As with Ajax4jsf, an Ajax bridge resident in the browser
is responsible for merging these updates into the page, as illustrated in figure 12.2.
使用ICEFACES来做智能的UI同步
ICEfaces是JavaServer Faces的一个Ajax扩展,其将Ajax用作一个框架概念而不是开发者概念。使用ICEfaces的
基于Ajax的JSF应用实现上与非Ajax的JSF应用是不好区分的。关键在于ICEfaces重画过程,而不是重画到一个到浏览器的流,每个view被重画到服务器的数据对象模型(DOM)--UI部件树的另一个改进。JSF生命周期的每次调用,到DOM的改变被检测。只有对应的标记被发送到浏览器。就像用Ajax4jsf,保留在浏览器中的Ajax桥负责合并这些更新到页,示例如图12.2。
There are two key benefits to the ICEfaces approach (which is known as Direct-to-
DOM [D2D] rendering). First, it reflects an efficient use of the network, making it
especially suitable for mobile applications. Second, the developer doesn’t need to
decide which areas of the page need to be rerendered when an event is triggered—
that’s something the framework decides at runtime. In fact, the developer
doesn’t have to do anything to Ajax-enable the UI components on the page. Ajax is
baked in at a much deeper level so that every interaction is channeled through an
Ajax request.
ICEfaces方法有两个关键的好处(表示为Direct-to-DOM[D2D]重画)。首先,它反映一个高效的网络使用,使其特别适用于移动应用。第二,开发者不需要决定当事件被触发时,页面的哪个区域应被重画,这些事在运行时由framework决定。事实上,开发者对页面上的UI部件不用做任何事。Ajax处于深层,所以每个交互由一个Ajax请求传递。
TIP
If a long-running conversation isn’t active, the conversation id changes
during the Ajax request. Since Seam automatically appends the conversation
id to Seam UI command components, this confuses ICEfaces into
thinking that areas of the page have changed, resulting in a much
larger Ajax response than necessary. To remedy this problem, you
either need to ensure that the conversation id isn’t rendered somewhere
in the HTML markup or operate within the context of a longrunning
conversation.
如果一个长期运行的会话未激活,会话的ID会在Ajax请求中改变。既然SEAM自动地增加会话ID到SEAM的UI命令部件,这会误导ICEfaces认为页面的区域已修改,结果这个Ajax回馈会大于必要的。为了修补这个问题,你需要确保会话ID没有在HTML标记中或在一个上下文相关的长期会话中被重画。
Let’s look at the course search example again, this time augmenting it using ICEfaces.
Since it’s not necessary to declare which areas of the page are synchronized,
we’re only concerned with the search form. Here’s one of the input fields and the
submit button:
让我们再看看球场的搜索页面例子,这一次用ICEfaces作参数。因为不必声明页面中哪个区域是同步的,我们只关心搜索表单。这里是录入字段及提交按钮中的一个:
Hmm. That’s interesting—no special Ajax tags. As I mentioned, ICEfaces transparently
adds Ajax interactions to the page. It does so by replacing the standard JSF component
renderers with renderers cognizant of the D2D mechanism. In order for the
page to be updated in place, you simply forgo use of a JSF navigation event, guaranteed
in this case since an action isn’t specified in the UI command button. That raises
an important point. Although requests are made over Ajax, JSF navigation rules are
still honored. The same goes for Ajax4jsf.
有趣--没有特殊的Ajax标签。正如我提过的,ICEfaces透明地增加Ajax到页面。通过替代标准的JSF部件重画器为重画器相识的D2D机制来实现。为了页面在适当的位置更新,你简单地禁用JSF导航事件,确保在这种情况下,一个action没有被指定到UI命令按钮。这带来重要的一点,虽然请求是通过Ajax的,JSF导航规则仍有效,对于Ajax4jsf也是这样。
There is a key improvement that can be made in the ICEfaces example. Currently,
the Ajax request only happens when the Search button is activated, whereas in the
Ajax4jsf example, the search occurs when the input field loses focus. This behavior is
accomplished in ICEfaces using a feature known as partial submit. While it’s possible to
trigger a partial submit using a built-in JavaScript function, in the spirit of transparency
we use the ICEfaces input component tag to hide this JavaScript behind declarative
markup. This tag also brings the benefit of component styling.
有一个重要的改善可加入ICEfaces例子,现在,Ajax请求只发生在查询按钮处于激活时,而在Ajax4jsf例子中,查询发生在输入字段失去焦点时。这个行为在ICEfaces中使用一个名为部分提交的特性来完成。这也可能触发一个使用内建JavaScript函数的部分提交,为了透明,我们使用ICEfaces录入部件标签来隐藏这个JavaScript于声明标记之后。这个标签也带来部件风格的好处:
The partialSubmit attribute activates the same behavior as the
"onblur"> tag in Ajax4jsf. Partial submit is explored in more depth in section 12.2.
部分提交属性激活Ajax4jsf中一样的行为。在12.2节中,部分提交有更多描述。
Ajax4jsf and ICEfaces are about more than just Ajax. They are about letting you
perform incremental page updates synchronized from the state on the server. You no
longer have to design pages around the full-page refresh model. Instead, you can consider
fine-grained manipulation of the page to achieve rich effects in the application.
The patchwork of updates that are merged back into the rendered page behave as
though they’d been there all along (meaning when the page was initially rendered).
In addition to incremental page updates, RichFaces and ICEfaces offer styling of components,
rich widgets, drag and drop, visual effects, and many more features that set
your application apart from a classic web application.
Ajax4jsf和ICEfaces不仅仅是Ajax。它们是让你做渐近的页面更新来与服务器的状态同步。你不再在完整页面刷新模式下设计页面。而是考虑细粒度的页面操作以达到应用的丰富效果。跟踪的拼凑合并成了生成页的行为从一开始就有(意味着当页面被初始化生成)。除了递增的页面更新,RichFaces 和ICEfaces也提供部件风格、富物件、拖拽、视觉效果及其它很多特性,将你的应用与典型WEB应用区分开。
The big question at this point is, what’s Seam’s role in all of this Ajax stuff? That’s
the real beauty of it. Seam just keeps doing what it does best.
这一点最大的问题是在这些Ajax中,Seam的角色是什么?这是最本质的,SEAM只保留它做得最好的。
12.1.3 Seam’s role in Ajax-based JSF requests
While the Ajax requests allow the page to continuously interact with Seam, there’s nothing
that Seam has to do differently. The JSF life cycle is still invoked and therefore Seam
treats each request just as it would any other postback. That doesn’t mean Seam has
nothing to add, though. On the contrary, you find that Seam’s stateful design lends itself
perfectly to the Ajax-enabled JSF environment. Here are a few ways Seam adds value:
基于Ajax的JSF请求中,SEAM的作用
虽然Ajax请求允许页面持续与SEAM交互,SEAM却不必非做些特别的。JSF生命周期仍是激活,因此SEAM对待每个请求和对待其它postback一样。这不意味SEAM没什么东西可加。相反,你发现SEAM的有状态设计很适合基于Ajax的JSF环境。下面是SEAM的一些附加值。
■ Maintain server-side state —Seam can connect the state from one Ajax request to
the next, avoiding the negative impact of pounding the server’s resources. Both
the page scope and a long-running conversation work well here. Seam can even
facilitate an application transaction performed entirely over Ajax.
维护服务器端状态--SEAM可以从一个Ajax请求到另一个地连接状态,避免浪费服务器资源的负面影响。面范围和长期运行的会话可工作得很好。SEAM甚至可以促使一个应用事务完全使用Ajax。
■ Contribute outjected context variables —Any action invoked during an Ajax request
can trigger bijection. The outjected context variables are available to the regions
of the view being rerendered.
有肋于注出上下文变量--任何一个Ajax请求可以触发双注。注出的上下文变量在view被重画的范围内可用。
■ Dry-run the JSF life cycle —Ajax4jsf can ask JSF to run through the life cycle without
performing actions or navigations to verify that form data is acceptable.
Seam’s integration with Hibernate Validator is of most interest here.
JSF生命周期的Dry-run--Ajax4jsf可请求JSF去运行通过生命周期而不操作actions或导航去校验表单数据是否可接受。SEAM与Hibernate校验器的集成在这里是最有趣的。
■ Notify changes in application state —Seam’s event/observer model, its asynchronous
dispatcher, and its integration with JMS offer ways to notify components of
a change in the application’s state. When combined with ICEfaces’ Ajax Push,
presentation changes can be sent to browsers with having to wait for interaction
from the user.
通知应用状态的变化--SEAM的事件/观察者模型,是异步的分配器,集成了JMS,提供很多方式来通知部件应用状态的变化。当结合ICEfaces’ Ajax Push,显示的变化必须等待与用户的交互完成才发送到浏览器。
Aside from the last point, covered in detail in section 12.3, the items in this list remain
consistent with points made throughout the book. The only difference now is that
everything is happening in closer to real time and the browser isn’t spinning its wheels
reloading the page. You do need to be aware that Ajax requests occur more frequently,
so there’s a greater chance that multiple requests in the same conversation
will arrive at the server simultaneously. See the accompanying sidebar on the topic of
conversation contention.
除了最后一点,细节将在12.3中描述。列表中的条目与书中的保持一致。现在唯一的不同是每件事会与真实发生时间更接近,浏览器没有停下来重新加载页面。你确实需要了解Ajax的请求发生得更频繁,所以有很多时候会有多个同一会话的请求同时到达服务器。看看附加的关于会话争论的主题。
No configuration is necessary to use RichFaces/Ajax4jsf with Seam. As long as the
RichFaces JAR files are present on the classpath and the SeamFilter is registered in
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/21802202/viewspace-1027643/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/21802202/viewspace-1027643/