Categories
RichFaces教程

RichFaces-输出组件

RichFaces-输出组件


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

<rich:Panel>

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

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

<?xml version = "1.0" encoding = "UTF-8"??>  
 
 
   
    
      <title>Panel Example</title> 
    
   
    
      <panel header="RichFace Tutorials " style="font-size: 500px; 
         align-items:center; background-color: activecaption"> 
         
         RichFace Tutorials Presented by TutorialsPoint.com.      
      </panel> 
   
    

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

富面板

<rich:simpleTogglePanel>

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

<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"> 
   
   <simpletogglepanel switchtype="client" label="SimpleToggle"> 
      The simple example of SimpleToggle tag 
   </simpletogglepanel>    
</composition> 

<rich:tabPanel>

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

<?xml version = '1.0' encoding = 'UTF-8' ??>    
<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">   
   
   <view>   
         
         <title>Rich Faces Tab Example</title>   
         
      
         
         <form>   
            <panel style="width:60%"> 
               
               <tabpanel switchtype="AJAX"> 
                  <tab header="Name"> 
                     Tutorials Point----This is Tab Number 1 
                  </tab> 
                  
                  <tab header="Features"> 
                     Best Place to learn -------This is Tab Number 2 
                  </tab> 
               </tabpanel> 
            </panel>  
            
         </form>   
       
      
   </view>   
</composition>

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

丰富标签面板

<rich:panelBar>

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

<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">  
   
   <panelbar height="400" width="500"> 
      <panelbaritem label="Toggle1”> 
         First vertical toggle 
      </rich:panelBarItem> 
      
      <rich:panelBarItem  label = ”Toggle2”> 
         Second Vertical Toggle 
      </rich:panelBarItem> 
   </rich:panelBar >
   
</ ui:composition >
</code></pre></div>"></panelbaritem></panelbar></composition>

在RichFaces 4中,使用<rich:PanelMenu>标记实现了相同的功能。

<rich:tab>

我们已经熟悉此标签。在<rich:tabPanel>的示例中,我们使用此标签创建了不同的标签。在下面的示例中,我们创建了两个标签。

<?xml version = '1.0' encoding = 'UTF-8' ??>    
<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">   
   
   <view>   
         
         <title>Rich Faces Tab Example</title>   
         
      
         
         <form>   
            
            <panel style="width:60%"> 
               <tabpanel switchtype="AJAX"> 
                  <tab header="Name"> 
                     Tutorials Point----This is Tab Number 1 
                  </tab> 
                  
                  <tab header="Features"> 
                     Best Place to learn -------This is Tab Number 2 
                  </tab> 
               </tabpanel> 
            </panel> 
            
         </form>   
       
      
   </view>   
</composition> 

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

丰富标签

<rich:panelMenu>

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

<?xml version = "1.0" encoding = "UTF-8"??>  
 
 
   
    
      <title>Panel Menu example</title> 
    
    
    
      <form id="form"> 
         <panelgrid columns="2" columnclasses="cols,cols" width="400"> 
            <panelmenu style="width:200px"> 
               
               <panelmenugroup label="Group 1"> 
                  <panelmenuitem label="Database" action="#%7BmanagedBean.subjectList%7D"> 
                     <param name="current" value="DB"> 
                  </panelmenuitem> 
                  
                  <panelmenuitem label="Oracle" action="#%7BmanagedBean.subjectList%7D"> 
                     <param name="current" value="Oracle">  
                  </panelmenuitem> 
                  
                  <panelmenuitem label="JAVA" action="#%7BmanagedBean.subjectList%7D"> 
                     <param name="current" value="JAVA"> 
                  </panelmenuitem> 
               </panelmenugroup>
               
            </panelmenu> 
         </panelgrid> 
      </form> 
   
   

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

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

富面板菜单

<rich:TogglePanel>

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

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

<?xml version = "1.0" encoding = "UTF-8"??> 
 
 
   
    
      <title>Rich Toggle Panel Example</title> 
      <meta name="viewport" content="width = device-width, initial-scale = 1.0"> 
    
   
    
      <form id="form"> 
         <togglepanel id="panel1" activeitem="item1" itemchangelistener="#{panelMenuBean.updateCurrent}"> 
            
            <togglepanelitem name="item1"> 
               <p>Content of the toggle 1</p> 
             
            
            <togglepanelitem name="item2"> 
                <p>Content of the toggle 2</p> 
            </togglepanelitem> 
         </togglepanelitem></togglepanel> 
            
         <outputpanel id="tabs" layout="block"> 
            <outputpanel layout="block" styleclass="tabDiv"> 
               <togglecontrol event="click" targetpanel="panel1" targetitem="item1"></togglecontrol> 
               <commandbutton value="Toggle1"></commandbutton> 
            </outputpanel> 
            
            <outputpanel layout="block" styleclass="tabDiv"> 
               <togglecontrol event="click" targetpanel="panel1" targetitem="item2"></togglecontrol> 
               <commandbutton value="Toggle2"></commandbutton> 
            </outputpanel> 
         </outputpanel>
         
      </form> 
   
   
 

我们还需要创建一个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事件内容并随时随地设置网站内容的方法。

<rich:toolBar>

toolBar用于在面板中创建水平条。它用于在网页中创建顶层菜单。在以下示例中,我们将学习如何在网页中使用此标记。创建一个“ xhtml”文件,并将其命名为“ toolbar.xhml”。将以下代码放入其中。

<?xml version = "1.0" encoding = "UTF-8"??> 
 
 
   
    
      <title>ToolBar Example</title> 
    
   
    
      <panel> 
         <toolbar height="26" itemseparator="grid"> 
            <toolbargroup location="left"> 
               <commandbutton styleclass="barsearchbutton" onclick="return false;" value="TAB"></commandbutton> 
            </toolbargroup> 
            
            <toolbargroup location="left"> 
               <commandbutton styleclass="barsearchbutton" onclick="return false;" value="TAB2"></commandbutton> 
            </toolbargroup> 
            
            <toolbargroup location="left"> 
               <commandbutton styleclass="barsearchbutton" onclick="return false;" value="TAB3"></commandbutton> 
            </toolbargroup> 
         </toolbar>
 
      </panel> 
   
   
 

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

丰富的工具栏

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

<rich:分隔符>

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

<separator linetype="beveled" height="8" width="75%" align="center"></separator>
<p>Here is more examples of different line types:</p> 

<separator height="2" linetype="dotted"></separator><br> 
<separator height="2" linetype="dashed"></separator><br> 
<separator height="4" linetype="double"></separator><br>
<separator height="2" linetype="solid"></separator><br>     

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

<rich:空格键>

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

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

<rich:modalPanel>

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

<?xml version = "1.0" encoding = "UTF-8"??>  
 
 
   
    
      <title>ModalPanel and popupPanel</title> 
    
    
    
      <form> 
         <commandbutton value="Click ME">  
            <componentcontrol target="popup" operation="show"></componentcontrol> 
         </commandbutton> 
         
         <popuppanel id="popup" modal="true" autosized="false" resizeable="false"> 
            
            Hey !!!
            How are you? 
         </popuppanel> 
      </form>   
   
   
 

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

丰富的模态面板

error: 内容受到保护 !!