相关内容

返回首页

RichFaces 4 概述。第三部分 – 面板组件。

发布者：    |      

本系列文章继续，在这篇文章中，我将为您概述已经迁移到 RichFaces 4 代码库的各个面板组件（M1 发布）。

简单面板组件

实际上几乎没有太多可以描述的，因为这可能是整个库中最简单且最知名的布局组件：）

以下标签...

<rich:panel header="Panel with default Look-n-feel">
    //Content inside 
</rich:panel>

...将被渲染为一个带有顶部标题的可皮肤化矩形面板

因此，我们不妨花太多时间在这个组件上，而是转向更复杂的组件。

可切换面板

本节应该会更有趣，我们将描述可切换面板的设计变化。

首先迁移到 4.0 代码库的组件是 切换组件 系列。原因很简单 - 它是所有其他组件的基础（TabPanel 和 Accordion 正在我们的 M2 路线上）。切换组件系列包括

  • togglePanel - 父组件，包含一组子面板，并提供在它们之间切换的机制。
  • togglePanelItem - 子面板组件，定义单个状态表示。在 4.x 中，它作为子组件实现，而不是作为方面，以便更合理地分配属性和一些组件功能。
  • toggleControl - 执行面板切换的行为。实现为行为的主要目标是提供一个使用任何控件进行状态切换的方法（并且也许再次证明我们在使用最新的 JSF 2 特性：)）。这与 3.3.x 不同，在那里它是一个组件，并以 HTML 链接元素的形式渲染。

切换组件使用的简单示例

<style>
	.rf-tp-i {
		border: 1px solid #{richSkin.panelBorderColor}
	}
</style>
<h:form>
	<h:commandLink value="Toggle Panel Item 1">
		<rich:toggleControl forPanel="panel1" targetItem="item1" />
	</h:commandLink>
	<h:outputText value=" | " />
	<h:commandLink value="Toggle Panel Item 2">
		<rich:toggleControl forPanel="panel1" targetItem="item2" />
	</h:commandLink>
	<rich:togglePanel id="panel1" activeItem="item1">
		<rich:togglePanelItem name="item1" styleClass="rf-tp-i">
			<p>This toggle panel switches in Ajax mode. 
So only one active
				item loaded to the client.</p>
			<p>For now you are at Panel 1</p>
		</rich:togglePanelItem>
		<rich:togglePanelItem name="item2" styleClass="rf-tp-i">
<p>After the second link click - panel changed active item to the second one according to name specified in the
				togglePanelBehavior</p>
			<p>For now you are at Panel 2</p>
		</rich:togglePanelItem>
	</rich:togglePanel>
</h:form>

在打开页面时，您将看到

注意：也可以在不定义状态的情况下按顺序切换状态。在这种情况下，将考虑子项的顺序。例如，可用于创建向导面板。

组件的主要思想在3.3.x版本中变化不大——该组件不提供预定义布局，仅提供使用不同模式在抽象状态之间切换的功能。因此，可以使用此组件实现任何类型的可切换面板。例如，上面的例子创建了最简单的标签。我们还可以轻松地将切换控件移动到其他位置并按需对齐。

如果您已经使用了3.3.3版本中的任何组件，需要考虑的主要变化是——所有通过状态切换的功能都移动到了父面板组件中。例如，toggleControl和未来的tab或accordionItem控件仅调用状态变更面板方法。通过这种方式，我们解决了以下问题

  • 非客户端模式下的所有请求属性——在面板级别配置一次。
  • 在面板级别使用ItemChangeListener来管理切换事件，而不是在每个控件上定义大量操作和监听器。
  • 客户端API在面板级别可用。因此，不再需要在控件上进行JavaScript点击以执行切换。

有关组件的更多信息，请参阅需求wiki页面

弹出面板

在描述此组件之前，我需要先提到——我们收到了大量关于非模态面板的请求，最终只有一个rich:popupPanel组件。它有两种模式：模态和非模态，并可以渲染包含任何内容的弹出。

对于在3.3.x版本中已经玩过它的用户来说，使用方法非常简单，因为它几乎没有变化

<h:commandButton value="Call the popup">
	<rich:componentControl target="popup" operation="show" />
</h:commandButton>

<rich:popupPanel id="popup" modal="true"
	resizeable="true" onmaskclick="#{rich:component('popup')}.hide()">
	<f:facet name="header">
		<h:outputText value="Simple popup panel" />
	</f:facet>
	<f:facet name="controls">
		<h:outputLink value="#"
			onclick="#{rich:component('popup')}.hide(); return false;">
				X
		</h:outputLink>
	</f:facet>
	<p>Additionally there you could check how to handle the clicks
	outside the panel.</p>
	<p>In this sample the click outside - closes the panel as well as
	clicking hide control in the header</p>
</rich:popupPanel>

最终，我们将得到以下弹出表示

要使用非模态状态的面板，您只需使用新的modal布尔属性并设置其值为false。

从使用角度来看，组件可能没有太多变化——但我们做了大量工作来优化标记，使其更轻量。因此，我们期待对此的反馈！

有关弹出组件的更多信息，请参阅需求wiki页面

接下来是什么

我认为，数据迭代组件的概述和相关文章可能是所有这些评论中最受欢迎的。那么，为什么它们还没有发布，尽管这些组件在A2中可用？原因很简单——我们已经对这些组件收到了一些很好的反馈，现在正在根据这些反馈进行一些重新设计和更改，以使组件更容易使用且更智能。因此，当对变化及其对使用的影响有一个清晰的画面时，它们将立即发布！

正如我在上一篇文章中宣布的那样，我仍在阅读Packt Publishing的JSF 2.0 Cookbook，并持续撰写评论文章。

请在我们RichFaces设计空间上提供反馈。我们将在RichFaces用户空间上尽最大努力帮助您解决任何使用问题。

返回顶部