Visualforce - Beyond Basics Series 8 - Alternatives to MultiPage design

What is multipage design ?

visualforce is a multipage architectural design system which means that you need to design you application by building set of Pages aiming to use shared components & controller/extensions efficiently.

What is the problem with that design ?

Since, visualforce doesn't have a app specific namespace or a folder structure to isolate the application specific pages, it's difficult to maintain them in long term.

What is the solution ?

The solution is to keep the number of pages as less as possible, but still reusing components, controller/extension appropriately. This is in other words called Single Page Application(SPA).

How to do that ?

This is achieved through using 'SectionName' in the controller & displaying different sections in the pages, according the user navigation.

Where is the code ?

I have illustrated this technique using a Apex controller which will have the current section name. When the page navigates to the new section, it updates the section name in the controller & appropriate section gets rendered. By doing this, you avoid having different pages for different sections in the App.

	public class testcls8_08122016 {
	public string PageName { get; set;}
	public testcls8_08122016() {
	PageName = 'Page1';
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

	<apex:page controller="testcls8_08122016">
	<style>
	.myText {
	font-size: 20px;
	margin: 50px;
	}
	</style>
	<apex:form id="FullPage">
	<apex:outputPanel layout="block" rendered="{!PageName == 'Page1'}">
	<apex:outputText value="YOU ARE IN PAGE 1" styleClass="myText"/>
	</apex:outputPanel>
	<apex:outputPanel layout="block" rendered="{!PageName == 'Page2'}">
	<apex:outputText value="YOU ARE IN PAGE 2" styleClass="myText"/>
	</apex:outputPanel>
	<apex:outputPanel layout="block" rendered="{!PageName == 'Page3'}">
	<apex:outputText value="YOU ARE IN PAGE 3" styleClass="myText"/>
	</apex:outputPanel>
	<apex:outputPanel layout="block" rendered="{!PageName == 'Page4'}">
	<apex:outputText value="YOU ARE IN PAGE 4" styleClass="myText"/>
	</apex:outputPanel>
	<apex:commandButton value="Next" rerender="FullPage">
	<apex:param name="PageName" value="Page{!VALUE(RIGHT(PageName, 1)) + 1}" assignTo="{!PageName}"/>
	</apex:commandButton>
	<apex:commandButton value="Prev" rerender="FullPage">
	<apex:param name="PageName" value="Page{!VALUE(RIGHT(PageName, 1)) - 1}" assignTo="{!PageName}"/>
	</apex:commandButton>
	</apex:form>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub