Communicate from a Component to the Page - Visualforce

Visualforce has many different layers that make it easy to organize our pages and our code.  The visual portion of the page which includes the CSS, HTML and Apex Visualforce tags, which help to create more HTML, are kept in a Visuaforce Page.  This Visualforce Page then can point to an Apex Class, which should contain our business logic, by using the controller attribute.  The page would look like this:



   
      
      

      
        
      

   

Here is our Apex Class that would contain the business logic related to that Visualforce Page:

public with sharing class blogController{
   public integer intValue{get;set;}

   public blogController(){
      intValue = 0;
   }

   public pageReference add1(){
      intValue += 1;
      return null;   
   }

   public pageReference substract1(){
      intValue -=1;
      return null;
   }
}

This page and controller are pretty simple.  They allow you to manipulate the intValue integer on the controller.

But what if you had a component on that page and that component wanted you to add 5 or subtract 5 from the intValue?  How would it talk to the controller for the page?  It seems difficult because the page and the component will have different controllers.  But we can make this call by following a couple of steps to make the communication possible.  First, let’s add the add5() and subtract5() methods to our existing controller so it can be called.

public with sharing class blogController{
   public integer intValue{get;set;}

   public blogController(){
      intValue = 0;
   }

   public pageReference add1(){
      intValue += 1;
      return null;   
   }

   public pageReference substract1(){
      intValue -=1;
      return null;
   }

   public pageReference add5(){
      intValue += 5;
      return null;   
   }

   public pageReference substract5(){
      intValue -=5;
      return null;
   }
}

Then on our page we could add these actionFunction items:

   
   

The actionFunction exposes a Javascript function that can be called from anywhere on the page, including from within components on that page.

This Javascript function then exposes a hook for our component to make a call back to the page itself.  Of course this is setting up a dependency between the component and the page on which it resides, but maybe that would be the correct situation in some use cases.

Here could be our component.  Notice how the buttons are calling the actionFunction items on the Visualforce page.  Let’s assume for later that we save our component file as Add5Subtract5.component.

  
       
       
  

We do not even need to write out any code in the blogComponentCtl class, which is the controller for the component, because that class is not really helping us with this requirement.

We finally need to add the component to our page with the ‘c:’ notation.



   
      
      
      

      
        
      

   

Now everything should flow through.  The buttons in the component will call the actionFunction on the page, which will then call the desired method on the page’s controller.

There seems like a lot of steps there, but they really fit together pretty nicely.

Happy Visualforcing! 

 

 

Comments

Returning visitor? Please login or register.

Leave A Comment