Visualforce: Using JavaScript Remoting for Apex Controllers
-
Upload
prabhat-gangwar -
Category
Software
-
view
159 -
download
7
Transcript of Visualforce: Using JavaScript Remoting for Apex Controllers
Agenda
Covered Topic-
JavaScript Remoting for Apex Controllers In Cloud Computing
Prabhat GangwarSoftware Developer
What is JavaScript Remoting for Apex Controllers?
JavaScript Remoting for Apex Controllers
AJAX request from an apex page to a controller.
Invoke Controller method
Synchronous request to the controller with an asynchronous response to the page .
A way to separate the page from the controller.
without the need to perform a form submission.
This way to implement light weight visualforce page with faster responce from database instead using action function.
What are the benefits?
JavaScript Remoting for Apex Controllers
Decouples the page from the controller.
No Need reloading the entire page.
avoid View-State issue when you use JS remoting because you will just give request and back the data to the user but not keep it on the server.
JavaScript Remoting for Apex Controllers
What are the disadvantages?
Decouples the page from the controller.
A basic understanding of javascript is required.
Slightly higher barrier to entry.
JavaScript Remoting for Apex Controllers
How to use JavaScript Remoting for Apex Controllers?
add the request as a JavaScript invocation with the following form: Syntax –
[namespace.]controller.method( [parameters...,]callbackFunction, [configuration]);
namespace is the namespace of the controller class.controller is the name of your Apex controller. method is the name of the Apex method you’re calling.parameters is the comma-separated list of parameters that your method takes.callbackFunction is the name of the JavaScript function that will handle the response from the controller . You can also declare an anonymous function inline.configuration configures the handling of the remote call and response. Use this to change the behavior of a remoting call .
JavaScript Remoting for Apex Controllers
.
Example 1 - Before any Event
Button will Invoke Controller Method
JavaScript Remoting for Apex Controllers
.
After Event
Result
JavaScript Remoting for Apex Controllers <apex:page controller="JSRemotingBasicsController" id="page">
<script type="text/javascript"> function getText() { var text = ""; JSRemotingBasicsController.doGetText( function(result, event) { if(event.type === 'exception') { console.log("exception"); console.log(event); } else if (event.status) { alert(result); // here will come ‘welcome to cccinfotech’ text = result; document.getElementById('{!$Component.page.textResponseApexOutputText}').innerHTML = text; } else { console.log(event.message); } }, { buffer: true, escape: true, timeout: 30000} ); }</script>
<h2>Simple Javascript Remoting Examples </h2> <br/> <br/> <button onclick="getText()">Get Static Text</button> <br/> <apex:outputText id="textResponseApexOutputText"></apex:outputText>
</apex:page>
Visual forcepage
JavaScript Remoting for Apex Controllers
Controller -
global class JSRemotingBasicsController { public JSRemotingBasicsController() { } @RemoteAction public static String doGetText() { return 'Welcome to cccinfotech'; }}
The global access modifier declares that this class is known by all Apex code everywhere.
When javaScript Remoting method is called, It finds @RemoteAction methods in the controller.
JavaScript Remoting for Apex Controllers
Before any EventExample 2 -
JavaScript Remoting for Apex Controllers
After EventExample 2 -
JavaScript Remoting for Apex Controllers
<apex:page controller="sample" wizard="true"> <script type="text/javascript"> function getAccountJS() { var accountNameJS = document.getElementById('accName').value; sample.getAccount( accountNameJS,function(result, event) { if (event.status) { // demonstrates how to get ID for HTML and Visualforce tags document.getElementById("{!$Component.theBlock.thePageBlockSection.theFirstItem.accId}").innerHTML = result.Id; document.getElementById("{!$Component.theBlock.thePageBlockSection.theSecondItem.accNam}").innerHTML = result.Name; } else if (event.type === 'exception') { document.getElementById("errors-js").innerHTML = event.message; } else { document.getElementById("errors-js").innerHTML = event.message; } }, ); } </script> Account Name :<input id="accName" type="text" /> <button onclick="getAccountJS()">Get Account</button> <div id="errors-js"> </div> <apex:pageBlock id="theBlock"> <apex:pageBlockSection id="thePageBlockSection" columns="2"> <apex:pageBlockSectionItem id="theFirstItem"> <apex:outputText id="accId"/> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem id="theSecondItem" > <apex:outputText id="accNam" /> </apex:pageBlockSectionItem> </apex:pageBlockSection> </apex:pageBlock></apex:page>
Visualforce Page -
JavaScript Remoting for Apex Controllers
Controller -
public class sample { public static Account account { get; set; } public sample() { } @RemoteAction public static Account getAccount(String accountName) { account = [select id, name, phone, type, numberofemployees from Account where name = :accountName ]; return account; }}
JavaScript Remoting for Apex Controllers
Configure a remoting request by providing an object.default configuration parameters look like this: { buffer: true, escape: true, timeout: 30000 } Buffer : Boolean Type , The default is true. This buffering improve the efficiency of the overall request-and-response cycle.
Escape :Boolean Type , The default is true. Apex method’s response.
Timeout :-The timeout for the request, in milliseconds. default is 30000 ms (30 seconds). maximum is 120000 (120 seconds, or 2 minutes).
Configuring JavaScript Remoting Requests ?
Maxretries :
Integer Type
retries for the request when connection errors occur.
The default is 0. The maximum is 3.
new parameter could be as follows ?
{ buffer: true, escape: true, timeout: 30000, maxretries: 2 }
JavaScript Remoting for Apex Controllers
.
Important about Remote Action ?
JavaScript Remoting for Apex Controllers
Javascript remoting calls don't count against SOQL Governor limit.
JavaScript Remoting for Apex Controllers
JavaScript Remoting Campare with Action Function ?
Action Funtion
Action Function posts the data. Must need of form .
View-State issue
need to ReRender
methods are instance
methods require bandwidth not less
@RemoteAction
communicate with VF page's controller's methods without posting your form.
avoid View-State issue
No need to ReRender
methods are static
methods require less bandwidth
JavaScript Remoting for Apex Controllers
JavaScript Remoting Campare with Action Function ?
Action Funtion
has to transfer the page view state
cannot update the page's view state.
@RemoteAction
Less server processing time, because only the data you submit is visible and the view state is not transferred.
Controller methods can return data directly back to the calling JavaScript, cannot update the page's view state