Menu navigation between layouts

UI Components for JSF
Post Reply
User avatar
orkan
Posts: 26
Joined: 30 Jun 2011, 07:46

30 Jun 2011, 10:46

Hi;

I have been using PrimeFaces for a couple of days and my first impression is a superb tool. But as always, after trying to create a small project, I have realized my little knowledge on JSF and component libraries was not enough. To make the long story short I need help!.

My main page design basically looks like this:

<p:layout fullPage="true">
<p:layoutUnit position="top" height="50" >
.....
<p:layoutUnit position="left" width="200" >
<p:panel id="menupanel">
<p:accordionPanel collapsible="true" autoHeight="false">
<p:tab title="Test">
</p:tab>
<p:tab title="Veri Sözlüğü">
<h:panelGrid>
<p:commandLink value="Deneme" update="mainPanel" .............</p:commandLink>
</h:panelGrid>
</p:tab>

<p:layoutUnit position="center" id="screen">
<p:panel id="mainPanel">
..................

The menu items in the accordionPanel looks very nice and classy but I can't manage to display my *.xhtml files in the center layoutUnit when I click the commandLink (used as a menuitem). I'll appreciate if someone can show me the decent way to do it, or provide where I can find helpful information.

Thanks IA
Orkan
PF 3.0.3M SNAPSHOT, RAD 8.0, WebSphere 8.0

mbollman
Posts: 33
Joined: 07 Jun 2011, 10:29

30 Jun 2011, 12:00

Hello!

Firstly, please use

Code: Select all

 code tags
to make it easier to read your postings. :) :geek:

There's a similar question asked here which may be of some use to you. Substitute in your accordion navigation menu as appropriate.

Post here if you are still having problems after having a look at the other thread.

- Mark.

User avatar
orkan
Posts: 26
Joined: 30 Jun 2011, 07:46

30 Jun 2011, 13:27

Hi Mark;

Thanks for the quick reply!.
Firstly, sorry for not using code tags, this was my first post on the forum. I promise to provide proper tags next time :)
Actually I had seen the post you recommended, but it did not mean much to me as it demonstrates some other component (p:tree) and I really can't associate any similarities.

So any additional recomendations will be great. Thanks..

Code: Select all

<p:commandLink value="Deneme" update="mainPanel" target="/pages/testpage3.faces"></p:commandLink>
PF 3.0.3M SNAPSHOT, RAD 8.0, WebSphere 8.0

mbollman
Posts: 33
Joined: 07 Jun 2011, 10:29

30 Jun 2011, 15:20

Hello,

Ok not a problem.

The above linked post relates in that you both have multiple layouts and are wanting to include a seperate content page(s) in one layoutUnit the value of which is determined by the value/action from another layoutUnit and using ajax to refresh the central panel.

The difference between your cases is as you rightly pointed out is that you're wanting to use an accordion component rather than a tree.

Here is basic example just using a couple of command links for now:

Code: Select all

<p:layout fullPage="true">
			<p:layoutUnit position="top" height="50">
				<h:outputText value="top panel content here..." />
			</p:layoutUnit>

			<p:layoutUnit position="left" width="200">
				<p:commandLink update="mainPanel">
					<f:setPropertyActionListener target="#{myBean.pageToDisplay}"
						value="/pages/testpage3.faces" />
					<h:outputText value="Deneme" />
				</p:commandLink>
				<p/>
				<p:commandLink update="mainPanel">
					<f:setPropertyActionListener target="#{myBean.pageToDisplay}"
						value="home.xhtml" />
					<h:outputText value="Home Page" />
				</p:commandLink>
			</p:layoutUnit>

			<p:layoutUnit position="center" id="screen">
				<p:panel id="mainPanel">
					<ui:include src="#{myBean.pageToDisplay}" />
				</p:panel>
			</p:layoutUnit>

		</p:layout>
The backing bean is just:

Code: Select all

@ManagedBean(name="my Bean")
@SessionScoped
public class MyBean {

private String pageToDisplay = "home.xhtml";

  public String getPageToDisplay(){
      return this.pageToDisplay;
  }

  public void setPageToDisplay(String pageToDisplay){
     this.pageToDisplay = pageToDisplay;
  }
}
I've stripped almost everything out of the left layoutUnit here for brevity. However you can put back in the tabs and what not, and hook up the ajax update(s) to whatever component(s) you need. The important bit is using the <ui:include src=""/> and update="" pieces correctly. Once you've got the above example working correctly, you can start to replace the basic command links with more complicated components.

Hope this helps!

- Mark.

User avatar
orkan
Posts: 26
Joined: 30 Jun 2011, 07:46

04 Jul 2011, 12:33

Hi Mark;

Even I have not tried it yet, your recommendation looks delicious :)
I'm pretty sure it will do the trick.. Thanks a lot..!!!

Regards,
Orkan
PF 3.0.3M SNAPSHOT, RAD 8.0, WebSphere 8.0

