# JSF 2 - Seiten Navigation Verständnisfrage



## paddy3k (17. Mai 2011)

Hallo 

bin relativ neu mit JSF2 unterwegs und muss mir noch ziemlich ein "abgoogeln" um auf die
Lösungen für meine Probleme zu kommen 

Bei einer Sache hänge ich allerdings schon seit gestern fest und komm nicht so recht vorran.

Ich habe ein Basis Layout (eine Template xhtml) mit Footer, Header, Navigationsleiste und Content Bereich.

in der Navigationsleiste (ist ein Richfaces4 panelMenu) kann der Benutzer einen Menüpunkt anklicken
worauf hin sich eine neue Seite für den Content Bereich der im LayoutTemplate definiert wurde
geladen werden soll.

Hier mal ein kurz Auszug von Template / Navigationsleiste:


```
<rich:panelMenu style="width:100%;" onitemMode="ajax" groupMode="ajax" groupExpandedLeftIcon="triangleUp"
                  groupCollapsedLeftIcon="triangleDown" topGroupExpandedRightIcon="chevronUp" topGroupCollapsedRightIcon="chevronDown" itemLeftIcon="disc"
                  >
                  <rich:panelMenuGroup rightExpandedIcon="" rightCollapsedIcon="" label="#{msgs['de.zzzz.HEADER']}"
                     styleClass="navbaritem" />
                  <rich:panelMenuGroup label="#{msgs['de.zzzz.HEADER']}">
                     <rich:panelMenuItem label="#{msgs['de.zzzz.DATATRACK']}" name="Item_2_1" action="page1.xhtml"/>
```



```
<h:body>
   <t:div style="padding: 15px 20px 5px 15px;">
      <!-- Kopfzeile -->
      <ui:include src="/pages/general/header.xhtml" />
      <!-- Toolbar -->
      <ui:include src="/pages/general/toolbar.xhtml" />

      <!-- Main Area -->
      <t:div styleClass="page-content">
         <!-- Navigation -->
         <t:div styleClass="left-menu">
             <ui:include src="/pages/interview/menu.xhtml" /> 
         </t:div>
         <!-- Content --> 
         <t:div styleClass="content-container">
            <ui:insert name="content">     
               CONTENT
            </ui:insert>
         </t:div>
         
      </t:div>
      <!-- Fusszeile -->
      <ui:include src="/pages/general/footer.xhtml" />

   </t:div>
</h:body>
```

und eine Bespielseite zu der nach dem Klick auf einen Menüpunkt navigiert werden soll:


```
<ui:composition template="/pages/templates/layoutTemplate.xhtml">

         <ui:define name="content">
            <rich:panel header="Infos" style="width:100%;">
               lorem ipsum...
            </rich:panel>
         </ui:define>
      </ui:composition>
```

Soweit klappt die Navigation auch, allerdings folgende Sachen die mich stören :

1. das RF4 panelMenu klappt sich nach dem Klick wieder zu
2. möchte ich eigentlich nur den content Bereich neu laden, hab aber das Gefühl als wenn
er die gesamte Seite neu läd.

Vielleicht kann ja jemand von euch mir helfen diese Mysterien zu lösen 

Vielen Dank schonmal!

Gruß,
paddy


----------



## F.S.WhiTeY (17. Mai 2011)

Es kommt dir nicht nur so vor, er läd die seite neu. 

JSFAtWork, JSF 2.0 und Apache MyFaces

Wenn du ne neue Seite aufrufst, aktualisierst du ja nicht die View in deiner aktuellen Seite und lässt die neue View rendern. Vielmehr rufst du ne neue Seite auf und die wird, zwar mit dem selben template, neu gepostet und gerendert. 

Du müsstest also um die Seite nicht neu laden zu lassen, deinen content mit bedingungen anzeigen lassen. Wichtig ist halt, das du die Seite nicht wechselst. Anderenfalls wird auch ne neue seite geladen.


----------



## paddy3k (17. Mai 2011)

Ok das erklärt einiges und die Seite kenn ich, find ich super und hab schon viel dort gelesen.

Ich will halt eine Navigation wie auf der von dir verlinkten Seite oder z.b. wie in der Richfaces Showcase

gibt es irgendwo ein Beispiel um nur eine "subview" (?) neu zu laden? Weiß leider nicht genau wie du das meinst mit "mit Bedingungen anzeigen lassen".


----------



## paddy3k (17. Mai 2011)

ich habe es jetzt in einem simplen Test hinbekommen... weiß nicht ob es die günstigste Lösung ist aber es funktioniert und löst meine beiden Probleme zugleich :

in meiner Haupt Template Seite hab ich ein Ajax Output Panel integriert :


```
<a4j:outputPanel id="ajax_content_panel">
                  <rich:panel header="Infos">
                    <ui:include src="#{navigator.currentPagePath}"/>
                  </rich:panel>
               </a4j:outputPanel>
```

in der navigator Bean wird je nach panelMenu Selektion die aktuelle Seite gesetzt (currentPagePath)

und in den panelMenuItems hab ich die Eigenschaft:


```
render="ajax_content_panel"
```

integriert. Somit entfällt das Merken des letzten Zustandes des panelMenu's und es wird auch nur
der content Bereich bei einem Klick aktualisiert.

Ist diese Lösung halbwegs akzeptabel oder sollte ich einen anderen Ansatz wählen ?

Gruß,
paddy


----------



## F.S.WhiTeY (17. Mai 2011)

Ich kann zwar nicht abschätzen wieviel overhead das erzeugt, aber grob überlesen fin ich die lösung gut. Ajax is schon ne feine sache. 

Was ich meinte war, das du den content auch über ne bean setzen kannst. Ist aber aufwendiger als das was du gefunden hast denke ich.


----------



## Zwergi (21. Mrz 2012)

Hallo,

ich hätte eine Frage zu deiner Lösung. Ich stehe nämlich gerade vor einem ähnlichen Problem:

Ich habe einen RichTree (RichFaces Version 4.0). Beim Auswählen eines TreeKnotens soll ein bestimmter Content-Bereich über einen dynamischen include realisiert werden 

```
<rich:tree id="tree" value="#{treeBean.rootNodes}" var="node" nodeType="#{node.type}" 
toggleType="client" selectionType="ajax" treeSelectionChangeListener="#{treeBean.selectionChanged}" render="currentNode">

  <rich:treeSelectionChangeListener listener="#{treeBean.selectionChanged}" />

  <rich:treeNode>Typ 1</rich:treeNode>
  <rich:treeNode>Typ2</rich:treeNode>

</rich:tree>

<h:panelGroup id="currentNode">
  <p>#{treeBean.currentSelectionPath}</p>
  <ui:include src="#{treeBean.currentSelectionPath}" />
</h:panelGroup>
```

also ähnlich zu der hier dargestellten Methode (habs auch mit dem a4jutputPanel anstelle der panelGroup probiert).
Mein Problem ist nun jedoch, dass nur dann das richtige Template über den include geladen wird, wenn ich einen Knoten 2x klicke bzw. mit f5 einen Refresh erzwinge. Anscheinend wird das 
	
	
	
	





```
<ui:include>
```
 ausgeführt, BEVOR im SelectionchangeListener der Pfad auf den aktuell ausgewählten Knotentyp gesetzt wird.

Hat irgendwer eine Idee, wie damit umzugehen ist?

Danke und Gruß


----------

