Visualforce Component in a visualforce page

Many a times we develop codes which are required again and again. Or may be we require them in a little different fashion.

Best coding would always be reusing something that has already been developed. That saves time and also save number of lines you write in apex.

How about developing a generic vf page? 

Salesforce does allow writing generic vf pages! You have to call the page and pass the parameters you wish to send to the generic page. Salesforce calls this "Vf cmponent". you can write this component by navigating to following:
setup --> Develop --> component -->write your component.
Unlike vf page wherein you start with <apex:page ...> here you have to start as  <apex:component...>

Lets take very basic example to understand how component could be used in vf/apex. Suppose you want to write a component which changes the colour of you text to "red".
That is if you submit your text string to this component it should return you same string but with red colour. 

Below is the example for same:

Your component:

<apex:component controller="VisualForceComponentController">
  <apex:attribute description="input field value" name="InputField" assignTo="{!AssignedToField}" type="String" required="true"/>
  <apex:outputText value="{!InputstringReceived}" style="color:red;"/>

Class associated with the component:

Public Class VisualForceComponentController{
Public string AssignedToField{get;set;}
    Public VisualForceComponentController(){

    Public string getInputstringReceived(){
       return AssignedToField;   

As an example lets call the above component from a vf page as below:

<apex:page standardController="Account" >
  <apex:form >
    <apex:pageblock >
      <c:VisualForceComponent InputField="My Input value" />

Lets debug this now:
<apex:attribute description="input field value" name="InputField" assignTo="{!AssignedToField}" type="String" required="true"/>

This creates a component variable named "InputField" so whenever you call this component you can pass value to this variable. We need to define what kind of data it will hold in this case it type="string"
Also mentioning it as required = "true" makes it compulsory that this value should always be passed when we call this component from vf page

what is assignedTo ? the value received in component needs to be assigned to a variable in class if you wish to access it in class.
Also, this value cannot be accessed in constructor. Hence the method :

Public string getInputstringReceived(){
       return AssignedToField;   

In the above example we directly access the variable in vf component, that is 
instead of "InputstringReceived"  we could have written "InputField" and still it could have worked.

I accessed it through method just to demo how this variable can be accessed in controller.
We need to make sure that whichever variable is used in assigned to should be defined get;set; and public and should have similar data type.

You can call this component from whichever vf page you want but make sure you pass the string to it.

No comments:

Post a Comment