Richfaces-output-components

提供：Dev Guides
移動先:案内、検索

RichFaces-出力コンポーネント

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

<リッチ：パネル>

前の例のいくつかでは、すでにpanelタグに出くわしました。 <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 finddevguides.com.
      </rich:panel>
   </h:body>
</html>

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

リッチパネル

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

このタグは、開発者がパネル内にさまざまなタブを作成するのに役立ちます。 スキンの章でこのタグを使用し、別のパネル内に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イベントに応じて垂直切り替えを実装できます。 このタグは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>の例では、このタグを使用してさまざまなタブを作成しています。 次の例では、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>は、ブラウザにレンダリングされる実際のアイテムです。 「アクション」属性を使用すると、選択したアイテムに応じて異なるアクションメソッドを呼び出すことができます。 「ラベル」属性は、フロントエンドに値を設定するために使用され、指定されたアクションクラスが呼び出されると、レンダリングされた値がバックエンドに処理されます。

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

リッチパネルメニュー

<rich：TogglePanel>

このタグは、トグル制御メソッドを使用して切り替えたり切り替えたりできるさまざまな出力をレンダリングするために使用されます。 このトグル制御方法は、実装またはカスタマイズできます。 次の例では、このメソッドを実装します。

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>タグを使用して、さまざまな同じタイプのツールをグループ化します。 任意の数のグループを作成できます。 Locationは、ボタンが配置されるWebページの位置を提供します。

<rich：separator>

名前が示すように、Webページ上の異なるコンポーネントを分離するために使用されます。 このタグは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は、開発者が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」ボタンをクリックすると、次の出力が生成されます。

リッチモーダルパネル

「https://www.finddevguides.com/index.php?title=Richfaces-output-components&oldid=17185」から取得
Powered by MediaWiki