RichFaces - 输出组件
在上一章中，我们了解了帮助用户通过浏览器提供输入的不同输入字段或标签。在本章中，我们将了解 RichFaces 提供的不同输出组件。
<丰富：面板>
在之前的一些示例中，我们已经遇到过面板标签。<rich:panel> 在网页内创建一个矩形区域，其中可以包含任何信息。您可以在一个面板中包含其他面板、图像和任何其他丰富的组件。
在下面的示例中，我们将根据选择创建一个自定义面板，并使用“header”属性为面板提供标题。请创建一个 xhtml 文件并将其命名为“richPanelExamlple.xhtml”。将以下代码放入其中。
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>Panel Example</title>
</h:head>
<h:body>
<rich:panel header = "RichFace Tutorials " style = "font-size: 500px;
align-items:center; background-color: activecaption">
RichFace Tutorials Presented by TutorialsPoint.com.
</rich:panel>
</h:body>
</html>
上面的代码将在浏览器中产生以下输出。
<丰富：简单切换面板>
simpleTogglePanel 为开发人员提供了以动态方式更改面板内容的机会。然而，在 RichFaces 4 中，该标签已被抑制。JBoss 引入了高级标签，例如 <rich:togglePanel>、<rich:tab> 和 <rich:tabPanel>。建议使用更新版本的 RichFaces 标签以获得更多特性和功能。如果您仍在使用 RichFaces 3，那么您可以使用以下标签。
<ui:composition xmlns = "http://www.w3.org/1999/xhtml"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<rich:simpleTogglePanel switchType = "client" label = "SimpleToggle">
The simple example of SimpleToggle tag
</rich:simpleTogglePanel>
</ui:composition>
<丰富：选项卡面板>
此标签可帮助开发人员在面板内创建不同的选项卡。我们在皮肤章节中使用了这个标签，在另一个面板中创建了两个单独的标签。下面的代码将描述我们如何使用<rich:tabPanel>。
<?xml version = '1.0' encoding = 'UTF-8' ?>
<ui:composition xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<f:view>
<h:head>
<title>Rich Faces Tab Example</title>
</h:head>
<h:body>
<h:form>
<rich:panel style = "width:60%">
<rich:tabPanel switchType = "AJAX">
<rich:tab header = "Name">
Tutorials Point----This is Tab Number 1
</rich:tab>
<rich:tab header = "Features">
Best Place to learn -------This is Tab Number 2
</rich:tab>
</rich:tabPanel>
</rich:panel>
</h:form>
</h:body>
</f:view>
</ui:composition>
在此示例中，我们创建了两个具有不同标题的选项卡，分别称为“名称”和“功能”。这两个标签将在 <rich:panel> 内创建。上面的代码将产生以下输出。
<丰富：面板栏>
与 simpleToggleBar 一样，它允许开发人员根据某些 JS 事件实现垂直切换。此标记在 RichFaces 4 中也被禁止。但是，如果您使用的是 RichFaces 3.0，则可以如下所示使用它。。
<ui:composition xmlns = "http://www.w3.org/1999/xhtml"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<rich:panelBar height = "400" width = "500">
<rich:panelBarItem label = "Toggle1”>
First vertical toggle
</rich:panelBarItem>
<rich:panelBarItem label = ”Toggle2”>
Second Vertical Toggle
</rich:panelBarItem>
</rich:panelBar >
</ ui:composition >
在 RichFaces 4 中，使用 <rich:PanelMenu> 标记实现了相同的功能。
<丰富：选项卡>
我们已经很熟悉这个标签了。在 <rich:tabPanel> 的示例中，我们使用此标签创建了不同的选项卡。在下面的示例中，我们创建了两个标签。
<?xml version = '1.0' encoding = 'UTF-8' ?>
<ui:composition xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<f:view>
<h:head>
<title>Rich Faces Tab Example</title>
</h:head>
<h:body>
<h:form>
<rich:panel style = "width:60%">
<rich:tabPanel switchType = "AJAX">
<rich:tab header = "Name">
Tutorials Point----This is Tab Number 1
</rich:tab>
<rich:tab header = "Features">
Best Place to learn -------This is Tab Number 2
</rich:tab>
</rich:tabPanel>
</rich:panel>
</h:form>
</h:body>
</f:view>
</ui:composition>
上面的代码将在浏览器中生成以下输出。
<丰富：面板菜单>
面板菜单帮助开发人员在面板区域内创建垂直下拉切换。下面的例子将帮助我们更好地理解这个标签。创建“richPanelMenu.xhtml”文件并将以下代码放入其中。
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>Panel Menu example</title>
</h:head>
<h:body>
<h:form id = "form">
<h:panelGrid columns = "2" columnClasses = "cols,cols" width = "400">
<rich:panelMenu style = "width:200px">
<rich:panelMenuGroup label = "Group 1">
<rich:panelMenuItem label = "Database" action = "#{managedBean.subjectList}">
<f:param name = "current" value = "DB"/>
</rich:panelMenuItem>
<rich:panelMenuItem label = "Oracle" action = "#{managedBean.subjectList}">
<f:param name = "current" value = "Oracle"/>
</rich:panelMenuItem>
<rich:panelMenuItem label = "JAVA" action = "#{managedBean.subjectList}">
<f:param name = "current" value = "JAVA"/>
</rich:panelMenuItem>
</rich:panelMenuGroup>
</rich:panelMenu>
</h:panelGrid>
</h:form>
</h:body>
</html>
如上面的示例所示，panelMenu 附带了一些其他关联标签，它们以不同的方式提供帮助。<panelGrid> 帮助在面板内创建网格。<panelMenuGroup> 帮助对我们要填充的不同组件进行分组。<panelMenuItem> 是将呈现到浏览器的实际项目。使用“action”属性，您可以根据所选项目调用不同的操作方法。“label”属性用于填充前端的值，一旦调用指定的动作类，渲染的值将被处理到后端。
上面的代码将在浏览器中产生以下输出。
<丰富：切换面板>
此标签用于呈现可以使用 Toggle 控制方法切换或切换的不同输出。这种切换控制方法可以被实现或定制。在下面的例子中，我们将实现这个方法。
创建一个 xhtml 文件并将其命名为“richTogglePanel.xhtml”。将以下代码放入其中。
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>Rich Toggle Panel Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/>
</h:head>
<h:body>
<h:form id = "form">
<rich:togglePanel id = "panel1" activeItem = "item1"
itemChangeListener = "#{panelMenuBean.updateCurrent}">
<rich:togglePanelItem name = "item1">
<p>Content of the toggle 1</p>
</rich0:togglePanelItem>
<rich:togglePanelItem name = "item2">
<p>Content of the toggle 2</p>
</rich:togglePanelItem>
</rich:togglePanel>
<a4j:outputPanel id = "tabs" layout = "block">
<a4j:outputPanel layout = "block" styleClass = "tabDiv">
<rich:toggleControl event = "click" targetPanel = "panel1" targetItem = "item1" />
<a4j:commandButton value = "Toggle1"/>
</a4j:outputPanel>
<a4j:outputPanel layout = "block" styleClass = "tabDiv">
<rich:toggleControl event = "click" targetPanel = "panel1" targetItem = "item2" />
<a4j:commandButton value = "Toggle2"/>
</a4j:outputPanel>
</a4j:outputPanel>
</h:form>
</h:body>
</html>
我们还需要创建一个bean类来控制网站的转换。创建“MenuBean.java”类，如下所示。
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import org.richfaces.event.ItemChangeEvent;
@ManagedBean
@ViewScoped
public class MenuBean {
private String current;
private boolean singleMode;
public boolean isSingleMode() {
return singleMode;
}
public void setSingleMode(boolean singleMode) {
this.singleMode = singleMode;
}
public String getCurrent() {
return this.current;
}
public void setCurrent(String current) {
this.current = current;
}
public void updateCurrent(ItemChangeEvent event) {
setCurrent(event.getNewItemName());
}
}
上面的代码将在浏览器中产生以下输出。
在上面的例子中，网页的内容会根据用户点击的按钮而改变。“updateCurrent()”是处理JS事件内容并动态设置网站内容的方法。
<丰富：工具栏>
toolBar 用于在面板中创建水平栏。它用于在网页中创建顶级菜单。在下面的例子中，我们将学习如何在网页中使用这个标签。创建一个“xhtml”文件并将其命名为“toolbar.xhml”。将以下代码放入其中。
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>ToolBar Example</title>
</h:head>
<h:body>
<rich:panel>
<rich:toolbar height = "26" itemSeparator = "grid">
<rich:toolbarGroup location = "left">
<h:commandButton styleClass = "barsearchbutton"
onclick = "return false;" value = "TAB" />
</rich:toolbarGroup>
<rich:toolbarGroup location = "left">
<h:commandButton styleClass = "barsearchbutton"
onclick = "return false;" value = "TAB2" />
</rich:toolbarGroup>
<rich:toolbarGroup location = "left">
<h:commandButton styleClass = "barsearchbutton"
onclick = "return false;" value = "TAB3" />
</rich:toolbarGroup>
</rich:toolbar>
</rich:panel>
</h:body>
</html>
上面的代码将在浏览器中产生以下输出。
在上面的示例中，<toolbarGroup>标签用于对不同的相同类型的工具进行分组。可以创建任意数量的组。位置提供了按钮放置的网页位置。
<丰富：分隔符>
顾名思义，它用于分隔网页上的不同组件。该标签在 RichFaces 4 中已被取消，但是，如果您仍在使用 RichFaces 3，则可以使用以下标签。
<rich:separator lineType = "beveled" height = "8" width = "75%" align = "center"/> <p>Here is more examples of different line types:</p> <rich:separator height = "2" lineType = "dotted"/><br/> <rich:separator height = "2" lineType = "dashed"/><br/> <rich:separator height = "4" lineType = "double"/><br/> <rich:separator height = "2" lineType = "solid"/><br/>
在上面的示例中，LineType 是帮助我们确定要使用的分隔符类型的属性。所有这些分隔符名称本质上都是自我描述的。
<丰富：间隔>
Spacer 是一个自描述标签，可帮助开发人员在两个组件之间提供空间。此标记在 RichFaces4 中也与其他标记一起被抑制，但是，如果您使用的是 RichFaces 3，则可以使用以下代码。
<rich:spacer width = "1" height = "5" title = "Here is a spacer..."/>
<丰富：modalPanel>
模态面板用于显示移动中的弹出窗口。在 RichFaces 4 中，模式面板标签已更改为popupPanel。在下面的示例中，我们将看到它是如何工作的。创建一个 xhtml 文件并将其命名为“PopingUp.xhtml”。将以下代码放入其中。
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>ModalPanel and popupPanel</title>
</h:head>
<h:body>
<h:form>
<h:commandButton value = "Click ME">
<rich:componentControl target = "popup" operation = "show" />
</h:commandButton>
<rich:popupPanel id = "popup" modal = "true" autosized = "false"
resizeable = "false">
Hey !!!
How are you?
</rich:popupPanel>
</h:form>
</h:body>
</html>
单击“ClickMe”按钮时，上面的示例将生成以下输出。
