Modify behavior of Panel

[irishpack]

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>

[kukeltje]

Can you edit your question and put the code in code tags [ code ] .... [ /code] without spaces and indent correctly?

[irishpack]

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]

The upcoming Release already has a toggleableHeader atttibute
You can always hide Icons and everything else via css

[irishpack]

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]

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.

[irishpack]

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 . 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]

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