Modify behavior of Panel

UI Components for JSF
Post Reply
irishpack
Posts: 8
Joined: 25 Oct 2013, 17:21

08 Nov 2018, 22:46

Hi,

We are converting over to Primefaces but we are having a problem duplicating what we have. Currently the app has toggle-able sections where you can click anywhere on the header and the block will toggle. Also there are buttons and data in he header. The ajax is setup to do Always, Never or Once. This gives the developer control of what gets rendered on the initial page. I have tried to work with the accordion and panel objects. Got close with the accordion but the tabs did not like the ajax and we need ajax control like described above. Having trouble with the panel, seems like it wants to the use +/- icon to do the toggling and getting other items in the header has been problematic. Any suggestions would be appreciate. Been at this for a few days now.

Code: Select all

<pf:accordionPanel id="accordionPanelRenderer1"
				styleClass="accordionPanel" multiple="true">
				<pf:outputLabel id="outputLabelRenderer1" styleClass="outputLabel"></pf:outputLabel>				
				<pf:tab >
					 <f:facet name="title">
			        	<h:outputText	value="Godfather Part I" />
       						<pf:outputPanel id="outputPanelRenderer1" styleClass="outputPanel float-right" 
       								style="height: 30px; background-color: lime; margin-bottom: 0px; padding: 0"> 
							
								<pf:commandButton id="commandButtonRenderer1" styleClass="commandButton" value="Brianx" action="#{accordion.func}" 
															style="background-color: red"/>
								
							</pf:outputPanel>
								
							<pf:outputPanel id="outputClear1" styleClass="float-clear"></pf:outputPanel>
    				</f:facet>
    				
				    <h:panelGrid id="grd1" columns="2" cellpadding="10">				    
				    <h:outputText  		value="col1 " />             
                			<h:outputText  		value="Tes data" />
           			 </h:panelGrid>
			       
        		</pf:tab>
        		
        		<pf:tab >					
				 <f:facet name="title">
			        	<h:outputText	value="Godfather Part II" />
       						<pf:outputPanel id="outputPanelRenderer12" styleClass="outputPanel float-right" 
       								style="height: 30px; background-color: lime; margin-bottom: 0px; padding: 0"> 
							
								<pf:commandButton id="commandButtonRenderer12" styleClass="commandButton" value="Brian2" action="#{accordion.func}" 
															style="background-color: red"/>
								
							</pf:outputPanel>
								
							<pf:outputPanel id="outputClear12" styleClass="float-clear"></pf:outputPanel>
    				</f:facet>
    				
				    <h:panelGrid columns="2" cellpadding="10">				    
				    <h:outputText  		value="col1 " />             
                			<h:outputText  		value="The story begins as Don Vito Corleone...xxxx" />
           			 </h:panelGrid>
			       
        		</pf:tab>
			</pf:accordionPanel>


 <pf:panel id="custom" header="" style="margin-bottom: 30px;" toggleable="true"  toggleSpeed="500" closeSpeed="500">
				
			        <h:panelGrid columns="2" cellpadding="10">
			               <!--  <p:graphicImage name="demo/images/godfather/godfather3.jpg" />  -->
			                <h:outputText value="After a break of more than 15 years..." />
			            </h:panelGrid>
			 
			        <f:facet name="actions">
							<h:outputText value="Panel One" />
							<pf:outputPanel id="outputPanelRenderer1x" styleClass="outputPanel" style="margin-top: 5px"> 
							
								<pf:commandButton id="commandButtonRenderer1x" styleClass="commandButton" value="Brian"/>
								
							</pf:outputPanel>
							
							
			        </f:facet>
	       
	    </pf:panel>
Last edited by irishpack on 09 Nov 2018, 18:09, edited 1 time in total.

kukeltje
Expert Member
Posts: 9180
Joined: 17 Jun 2010, 13:34
Location: Netherlands

09 Nov 2018, 16:19

