simple things wont work - toggle panel again

[marc1]

hi, whats the best way to get the status of the toggle panel, ie. contracted or expanded ? dont take me wrong ive been reading the documentation and checked the samples and im not getting smarter..

also, <a4j:actionparam> and reRender attribute seen to have no effect for togggle panel..

:-((

marcelo

[sergeysmirnov]

you need to check it from javascript or on the server side? If on the server side, what is a switchType?

For the second question, the code snippet of what you want will be appreciated

[marc1]

thanks for the feedback. i have found a workaround that is working. here is the code that is NOT:

<rich:simpleTogglePanel id="id_togglepanel" switchType="client" reRender="master-panel" label="My toggle panel..." >
<a4j:actionparam name="expanded" assignTo="#{somebean.panelexpanded}"/>
<a4j:form id="id_search_form">
 <table width="100%" cellpadding="0" cellspacing="0" border="0">
 ....

<rich:panel id="master-panel" styleClass="#{somebean.panelexpanded ? 'areashort' : 'areaexpanded'}">

<table width="665" cellpadding="0" cellspacing="5" border="0"><tr>
..

what im trying to do is to display a bigger area for a table depending on whether the toggle panel is open or closed. the main problem here is that reRender does nothing, no matter what switch type i use, ie. ajax, client or server.

this is the code that IS working:

<rich:simpleTogglePanel id="id_togglepanel" switchType="client" onclick="updatePanel()"
 label="My toggle panel..." >
<a4j:form id="id_search_form">
 <table width="100%" cellpadding="0" cellspacing="0" border="0">
 ....

<rich:panel id="master-panel" styleClass="#{somebean.panelexpanded ? 'areashort' : 'areaexpanded'}">
 <table width="665" cellpadding="0" cellspacing="5" border="0"><tr>

 ..

<h:form>
 <a4j:jsFunction ajaxSingle="true" name="updatePanel" reRender="master-panel">
<a4j:actionparam name="expanded" assignTo="#{somebean.panelexpanded}"/>
</a4j:jsFunction>
</h:form>

in short, i use jsFunction to force a rerender as in onclick="updatePanel()". this seem to worlk for all components.

what i was originally looking for however, is some variable in togglePanel that gets updated automatically (server or ajax) to reflect the opend or closed state of the panel.

greetings. marcelo

[ilya_shaikovsky]

reRender, actionParam and other things you've using - will not work for client switchType :) It should be ajax. And for this case - form should be around the simpleTogglePanel

[marc1]

you're right, i did not put a form around simple toggle panel.

as i understand it from you now, this is necessary for a reRender? it was confusing to me because i was assuming any <a4j:> or <rich:> component was putting it automatically if missing.

thanks! marcelo

[ilya_shaikovsky]

except the form - change switchType to ajax or server.


No we doesn't insert the form except tabPanel tabs. The developer should be responsible for submission areas.

[moldovan]

Hello!

I have to reopen this topic about simpleTogglePanel

I've seen 2 things:
-) reRender attribute of simpleTogglePanel is not working
-) you loose selected value of selectOneMenu when you close and reopen the simpleTogglePanel

I'm using:
JSF Impl. 1.2
Richfaces 3.1.2.SP!
MyFaces-Tomahawk-1.1.6 snapshot, -sandbox-1.1.7 snapshot
JBoss AS 4.2.1.GA

[marc1]

hi, i have found that sometimes helps realibly to use the binding feature of the components. in my case, i wanted to detect automatically if the toggle panel was opend or close, so i could make some other area in the browser page larger or smaller. what i did is following:

1. define the toggle panel as "client" but force an update on the server with a4j.support:

<rich:simpleTogglePanel width="735" height="15" style="width:100%" id="id_togglepanel" switchType="client"
 binding="#{mybean.togglepanel}" label="Some Toggle Panel">
 <a4j:support event="onclick" reRender="id_dynamic_panel" ajaxSingle="true" immediate="true" />

 ...
</rich:simpleTogglePanel>

2. define the toggle panel in the bean. this will be update on each click because of the a4j:support:

 private HtmlSimpleTogglePanel togglepanel;

 public HtmlSimpleTogglePanel getTogglepanel() {
 return togglepanel;
 }

 public void setTogglepanel(HtmlSimpleTogglePanel togglepanel) {
 this.togglepanel = togglepanel;
 }

3. finally, on the same page as in 1., i use the results of the panel for making an area larger or smaller. notice i ask the status opend or closed referencing the binding element on the bean:

<rich:panel id="id_dynamic_panel"
 styleClass="#{mybean.togglepanel.opened ? 'smallscrollarea' : 'largescrollarea'}">
 ...
 </rich:panel>

this works pretty well for both IE an firefox.

what i have notice though, generally, is that there are sometime issues regarding firefox. i have the impression that some components (among toggle panel), sometimes do not display correctly with firefox (i willl post that on other thread thouigh, woth javascript error code about some richfaces elements not found).

greetings. marcelo

[moldovan]

Thanks for your reply, marcelo! I try to avoid the implementation of value-binding for components, because in my last webapp I got big problems with value-binding & ajax!

the 2 described problems are not a browser-behaviour, i have tested it with firefox 2.0.0.8, opera 9.22 and internet explorer v7.

For a larger info on the problem with simpleTogglePanel + selectOneMenu:
When you close the simpleTogglePanel, a actual selected value will be setted in the varirable in your managed-bean.
When you click on the SimpleTogglePanel again, for reopening, "null" will be setted to the variable in your bean (store variables - phase), and after that, the getter of the variable will be called ((re)render-Phase).
And "null" will not be found in the list of selectItems of the selectOneMenu, so the selection jumps up to the first Item in the list!