User avatar
orkan
Posts: 26
Joined: 30 Jun 2011, 07:46

04 Jul 2011, 14:10

Hi again;

Bad news for me, I could not figure out why but there is something causing a stack overflow.. When I changed the code, the browser (Firefox, Chrome) shows an error like this:
Error 500: javax.servlet.ServletException: Could not Resolve Variable [Overflow]: navigateBean
IE shows just an internel server error. 500

In the server log there is a long long trace and it ends like
Caused by: java.lang.StackOverflowError
at java.lang.RuntimeException.<init>(RuntimeException.java:72)
at javax.el.ELException.<init>(ELException.java:56)
at org.apache.myfaces.view.facelets.el.VariableMapperWrapper.resolveVariable(VariableMapperWrapper.java:76)
at org.apache.myfaces.view.facelets.el.VariableMapperWrapper.resolveVariable(VariableMapperWrapper.java:69)
... 7834 more

This is my bean:

Code: Select all


import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="navigateBean")
@SessionScoped

public class NavigationController {
	//private String targetUrl;
	private String pageToDisplay = "/pages/home.xhtml";

	public String getPageToDisplay(){
		return this.pageToDisplay;
	}
	
	public void setPageToDisplay(String pageToDisplay){
		this.pageToDisplay = pageToDisplay;
	}

Code: Select all


<p:layoutUnit position="left" width="200">
  <p:tab title="VTYM">
    <p:panel id="menupanel">
    <p:accordionPanel collapsible="true" autoHeight="false">
    <h:panelGrid>
    <p:commandLink update="mainPanel">
        <f:setPropertyActionListener target="#{navigateBean.pageToDisplay}" value="/pages/dumpedDatabase.xhtml" />
        <h:outputText value="Tb_DbaDumpedDatabase" />
    </p:commandLink>
    <p:commandLink update="mainPanel">
        <f:setPropertyActionListener target="#{navigateBean.pageToDisplay}" value="/pages/dumpedTransaction.xhtml" />
        <h:outputText value="Tb_DbaDumpTransaction" />
    </p:commandLink>						
    </h:panelGrid>
</p:tab>
.........................................
</p:layoutUnit>
<p:layoutUnit position="center" id="screen">
  <p:panel id="mainPanel">
	<ui:include src="#{navigateBean.pageToDisplay}"/>
  </p:panel>
</p:layoutUnit>
And faces-config.xml has :

Code: Select all

	<managed-bean>
		<managed-bean-name>navigateBean</managed-bean-name>
		<managed-bean-class>tr.com.takasbank.vtym.backingbeans.NavigationController</managed-bean-class>
		<managed-bean-scope>request</managed-bean-scope>
	</managed-bean>
Is there something wrong in my configuration, any comments?
PF 3.0.3M SNAPSHOT, RAD 8.0, WebSphere 8.0

mbollman
Posts: 33
Joined: 07 Jun 2011, 10:29

04 Jul 2011, 14:42

At a first guess,

Code: Select all

@SessionScoped
public class NavigationController { 
...
<managed-bean-scope>request</managed-bean-scope>
are conflicting scopes.

I personally don't bother doing anything to the faces-config and just use the JSF 2.0 annotations.

User avatar
orkan
Posts: 26
Joined: 30 Jun 2011, 07:46

04 Jul 2011, 14:51

Sure Mark, you're right..
Actually I had commented out the faces-config.xml definition for that managed bean, then tried other 100 configurations to debug then forgot all about it :). However it did not make any difference after removing it from the faces-config.xml
I must be missing a point..

Orkan
PF 3.0.3M SNAPSHOT, RAD 8.0, WebSphere 8.0

mbollman
Posts: 33
Joined: 07 Jun 2011, 10:29

04 Jul 2011, 15:11

Not sure if this is just a copy and paste error from IDE to forum, but these tags are not ended:

Code: Select all

<p:panel id="menupanel">
<p:accordionPanel collapsible="true" autoHeight="false">
The error message does however seem to be related to the configuration of the navigateBean class though.

Another thing to check is that you're not trying to include a null or empty string in the <ui:include> tag. Put a couple of System.out.println()'s on the getter/setter to make sure.

- Mark.

User avatar
orkan
Posts: 26
Joined: 30 Jun 2011, 07:46

04 Jul 2011, 15:37

Hi Mark;

Yes, I just did not bother to copy the closing tags.
The System.out. traces worked well :) The main problem is

Code: Select all

private String pageToDisplay = "/pages/home.xhtml";
My mistake, I just forgot that it is name of my welcome page :), so recursively page calls itself until the stack is full.. It should have been

Code: Select all

private String pageToDisplay = "/pages/empty.xhtml";
Thank you so much, everything is working like a charm!!

Orkan
PF 3.0.3M SNAPSHOT, RAD 8.0, WebSphere 8.0

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 22 guests