Advanced Visualforce Webinar

Force.com Webinar:
Advanced Visualforce

Eric Wilson
Director, Product Management
UI Platforms

Join the conversation: #forcewebinar

Agenda
1. Assumptions
2. Your Frienemy: View State
3. Managing View State
4. Asynchronous Apex


Assumptions


This Advanced Webinar Assumes...

...you have used Visualforce and are comfortable with it.

...you have used Apex and are comfortable writing it.

...you understand HTML, JavaScript, and AJAX concepts.


Your Frienemy:
View State


Q: What is View State?
A: An encrypted, hidden <input> field on a Visualforce page that
keeps track of Apex controller state & Visualforce page state
between server requests. This field is only generated when
there is an <apex:form> tag present on a page.


Visualforce Lifecycle
A

HTTP GET

A. URL Requested
E B. Apex Controller Instantiated on Server
HTTP POST
C. Controller State Serialized & Encrypted to View State

D. Page Markup Sent to Browser & Rendered
D
B E. View State Decrypted & Deserialized (for Postbacks)

<input type="hidden" value="..."/> C


View State: Your Frienemy

Why it’s Great :-) Why it’s Not So Great :-(
• Automatically keeps track of field • Can be bulky, affecting performance.
values for you. • It has size limitations.
• Allows for easy AJAX functionality. • Doesn’t allow for complex AJAX
• Provides easy way to re-render page functionality.
components.


View State is Required for...
<apex:action*>
<apex:command*>
<apex:inlineEditSupport>
<apex:input*>
<apex:select*>


Managing View State


How Can I Manage My View State?
A. Reduce Number of Components
B. Use the transient Keyword
C. Use JavaScript Remoting
D. Use the Streaming API


Option A: Reduce Number of Components

<apex:outputPanel layout="inline"...> <span...>

<apex:outputPanel layout="block"...> <div...>

<apex:panelGrid...> <table...>

<apex:outputLink...> <a...>

<apex:outputText styleClass="..."...> <span...>


Option B: Use the transient Keyword

public with sharing class EditClientController {

public Contact client { get; set; }
transient public List<Contact> connections { get; set; }
transient public List<Account> previousEmployers { get; set; }
transient public Set<String> hashTags { get; set; }

...

}


Option B: Use the transient Keyword

BEFORE
AFTER

58%


Option C: Use JavaScript Remoting
Q: What is JavaScript Remoting?
A: Stateless way to call Apex controller methods from JavaScript.


Option C: Use JavaScript Remoting

Find Customer:

<apex:actionFunction ... />
<apex:actionRegion ... />
JavaScript Remoting
<apex:actionSupport ... />


JavaScript Remoting Lifecycle

JS Function

Apex Method
Client-side

JS Callback Server-side


JS Function

Apex Method

JS Callback


Option C: JavaScript Remoting: The Page

<apex:page controller="FindCustomerController">

<input id="searchField" type="text" placeholder="Enter Last Name"/>
<button onclick="handleButtonClick();">Search</button>

<table>
<tbody id="results"></tbody>
</table>
JS Function

</apex:page> Apex Method

JS Callback


Option C: JavaScript Remoting: The JavaScript

function handleButtonClick() {
var searchTerm = document.getElementById("searchField").value;
FindCustomerController.doSearch(searchTerm, renderResults);
}

JS Function

Apex Method

JS Callback


Option C: JavaScript Remoting: The JavaScript

function handleButtonClick() {
var searchTerm = document.getElementById("searchField").value;
FindCustomerController.doSearch(searchTerm, renderResults);
}
Apex Class Apex Method Apex Method Parameter JS Callback Function

JS Function

Apex Method

JS Callback


Option C: JavaScript Remoting: The Apex Class
public with sharing class FindCustomerController {

@RemoteAction
public static List<Contact> doSearch(String customerLastName) {
customerLastName = '%' + customerLastName + '%';
return [
SELECT id, FirstName, LastName
FROM Contact
WHERE LastName LIKE :customerLastName
LIMIT 200
]; JS Function

} Apex Method

JS Callback
}


Option C: JavaScript Remoting: The Callback

function renderResults(results, event) {
var container = document.getElementById("results"),
html = [];
for (var i=0, j=results.length; i<j; i++) {
html.push("<tr><td>");
html.push(results[i].LastName + ", " + results[i].FirstName);
html.push("</td></tr>");
}
container.innerHTML = html.join(""); JS Function

} Apex Method

JS Callback


Option C: JavaScript Remoting: The Results

JS Function

Apex Method

JS Callback


Option C: JavaScript Remoting: The Results

BEFORE AFTER
234ms 152ms
35%


Option D: Use the Streaming API
Q: What is the Streaming API?
A: A highly performant way to get near-real-time updates from
a Salesforce instance without polling.


BEFORE
<apex:page controller="NewAccountsController">
<apex:form>

<apex:actionPoller action="{!find}" rerender="wrapper" interval="15"/>
<h1>Streaming API Example</h1>
<h2>New Accounts</h2>
<apex:outputPanel id="wrapper"></apex:outputPanel>

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


AFTER
<apex:page controller="NewAccountsController">

<apex:includeScript value="..."/> 

<h1>Streaming API Example</h1>
<h2>New Accounts</h2>
<div id="wrapper"></div>
<script>... $.cometd.init(...) $.cometd.subscribe(...) ...</script>

</apex:page>

Option D: Use the Streaming API: Steps
Determine Your SOQL Query
Create a PushTopic Record
Include Necessary JavaScript Libraries on Visualforce Page
Call cometd’s init(...) and subscribe(...) Functions (Inline JS)
Watch Magic Happen


Asynchronous Apex


Asynchronous Apex
public with sharing class SendInvoiceController{

@RemoteAction
public static String requestAllInvoices(String customerId) {
sendAllInvoices(customerId);
return('All invoices have been requested.');
}

@future
private static void sendAllInvoices(String customerId) {
EmailHelper.emailCustomerInvoices(customerId);
}

}


Survey
Your feedback is crucial to the success of our webinar programs.
Thank you!

http://bit.ly/advancedvfsurvey


Q&A

Eric Wilson
Director, Product Management
UI Platforms


Upcoming Events

December 11, 2012
AppExchange for Developers Webinar
http://bit.ly/XnFERP

December 12, 2012
Apex CodeTalk Live Q&A
http://bit.ly/apexct-vf

Check out the Developer Force calendar for upcoming local events such as meetups,
workshops, and user group meetings: http://developer.force.com/Calendar


Advanced Visualforce Webinar

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Advanced Visualforce Webinar

Similar to Advanced Visualforce Webinar (20)

More from Salesforce Developers

More from Salesforce Developers (20)

Advanced Visualforce Webinar