It seems to me, that this happens in ajax- and server-switchType

[moldovan]

I'm wondering why nobody cares about the 2 issues i described?

I've written a small testapplication to check it out, and I'm almost pretty sure these issues are bugs in richfaces.
The null-value-problem problem can grow up to be "showstopper" in my webapp, because I'm using the combination of simpleTogglePanel and selectOneMenu inside, very often.

So check it also please!



btw: I can post you the test-jsp, if you want.

[mail.micke]

Hi moldovan,
the jsp and java would be helpful in trying to understand what is happening.

Question which scope does your backing bean have, if it is request scope that is probably the source (one) of your problem(s).

- Mike

[moldovan]

Hey mike! Thanks for your response!

-) Bean is session-scoped.
-) this morning I have tested it with the richfaces3.1.3.GA, also not working.

After i got the 2 problems in my big webapp, i tested the issues with following small site. If someone has time, please check it also.

This is my test-jsp:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
<%@ taglib uri="http://myfaces.apache.org/sandbox" prefix="s" %>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

<f:view>
 <t:document>
 <t:documentHead>
 <title>Test the SimpleTogglePanel</title>
 </t:documentHead>
 <t:documentBody>
 <a4j:region id="siteregion">
 <t:div style="width: 100%;">
 <t:div style="margin-right: auto; margin-left: auto; text-align: center;">
 <a4j:status id="statuscomponent" for="siteregion">
 <f:facet name="start">
 <h:graphicImage value="images/connect_active.gif" />
 </f:facet>
 <f:facet name="stop">
 <h:graphicImage value="images/connect_idle.gif" />
 </f:facet>
 </a4j:status>
 </t:div>
 </t:div>
 <a4j:form ajaxSubmit="true" >
 <t:div id="mydiv" style="margin-top: 50px;" >

 <rich:simpleTogglePanel label="Klicken zum öffnen/schließen" width="500" height="300" switchType="ajax" reRender="mydiv">
 <h:outputText value="Bitte selektieren Sie ihr Land: "/>
 <h:selectOneMenu value="#{countries.selectedCountry}" >
 <f:selectItems value="#{countries.countryNames}" />
 </h:selectOneMenu>
 <rich:spacer style="display: block;" height="20" />

 <%--
 <h:outputText value="Wenn sie noch ein Land hinzufügen wollen, geben Sie es hier ein: " />
 <h:inputText value="#{countries.inputCountry}" />
 <a4j:commandButton value="hinzufügen" action="#{countries.addCountry}" status="statuscomponent" />
 --%>

 </rich:simpleTogglePanel>

 <t:div style="margin-top: 15px; font-size: 8pt; font-family: verdana, arial;" >
 <h:outputText value="gewähltes Land: "/>
 <h:outputText id="outputselectedcountry" value="#{countries.selectedCountry}" />
 </t:div>

 <t:div style="margin-top: 15px; font-size: 8pt; font-family: verdana, arial;">
 <h:outputText value="Klicke folgenden Link für ein Ajax-Site-Refresh --> "/>
 <a4j:commandLink value="refresh site via ajax" status="statuscomponent" reRender="mydiv" />
 </t:div>

 </t:div>
 </a4j:form>
 <a4j:log popup="false" level="INFO" />
 </a4j:region>
 </t:documentBody>
 </t:document>
</f:view>

This is the simple Bean-Class:

package net.wimaxxed.ajaxwebapp.webapp.bean;

import javax.faces.model.SelectItem;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

import java.util.ArrayList;
import java.util.List;

public class Countries
{
 private List countryNames;
 private String selectedCountry;
 private String inputCountry;

 private static final Log log = LogFactory.getLog(Countries.class);

 public Countries()
 {
 countryNames = new ArrayList();
 countryNames.add(new SelectItem("Austria"));
 countryNames.add(new SelectItem("Slovakia"));
 countryNames.add(new SelectItem("Croatia"));
 countryNames.add(new SelectItem("Germany"));

 selectedCountry = "Croatia";
 }

 /*
 public String addCountry()
 {
 countryNames.add(new SelectItem(inputCountry));
 return null;
 }
 */

 public List getCountryNames() {
 return countryNames;
 }

 public void setCountryNames(List countryNames) {
 this.countryNames = countryNames;
 }

 public String getSelectedCountry() {
 log.info("getMethod() - selectedCountry _> "+selectedCountry);
 return selectedCountry;
 }

 public void setSelectedCountry(String selectedCountry) {
 log.info("setMethod() - selectedCountry _> "+selectedCountry);
 this.selectedCountry = selectedCountry;
 }

 public String getInputCountry() {
 return inputCountry;
 }

 public void setInputCountry(String inputCountry) {
 this.inputCountry = inputCountry;
 }
}

And the definition of the Bean in the faces-config:

.....
<managed-bean>
 <managed-bean-name>countries</managed-bean-name>
 <managed-bean-class>net.wimaxxed.ajaxwebapp.webapp.bean.Countries</managed-bean-class>
 <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>
......

[liuliu]

yes, i have the same problem with moldovan.

when I reopen the simpleTogglePanel in mode ajax, a value null is setted.

[moldovan]

Tested with richfaces 3.1.4.CR3 --> Still the same 2 problems!

Dear richfaces-team: Please check these 2 things.
I have written small testapplication, so you can have a demo-war, if you need it!

I cannot go in production with my WebApplication, until the "null-value"-Problem is resolved.

[marinew]

Hi Moldovan,

I also have the same problem using a selectOneMenu inside a simpleTogglePanel in ajax mode (RichFaces 3.1.4). Very annoying....
Is there a workaround while waiting for this bug resolution ?

Thanks
Marine