Can you edit your question and put the code in code tags [ code ] .... [ /code] without spaces and indent correctly?
Ronald van Kuijk
______________________________
PrimeFaces 6.1, PrimeFaces plus 0.0.2 | JbossWildfly 10.1| Mojarra 2.2.13
Fedora 61, Firefox 'most recent'
Read the forum posting rules
Beginners: https://jsf.zeef.com/bauke.scholtz

irishpack
Posts: 8
Joined: 25 Oct 2013, 17:21

09 Nov 2018, 23:12

Hi,

After digging into this a little further and gaining a better understanding of the Panel component I think I can ask my question with better clarity. By the way we are just beginning to understand Primefaces so bear with me.

What I am trying to do is make the entire header clickable so no matter where the user clicks the panel will toggle. Also do not want the +/- icons at all. Our current application uses a clickevent on the div or a hidden link. After walking through the panel renderer and using the javascript debugger, it looks like a primefaces javascript is being executed at load time to set a listener on the object.

Anyway to use the panel component to do what I want, or do I have to override it with a custom renderer?

thanks.

tandraschko
PrimeFaces Core Developer
Posts: 3495
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

10 Nov 2018, 10:57

The upcoming Release already has a toggleableHeader atttibute ;)
You can always hide Icons and everything else via css
Always Bet On Prime (+ Extensions)!

Thomas Andraschko
PrimeFaces Developer | PrimeFaces Extensions Founder
Apache OpenWebBeans PMC | Apache DeltaSpike PMC | Apache MyFaces PMC

Personal Blog: http://tandraschko.blogspot.de/

irishpack
Posts: 8
Joined: 25 Oct 2013, 17:21

13 Nov 2018, 16:43

tandraschko wrote:
10 Nov 2018, 10:57
The upcoming Release already has a toggleableHeader atttibute ;)
You can always hide Icons and everything else via css
Hi,

What will the release number be? According to the download page the latest 6.2.10, will the feature be in 6.2.11?

I am asking to determine if in the interim I just go ahead and override the renderer, prefer not to do that.

Thanks for the response.

tandraschko
PrimeFaces Core Developer
Posts: 3495
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

13 Nov 2018, 17:07

6.2.x are elite releases and are not for free.
I also don't know if it was merged back.

But 6.3 will contain it, it's currently the github master.
Always Bet On Prime (+ Extensions)!

Thomas Andraschko
PrimeFaces Developer | PrimeFaces Extensions Founder
Apache OpenWebBeans PMC | Apache DeltaSpike PMC | Apache MyFaces PMC

Personal Blog: http://tandraschko.blogspot.de/

irishpack
Posts: 8
Joined: 25 Oct 2013, 17:21

14 Nov 2018, 01:44

Hi again,

I hate to be a pest but the toggleheader is what I need.

I would say one more question but have my doubts on that LOL.

When I add a button to the header, the header toggles, how do I get around that?

A button click should not affect the behavior of the header.

Sidenote: just getting started with Prime and like it, really well written easy to follow. Kudos.

.... more info, when the button is set to ajax in the header it needs to not recognize the toggle event. The header should stay how it is. Up for the challenge :D . Almost there.


The reason I keep pushing on is I could change what was done but I had to do that with previous JSF implementations we used and do not want do that again. This is so superior to the old JSF generations we used.

tandraschko
PrimeFaces Core Developer
Posts: 3495
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

14 Nov 2018, 09:55

probably by adding a JS to the onclick on the button - just google about "js event bubbling".

NOTE that we are not a JSF implementation - just a component library :P
Always Bet On Prime (+ Extensions)!

Thomas Andraschko
PrimeFaces Developer | PrimeFaces Extensions Founder
Apache OpenWebBeans PMC | Apache DeltaSpike PMC | Apache MyFaces PMC

Personal Blog: http://tandraschko.blogspot.de/

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 17 guests