在上一章中，我们了解了有助于用户通过浏览器提供输入的不同输入字段或标记.在本章中，我们将了解RichFaces提供的不同输出组件.
在我们之前的一些示例中，我们已经遇到了面板标签. <富含:面板>在网页内创建一个矩形区域，可能包含任何信息.您可以在一个面板中包含其他面板，图像和任何其他丰富组件.
在以下示例中，我们将根据选择创建自定义面板，我们将为我们提供标题使用"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>
在这个例子中，我们创建了两个带有不同标题的标签，名为"Name"和"Features".这两个标记将在< 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>
上面的代码将在浏览器中生成以下输出.
Panel Menu帮助开发人员创建一个垂直下拉切换内部面板区域.以下示例将帮助我们更好地理解此标记.创建"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"属性用于填充前端的值，一旦调用指定的动作类，渲染的值将被处理到后端.
上面的部分代码将在浏览器中产生以下输出.
此标记用于呈现可以使用切换控制方法切换或切换的不同输出.可以实现或定制该切换控制方法.在下面的示例中，我们将实现此方法.
创建一个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> tag用于对不同的相同类型的工具进行分组.可以创建任意数量的组.位置提供了网页的位置，按钮将放置在该位置.
顾名思义，它是用于分隔网页上的不同组件.此标记在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..."/>
模态面板用于在旅途中显示弹出窗口.在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"按钮时，上面的示例将生成以下输出.
