RichFaces - 输出组件

上一页
下一页

在上一章中，我们学习了不同的输入字段或标签，它们帮助用户通过浏览器提供输入。本章我们将学习 RichFaces 提供的不同输出组件。

<rich:Panel>

在我们之前的几个示例中，我们已经遇到过 panel 标签。<rich:panel> 在网页内创建一个矩形区域，其中可以包含任何信息。你可以在一个面板内包含其他面板、图像和任何其他 Rich 组件。

在下面的示例中，我们将根据选择创建一个自定义面板，并使用“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>

以上代码将在浏览器中产生以下输出。

Rich Panel

<rich:simpleTogglePanel>

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>

此标签帮助开发人员在面板内创建不同的选项卡。我们在皮肤章节中使用了此标签，我们在另一个面板内创建了两个单独的标签。以下代码将描述我们如何使用 <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> 内创建。以上代码将产生以下输出。

Rich Tab Panel

<rich:panelBar>

与 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:tab>

我们已经熟悉这个标签了。在 <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 Tab

<rich:panelMenu>

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”属性用于在前端填充值，一旦调用指定的 action 类，呈现的值将被处理到后端。

以上代码将在浏览器中产生以下输出。

Rich Panel Menu

<rich:TogglePanel>

此标签用于呈现不同的输出，可以使用 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()); 
   }
}

以上代码将在浏览器中产生以下输出。

Rich Toggle Panel

在上面的示例中，网页的内容将根据用户点击的按钮而改变。“updateCurrent()”是处理 JS 事件内容并动态设置网站内容的方法。

<rich:toolBar>

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>

以上代码将在浏览器中产生以下输出。

Rich Tool Bar

在上面的示例中，<toolbarGroup> 标签用于对不同类型的工具进行分组。可以创建任意数量的组。Location 提供网页上按钮将放置的位置。

<rich:separator>

顾名思义，它用于分隔网页上的不同组件。此标签在 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 是一个属性，它帮助我们确定要使用的分隔符类型。所有这些分隔符名称本质上都是不言自明的。

<rich:Spacer>

Spacer 是一个自描述标签，它帮助开发人员在两个组件之间提供空间。此标签也与其他标签一起在 RichFaces4 中被移除，但是，如果你使用的是 RichFaces 3，则可以使用以下代码。

<rich:spacer width = "1" height = "5" title = "Here is a spacer..."/>

<rich:modalPanel>

Modal Panel 用于动态显示弹出窗口。在 RichFaces 4 中，modal panel 标签已更改为 **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”按钮时，以上示例将生成以下输出。

Rich Modal Panel
打印页面
上一页
下一页
广告