RichFaces-出力コンポーネント

前の章では、ユーザーがブラウザーを介して入力を提供するのに役立つさまざまな入力フィールドまたはタグについて学習しました。この章では、RichFacesが提供するさまざまな出力コンポーネントについて学習します。

<リッチ：パネル>

以前の例のいくつかでは、すでにパネルタグに出くわしました。<rich：panel>は、Webページ内に長方形の領域を作成します。この領域には、任意の情報が含まれる場合があります。1つのパネル内に、他のパネル、画像、およびその他の豊富なコンポーネントを含めることができます。

次の例では、選択に応じてカスタムパネルを作成し、「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：simpleTogglePanel>

simpleTogglePanelは、開発者にパネルの内容を動的に変更する機会を提供します。ただし、RichFaces 4では、このタグは抑制されています。JBossは、<rich：togglePanel>、<rich：tab>、<rich：tabPanel>などの高度なタグを導入しました。より多くの機能を利用するには、更新されたバージョンのRichFacesタグを使用することをお勧めします。まだRichFaces3を使用している場合は、次のタグを使用できます。

<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>

このタグは、開発者がパネル内にさまざまなタブを作成するのに役立ちます。このタグはスキンの章で使用し、別のパネル内に2つの別々のタグを作成しました。次のコードは、<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」という異なるヘッダーを持つ2つのタブを作成しました。これらの2つのタグは、<rich：panel>内に作成されます。上記のコードは次の出力を生成します。

<rich：panelBar>

simpleToggleBarと同様に、開発者はJSイベントに応じて垂直方向の切り替えを実装できます。このタグはRichFaces4でも抑制されていますが、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>の例では、このタグを使用してさまざまなタブを作成しました。次の例では、2つのタグを作成しました。

<?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：panelMenu>

パネルメニューは、開発者がパネル領域内に垂直ドロップダウントグルを作成するのに役立ちます。次の例は、このタグをよりよく理解するのに役立ちます。「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」属性はフロントエンドに値を設定するために使用され、指定されたアクションクラスが呼び出されると、レンダリングされた値がバックエンドに処理されます。

上記のコードは、ブラウザに次の出力を生成します。

<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>

また、Webサイトの移行を制御するための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()); 
   }
}

上記のコードは、ブラウザで次の出力を生成します。

上記の例では、ユーザーがクリックしたボタンに応じてWebページのコンテンツが変更されます。「updateCurrent（）」は、JSイベントのコンテンツを処理し、外出先でWebサイトのコンテンツを設定するメソッドです。

<rich：toolBar>

toolBarは、パネルに水平バーを作成するために使用されます。これは、Webページにトップレベルのメニューを作成するために使用されます。次の例では、Webページでこのタグを使用する方法を学習します。「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>タグを使用して、異なる同じタイプのツールをグループ化します。グループはいくつでも作成できます。場所は、ボタンが配置されるWebページの位置を提供します。

<rich：separator>

名前が示すように、Webページ上のさまざまなコンポーネントを分離するために使用されます。このタグはRichFaces4で抑制されていますが、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は、開発者が2つのコンポーネント間にスペースを提供するのに役立つ自己記述型タグです。このタグは他のタグと一緒にRichFaces4でも抑制されますが、RichFaces 3を使用している場合は、次のコードを使用できます。

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

<rich：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」ボタンがクリックされたときに次の出力が生成されます。

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved