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?
Building Applications with Force.com and VisualForce (DEV401) (二四):JavaScript in Visualforce的更多相关文章
- Building Applications with Force.com and VisualForce(Dev401)(十八):Visualforce Pages: Introduction to Visualforce
Dev401-020:Visualforce Pages: Introduction to Visualforce Course Objectives1.Understand the benefits ...
- Building Applications with Force.com and VisualForce(Dev401)(十):Designing Applications for Multiple Users: Building Business Processes that You Want
Dev401-011: Building Business Processes that You Want Course Objectives1.Describe the capabilities o ...
- Building Applications with Force.com and VisualForce (DEV401) (四):Building Your user Interface
Dev 401-004:Application essential:Building Your user Interface: Module Agenda1.Custom Applications2. ...
- Building Applications with Force.com and VisualForce (DEV401) (三):Application Essential:Building Your Data Model
Dev 401-003:Application Essential:Building Your Data Model Object Relationships1.Link two objects- P ...
- Building Applications with Force.com and VisualForce (DEV401) (二) : Application Essentials:Designing Application on the Force.com Platform
Dev 401-002:Application Essentials:Designing Application on the Force.com Platform Course Objectives ...
- Building Applications with Force.com and VisualForce(Dev401)(七):Designing Applications for Multiple users:Managing your users' experience I
Dev 401-007 Designing Applications for Multiple users: Managing your users' experience part 1 Module ...
- Building Applications with Force.com and VisualForce (DEV401) (二五):Visualforce Controller
Dev401-026:Visualforce Pages: Visualforce Controller Module Objectives1.Identify the functionality ...
- Building Applications with Force.com and VisualForce (DEV401) (二一):Visualforce Componets (Tags) Library Part 1
Dev401-022:Visualforce Pages: Visualforce Componets (Tags) Library Part 1 Module Objectives1.List ke ...
- Building Applications with Force.com and VisualForce (DEV401) (二三):Visualforce Componets (Tags) Library Part III
Dev401-024:Visualforce Pages: Visualforce Componets (Tags) Library Part IIIStatic Resources1.Static ...
随机推荐
- 【C++基础】008常量和变量
简介:常量和变量. 常量和变量 1. 常量 具体把数据写出来 2,3,4: 1.2,1.3: "Hello World!","C++": cout <&l ...
- 【01】React 环境搭建
react来自于Facebook公司的开源项目 react 组件化模块化 开发模式 react通过对DOM的模拟(虚拟dom),最大限度地减少与DOM的交互 (数据绑定) react 基于jsx的 ...
- springDataJPA笔记
springDataJPA笔记 第一 orm思想 主要目的:操作实体类就相当于操作数据库表 建立两个映射关系: 实体类和表的映射关系 实体类中属性和表中字段的映射关系 不再重点关注:sql语句 实现了 ...
- 解决WebMvcConfigurer下的addViewControllers无法找到制定页面
解决WebMvcConfigurer下的addViewControllers无法找到制定页面 这种都已经配置了拦截跳转,但无效的原因是,没有加载thymeleaf依赖 <dependency&g ...
- xml模块介绍
# xml 是一门可拓展的语言 # xml 语法 是用<>包裹的起来的<>就是标签, xml可以由多个<>组成 也可以由单个<>组成, # < ...
- nginx前端服务部署
一.登录服务器 登录跳板机 执行list,列出所有机器 执行dssh 机器序号,如dssh 1,选择机器 二. 创建nginx配置文件 进入nginx配置目录:cd usr/local/nginx/c ...
- 2020ubuntu1804server编译安装redis笔记(一)及报make test错误解决办法
redis的大名我想大家都不陌生,今天在ubuntu server上进行编译安装,虽然apt也可以安装,但作为内存数据库,redis又是c开发的,编译安装,对机器的适应和性能更好. 安装笔记如下 第1 ...
- 关于form表单:hover没有修改表单子元素样式
原来在写todolist的时候遇到的一个问题 是关于form表单的hover属性设置背景颜色 想要实现的效果如下: 但是一开始直接给form加hover选择器的时候是这样: 可以看到这样子直接加会使得 ...
- JavaMail(一):利用JavaMail发送简单邮件
JavaMail,提供给开发者处理电子邮件相关的编程接口.它是Sun发布的用来处理email的API.它可以方便地执行一些常用的邮件传输.但它并没有包含在JDK中,要使用JavaMail首先要下载ja ...
- vue-router需要注意的点
1.在编程式导航中,如果提供了path,params会被忽略:需要提供name,或手写完整的带有参数的path;以下写法可取: const userId = '123'; 1.this.$route ...