Custom link like rich:simpleTogglePanel

Question

I want to change the style of the rich:simpleTogglePanel to look like as a common link would.

http://livedemo.exadel.com/richfaces-demo/richfaces/simpleTogglePanel.jsf?c=simpleTogglePanel&tab=usage

This page shows exactly what I want to do and what I'm getting right now. I want to do something that looks exactly like the 'View source' link that stands below every example. The code I'm using is the same as seen in the 'Client Switch Type' example:

 <rich:simpleTogglePanel switchType="client" label="Client Switch Type" height="90px">
                    The switching between showing and hiding the toggle panel content
                    performs on the client side.
 </rich:simpleTogglePanel>

My goal is to create an 'advanced search' link under a search bar. The panel will contain the advanced search contents. (the extra fields)

I'm using JSF 1.2 and Richfaces.

score 1 · Answer 1 · answered Nov 27 '12 at 03:55

Am not sure if I exactly understood your question. There are 2 variants in which am seeing your question.

1. Make the contents under the rich:simpleTogglePanel as link which are clickable. For this you can try out below code.

<rich:simpleTogglePanel switchType="client" label="Client Switch Type" height="90px">

<rich:dataGrid var="links" value="#{yourBean.linksList}" columns="6"      
     width="877px">

<h:commandLink actionListener="#{yourBean.someAction}">
</h:commandLink>

</rich:simpleTogglePanel>

2. If you want rich:simpleTogglePanel header to be presented as link

 <rich:simpleTogglePanel switchType="client" label="Client Switch Type" height="90px">
               <f:facet name="header" >
                 <h:panelGroup>
                    <h:outputText value="yourLinkName" styleClass="linkClass">
                    </h:outputText>  
                 </h:panelGroup>
 </rich:simpleTogglePanel>

<style type="text/css">
 .linkClass{
 text-decoration: underline;
 }
</style>

2nd Option is what I mean, but I don't want to just place some text styling to make it look like a link. I tried your way but it doesn't seem to make the bar disappear. I want it to look like the view source link. (something like a small link that opens a big container in the screen) Thank you for your help! — Antonio Vildes Barbosa, Nov 27 '12 at 09:57

score 1 · Answer 2 · answered Nov 27 '12 at 04:05

If you want a box openning and closing and style it easily, the best way would be to make it with jQuery. As RichFaces already load jQuery you could do it as follow :

<a href="#" onclick="jQuery('#content').toggle();return false;">Your link</a>
<div id="content" style="display: none">Your content</div>

Of course you can use RichFaces component, but you will have to override many CSS classes or disable RichFaces skin, which will disable styling for every components.

EDIT : You'll have to force RichFaces to load the jQuery library with <a4j:loadScript src="resource://jquery.js"/> if you are not using any ajax component in the view.

I didn't try that, but because it'll lower the "JSFness" of my code. I want to keep it clean from unnecessary html. Thanks for your answer! I didn't know that you can load jQuery from richfaces, maybe I'll use it in another projects! Thanks again! — Antonio Vildes Barbosa, Nov 27 '12 at 10:02

score 0 · Answer 3 · answered Nov 27 '12 at 10:54

If you want to make the bar disappear, you have to override the default CSS and add few more of yours.

Below is the code,

<rich:simpleTogglePanel switchType="client" label="Client Switch Type" height="90px">

<f:facet name="closeMarker">
                                        <h:panelGroup styleClass="open">
                                            <h:outputText styleClass="yourClass" value="yourText"/>
                                        </h:panelGroup>
                                </f:facet>

</rich:simpleTogglePanel>

<style type="text/css">
.open {
background-color: white;
}
</style>

You will have to override these default CSS to achieve your other affects. rich-stglpanel, rich-stglpanel-header, rich-stglpnl-marker etc.

For details, please refer RichFaces-SimpleTogglePanel guide

score 0 · Accepted Answer · answered Nov 27 '12 at 11:58

First, thanks for the answers!

I asked for a way to change the simpleTogglePanel so it looked like the view source link in the page mentioned, but I found that was the wrong way to go.

I achieved my goal using a h:commandLink:

<h:commandLink value="Advanced Search" action="#{MyBean.toggleHiddenPanel }" />

to change the value of a boolean in my bean and used the rendered attribute to show/hide the fields I needed:

<h:panelGrid id="hiddenPanel" columns="4" >

                    <h:outputText value="date1:" rendered="#{MyBean.hiddenPanel}" />
                    <rich:calendar value="#{MyBean.date1}" rendered="#{MyBean.hiddenPanel}"
                        locale="US" popup="true" datePattern="d/M/yy HH:mm"
                        cellWidth="24px" cellHeight="22px" style="width:200px" />

                    <h:outputText value="date2:" rendered="#{MyBean.hiddenPanel}" />
                    <rich:calendar value="#{MyBean.date2}" locale="US" rendered="#{MyBean.hiddenPanel}"
                        popup="true" datePattern="d/M/yy HH:mm" cellWidth="24px"
                        cellHeight="22px" style="width:200px" />

                    <br />
                    <h:outputText value="Another field:" rendered="#{MyBean.hiddenPanel}" />

</h:panelGrid>

ps.: I changed the name of the variables because the project is confidential

Custom link like rich:simpleTogglePanel

4 Answers4