How can i change the page showed in the center?

marcelo · 26 Apr 2010, 18:30

Hi, i have a side-bar menu made with the p:menu and p:menuitem components it's inside a a fullPageLayout at the west layout unit. What i want is that when i click on the menuItem the center unit of the layout navigate to a diferente page. Does anyone knows how i can acomplish that? I use facelets too, so if someone have a solution that envolve facelets could be accepted. Here is my actual code:

Code: Select all

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3c.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:p="http://primefaces.prime.com.tr/ui"
  xmlns:ui="http://java.sun.com/jsf/facelets">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<p:resources />
<link rel="stylesheet" type="text/css"
  href="#{request.contextPath}/skins/impacto/impactoPrime.css" />

</head>

<body class="yui-skin-sam">
<p:layout fullPage="true">
  <p:layoutUnit position="north" resizable="false" size="170"
    closable="false">
    <h:outputText value="PrimeFaces Layouts"
      style="font-size:36px;margin-left:100px;color:#73A025;" />
  </p:layoutUnit>

  <p:layoutUnit position="south" resizable="false" size="50"
    closable="false">
    <h:outputText value="Bottom content." />
  </p:layoutUnit>
  <p:layoutUnit position="west" resizable="false" closable="true" >
    <p:accordionPanel >
      <p:tab title="Pleitos">
      <p:menu>
      <p:submenu>
        <p:menuitem label="Cadastro" ></p:menuitem>
        <p:menuitem label="Consulta"></p:menuitem>
        </p:submenu>
        </p:menu>
      </p:tab>
    </p:accordionPanel>
  </p:layoutUnit>

   <p:layoutUnit id="" position="center" resizable="false" size="400"
    rendered="false">
    <ui:insert name="content">
              Conteúdo
        </ui:insert>
  </p:layoutUnit>

</p:layout>

</body>
</html>

mbeedub · 27 Apr 2010, 00:01

This post shows one way of doing it

http://primefaces.prime.com.tr/forum/vi ... f=3&t=1247

marcelo · 27 Apr 2010, 18:50

Thanks for the tip. But i solved using Facelets. Here is my code:

Code: Select all

<p:layout fullPage="true">
    <p:layoutUnit position="top" height="50" resizable="false"
      closable="false">
      <h:outputText value="Top content." />
    </p:layoutUnit>
    <p:layoutUnit position="bottom" height="102" resizable="false"
      closable="false">
      <h:outputText value="Bottom content." />
    </p:layoutUnit>
    <p:layoutUnit position="left" width="180">

      <p:panel id="skinnedPanel" header="Pleitos" toggleable="true"
        closable="false" toggleSpeed="500" collapsed="true">
        <p:menu>
          <p:submenu>
            <p:menuitem id="menuCadastro" label="Cadastro"
              action="pleito.cadastro" ajax="false"></p:menuitem>
            <p:menuitem id="menuConsulta" label="Consulta"
              action="pleito.consulta" ajax="false"></p:menuitem>
          </p:submenu>
        </p:menu>
      </p:panel>
    </p:layoutUnit>
    <p:layoutUnit position="center" width="400" height="463">
      <ui:insert name="content">
      Conteudo
      </ui:insert>
    </p:layoutUnit>
  </p:layout>

I'm using this as a template, so i'm just navigating to diferent pages on the left menu. Thanks!

mbeedub · 05 May 2010, 21:48

Hi Marcelo

Do you have any more details what you're doing here. Reason we're interested is that we tried the iframe route and it worked fine but because an iFrame has a completely separate DOM we couldn't get modal dialogs to load over the whole layout (which we want to do).

So we've gone a route using conditional reRender/Rendered (i.e user clicks left menu, this reRenders centre pane and content appears based on rendered condition). This works well but is slow on some browsers.

I'm wondering if your solution is an alternative.

We don't want to reload the whole page though, only change what's in the centre pane.

Thanks
Martin

marcelo · 10 May 2010, 14:54

Hi Martin,

Well, i think my solution will not solve your problem. I solved my problem using the insert approach from the facelets framework. Each page is made inside a template and all the page is reloaded when some navigation action is triggered. But what you can try the include approach and change just the included part of the page in a template.

Here's a link explaining it:

http://www.jsfcentral.com/articles/facelets_3.html (go to the Using Includes part)

How can i change the page showed in the center?

Who is online