Visualforce - Beyond Basics Series 21 - Use Templates, Components effectively

How to enhance re-usability ?

Modular architecture is the best way to ensure system is well organised and encourages the re-usability. As per the basic rule, No two lines in the entire code base should be same. That means that, there's a possibility of re-usable code.

What is Templates ?

When the skeleton/Layout (or) group of sections gets reused in different pages, it could  be put in a template page. Then, that can be used to build different pages. Most common use for those templates is that brand header, brand footer or Side Navigation Menu, etc.

Where is the Code ?

This code illustrated how a template with Header, Content & Footer is created. Then, how it is used in another page, by including its content.

	<apex:page >
	<!-- Template Page -->
	<!-- Header -->
	<apex:outputPanel layout="block" style="height:50px;background-color:lightcyan;">
	<apex:insert name="Header"/>
	</apex:outputPanel>
	<!-- Content -->
	<apex:outputPanel layout="block" style="height:50px;background-color:lightblue;">
	<apex:insert name="Content"/>
	</apex:outputPanel>
	<!-- Footer -->
	<apex:outputPanel layout="block" style="height:50px;background-color:lightgreen;">
	<apex:insert name="Footer"/>
	</apex:outputPanel>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

	<apex:page >
	<apex:composition template="{!$Page.testpage9_12122016}">
	<apex:define name="Header">
	Im the Header Content
	</apex:define>
	<apex:define name="Content">
	Im the Middle Content
	</apex:define>
	<apex:define name="Footer">
	Im the Footer Content
	</apex:define>
	</apex:composition>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

What is Components ?

Component is the building block for any pages. It's one more technique to ensure the re-usability. The more custom components we include in the page, the more re-usability we can achieve.

Where is the Code ?

This example illustrates how to include the component in the page.

	public class testcls8_12122016 {
	public MyDateContainer mdc {get; set;}
	public testcls8_12122016() {
	mdc = new MyDateContainer(System.Today());
	}
	public void addDay() {
	mdc.myDate += 1;
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

	<apex:component >
	<apex:attribute type="MyDateContainer" name="myDate" description="Date container"/>
	<apex:outputText value="Todays date is {!myDate.myDate}" style="font-size:25px;"/> <br/>
	</apex:component>

view raw gistfile1.txt hosted with ❤ by GitHub

	<apex:page controller="testcls8_12122016" >
	<apex:form >
	<c:testcmp8_12122016 myDate="{!mdc}" id="myComp"/>
	<apex:commandButton value="Add one day" action="{!addDay}" reRender="myComp"/>
	</apex:form>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

When to use Templates vs Components ?

When the Outer Layout gets repeated in pages, try to put them in the Template. When the inner isolated sections gets repeated in pages, put them in components & reuse them.