# JSF - Seiteninhalt dynamisch laden



## fsicher (27. Aug 2012)

Hall allerseits

Ich würde gerne einen Teil der Seite dynamisch laden bzw. austatuschen, wenn z.B. ein anderes Menü-Item (links) angeklickt wird. Die Seite sehe in etwa so aus.

siehe hier

Wenn ich Menu 1 --> Edit Persondata wähle, sollte im Content-Teil z.B. ein Formular für die Erfassung von Personendaten erscheinen, während Menu 1 --> Edit Accessrights ein Formular im Content-Teil laden sollte, in dem die Zugriffsberechtigungen erfasst weren etc.

Ich könnte natürlich zwei Seiten machen, in denen der Content-Teil passend implementiert wird. Ich würde aber lieber eine seite machen und den Content-Teil dynamisch austauschen, wenn irgendwie möglich. Die einzelnene Formulare würde ich gerne als separate Seiten implementieren, die in das Template eingefügt werden (ui:insert / ui:define etc.).

Wie könnte man dies mit JSF machen? Ich benutze JSF 2 und PrimeFaces (zurzeit 3.4 SNAPSHOT). Ich habe die Demos in PF angeschaut, habe aber nichts gefunden, was mir helfen würde. Kann aber gut sein, dass ich es übersehen habe ???:L 

Danke für jeden Tipp.


----------



## JimPanse (27. Aug 2012)

mmm ... so in etwa?


[XML]
...// menu
<h:form>
<p:commandLink action="#{myBean.show('editPerson')}" update=":content" process="@this"/>
...
</h:form>

<putputPanel id="content" layout="block>
<ui:include src="#{mybean.pageToInclude}"/>
</putputPanel>
[/XML]


```
@ManagedBean
@SessionScope
public class MyBean implements Serializable{
private String pageToInclude;

public void selectContent(String pageId) {
if(pageId == "editPerson"){
pageToInclude= "<path-to-file>";

}
//getter & setter
}
```


----------



## JimPanse (27. Aug 2012)

die Methode soll 'show' und nicht 'selectContent' heißen...


----------



## fsicher (27. Aug 2012)

Vielen Dank erstmal. 

Habe es versucht, bekomme aber eine kleine "Fehlermeldung" bei der Zeile 


```
<ui:include src="#{mybean.pageToInclude}"/>
```

Nachfolgend mein aufs schnelle zusammengeschustertes Beispiel:

*Bean-Klasse*:

```
package beans;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "mybean")
@SessionScoped
public class MyBean implements Serializable {

	private static final long serialVersionUID = 1L;

	private String pageToInclude;

	public String getPageToInclude() {
		return pageToInclude;
	}

	public void setPageToInclude(String pageToInclude) {
		this.pageToInclude = pageToInclude;
	}

	public void showContent(String pageId) {
		if (pageId.equals("edit_person")) {
			pageToInclude = "/person/edit.xhtml";
		} else if (pageId.equals("edit_rights")) {
			pageToInclude = "/rights/edit.xhtml";
		}
	}
}
```

Seite *WebContent/person/edit.xhtml*:
[XML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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="http://primefaces.org/ui">
<h:body>

	<h3>Personendaten</h3>

	<div style="padding: 25px">
		Hier werden Daten edditiert ... 
	</div>
</h:body>
</html>
[/XML]

Seite *WebContent/rights/edit.xhtml*:
[XML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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="http://primefaces.org/ui">
<h:body>

	<h3>Access rights</h3>

	<div style="padding: 25px">
		Hier werden Zugriffsrechte edditiert ... 
	</div>
</h:body>
</html>
[/XML]

Und schlussendlich die *index.xhtml*:
[XML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html 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="http://primefaces.org/ui">

<h:head>

</h:head>

<h:body>

	<h:form>
		<p:commandLink action="#{mybean.showContent('edit_person')}"
			update=":content" process="@this" />
		<br />
		<p:commandLink action="#{mybean.showContent('edit_rights')}"
			update=":content" process="@this" />
	</h:form>

	<putputPanel id="content" layout="block>
		<ui:include src="#{mybean.pageToInclude}"/>
	</putputPanel>
</h:body>
</html>
[/XML]

Die Zeile 25 
	
	
	
	





```
<ui:include src="#{mybean.pageToInclude}"/>
```
 wird mit der Meldung 

_Invalid location of text (}") in tag (<putputPanel>)._

quittiert. Ob das der Grund für das Scheitern ist, kann ich nicht sagen (evtl. liegt es am Editor). 

Ich bin mir aber auch nicht sicher, ob ich die Pathangaben zu den Dateien, die includiert werden sollen, korrekt gemacht haben. Mit 
	
	
	
	





```
WebContent
```
 ist das root-Verzeichnis gemeint, darum habe ich die Pathangabe mit '/' gestartet. Der Versuch ohne '/' führte auch nicht zu erfolgt. 

Was mache ich hier falsch?


----------



## JimPanse (27. Aug 2012)

Das layout Element wird nicht richtig in Hochkommern eingeschlossen:

[XML] <putputPanel id="content" layout="block>
        <ui:include src="#{mybean.pageToInclude}"/>
    </putputPanel>[/XML]

->

 [XML]<putputPanel id="content" layout="block">
        <ui:include src="#{mybean.pageToInclude}"/>
    </putputPanel>[/XML]


----------



## fsicher (27. Aug 2012)

Ouuuups ... 

Habe dazu noch im commandLink vergessen, 'value' anzugeben. Jetzt funktioniert es.

Besten Dank.


----------

