Carregar sub-página dinamicante em um container

Front-end
#1

Estou estudando o JSF, e me deparei com o seguinte problema: Como carregar tem tempo de execução vários xhml dentro de algum container?

Ex.: Tenho uma página index.xhtml com links que serão criados em tempo de execução para várias abas. Quando eu clicar em um link, será carregado o xhtml correspondente. Se eu clicar em uma aba já carregada, a mesma será apenas ativada.

Não descobri uma maneira de fazer usando os recursos do próprio JSF. Consigo fazer com jQuery da seguinte forma:

index.xhtml

	<div id="links">
		<h:link value="Carregar" outcome="aba" />				
	</div>	
	<div id="workspace">
		
	</div>

aba.xhtml

    <div>
		<p>
			Aba: &lt;h:outputText value="#{app.nomeAba}" /&gt;
			<br />			
			&lt;h:outputText value="#{app.hora}" /&gt;
		</p>		
		&lt;p:spinner /&gt;		&lt;-------------- Aqui dá problema
		&lt;hr /&gt;
	&lt;/div&gt;

javascript

  $(document).ready(function() {
	$("#links a").click(function (e) {
		e.preventDefault();
                // ...
		$("&lt;div&gt;&lt;/div&gt;").appendTo("#workspace").load($(this).attr("href"));		               
	});	
   });

Isso funciona, o problema é que os componentes do primefaces usados dentro de um xhtml da subpágina não funcionam. Depurando no firefox com o firebug aparece a seguinte mensagem: [color=red]PrimeFaces is not defined[/color].

O primefaces tem o componente tabView que funciona quase perfeito, mas surge um problema quando eu criar a nova aba, no update, ele renderiza todo a tabView e não somente a aba criada. Ou seja, a primeira aba é criada e algum valor é alterado nos campos de entrada, daí se abrir uma nova aba, esses valores são redefinidos.

&lt;h:commandButton value="Nova aba" action="#{app.adicionarAba}"&gt;
     &lt;f:ajax render="abas" /&gt;
&lt;/h:commandButton&gt;

&lt;p:tabView id="abas" binding="#{app.abas}"&gt;&lt;/p:tabView&gt;

e na controller

@ManagedBean(name = "app")
@ApplicationScoped
public class AppController {
	private TabView abas;

	public AppController() {
		abas = new TabView();
	}

	public TabView getAbas() {
		return abas;
	}

	public void setAbas(TabView tabView) {
		this.abas = tabView;
	}

	private int idTb = 2;
	
	public void adicionarAba() {
		Tab tab = new Tab();

		tab.setId("tab" + Integer.toString(idTb++));
		tab.setTitle("Teste " + getHora());		
		
		InputText inputtext = new InputText();

                inputtext.setLabel("bla blab la");
                inputtext.setValue(getHora());

                tab.getChildren().add(inputtext);
		
		abas.getChildren().add(tab);		
	}

      // ...
}

Já pesquisei bastante a net sobre isso, e não consegui encontrar alguma solução.

Desde já agradeço a colaboração de que tentar ajudar.

#2

Pelo que entendi,

   Veja o exemplo do showcase do primefaces utilizando o Data Model.

   http://www.primefaces.org/showcase/ui/tabviewModel.jsf

Neste caso, ele utiliza um ArrayList para armazenar uma lista de objetos do tipo player. Daí vc adapta para o seu caso.

Para adicionar as abas…

&lt;p:commandButton value="Nova aba" action="#{appController.adicionar()}"  update="#{retornarTab()}"/&gt;

Espero ter ajudado.

#3

Método que retorna o id da TabView


public String retornarTab(org.primefaces.event.TabChangeEvent event) {
    String id = event.getTab().getId();
    return id;    
}
#4

ola alguem poderia me ajudar??

eu estou fazendo uma aplicacao semelhante ao clmr
so que eu estou inserindo o conteudo atraves de includes…

[code] <p:tabView id=“tabView” cache=“true” activeIndex="#{novaAba.cont}" var=“newAba” value="#{novaAba.aba}" dynamic=“true” style=“border:none;”>
<p:ajax event=“tabClose” listener="#{LoadPgBean.onTabChange}" update=":con:growl"/>

                    <p:tab title="#{newAba.titPag}" id="abas"    titleStyleClass="aba1"  titletip="cliente"    closable="true"  >  
                       <ui:insert name="aba1">
                           <ui:include  src="#{newAba.context}" />
                           <script>alert('#{novaAba.pag}')</script>
                        </ui:insert>
                    </p:tab>  [/code]

eu passo o caminho da pagina, mas ele não esta recebendo nenhum conteudo

alguem sabe como posso fazer isso???

#5