1

xhtmlにfullPageレイアウトがあり、メニューには西に配置されたlayoutUnitがあり、コンテンツには中央に配置されたlayoutUnitがあります。

いくつかの中央に配置されたlayotUnitsを実装しましたが、選択したmenuItemに従ってそれらをレンダリングしたいと思います。

アプリケーションを実行すると、ブラウザーで[更新]をクリックするまでlayoutUnitが更新されません（IE8-会社の標準）。

xhtmlは次のとおりです。

<h:body>
   <h:form>
      <p:layout fullPage="true" id="allLayout">

        <p:layoutUnit position="west" header="Menu" collapsible="true">
           <p:menu>
              <p:submenu label="Resources">
                 <p:menuitem value="Option1" action="#{menu.setSelectedMenu(menu.OPT1)}" update="allLayout"/>
                 <p:menuitem value="Option2" action="#{menu.setSelectedMenu(menu.OPT2)}" update="allLayout"/>
              </p:submenu>
          </p:menu>
        </p:layoutUnit>

        <p:layoutUnit position="center" rendered="#{menu.selectedMenu == menu.OPT1}">
           <p:outputLabel value="This is the content option 1 (default)."/>
        </p:layoutUnit>         

        <p:layoutUnit position="center" rendered="#{menu.selectedMenu == menu.OPT2}">
           <p:outputLabel value="This is the content option 2."/>
        </p:layoutUnit>

      </p:layout>
   </h:form>
</h:body>

そしてそれのための豆は次のとおりです：

@ManagedBean
@SessionScoped
public class Menu {

   private final int OPT1 = 1;
   private final int OPT2 = 2;
   private int selectedOption;

   public Menu() {
      selectedMenu = OPT1;
   }

   public int getSelectedOption() {
      return selectedOption;
   }

   public void setSelectedOption(int selectedOption) {
      this.selectedOption = selectedOption;
   }

   public int getOPT1() {
      return OPT1;
   }

   public int getOPT2() {
      return OPT2;
   }
}
4

2 に答える 2

2

複数のセンターレイアウトユニットを作成したいとは思いません。単一のレイアウトユニットを使用して、その単一ユニット内のコンテンツを変更する方がよいと思います。何をしているかによっては、そのユニットにテンプレートを使用することをお勧めします。おそらく最善のアプローチは、さまざまなコンテンツをパネルに配置してから、必要なコンテンツを表示するために更新する親パネルでそれらをラップすることです。

    <p:layout fullPage="true" id="allLayout">
        <p:layoutUnit position="west" header="Menu" collapsible="true">
            <p:menu>
                <p:submenu label="Resources">
                    <p:menuitem value="Option1"
                        action="#{menu.setSelectedMenu(menu.OPT1)}" update="optionPanel" />
                    <p:menuitem value="Option2"
                        action="#{menu.setSelectedMenu(menu.OPT2)}" update="optionPanel" />
                </p:submenu>
            </p:menu>
        </p:layoutUnit>

        <p:layoutUnit position="center">
            <p:panel id="optionPanel">
                <p:panel id="opt1Panel" rendered="#{menu.selectedMenu == menu.OPT1}">
                    <p:outputLabel value="This is the content option 1 (default)." />
                </p:panel>

                <p:panel id="opt2Panel"
                    rendered="#{menu.selectedMenu == menu.OPT2}">
                    <p:outputLabel value="This is the content option 2 (default)." />
                </p:panel>
            </p:panel>

        </p:layoutUnit>
    </p:layout>
于 2013-03-25T14:21:40.747 に答える
0

この部分を変更します。

<p:layoutUnit position="west" header="Menu" collapsible="true">
       <p:menu>
          <p:submenu label="Resources">
             <p:menuitem value="Option1" action="#{menu.setSelectedMenu(menu.OPT1)}"       
              update="allLayout" ajax="false"/>
             <p:menuitem value="Option2" action="#{menu.setSelectedMenu(menu.OPT2)}" 
              update="allLayout" ajax="false"/>
          </p:submenu>
      </p:menu>
    </p:layoutUnit>
于 2013-09-17T18:03:10.893 に答える