rich:effect on events

[harshalcg]

Hi All,

   i am new to the richfaces technology and got stuck up in some situation. In our project there are several panels distributed on the single page. On the input selected in one panel, the appearance of other panels are dependent. Like for ex. if i am selecting the radio button labeled "Private" in first panel, i must show other panel below that with required inputs. if selecting other radio button, then the relevant panels should appear.

     I tried with the <rich:effect> tag, but it worked for me on the the specific event of that panel (which i need to show/hide). But the show/hide is depend on the even fired from outside. I tried with the javascrip part mentioned in live demo of richfaces. but that also works with single panels and not for the multiple ones.

     My requirement is, i can fire any event to backing bean and from there i must be able to control the effects and show/hide of multiple panels on the page.

Would it be possible for us to do with the help of RichFaces?

Thanks in advance. Waiting for you comments and replies.

[ilya_shaikovsky]

sorry. posted to wrong thread. will update with the right answer

[harshalcg]

Hi Ilya,

   thanks for your comments. But do you got anything for update. Is there any way we could do that?

I tried invoking the effects on different buttons, but when i want to invoke them based on the <selectOneRadio> input then how could i do that?

Thanks in advance.

[kragoth]

Well, there is a very simple way to do this really.

In your backing bean have a boolean variable that controls the visibility of each panel.

Then when a raidio button is selected use an event handler or do an ajax post or whatever method you choose to send post to the server. In the method that you invoke check the value of the radio button and then set the appropriate boolean values to true.

So then all you need is for your panels to have their rendered attribute set to their corresponding boolean variable in your backing bean.

Something like this.. NOTE THIS IS NOT TESTED. This is just the general idea.

xhtml file

<h:selectOneRadio value="#{BackingBean.radioValue}">
     <a4j:support
          action="#{BackingBean.updatePanelVisibility}"
          event="onclick"
          rerender="mainPanel (whatever your top level component is that has all these panels in it)"
          ajaxSingle="true" I think you can use this but maybe not :S />
     <f:selectItem
          id="a"
          itemLabel="A"
          itemValue="A" />
</h:selectOneRadio>
<h:panelGrid
     id="APanel"
     rendered="#{BackingBean.panelAVisible}">

     <h:inputText id="aInput" value="..." />

</h:panelGrid>

java file

private Boolean panelAVisible = Boolean.False;
private String radioValue = null;

public Boolean getPanalAVisible() {
     return this.panelAVisible;
}

public void setPanelAVisible(boolean visible) {
     this.panelAVisibile = visible;
}

public String getRadioValue() {
     return this.radioValue;
}

public void setRadioValue(String value) {
     this.radioValue = value;
}

public void updatePanelVisibility() {
     //Set all panels to visible = false here
     if (null != radioValue) {
          if (radioValue.equals("A")) {
               panelAVisible = true;
          }
     }
}

Anyways, something like that

There is probably a client side way of doing this as well but I haven't done that. But take a look at the "<rich:componentControl>" tag.

[harshalcg]

Hi Tim

   Thanks a lot for your answer, and the solution you provided works perfectly fine. Infact this is what i did as a work around.

I said workaround becaues, that is a hide and show of panel, but i want to make the hiding and showing with some effects provided by RichFaces,

Like BlindUp, BlindDown, Highlight etc.

Would it be possible for us, to give that effect from backing bean? i know HtmlEffect class will be used for that, but i didnt yet get the actual use of this class. Your help is really appreciated.

Anyways, really very thanks for your reply and comments.

Thanks

Harshal

[kragoth]

OK, I'm looking at a possible solution for you so that you can use the rich:effect to hide/show your panels but, before I go ahead and post the code (well, as best as I can off the top of my head ) I just want to get an idea of how many panels we are talking about here.

My initial solution doesn't 'scale' very well but would be fine for 3-5 panels max.

So... how scalable does this have to be?

[harshalcg]

Hi Tim,

     Thats really a good question, you can consider max 2 or 3 panels for giving effect on a single event.

But i do still think that (may be stupid ), if we are able to manage a effect on a single panel then we can do the same of N number of panels, so the count should not matter.

    Please let me know if you have any further question. And thanks for your quick responses.

Best Regards !!

Harshal

[kragoth]

Alrighty, here's my attempt at what you want to do.

This is a simple test page that has 3 radio buttons and 3 panels. The panels are hidden or shown based on the radio button selection using the rich:effect tag. All of this happens on the client side. There are no round trips to the server.

IMPORTANT TO NOTE:

1. For some reason I can't get the panels to hide on the initial page load at the moment. I may or may not have time to figure this out, but take a look and see if you can get that working. Shouldn't be too hard. (OK, I fixed this.... helps if you move that bit of javascript to the bottom of the page... gee what a silly mistake!)

2. There is a tight coupeling between the itemValue attribute of each of the radio selectItems and their corresponding panel.

I hope this helps

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:s="http://jboss.com/products/seam/taglib"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">
    
    <h:form id="testForm">
        <script>
            function showHidePanels() {
                //Find the value of the selected radio button (item1, item2, ... etc)
                var selection = jQuery("input[name$='radioSelection'][checked='true']").attr("value");

                //Work out the id of the panel that should be opened.
                var openPanelId = selection + "SpecialPanelGrid";
                var openPanelClientId = null;
                if (null != openPanelId) {
                     openPanelClientId = jQuery("table[id$='"+openPanelId+"']").attr("id");
                }

                //Hide all the other panels
                jQuery("table[id$='SpecialPanelGrid']")
                        .each(
                                function() {
                                    var currentPanelId = jQuery(this).attr("id");
                                    if (currentPanelId != openPanelClientId) {
                                        hidePanel({targetId:currentPanelId});
                                    }
                                });

                //Open the right panel
                if (null != openPanelClientId) {
                    showPanel({targetId:openPanelClientId});
                }                                
            }
        </script>
        <h:panelGrid
            id="radioPanel" 
            columns="1"
            onclick="showHidePanels();">
            <h:selectOneRadio
                id="radioSelection" 
                value="">
                <f:selectItem 
                    id="item1"
                    itemValue="item1"
                    itemLabel="Item 1"/>
                <f:selectItem 
                    id="item2"
                    itemValue="item2"
                    itemLabel="Item 2"/>
                <f:selectItem 
                    id="item3"
                    itemValue="item3"
                    itemLabel="Item 3"/>
            </h:selectOneRadio>
        </h:panelGrid>

        <h:panelGrid 
            id="item1SpecialPanelGrid" 
            columns="1"
            style="border:thin;">
            <h:outputText value="Panel Grid 1"/>
        </h:panelGrid>
        <h:panelGrid 
            id="item2SpecialPanelGrid" 
            columns="1"
            style="border:thin;">
            <h:outputText value="Panel Grid 2"/>
        </h:panelGrid>
        <h:panelGrid 
            id="item3SpecialPanelGrid" 
            columns="1"
            style="border:thin;">
            <h:outputText value="Panel Grid 3"/>
        </h:panelGrid>
        <rich:effect name="hidePanel" for="item1SpecialPanelGrid" type="Fade"/>
        <rich:effect name="showPanel" for="item1SpecialPanelGrid" type="Appear"/>

        <script>
            showHidePanels();
        </script>
        
    </h:form>
    
</ui:composition>

Maybe someone can tell my why the panels aren't hidden on page load (Actually, just pretend I never asked this )

Cheers,

Tim