Building Applications with Force.com and VisualForce (DEV401) （二四）：JavaScript in Visualforce

Dev401-025:Visualforce Pages: JavaScript in Visualforce

Module Objectives
1.Describe the use of AJAX within Visualforce.
2.Create access to standard actions via the $URLFOR expression.
3.Create reusable functions within ,script> tags.
4.Create partial page refreshes on javaScript events.
5.Describe the usage of the AJAX action components.

Module Agenda
1.Action Biding and javaScript
2.JavaScript Functions
3.Partial page Updates
4.Asymchronous Operation Status
5.AJAX Behavior on Events

Using JavaScript to Reference Components
1.Every Visualforce tag has an id attribute. The id attribute for a tag can be used by another tag to bind the two tags together. For example, the <apex:outputLabel> tag’s for attribute can be used with the <apex:inputField> tag’s id attribute. The reRender and status attributes on <apex:actionFunction>, <apex:actionSupport>, and other action-oriented components also use the value of the id attribute from other components.
2.In addition to being used to bind Visualforce components together, this ID is used to form part of the document object model (DOM) ID for the component when the page is rendered.
3.To refer to a Visualforce component in JavaScript or another Web-enabled language, you must specify a value for the id attribute for that component. A DOM ID is constructed from a combination of the id attribute of the component and the id attributes of all components that contain the element.

Using a JavaScript Library with Visualforce
1.You can include JavaScript libraries in your Visualforce pages to take advantage of functionality provided by these libraries.
2. The best way to include JavaScript libraries is by creating a static resource, and then including the library by adding an <apex:includeScript> component to your page.
3.For example, if you are using MooTools (http://mootools.net/), create a static resource from the library called mootools, and then reference it in a page like this:
<apex:page>
<apex:includeScript value="{!$Resource.mootools}"/>
</apex:page>

Apex:actionStatus
1.A component that displays the status of an AJAX update request. An AJAX request can either be in progress or complete.
2.Example
<!-- Page: -->

<apex:page controller="exampleCon">
<apex:form>
<apex:outputText value="Watch this counter: {!count}" id="counter"/>
<apex:actionStatus startText=" (incrementing...)"
stopText=" (done)" id="counterStatus"/>
<apex:actionPoller action="{!incrementCounter}" rerender="counter"
status="counterStatus" interval="15"/>
</apex:form>
</apex:page>

/*** Controller: ***/

public class exampleCon {
Integer count = 0;

public PageReference incrementCounter() {
count++;
return null;
}

public Integer getCount() {
return count;
}
}

Visualforce Components & javaScript Events
1.Many Visualforce tags relate to different UI components.
2.These often have attributes equivalent to JavaScript events to handle user actions to those components.

Partial page Refreshes for Conditional Fields
1.Goal(s)
- Override the position new page to only display certain fields based on the values of others, and refresh only the part of the page taht is required.
2.Scenarion:
- Universal Containers wants to provide a similar functionality to record types in providing different fields on the page depending on the values of the others. However,with Visualforce they have heard that they can not only make this dynamic, but also so thatit only requires a partial page refresh.
- The postion page should only display the Technical Skills section when the Department is set to IT or Engineering.
3.Tasks:
- Add the pre-existing visualforce page to your org.
- Override te Position New button.
- Test the page.

Module Review
1.What are soem examples of JavaScript Events?
2.What is AJAX typically used for in Visualforce?How this different from s-controls?
partial page refresh
3.Why would you need to use the global $URLFOR variable?
4.What is the purpose of script tags?
5.What are the different AJAX action tags? What does each do?
6.How can you create partial page refreshes? How does the method change depending on the context?