Panel Toggling does not work

UI Components for JSF
Post Reply
hmrupp
Posts: 9
Joined: 14 Dec 2010, 13:29

13 Jan 2011, 13:51

primefaces-2.2.RC2.jar
on JBoss 6 final

I am trying to reproduce the panel showcase "Advanced Panel" however I cannot make the menu appear.

Code: Select all

<!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:p="http://primefaces.prime.com.tr/ui">

	<h:head>
	</h:head>
	<h:body>
		<p:growl id="growl" showDetail="true"/>
		 <h3>Advanced Panel</h3>  
		<p:panel id="pnl" header="About Barca" toggleable="true" closable="true" toggleSpeed="500"  
		     closeListener="#{panelBean.handleClose}"   
		     onCloseUpdate="growl" closeSpeed="2000"   
		    toggleListener="#{panelBean.handleToggle}"   
		     onToggleUpdate="growl" widgetVar="panel" >  
		     <h:form>  
		         <h:outputText value="FC Barcelona is ...." />  
		    </h:form>  
		      
		    <f:facet name="options">  
		        <p:menu>  
		            <p:submenu label="Settings">  
		                <p:menuitem value="Toggle" url="#"   
		                            icon="resources/images/plus.png" onclick="panel.toggle()"/>  
		                 <p:menuitem value="Remove" url="#"   
		                             icon="resources/images/minus.png" onclick="panel.close()"/>  
		             </p:submenu>  
		         </p:menu>  
		     </f:facet>  
		 </p:panel>  
	</h:body>
</html>
Only a simple panel without the menu is displayed.

Code: Select all

package beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;

import org.primefaces.event.CloseEvent;
import org.primefaces.event.ToggleEvent;

@ManagedBean
public class PanelBean {
	
	public void handleClose(CloseEvent event) {
		FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Panel Closed", "Closed panel id:'" + event.getComponent().getId() + "'");
		
		addMessage(message);
	}
	
	public void handleToggle(ToggleEvent event) {
		FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, event.getComponent().getId() + " toggled", "Status:" + event.getVisibility().name());
		
		addMessage(message);
	}
	
	private void addMessage(FacesMessage message) {
		FacesContext.getCurrentInstance().addMessage(null, message);
	}
}

Code: Select all

<?xml version='1.0' encoding='UTF-8'?>
<web-app version="2.5"
         xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

    <display-name>Prototype</display-name>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.faces</url-pattern>
    </servlet-mapping>

</web-app>
Produced HTML:

Code: Select all

<!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"><head><link type="text/css" rel="stylesheet" href="/pf/javax.faces.resource/growl/assets/growl.css.faces?ln=primefaces&v=2.2.RC2" />
<script type="text/javascript" src="/pf/javax.faces.resource/jquery/jquery.js.faces?ln=primefaces&v=2.2.RC2"></script>
<script type="text/javascript" src="/pf/javax.faces.resource/core/core.js.faces?ln=primefaces&v=2.2.RC2"></script>
<script type="text/javascript" src="/pf/javax.faces.resource/growl/growl.js.faces?ln=primefaces&v=2.2.RC2"></script>
<link type="text/css" rel="stylesheet" href="/pf/javax.faces.resource/menu/menu.css.faces?ln=primefaces&v=2.2.RC2" />
<link type="text/css" rel="stylesheet" href="/pf/javax.faces.resource/panel/panel.css.faces?ln=primefaces&v=2.2.RC2" />
<script type="text/javascript" src="/pf/javax.faces.resource/yui/utilities/utilities.js.faces?ln=primefaces&v=2.2.RC2"></script>
<script type="text/javascript" src="/pf/javax.faces.resource/menu/menu.js.faces?ln=primefaces&v=2.2.RC2"></script>
<script type="text/javascript" src="/pf/javax.faces.resource/panel/panel.js.faces?ln=primefaces&v=2.2.RC2"></script>
<link type="text/css" rel="stylesheet" href="/pf/javax.faces.resource/skins/sam/skin.css.faces?ln=primefaces&v=2.2.RC2" />

</head><body><span id="growl"></span><script type="text/javascript">jQuery(function(){});</script>
		 <h3>Advanced Panel</h3><div id="pnl" class="ui-panel ui-widget ui-widget-content ui-corner-all"><div id="pnl_header" class="ui-panel-titlebar ui-widget-header ui-corner-all"><span class="ui-panel-title">About Barca</span><a href="javascript:void(0)" class="ui-panel-titlebar-icon ui-corner-all ui-state-default" onmouseover="jQuery(this).toggleClass('ui-state-hover')" onmouseout="jQuery(this).toggleClass('ui-state-hover')"><span id="pnl_closer" class="ui-icon ui-icon-closethick" onclick="panel.close()"></span></a><a href="javascript:void(0)" class="ui-panel-titlebar-icon ui-corner-all ui-state-default" onmouseover="jQuery(this).toggleClass('ui-state-hover')" onmouseout="jQuery(this).toggleClass('ui-state-hover')"><span id="pnl_toggler" class="ui-icon ui-icon-minusthick" onclick="panel.toggle()"></span></a><a href="javascript:void(0)" class="ui-panel-titlebar-icon ui-corner-all ui-state-default" onmouseover="jQuery(this).toggleClass('ui-state-hover')" onmouseout="jQuery(this).toggleClass('ui-state-hover')"><span id="pnl_menu" class="ui-icon ui-icon-gear" onclick="widget_j_idt8.show()"></span></a></div><div id="pnl_content" class="ui-panel-content ui-widget-content">
<form id="j_idt6" name="j_idt6" method="post" action="/pf/home.faces" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt6" value="j_idt6" />
FC Barcelona is ....<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="7381898351808328655:-4463172995703070822" autocomplete="off" />
</form></div><input type="hidden" id="pnl_collapsed" name="pnl_collapsed" value="false" /><input type="hidden" id="pnl_visible" name="pnl_visible" value="true" /><div id="j_idt8" class="ui-menu ui-widget ui-widget-content ui-corner-all"><div class="bd"><div class="ui-submenu-label ui-widget-header ui-corner-all">Settings</div><ul><li class="ui-menu-item ui-corner-all"><a id="j_idt10" class="ui-menu-item-label" style="background:url(resources/images/plus.png) no-repeat 1%;" href="#" onclick="panel.toggle()">Toggle</a></li><li class="ui-menu-item ui-corner-all"><a id="j_idt11" class="ui-menu-item-label" style="background:url(resources/images/minus.png) no-repeat 1%;" href="#" onclick="panel.close()">Remove</a></li></ul></div></div><script type="text/javascript">widget_j_idt8 = new PrimeFaces.widget.Menu('j_idt8', {position:'dynamic',context:['pnl_menu','tl','bl',['beforeShow','windowResize']],effect: {effect: YAHOO.widget.ContainerEffect.FADE,duration: 0.25}});widget_j_idt8.render();</script></div><script type="text/javascript">panel = new PrimeFaces.widget.Panel('pnl', {visible:true,toggleable:true,toggleSpeed:500,collapsed:false,ajaxToggle:true,onToggleUpdate:'growl',closable:true,closeSpeed:2000,ajaxClose:true,onCloseUpdate:'growl',url:'/pf/home.faces'});</script></body>
</html>
Any help would be greatly appreciated.

Hans
Top
hmrupp
Posts: 9
Joined: 14 Dec 2010, 13:29

13 Jan 2011, 14:19

It does not work on Glassfish V3 either.

Is this code snippet supposed to produce a panel which has menu icons on the upper right-hand side?

Code: Select all

<p:panel id="pnl1" header="Simple Panel" toggleable="true">
			Some Text
</p:panel>
Top
hmrupp
Posts: 9
Joined: 14 Dec 2010, 13:29

13 Jan 2011, 15:53

I think this is a bug.
If I add an accordionPanel to the page the original panel suddenly works, i.e. on the upper right hand side a widget appears with which the panel can be collapsed and expanded:

Code: Select all

<!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:p="http://primefaces.prime.com.tr/ui">

	<h:head>
	</h:head>
	<h:body>
		<h:form>
		<p:panel id="pnl1" header="Simple Panel" toggleable="true">
			Some Text
		</p:panel>
		<p:accordionPanel>
			<p:tab title="Katja">
				<h:graphicImage name="bienert1.jpg" library="images" />
			</p:tab>
			<p:tab title="Katja">
				<h:graphicImage name="bienert2.jpg" library="images" />
			</p:tab>
		</p:accordionPanel>
		
		
		</h:form>
		 
	</h:body>
</html>
Does anybody know a component which emulates this effect but is not visible on the page?
Top
cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:
Contact cagatay.civici

13 Jan 2011, 16:41

Do you get a javascript error?
Top
Post Reply

Return to “PrimeFaces”

  • Information

  • Who is online

    Users browsing this forum: Google [Bot] and 49 guests