visual-force Component to visual-force Page passing parameter

Question

I am facing problem passing value between visual force component to visual force page.

<apex:page  sidebar="false" showHeader="false" standardStylesheets="false"  docType="html-5.0">

    <c:MenuComponent />  // this contain list of menu 


    <c:component1 />  // this sub page 1


     <c:component2 />  // this sub page 2

      <c:component3 />  // this sub page 3 

</apex:page>

i have requirement that when i press or select first menu in MenuComponent , Then i have render only <c:component1 />, if i select second menu in MenuComponent , Then i have render only <c:component2 />

how can achieve this one, its like passing value from component to visual force page and again visual force page to component again. Please any help .

Answer 1

Yes, you can do that, you can't pass value from component to page directly but using apex controller you can check and render the components according to that.

e.g: Suppose following is my menuComponent

<apex:component controller="listController">
     <apex:selectList id="complainType" value="{!selMenu}" size="1" styleClass="slds-select" label="Complain Type" onchange="callMe()">
       <apex:selectOptions value="{!Menus}" />
     </apex:selectList>

<script>
    function callMe{
        callCtrl();//this will call action function in VF page
    }
</script>
<apex:component/>

<apex:page  sidebar="false" **controller="menuController"** showHeader="false" standardStylesheets="false"  docType="html-5.0">
<apex:form id="frm">
<!--controller checkSelMenu method will be called from here-->    
        <apex:actionFunction action="{!checkSelMenu}" name="callCtrl" id="callCtrl" rerender="frm"/>

    <c:MenuComponent />  // this contain list of menu 

    <apex:outputPanel rendered="{!if(isMenuSel1,true,false)}">
        <c:component1 />  // this sub page 1
    </apex:outputPanel>

    <apex:outputPanel rendered="{!if(isMenuSel2,true,false)}">
     <c:component2 />  // this sub page 2
    </apex:outputPanel>

 <apex:outputPanel rendered="{!if(isMenuSel3,true,false)}">
     <c:component3 />  // this sub page 3 
</apex:outputPanel>
</apex:form>
</apex:page>

apex Class

public class listController{    
    public String selMenu{get;set;}
    public boolean isMenuSel1{get;set;}
    public boolean isMenuSel2{get;set;}
    public boolean isMenuSel3{get;set;}

    public listController(){
        isMenuSel1=false;
    }
    public List<SelectOption> getMenus(){    

        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('','--None--'));
        options.add(new SelectOption('Menu1','Menu 1'));
        options.add(new SelectOption('Menu2','Menu 2'));
        options.add(new SelectOption('Menu3','Menu 3'));
        options.add(new SelectOption('Menu4','Menu 4'));
        return options;
    }

    public void checkSelMenu(){
        if(selMenu == 'Menu1')
          isMenuSel1= true;
        else if(selMenu == 'Menu2')
          isMenuSel2= true;
         .....
         .....
    }
}