快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

澳门威尼人斯_龟发之家论坛



在 JSF 2 简介 系列的 上一期 中,我评论争论了应用内置的 Ajax 实现自动完成复合组件。页面作者可以在一个 facelet 中应用该组件,该组件认真处置惩罚所有 Ajax 细节。只管内置的 Ajax 已经存在,但仍旧可以在开拓职员实现复合组件之后(可能是很长一段光阴今后),方便地让页面作者将 Ajax 添加到该组件中。本文将展示复合组件若何容纳后来添加的 Ajax。

在 “JSF 2 简介,第 3 部分:事故处置惩罚、JavaScript 和 Ajax” 中已经评论争论过,JSF 2 的标记容许页面作者将后来的 Ajax 添加到 JSF 2 的内置组件中。例如,应用 ,您可以轻松将一个提交按钮转变为一个 Ajax 按钮:

然则, JSF 2 的标记不会处置惩罚复合组件(确凿如斯),由于复合组件只是组件容器。

例如,在 “JSF 2 简介,第 2 部分:模板及复合组件” 中,我先容了一个简单的图标复合组件,它包孕一个链接,由一幅图像表示。当用户单击该图标时,该链接提交一个表单,后者触发一个与图标链接相关联的办事器端动作侦听器。应用图标很简单:

由于您可以应用标记将提交按钮转变为 Ajax 按钮,您可澳门威尼人斯能觉得您能够对图标履行相同操作:

上面的代码片段不会生效,由于我向图标组件附加了标记,我真正想要做的是将它附加到图标内部的链接上。

在本例中,我必要的是一种容许我将 Ajax 行径附加到图标内部的链接的机制,或者更一样平常地,容许我将 Ajax 行径附加到复合组件内部的组件。这种机制(在 Mojarra 和 Apache MyFaces 中实现过,而在 JSF 2.0 中完全没有记录)是本文评论争论的重点。(留意:在编写本文时已添加了 MyFaces 支持。)在懂得该机制的事情道理之前,我将澳门威尼人斯创建一个新的图标复合组件供应用。

可重用的图标组件

想象一下您拥有一项全天下最酷的事情。大概您正在实现新一代魔兽天下图形引擎。但遗憾的是,这只是个贪图。本日,您要实现的是如图 1 所示的字体选择法度榜样:

图 1. 选择一种字体

您的上司问您实现此选择法度榜样将必要多长光阴。他们用户能够单击 2 字符预览窗口中的 + 和 - 图标来变动字体大年夜小。当然,他们盼望应用 Ajax,以便预览窗口和图标左右显示的大年夜小会自动更新,而无需对页面的另外部分进行操作。

您的上司盼望获得的是一个简单的字体选择法度榜样组件,但您知道这并不简单。您将实现一个通用的图标组件,这个组件可在运行时应用一个图像和一个操作进行设置设置设备摆设摆设,而且能够完全 Ajax 化,然后您将在字体预览窗口应用您的图标组件。经由过程这种要领,您将获得一个在将来迟早会用上的图标组件。

现在,我将向您展示若何应用不跨越 25 行 XML 代码实现该图标组件。

字体选择法度榜样示例

字体选择法度榜样由 4 个文件组成:

图 1 中显示的页面,在 index.xhtml 中定义。

图标组件,位于 /resources/util/icon.xhtml 下。

一个侦听器(com.clarity.FontSelectionListener.java)。

一个 bean(com.clarity.FontSettings)。

图 2 展示了目录布局:

图 2. 字体选择法度榜样示例的文件

清单 1 是 图 1 所示页面的 facelet — index.xhtml:

清单 1. facelet (/web/index.xhtml)

#{msgs.windowTitle}

清单 1 中的 facelet 为图标组件声明一个名称空间,并在页面中应用该组件。这应用了 JSF 2.0 复合组件 101,具体信息请拜见 “JSF 2 简介,第 2 部分:模板及复合组件。”

请留意,两个图标都为图标的 link 组件配备了一个动作侦听器。当用户单击图标的链接时,JSF 调用办事器上的该侦听器,如清单 2 所示。

清单 2. 侦听器 (com/clarity/FontSelectionListener.java)

package com.clarity;

import javax.el.ELResolver;

import javax.faces.component.UIComponent;

import javax.faces.context.FacesContext;

import javax.faces.event.AbortProcessingException;

import javax.faces.event.ActionEvent;

import javax.faces.event.ActionListener;

public class FontSelectionListener implements ActionListener {

@Override

public void processAction(ActionEvent event)

throws AbortProcessingException {

FacesContext c = FacesContext.getCurrentInstance();

ELResolver elResolver = c.getApplication().getELResolver();

FontSettings fs = (FontSettings)

elResolver.getValue(c.getELContext(), null, "fontSettings");

if (((UIComponent)event.getSource()).g澳门威尼人斯etClientId().startsWith("minus"))

fs.decrement();

else

fs.increment();

}

}

在 清单 2 中,我查看触发事故的客户端标识符是否是 minus,假如是,我就知道用户单击了减号图标,然后我将减小字体大年夜小。否则,我将增大年夜字体大年夜小。

请留意,侦听器会获取对 fontSettings 托管 bean 的引用。它经由过程获取对 Expression Language Resolver 的引用来完成此义务,只要给定了托管 bean 的名称,后者知道若何找到它们。fontSettings bean 如清单 3 所示:

清单 3. 字体设置 bean (com/clarity/FontSettings.java)

package com.clarity;

import java.io.Serializable;

import javax.inject.Named;

import javax.enterprise.context.SessionScoped;

@Named

@SessionScoped

public class FontSettings implements Serializable {

private static int INCREMENT = 1;

private int size = 1;

public int getSize() { return size; }

public void setSize(int newValue) { size = newValue; }

public void increment() { size += INCREMENT; }

public void decrement() { size -= INCREMENT; }

}

前面的 3 个清单展示利用法度榜样中除图标复合组件以外的所有代码。接下来将先容图标复合组件。

实现图标复合组件

图标有 3 个需求:

图像必须是可设置设置设备摆设摆设的。

用户单击图像时触发的动作是可设置设置设备摆设摆设的。

图标必须支持 Ajax。

在清单 4 中,我满意了前两个需求:

清单 4.复合组澳门威尼人斯件,版本 1 (/resources/util/icon.xhtml)

清单 4 中的图标组件声明一个 image 属性和一个名为 link 的 actionSource。该 actionSource 在 清单 1 顶用作的 for 属性的值。假如还不太明白,您可以查看 “JSF 2 简介,第 2 部分:模板及复合组件” 懂得动作源若何处置惩罚复合组件,此中简短评论争论了一个与 清单 4 中类似的图标实现。

清单 4 中的图标组件实现容许页面作者设置设置设备摆设摆设图标的外不雅和行径,但不容许作者将 Ajax 行径附加到组件。完成实现之后,假如用户单击一个图像,JSF 会提交全部页面,在收到澳门威尼人斯返回值时完全从新绘制该页面。

现在您将看到若何让页面作者将 Ajax 添加到图标组件。

应用添加 Ajax 支持

为了让页面作者能够将 Ajax 添加到组件内的链接,我应用标记,如清单 5 所示:

清单 5.

您可能还会对下面的文章感兴趣: