📌  相关文章
📜  RichFaces-输出组件

📅  最后修改于: 2020-10-20 05:07:29             🧑  作者: Mango

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

在前面的一些示例中，我们已经遇到了panel标签。 在网页内创建一个矩形区域，其中可能包含任何信息。您可以在一个面板中包含其他面板，图像和任何其他丰富组件。

在以下示例中，我们将根据选择创建一个自定义面板，并使用“ header”属性为面板提供一个标题。请创建一个xhtml文件，并将其命名为“ richPanelExamlple.xhtml”。将以下代码放入其中。

  
 
 
   
    
      Panel Example 
    
   
    
       
         
         RichFace Tutorials Presented by TutorialsPoint.com.

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

富面板

simpleTogglePanel为开发人员提供了以动态方式更改面板内容的机会。但是，在RichFaces 4中，该标签已被删除。 JBoss引入了高级标记，例如，和。建议使用RichFaces标记的更新版本以获取更多功能。如果您仍在使用RichFaces 3，则可以使用以下标记。

 
   
    
      The simple example of SimpleToggle tag

此标签可帮助开发人员在面板内创建不同的选项卡。我们在外观章节中使用了此标签，在另一章的面板中创建了两个单独的标签。以下代码将描述我们如何使用。

    
   
   
      
         
         Rich Faces Tab Example   
         
      
         
         
   
             
               
                
                   
                     Tutorials Point----This is Tab Number 1 
                   
                  
                   
                     Best Place to learn -------This is Tab Number 2

在此示例中，我们创建了两个选项卡，其标题分别为“名称”和“功能”。这两个标签将在内部创建。上面的代码将产生以下输出。

丰富标签面板

与simpleToggleBar一样，它允许开发人员根据某些JS事件来实现垂直切换。 RichFaces 4中也抑制了该标签。但是，如果使用RichFaces 3.0，则可以如下所示使用它。 。

在RichFaces 4中，使用标记实现了相同的功能。

我们已经熟悉此标签。在的示例中，我们使用此标签创建了不同的标签。在下面的示例中，我们创建了两个标签。

    
   
   
      
         
         Rich Faces Tab Example   
         
      
         
         
   
            
             
                
                   
                     Tutorials Point----This is Tab Number 1 
                   
                  
                   
                     Best Place to learn -------This is Tab Number 2

上面的代码将在浏览器中生成以下输出。

丰富标签

面板菜单可帮助开发人员在面板区域内创建垂直下拉开关。以下示例将帮助我们更好地了解此标签。创建“ richPanelMenu.xhtml”文件，并将以下代码放入其中。

  
 
 
   
    
      Panel Menu example

从上面的示例可以看出，panelMenu带有一些其他相关的标签，这些标签以不同的方式提供帮助。 帮助在面板内部创建网格。 帮助将要填充的不同组件进行分组。是将呈现给浏览器的实际项目。使用“ action”属性，可以根据所选项目调用不同的动作方法。 “ label”属性用于在前端填充值，并且一旦指定的操作类被调用，呈现的值将被处理到后端。

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

富面板菜单

此标签用于呈现可以使用Toggle控制方法切换或切换的不同输出。可以实施或定制该切换控制方法。在下面的示例中，我们将实现此方法。

创建一个xhtml文件，并将其命名为“ richTogglePanel.xhtml”。将以下代码放入其中。

 
 
 
   
    
      Rich Toggle Panel Example 
       
    
   
    
      
 
          
            
             
               
Content of the toggle 1
 
             
            
             
                
Content of the toggle 2

我们还需要创建一个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”。将以下代码放入其中。

 
 
 
   
    
      ToolBar Example

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

丰富的工具栏

在上面的示例中，标记用于将不同的相同类型的工具分组。可以创建任意数量的组。位置提供了放置按钮的网页位置。

顾名思义，它用于分隔网页上的不同组件。该标签在RichFaces 4中已被删除，但是，如果您仍在使用RichFaces 3，则可以使用以下标签。



Here is more examples of different line types:

在上面的示例中，LineType是可帮助我们确定要使用的分隔符类型的属性。所有这些分隔符名称本质上都是自我描述的。

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

模态面板用于在旅途中显示弹出窗口。在RichFaces 4中，模式面板标签已更改为popupPanel 。在下面的示例中，我们将看到它是如何工作的。创建一个xhtml文件，并将其命名为“ PopingUp.xhtml”。将以下代码放入其中。

  
 
 
   
    
      ModalPanel and popupPanel 
    
    
    
      
 
           
             
          
         
          
            
            Hey !!!
            How are you?

当单击“ ClickMe”按钮时，以上示例将生成以下输出。

丰富的模态面板