Visualforce - Beyond Basics Series 1 - Tabpanel SwitchType

tabpanel - switchtype
What is it ?
tabpanel tag facilitates tabbed view of the content. The content could be any container tag like div,
span, iframe, etc. The 'Switchtype' attribute specifies how the content should be rendered.

There are three possible ways to render the content,

During Page Load
When user switches the tab, through full page reload
When user switches the tab, through partial page refresh(ajax call)

Why does it matter ?

I have seen most of the time, developers don't provide any value which defaults to server type. This will
cause full page reload when user switches the tab. This is unnecessary in most cases & an expensive
process.

What are the different scenarios to use ?

Use 'client' if the tab content is very small
Use 'server' if the tab content is large which will take more time to load during initial page load.
Use 'ajax' if user changes the tab very often & tabbed content is small proposition of the whole
page.
How to use it ?
This is the sample code illustrating with two tabs for each type. When you run this, you can see that
'client' type will take more time to load. 'server' type will refresh whole page when user changes the tab.
'ajax' type will simply refresh the tab content.

<apex:page >
<apex:sectionHeader title="Client SwitchType"/>
<apex:tabPanel switchType="client" selectedTab="wikipedia">
<apex:tab label="wikipedia" name="wikipedia">
<apex:iframe src="https://www.wikipedia.org"/>
</apex:tab>
<apex:tab label="Bing" name="BingName">
<apex:iframe src="https://www.bing.com"/>
</apex:tab>
</apex:tabPanel>

<apex:sectionHeader title="Server SwitchType"/>

<apex:tabPanel switchType="server" selectedTab="wikipedia">
<apex:tab label="wikipedia" name="wikipedia">
<apex:iframe src="https://www.wikipedia.org"/>
</apex:tab>
<apex:tab label="Bing" name="BingName">
<apex:iframe src="https://www.bing.com"/>
</apex:tab>
</apex:tabPanel>
 <apex:sectionHeader title="Ajax SwitchType"/>
<apex:tabPanel switchType="ajax" selectedTab="wikipedia">
<apex:tab label="wikipedia" name="wikipedia">
<apex:iframe src="https://www.wikipedia.org"/>
</apex:tab>
<apex:tab label="Bing" name="BingName">
<apex:iframe src="https://www.bing.com"/>
</apex:tab>
</apex:tabPanel>
</apex:page>

Visualforce - Beyond Basics Series 2 - Use $Action & avoid URL Hacks
What is URL Hacks ?
The technique of reverse engineering standard salesforce URL & using them to build a custom solution.

Problems of using URL Hacks ?

The standard salesforce URL formats & parameters is undocumented. So, it could be changed anytime
during standard release or during bug fixes. So, it's better to avoid

How to avoid it ?
Salesforce provides standard ways to access the URL & parameters in Visualforce & Apex. Developers
must use them instead of hardcoding the URL's in the code.

Where is the code ?

Instead of using something like '/006/o' to redirect to opportunity tab page, one could use
$Action.Opportunity.Tab with the help of URLFOR function to get the URL.

For illustration, i have shown how to get the URL's for create, view, edit delete for an opportunity record
<apex:page standardController="Opportunity">
What would you like to do with this Opportunity - {!Opportunity.Name}

<apex:panelGrid columns="1">

<!-- create -->

<apex:outputLink value="{!URLFOR($Action.Opportunity.New)}">Create New</apex:outputLink>

<!-- view -->

<apex:outputLink value="{!URLFOR($Action.Opportunity.View,
Opportunity.Id)}">View</apex:outputLink>

<!-- edit -->

<apex:outputLink value="{!URLFOR($Action.Opportunity.Edit,
Opportunity.Id)}">Edit</apex:outputLink>

<!-- delete -->

<apex:outputLink value="{!URLFOR($Action.Opportunity.Delete,
Opportunity.Id)}">Delete</apex:outputLink>
 </apex:panelGrid>

</apex:page>
Visualforce - Beyond Basics Series 3 - Pass params to action methods
What is action methods ?
After the page load, we can send requests to server asynchronously to perform some actions which is
called action methods. This is achieved by sending POST request along with necessary parameters in
headers.

When it will be useful ?

This is useful in cases where user needs to take small actions & update the small portion of the screen
without reloading the whole page.

How to pass values to action methods ?

We can pass parameters using param tag for these four action tags,

apex:commandButton
apex:commandLink
apex:actionSupport
apex:actionFunction

Where is the code ?

Here's the illustration for passing parameters for these four different action methods,
<apex:page controller="testcls3_06122016">
<apex:form>

<apex:actionFunction name="actionFn_Js" reRender="UserMessage">

<apex:param name="actionName" value="Link-ActionFunction" assignTo="{!actionName}"/>
</apex:actionFunction>

<apex:panelGrid columns="2">

<!-- commandbutton -->

<apex:outputText value="CommandButton"/>
<apex:commandButton value="Click me" reRender="UserMessage">
<apex:param name="actionName" value="CommandButton" assignTo="{!actionName}"/>
</apex:commandButton>

<!-- commandlink -->

<apex:outputText value="CommandLink"/>
<apex:commandLink value="Click me" reRender="UserMessage">
<apex:param name="actionName" value="CommandLink" assignTo="{!actionName}"/>
</apex:commandLink>

<!-- actionsupport -->

<apex:outputText value="ActionSupport"/>
 <apex:selectList size="1">
<apex:actionSupport event="onchange" reRender="UserMessage" >
<apex:param name="actionName" value="SelectList-ActionSupport"
assignTo="{!actionName}"/>
</apex:actionSupport>
<apex:selectOption itemValue="Option1" itemLabel="Option1" />
<apex:selectOption itemValue="Option2" itemLabel="Option2" />
</apex:selectList>

<!-- actionfunction -->

<apex:outputText value="ActionFunction"/>
<apex:outputLink onclick="actionFn_Js('Link-ActionFunction');return false;">
Click me
</apex:outputLink>

<!-- User Output Message -->

<apex:outputPanel id="UserMessage">
<apex:outputText value="User Message" rendered="{!actionName != Null}"/>
<apex:outputText rendered="{!actionName != Null}">
User clicked this action - {!actionName}
</apex:outputText>
</apex:outputPanel>

</apex:panelGrid>

</apex:form>
</apex:page>

class
public class testcls3_06122016 {

public String actionName{get;set;}

}
Visualforce - Beyond Basics Series 4 - actionpoller is your timer
How to perform timed action ?
if you need to fire action method calls (ajax calls to server) periodically, just like a timer, you need to use
actionPoller tag. This will call the action methods at regular intervels & rerender the section of the
screen(optionally).

Where is the code ?

The actionpoller tag can be illustration with following example. This updates the userRetries count
everytime it sends the request to server. Finally, when it reached 10 times, it quits