Salesforce Visualforce (基础9)自定义控制器

学习目标

完成本单元后,您将能够:

  • 解释一下自定义控制器是什么,并描述其关键属性。
  • 创建一个自定义控制器类。
  • 在Visualforce页面上使用自定义控制器。

自定义控制器介绍

自定义控制器包含可由Visualforce页面使用的自定义逻辑和数据操作。例如,自定义控制器可以检索要显示的项目列表,向外部Web服务发出调用,验证和插入数据等等,并且所有这些操作都将可用于Visualforce页面,该页面将其用作控制器。
在其他地方介绍了Visualforce如何支持用于构建Web应用程序的模型 – 视图 – 控制器(MVC)设计模式。控制器通常检索要在Visualforce页面中显示的数据,并包含响应页面操作而执行的代码(如正在单击的按钮)。当您使用标准控制器时,平台为您提供了大量的标准功能。

但是一个尺寸并不适合所有的,并不是所有的网络应用程序都是“标准的”。当你想覆盖现有的功能,通过应用程序自定义导航,使用标注或Web服务,或者如果你需要更好地控制信息的访问方式对于您的页面,Visualforce可让您占据统治地位。您可以使用Apex编写自定义控制器,并从头到尾完全控制您的应用逻辑。

创建一个使用自定义控制器的Visualforce页面

通过在<apex:page>控制器属性中引用控制器类的名称,将自定义控制器添加到Visualforce页面。
当您的页面使用自定义控制器时,不能使用标准控制器。页面使用不同的属性来设置自定义控制器。
  1. 打开开发者控制台,然后点击 File | New | Visualforce Page 创建一个新的Visualforce页面。输入ContactsListController作为页面名称。
  2. 在编辑器中,用以下替换标记。
    <apex:page controller="ContactsListController">
        <apex:form>
            <apex:pageBlock title="Contacts List" id="contacts_list">
                
                <!-- Contacts List goes here -->
    
            </apex:pageBlock>
        </apex:form>
    </apex:page>
    当你试图保存这个页面时,你会得到一个错误,因为ContactsListController还不存在。不用担心,接下来我们会解决这个问题。

创建一个自定义控制器Apex类

自定义控制器只是一个Apex类,您可以使用Developer Console编写自己的类。
有许多系统和实用程序类可以帮助您编写自定义控制器逻辑,但将类用作自定义控制器的唯一要求是它存在。
  1. 打开开发者控制台,然后点击 File | New | Apex Class 创建一个新的Apex类。输入ContactsListController作为类名。
  2. 在编辑器中,用以下代码替换任何代码。
    public class ContactsListController {
    
        // Controller code goes here
    
    }
    与Visualforce页面一样,当您更改时,您需要保存对Apex的更改。
    这并不多,而且还没有做任何事情,但它确实使错误消失在Visualforce页面上。所以…
  3. 切换回Visualforce页面并再次保存。
    错误信息应该消失,页面成功保存。
  4. 点击预览打开您的页面的预览,您可以在进行更改时查看。
    应该打开一个新窗口,显示标准的Salesforce页面标题和侧边栏元素,但没有内容。

乍一看,你创建的这两个新项目看起来并不是很有趣。但是即使它们是90%的占位符代码,Visualforce页面和Apex控制器这两个项目也是相互关联的。只要你添加更多的代码到控制器,你的页面就可以使用它。

超越基础

您可能已经注意到,这个自定义控制器类不会从另一个类继承,也不会实现一个有希望符合Visualforce控制器要求的接口。即使是复杂的控制器也不会做这些事情,因为没有任何这样的类继承或接口实现。这使您可以自由地创建自己的类和接口,随着您对Apex的经验的增加。

添加一个方法来检索记录

创建一个运行SOQL查询的getter方法,该查询返回要在页面上显示的记录。
大多数控制器的主要目的是检索显示数据或处理数据更新。在这个简单的控制器中,您只需运行一个基本的SOQL查询来查找联系人记录,然后使这些记录可用于Visualforce页面。
  1. 在ContactsListController类中,用下面的代码替换// Controller代码在这里注释行。
    private String sortOrder = 'LastName';
        
    public List<Contact> getContacts() {
        
        List<Contact> results = Database.query(
            'SELECT Id, FirstName, LastName, Title, Email ' +
            'FROM Contact ' +
            'ORDER BY ' + sortOrder + ' ASC ' +
            'LIMIT 10'
        );
        return results;
    }
    此代码添加一个私有成员变量,一个名为sortOrder的字符串和一个公共方法getContacts()。 sortOrder很容易理解,它只是通过排序联系人的字段的名称。
    getContacts()也是相当简单的,但是如果你以前没有见过Apex,可能起初很难解析。该方法的作用是执行SOQL查询以获取联系人记录列表,然后将该联系人列表返回给方法调用者。来电者是谁?当然是Visualforce页面!
  2. 在ContactsListWithController页面中,将<! – 联系人列表转到这里 – >注释行替换为以下标记。
    <!-- Contacts List -->
    <apex:pageBlockTable value="{! contacts }" var="ct">
    
        <apex:column value="{! ct.FirstName }"/>
        <apex:column value="{! ct.LastName }"/>
        <apex:column value="{! ct.Title }"/>
        <apex:column value="{! ct.Email }"/>
        
    </apex:pageBlockTable>
    当您保存此页面时,您应该看到一张熟悉的联系信息表格。
    A contacts list backed by a custom controller

ContactsListWithController页面的标记应该看起来相当熟悉。除了<apex:page>标签的控制器属性之外,它与用标准控制器创建页面的代码大致相同。

不同的是当{!联系人}表达式进行评估。在此页面上,Visualforce将该表达式转换为对控制器的getContacts()方法的调用。该方法返回联系人记录列表,这正是<apex:pageBlockTable>所期望的。

getContacts()方法被称为getter方法,它是一个通用模式,其中{!您的Visualforce标记中的someExpression}将自动连接到控制器中名为getSomeExpression()的方法。这是让页面访问需要显示的数据的最简单的方法。

添加一个新的操作方法

在自定义控制器中创建操作方法以响应用户在页面上的输入。
显示数据很棒,但是对用户操作的回应对于任何网络应用程序都是至关重要的使用自定义控制器,您可以通过编写操作方法来响应用户活动,从而创建尽可能多的自定义操作,以支持页面。
  1. 在ContactsListController类中,getContacts()方法的下面添加以下两个方法。
    public void sortByLastName() {
        this.sortOrder = 'LastName';
    }
        
    public void sortByFirstName() {
        this.sortOrder = 'FirstName';
    }
    这两个方法改变了sortOrder私有变量的值。在检索联系人的SOQL查询中使用sortOrder,并且更改sortOrder将更改结果的顺序。
  2. 在ContactsListWithController页面中,使用以下标记替换ct.FirstName和ct.LastName的两个<apex:column>标记。
    <apex:column value="{! ct.FirstName }">
        <apex:facet name="header">
            <apex:commandLink action="{! sortByFirstName }" 
                reRender="contacts_list">First Name
            </apex:commandLink>
        </apex:facet>
    </apex:column>
    
    <apex:column value="{! ct.LastName }">
        <apex:facet name="header">
            <apex:commandLink action="{! sortByLastName }" 
                reRender="contacts_list">Last Name
            </apex:commandLink>
        </apex:facet>
    </apex:column>

    尽管可视外观保持不变,但如果现在单击“名字和姓氏”列标题,它们将更改联系人列表的排序顺序。太好了!
    新的标记将两个嵌套组件添加到每个<apex:column>组件。 <apex:column>本身有一个纯文本标题,但是我们希望使标题可点击。 <apex:facet>让我们将列标题的内容设置为我们想要的任何内容。而我们想要的是一个调用正确的操作方法的链接。该链接是使用<apex:commandLink>组件创建的,action属性设置为引用控制器中action方法的表达式。 (请注意,与getter方法相比,action方法的名称与引用它们的表达式相同。)

    点击链接时,会触发控制器中的操作方法。该操作方法更改排序顺序专用变量,然后该表被重新渲染。当表格被重新渲染时,{!联系人}被重新评估,重新查询以任何排序顺序刚刚设置。最终的结果是按照用户点击所请求的顺序来使用表格。

超越基础

名字和姓氏列的标题文本在这个标记中被硬编码。但是,如果你的用户不全都使用英文呢?标准Salesforce用户界面已翻译所有标准对象的字段名称版本,并且可以为自定义对象提供自己的翻译。你将如何访问这些?试试这个标记,而不是纯文本:<apex:outputText value =“{!$ ObjectType.Contact.Fields.FirstName.Label}”/>。即使您的组织使用相同的语言,这也是引用字段标签的正确方法,因为如果字段名称被更改,它将自动更新。

告诉我更多…

自定义控制器和Apex语言让您可以在Visualforce页面中完成任何您能想到的任何事情。
Getter方法将数据从您的控制器中拖出到您的页面上。有相应的setter方法可以让你从页面提交值到你的控制器。就像getter方法一样,你在setter前面加上“set”,除此之外,它们只是一个方法。

getter和setter的替代方法是使用Apex属性。属性是一种变量与getter和setter方法的组合,它们的语法可以更清楚地将它们组合在一起。引用自定义对象的简单属性可能会这样声明。

public MyObject__c myVariable { get; set; }

属性可以是公共的或私有的,可以是只读的,甚至可以只写,通过省略get或set。你可以为get或set方法创建实现,当你想要执行额外的逻辑,除了简单地保存和检索一个值。

属性是Apex的一般功能,不是Visualfor特有的。 Apex是一种完整的编程语言,除了成为构建复杂的Visualforce页面的天然合作伙伴外,它还被用于许多其他的Force.com开发环境。请参阅此处其他位置的Apex主题以及本页末尾的资源,了解如何学习充分利用Apex。

Visualforce请求和响应的生命周期最初可能看起来很复杂。尤其重要的是要明白,没有特定的getter或setter(或属性,如果你使用它们)的顺序被调用,所以你不能在它们之间引入顺序执行的依赖关系。 Visualforce开发人员指南的相关章节中提供了更多详细信息,特别是“自定义控制器和控制器扩展”一章。

Salesforce Visualforce (基础8)静态资源

学习目标

完成本单元后,您将能够:

  • 解释什么样的静态资源以及为什么要使用它们。
  • 解释单个和压缩静态资源之间的差异。
  • 创建并上传一个静态资源。
  • 将静态资源添加到Visualforce页面。

静态资源简介

静态资源允许您上传可在Visualforce页面中引用的内容。资源可以是档案(如.zip和.jar文件),图像,样式表,JavaScript和其他文件。
静态资源由Force.com管理和分发,Force.com充当文件的内容分发网络(CDN)。缓存和分发是自动处理的。

静态资源使用$ Resource全局变量进行引用,该变量可以由Visualforce直接使用,也可以用作诸如URLFOR()之类的函数的参数。

创建并上传一个简单的静态资源

为独立的静态资产创建一个简单的,独立的静态资源。
当您的静态资产与其他资产无关时(即不是一组类似资产(如一组图标)的一部分),创建独立静态资源是最容易的。

  1. 下载jQuery JavaScript库的当前版本。在写这个是jQuery 3.1.0。
    如果链接不起作用,或者您想确保您正在下载最新版本,请访问http://jquery.com/download/并下载最新版本。

    注意

    右键单击直接链接下载文件,而不是在浏览器窗口中打开它。

  2. 在安装程序中,在快速查找框中输入静态资源,然后选择静态资源,然后单击新建。
  3. 输入名称的jQuery。
  4. 点击选择文件,然后选择您以前下载的jQuery JavaScript文件。
    Creating a simple static resource
  5. 如果看到缓存控制菜单,请选择公共。
    此项目在所有组织中都不可见。
  6. 点击 Save.

你现在有一个jQuery的静态资源版本,你可以在你的Visualforce页面中使用,通过在表达式中引用它,比如{! $ Resource.jQuery}。真正好的是,您可以编辑静态资源并将其更新到jQuery 3.1.2,而无需更改任何Visualforce页面。静态资源引用处理细节。

将一个静态资源添加到Visualforce页面

使用$ Resource全局变量和点符号来引用一个独立的静态资源。
  1. 打开开发者控制台,然后点击 File | New | Visualforce Page 创建一个新的Visualforce页面。输入HelloJQuery作为页面名称。
  2. 在编辑器中,用以下替换标记。
    <apex:page>
        
        <!-- Add the static resource to page's <head> -->
        <apex:includeScript value="{! $Resource.jQuery }"/>
        
        <!-- A short bit of jQuery to test it's there -->
        <script type="text/javascript">
            jQuery.noConflict();
            jQuery(document).ready(function() {
                jQuery("#message").html("Hello from jQuery!");
            });
        </script>
        
        <!-- Where the jQuery message will appear -->
        <h1 id="message"></h1>
        
    </apex:page>
  3. 点击预览打开您的页面的预览,您可以在进行更改时查看。
    应打开一个新窗口,显示标准的Salesforce页面标题和侧边栏元素,以及jQuery的简短消息。
    除了说明如何在您的Visualforce页面上包含JavaScript资源之外,此页面没有太多工作。关键是使用$ Resource全局变量。使用点符号将它与<apex:includeScript>(用于JavaScript文件),<apex:stylesheet>(用于CSS样式表)或<apex:image>(用于图形文件)标签中的资源名称相结合它到你的页面。

创建和上传压缩的静态资源

创建压缩的静态资源,将通常一起更新的相关文件分组在一起。
当您的静态资产是一组相关项目(例如,一组应用程序图标或复杂的JavaScript库)时,最好创建一个压缩的静态资源。创建一个包含所有要组合在一起的元素的压缩文件,并仅将一个压缩文件上传到Force.com。

  1. 以ZIP格式下载当前版本的jQuery Mobile JavaScript库。在写这个是jQuery Mobile 1.4.5
    如果链接不起作用,或者您想确保您正在下载最新版本,请访问http://jquerymobile.com/download/并下载最新版本的ZIP文件。
  2. 在安装程序中,在快速查找框中输入静态资源,然后选择静态资源,然后单击新建。
  3. 输入名称的jQueryMobile。
  4. 点击选择文件,然后选择您以前下载的jQuery Mobile ZIP文件。
    Creating a zipped static resource
  5. 如果看到缓存控制菜单,请选择公共。
    此项目在所有组织中都不可见。
  6. 点击 Save.

    注意

    如果jQuery Mobile ZIP文件大于5 MB,则编辑压缩文件以除去/ demo /目录及其内容,并上传较小的zip压缩文件。

现在,您可以在Visualforce页面中使用jQuery Mobile的静态资源版本。您将学习如何在压缩的静态资源中引用单个文件。

将压缩的静态资源添加到Visualforce页面

使用$ Resource全局变量和URLFOR()函数来引用压缩静态资源中的项目。
URLFOR()函数可以将对压缩的静态资源的引用以及其中的项目的相对路径组合起来,以创建可用于引用静态资产的Visualforce组件的URL。例如,URLFOR($ Resource.jQueryMobile,’images / icons-png / cloud-black.png’)将URL返回到压缩静态资源中的特定图形资源,可以由<apex:image>组件使用。您可以为<apex:includeScript>和<apex:stylesheet>组件构建JavaScript和样式表文件的类似URL。
  1. 打开开发者控制台,然后点击 File | New | Visualforce Page 创建一个新的Visualforce页面。
  2. 在编辑器中,用以下替换标记。
    <apex:page showHeader="false" sidebar="false" standardStylesheets="false">
        
        <!-- Add static resources to page's <head> -->
        <apex:stylesheet value="{!
              URLFOR($Resource.jQueryMobile,'jquery.mobile-1.4.5/jquery.mobile-1.4.5.css')}"/>
        <apex:includeScript value="{! $Resource.jQuery }"/>
        <apex:includeScript value="{!
             URLFOR($Resource.jQueryMobile,'jquery.mobile-1.4.5/jquery.mobile-1.4.5.js')}"/>
    
        <div style="margin-left: auto; margin-right: auto; width: 50%">
            <!-- Display images directly referenced in a static resource -->
            <h3>Images</h3>
            <p>A hidden message:
                <apex:image alt="eye" title="eye"
                     url="{!URLFOR($Resource.jQueryMobile, 'jquery.mobile-1.4.5/images/icons-png/eye-black.png')}"/>
                <apex:image alt="heart" title="heart"
                     url="{!URLFOR($Resource.jQueryMobile, 'jquery.mobile-1.4.5/images/icons-png/heart-black.png')}"/>
                <apex:image alt="cloud" title="cloud"
                     url="{!URLFOR($Resource.jQueryMobile, 'jquery.mobile-1.4.5/images/icons-png/cloud-black.png')}"/>
            </p>
    
        <!-- Display images referenced by CSS styles,
             all from a static resource. -->
        <h3>Background Images on Buttons</h3>
        <button class="ui-btn ui-shadow ui-corner-all
             ui-btn-icon-left ui-icon-action">action</button>
        <button class="ui-btn ui-shadow ui-corner-all
             ui-btn-icon-left ui-icon-star">star</button>
        </div>
    </apex:page>
  3. 点击预览打开您的页面的预览,您可以在进行更改时查看。
    打开一个新窗口,并显示来自jQuery Mobile静态资源的一些图像。

    jQuery buttons via static resources

为简单起见,此页面仅显示如何在Visualforce页面上引用压缩的静态资源。例如,如果您想了解更多关于如何结合Visualforce和JavaScript库(如jQuery Mobile)的更多资源,请参阅附加资源。

告诉我更多…

静态资源通常是将设计和脚本资产包含在Force.com应用程序中的最佳方式,并且可以通过多种方式将这些资源与Visualforce页面结合使用。
如果您喜欢为jQuery和jQuery Mobile组合一些静态资源,您将会喜欢我们预先打包的静态资源集合。 Salesforce Mobile Packs允许您使用行业标准网络技术(如HTML5,CSS3和JavaScript)以及流行的框架(如jQuery Mobile,AngularJS和Backbone.js)构建与Salesforce Platform集成的Web和混合应用程序。

Salesforce Visualforce (基础7)标准列表控制器

学习目标

完成本单元后,您将能够:

  • 解释Visualforce标准列表控制器是什么以及它与标准(记录)控制器有什么不同。
  • 列出标准列表控制器提供的与标准控制器不同的三个操作。
  • 在Visualforce页面上使用标准列表控制器显示记录列表。
  • 定义分页,并能够将其添加到Visualforce页面。

标准列表控制器简介

标准列表控制器允许您创建可以显示或执行一组记录的Visualforce页面。
显示记录列表是几乎所有Web应用程序的基本行为。 Visualforce使得显示相同类型的记录列表非常容易,只需使用标记,不需要后端代码。秘密,像往常一样,是标准的控制器,在这种情况下,标准的列表控制器。

标准列表控制器提供了许多强大的自动行为,例如查询特定对象的记录以及使集合变量中的记录可用,以及通过结果过滤和分页。将标准列表控制器添加到页面与添加标准(记录)控制器非常相似,但意图同时处理多条记录,而不是一次记录一条记录。

显示记录列表

使用标准列表控制器和迭代组件(如<apex:pageBlockTable>)来显示记录列表。
标准(记录)控制器可以轻松地将单个记录加载到您可以在Visualforce页面上使用的变量中。标准列表控制器是相似的,除了单个记录之外,它将记录的列表或集合加载到变量中。

因为你正在处理一个集合,而不是一个单独的记录,你需要使用一个迭代组件来显示它们。一个迭代组件与一组相似的项目一起工作,而不是一个单一的值。一个迭代组件循环遍历其集合,并且对于每个记录,基于作为组件标记的一部分提供的模板生成一些输出。这听起来很复杂,但是当你阅读标记时你会很快理解它。

使用标准列表控制器的标记与使用标准的一次一个记录控制器的标记几乎相同。为了显而易见,以下示例中以粗体突出显示了主要区别。

  1. 打开开发者控制台,然后点击 File | New | Visualforce Page 创建一个新的Visualforce页面。输入ContactList作为页面名称。
  2. 在编辑器中,用以下替换标记。
    <apex:page standardController="Contact" recordSetVar="contacts">
        <apex:pageBlock title="Contacts List">
            
            <!-- Contacts List -->
            <apex:pageBlockTable value="{! contacts }" var="ct">
                <apex:column value="{! ct.FirstName }"/>
                <apex:column value="{! ct.LastName }"/>
                <apex:column value="{! ct.Email }"/>
                <apex:column value="{! ct.Account.Name }"/>
            </apex:pageBlockTable>
            
        </apex:pageBlock>
    </apex:page>
  3. 点击预览打开您的页面的预览,您可以在进行更改时查看。
    应打开一个新窗口,显示标准Salesforce页面标题和侧栏元素以及联系人列表。

    A list of contacts from the standard list controller

使用标准列表控制器与使用标准控制器非常相似。首先在<apex:page>组件上设置standardController属性,然后在同一个组件上设置recordSetVar属性。标准控制器属性设置对象使用,就像标准控制器一样。 recordSetVar设置要创建的变量的名称与记录的集合,在这里{!联系人}。按照惯例,这个变量通常被命名为对象名称的复数。

<apex:pageBlockTable>是一个迭代组件,用于生成一个数据表,并附有平台样式。这是表格标记中发生的事情。

  • 将<apex:pageBlockTable>的值属性设置为由标准列表控制器加载的变量{!联系人}。这是<apex:pageBlockTable>将使用的记录列表。
  • 对于该列表中的每个记录,一次一条记录<apex:pageBlockTable>将该记录分配给<apex:pageBlockTable>的var属性中指定的变量。在这种情况下,该变量被命名为ct。
  • 对于每个记录,<apex:pageBlockTable>使用由<apex:pageBlockTable>主体内的<apex:column>组合集定义的行在表中构造一个新行。 <apex:column>组件依次使用表示当前记录的ct变量来提取该记录的字段值。
  • 在循环之外,<apex:pageBlockTable>使用<apex:column>组件中的字段通过查找每个字段的标签来创建列标题。

这是非常重要的,迭代组件是第一次很难理解。你现在可以做的最好的事情是尝试创建你自己的。选择你想在表格中显示的字段。查找<apex:pageBlockTable>和<apex:column>的不同属性,并进行试验,直到您感觉舒适。您也可以尝试使用其他一些迭代组件,例如<apex:dataList>甚至是<apex:repeat>。

添加列表视图过滤到列表

使用 {! listViewOptions}来获取可用于对象的列表视图过滤器的列表。使用 {! filterId}设置列表视图过滤器用于标准列表控制器的结果。
标准列表控制器提供了许多可用于更改列表显示的功能。其中最强大的是列表视图过滤器。您可以声明式地创建列表视图过滤器,使用点击代替代码,标准列表控制器允许您使用页面上任何已定义的列表视图过滤器。

  1. 将整个<apex:pageBlock>包装在<apex:form>标记中。
    要更改标准列表控制器的列表视图过滤器,您需要将新值提交回服务器。执行此提交的标准方法是使用使用<apex:form>组件创建的表单。
  2. 在<apex:pageBlock>标签中添加以下属性。
    id="contacts_list"
    这给了<apex:pageBlock>一个“名字”,我们可以使用它来获得一个很酷的Ajax效果,我们稍后会解释一下。
  3. 打开<apex:pageBlock>标记后,在<apex:pageBlockTable>上方,添加以下标记。
    Filter: 
    <apex:selectList value="{! filterId }" size="1">
        <apex:selectOptions value="{! listViewOptions }"/>
        <apex:actionSupport event="onchange" reRender="contacts_list"/>
    </apex:selectList>
    您的页面的完整代码应该是这样的。
    <apex:page standardController="Contact" recordSetVar="contacts">
        <apex:form>
    
            <apex:pageBlock title="Contacts List" id="contacts_list">
            
                Filter: 
                <apex:selectList value="{! filterId }" size="1">
                    <apex:selectOptions value="{! listViewOptions }"/>
                    <apex:actionSupport event="onchange" reRender="contacts_list"/>
                </apex:selectList>
    
                <!-- Contacts List -->
                <apex:pageBlockTable value="{! contacts }" var="ct">
                    <apex:column value="{! ct.FirstName }"/>
                    <apex:column value="{! ct.LastName }"/>
                    <apex:column value="{! ct.Email }"/>
                    <apex:column value="{! ct.Account.Name }"/>
                </apex:pageBlockTable>
                
            </apex:pageBlock>
    
        </apex:form>
    </apex:page>
    一个新的过滤器控件出现在列表上方。
    Contacts list with list views filter
  4. 从菜单中选择一个不同的过滤器。联系人列表发生了什么?

从刚刚创建的“滤镜”菜单中进行新选择时,应该注意两点。首先,当您选择一个新的过滤器时,记录列表会发生变化。 (您可能需要尝试几个不同的选项,在标准DE组织中使用示例数据时,某些列表视图将显示相同的记录。)

其次,更微妙的是,该列表正在更新,无需重新加载整个页面。这个“Ajax”效果是由<apex:actionSupport>组件中的reRender =“contacts_list”属性提供的。组件和reRender的联合作用是仅更新reRender属性中指定的页面部分。由于您已将id =“contacts_list”添加到<apex:pageBlock>,因此操作完成后,只更新<apex:pageBlock>,而不重新加载整个页面。

此页面上新功能的完整生命周期就像这样。

  • 当页面加载时,<apex:selectList>通过从{!中获取列表来构建可用过滤器的菜单。 listViewOptions}表达式。 listViewOptions是由标准列表控制器提供的属性。
  • 当您从菜单中选择新选项时,onchange:event将由<apex:actionSupport>组件触发。
  • 当onchange激发时,页面通过将新项目提交给在<apex:selectList>中设置的filterId属性来提交选定的新列表视图。
  • 当属性更新时,页面从服务器获得一个新的响应,在contacts变量中有一个新的匹配记录集合。
  • 但是因为<apex:actionSupport>指定仅渲染页面的一部分,所以页面使用Ajax异步JavaScript更新,而不是整页重新加载。

最终结果是,只需添加几行标记即可获得复杂而复杂的行为。

将分页添加到列表中

使用标准列表控制器的分页功能,允许用户一次查看一个“页面”的长记录列表。
到目前为止,您开发的功能非常好,并且可以很好地处理在Developer Edition组织中作为样本数据提供的记录的简短列表。但是当你拥有一个真正的组织,拥有数百甚至数千甚至数百万条记录时会发生什么?在一个页面上查看它们并不是很好!

实际上,默认情况下,标准列表控制器仅显示符合过滤条件的前20条记录(如果有的话)。你怎么能让人们访问超过前20条记录,或每页更多的记录,而不仅仅是20?

答案是分页。这是一个标准的Web应用程序用户界面元素,它允许您一次使用“下一个”和“上一个”链接一次向前和向后浏览一长串记录,即“页面”。您可以使用标准列表控制器将其添加到您的页面,以及方便程度(如进度指示器和菜单)来更改每页的记录数。

  1. 在联系人列表<apex:pageBlockTable>下方,添加以下标记。
    <!-- Pagination -->
    <table style="width: 100%"><tr>
    
        <td>
            <!-- Page X of Y -->
        </td>            
    
        <td align="center">
            <!-- Previous page -->
            <!-- Next page -->
        </td>
        
        <td align="right">
            <!-- Records per page -->
        </td>
    
    </tr></table>
    
    这将创建一个HTML表格,它将包含要添加的三个分页控件。

    注意

    在真实的网页中,您可能会使用更多的语义标记和单独的样式,但是现在,简单的HTML是简洁明了的。

  2. <!– Page X of Y –>替换为以下标记
    Page: <apex:outputText 
        value=" {!PageNumber} of {! CEILING(ResultSize / PageSize) }"/>
    这会将进度指示器添加到列表中,指示用户正在查看哪个页面,以及有多少人在那里。如果你在DE组织中尝试这个,可能会说“第1页,共1页”。
  3. 用下面的标记替换<! – 上一页 – >和<! – 下一页 – >注释行。
    <!-- Previous page -->
    <!-- active -->
    <apex:commandLink action="{! Previous }" value="« Previous"
         rendered="{! HasPrevious }"/>
    <!-- inactive (no earlier pages) -->
    <apex:outputText style="color: #ccc;" value="« Previous"
         rendered="{! NOT(HasPrevious) }"/>
    
    &nbsp;&nbsp;  
    
    <!-- Next page -->
    <!-- active -->
    <apex:commandLink action="{! Next }" value="Next »"
         rendered="{! HasNext }"/>
    <!-- inactive (no more pages) -->
    <apex:outputText style="color: #ccc;" value="Next »"
         rendered="{! NOT(HasNext) }"/>
    这个标记提供页面上的上一个和下一个链接。标记包含两种可能性:当在给定方向上有更多记录要查看时,则链接处于活动状态;并且当给定方向上没有更多页面时,该链接被禁用。
  4. 用下面的标记替换<! – 记录每页 – >注释行。
    Records per page:
    <apex:selectList value="{! PageSize }" size="1">
        <apex:selectOption itemValue="5" itemLabel="5"/>
        <apex:selectOption itemValue="20" itemLabel="20"/>
        <apex:actionSupport event="onchange" reRender="contacts_list"/>
    </apex:selectList>
    这个标记提供了一个菜单来改变每页记录的数量。这里我们只添加了一个选项,可以在页面上显示更少的记录。从列表中选择“5”,看看列表和其他控件发生了什么。
结果是一个列表页面,具有相当多的标准列表控制器提供的功能。

Contacts list with pagination controls

在进度指示器中,有三个属性用于指示有多少页:PageNumber,ResultSize和PageSize。最后两个实际用于公式表达式,将数字四舍五入到最接近的整数。这可以防止指标说一些无意义的东西,比如“1.6的第2页”。

在分页控件中,<apex:commmandLink>组件引用标准列表控制器Previous和Next提供的两个操作方法。结果是执行“上一个”或“下一个”操作的链接。

但是,这个呈现的属性是什么,有如{! HasPrevious}?这是Visualforce使您能够有条件地显示组件的方式,也就是说,取决于布尔表达式的结果。这里的页面标记是引用由标准列表控制器HasPrevious和HasNext提供的布尔属性,它让你知道在给定的方向上是否有更多的记录。通过在呈现属性中使用表达式,可以在页面上显示或隐藏该组件的结果。这是上次链接在第一次加载页面时变灰的方法,但是如果您通过单击“下一步”链接前进,则“前一个”链接变为活动状态。

每个页面选择菜单的记录使用了前面使用过的<apex:selectList>,但不是调用控制器方法来获取菜单值,而是使用<apex:selectOption>元素来获取所需的值。同样,<apex:actionSupport>标签会导致菜单在所选值更改时触发其操作,并且会再次使用reRender =“contacts_list”更新<apex:pageBlock>。这里的新部分是<apex:selectList>设置标准列表控制器的PageSize属性。

告诉我更多…

标准列表控制器提供了许多在网络应用程序中常见的功能,这里已经涵盖了许多功能。
例如,除了一次往回移动一页的“上一页”和“下一页”操作之外,还有第一个和最后一个操作将转到记录列表的开头或结尾。

在标记的背后,标准列表控制器基于StandardSetController Apex类。您可以在Force.com Apex Code开发人员指南中阅读更多关于它以及它提供的所有功能。

房间里有一头小象,我们在这里创建的例子,它的名字是排序。通常需要为列表设置默认的排序顺序,并且还需要具有排序影响的列标题,以便您即时更改排序顺序。简单的事实是,您无法单独使用Visualforce来影响排序顺序。尽管支持排序和可点击列标题所需的附加Visualforce标记和Apex代码量并不是很大,但它确实需要自定义代码。查看一些起点的附加资源。

Salesforce Visualforce (基础6)输入数据

学习目标

完成本单元后,您将能够:

  • 解释Visualforce表单的基本要求。
  • 使用不包含平台视觉样式的Visualforce表单元素进行区分。
  • 列出四个或更多的标准输入表单标签。
  • 创建一个Visualforce窗体来编辑和保存一条记录。

Visualforce表单介绍

创建和编辑数据是任何应用程序的基本方面。 Visualforce提供了您需要的所有功能,可以轻松创建可创建新记录或检索记录,编辑其值并将更改保存回数据库的页面。
在这里,我们将标准控制器与<apex:form>组件和一些易于理解的表单元素结合起来,创建一个相当复杂的记录编辑页面。

创建一个基本表单

使用<apex:form>和<apex:inputField>创建一个页面来编辑数据。将<apex:commandButton>与标准控制器中内置的保存操作组合起来,以创建新记录或将更改保存到现有记录。

让某人编辑和更新记录的页面需要执行以下所有操作。

  • 查找记录以便从数据库中进行编辑和检索。
  • 把相关的记录数据以编辑的形式放在页面上。
  • 通过更改的数据接收表单提交。
  • 验证新的值。
  • 将有效的更改保存回数据库。
  • 向提交更改的人员提供适当的消息,无论新数据是成功保存还是存在错误。

当您使用标准控制器和<apex:form>组件时,Visualforce会自动为您执行大部分这些操作。

让我们从基础开始。

  1. 打开开发者控制台,然后点击 File | New | Visualforce Page 创建一个新的Visualforce页面。输入AccountEdit作为页面名称。
  2. 在编辑器中,用以下替换标记。
    <apex:page standardController="Account">
        
        <h1>Edit Account</h1>
        
        <apex:form>
        
            <apex:inputField value="{! Account.Name }"/>
            
            <apex:commandButton action="{! save }" value="Save" />
        
        </apex:form>
        
    </apex:page>
  3. 点击预览打开您的页面的预览,您可以在进行更改时查看。
    一个新的窗口应该打开,显示一个形式与一个单一的空领域的身体。
  4. 在预览窗口中,将客户的ID添加到URL,然后按ENTER。
    URL应该是这样的: https://SalesforceInstance/apex/AccountEdit?core.apexpages.request.devconsole=1&id=001D000000JRBes

    您现在应该在表单字段中看到该客户的名称。

    A basic form to edit account name

    这验证你已经有了标准的控制器工作和一个有效的记录ID。

它看起来可能不是很多,但是在六十多行标记中,您已经获得了用于更新客户名称的完整功能表单。给它一个旋转!

这些是这种形式要理解的基本方面。

  • 该页面使用<apex:page>组件中定义的客户的标准控制器。
  • <apex:form>是一个Visualforce组件,它将其中的所有内容打包成可以作为页面操作的一部分发送回服务器的东西。如果您需要将数据发送回Salesforce,大部分时间您都会在<apex:form>中执行此操作。
  • <apex:inputField>为与其关联的记录数据字段创建屏幕表单字段。您可以通过提供一个表达式来引用value属性中的相关字段。这里的表达是{! Account.Name},你应该没有困难猜测客户的名称字段。
  • 最后,<apex:commandButton>在页面的用户界面上添加一个按钮。这个按钮点击时触发一个动作。在这种情况下,该操作是标准控制器中的save()操作方法。与<apex:inputField>类似,通过引用提供给<apex:commandButton>操作属性的表达式中要调用的操作方法,可以将<apex:commandButton>与其操作连接起来。

添加字段标签和平台样式

在<apex:pageBlock>和<apex:pageBlockSection>标签中放置表单元素进行组织和分组,并使表单采用平台视觉风格。
让我们修改你的表格,使它看起来更熟悉。
  1. 在<apex:form>组件的内部,将两个表单元素包装在<apex:pageBlock>和<apex:pageBlockSection>标记中,以便您的标记看起来像这样。
    <apex:page standardController="Account">
        <apex:form>
        
        <apex:pageBlock title="Edit Account">
    
            <apex:pageBlockSection>
                <apex:inputField value="{! Account.Name }"/>        
            </apex:pageBlockSection>
    
            <apex:pageBlockButtons>
                <apex:commandButton action="{! save }" value="Save" />        
            </apex:pageBlockButtons>
    
        </apex:pageBlock>
        
        </apex:form>
    </apex:page>
    这个版本的表单的样式是完全不同的!与输出组件一样,当您在<apex:pageBlock>和<apex:pageBlockSection>标签中使用输入组件时,它们将采用平台视觉样式。
  2. 在客户名称字段下方,添加三个字段,以便您的标记看起来像这样。
    <apex:pageBlockSection columns="1">
        <apex:inputField value="{! Account.Name }"/>
        <apex:inputField value="{! Account.Phone }"/>        
        <apex:inputField value="{! Account.Industry }"/>        
        <apex:inputField value="{! Account.AnnualRevenue }"/>
    </apex:pageBlockSection>
    现在你有了一个更完整,更现实的形式来使用。
    Edit account form with platform styling

<apex:inputField>组件根据标准或自定义对象字段的类型呈现适当的输入小部件。例如,如果您使用<apex:inputField>标记显示日期字段,则日历小部件将显示在表单上。如果您使用<apex:inputField>标签来显示选取列表字段,就像我们在这里为行业字段所做的一样,则会显示一个下拉列表。

<apex:inputField>可用于捕获任何标准或自定义对象字段的用户输入,并且尊重在字段定义上设置的任何元数据,例如字段是必需的还是唯一的,或者当前用户是否有权查看或编辑它。

显示表单错误和消息

使用<apex:pageMes​​sages>显示任何表单处理错误或消息。
出现问题时,您的页面应提供有用的反馈,例如缺少必填字段或字段值未通过验证时。标准控制器实际上为您处理所有这些。所有你需要做的是告诉它在哪里把信息放在页面上。
  1. 在<apex:pageBlock>标记下,添加以下行。
    <apex:pageMessages/>
  2. 尝试删除客户的名称,并用空白名称保存记录。

    显示页面的验证错误。

    Edit account with page error messages

正如你所看到的,<apex:inputField>显示了它自己的字段的错误,但是对于更长的表单来说,将页面的所有错误列在页面顶部的一个地方是一个很好的方法。

标准的控制器已经收集了表格处理后的所有页面的消息。 <apex:pageMes​​sages>组件使您能够在合适的地方显示这些消息。

告诉我更多…

显然还有很多东西需要学习如何为您的Web应用程序构建有用的可用表单。
对于初学者,Visualforce提供了十几个输入组件,而不仅仅是<apex:inputField>。 <apex:inputField>与标准控制器配合使用,可直接编辑记录数据。对于使用自定义控制器代码的页面,或者表单输入不直接映射到记录上的字段时,您需要了解其他一些信息。大多数这些组件的名称都以“apex:input”开头,您可以在组件参考中找到它们。对于选择列表和单选按钮控件,请查找名称以“apex:select”开头的组件。

对于准备在移动设备上使用的用户界面,您需要查看专门用于HTML5页面的<apex:input>,并允许您使用各种功能来生成输入用户元素移动友好。

您在此处编写的代码使用标准控制器为页面提供的许多操作。我们把这些标准的行动称为,其中也有不少。有一个核心集合可用于标准控制器的所有对象,但许多内置的标准对象还有其他可供使用的操作。

说到行动,您可以添加操作来编辑和删除现有的相关联系人。你如何添加创建新的相关联系人的能力?这不像使用创建动作创建链接那样简单,就像编辑和删除一样。这是因为这些操作对现有记录起作用,这些记录与相关客户已经有关系。但是当你创建一个新的记录时,你需要自己创建这个关系。这将要求你写一些你自己的自定义控制器代码。

Salesforce Visualforce (基础5)显示记录

学习目标

完成本单元后,您将能够:

  • 解释粗粒度和细粒度组件之间的区别,以及为什么您可能需要使用其中一个或另一个。
  • 解释什么是迭代组件,以及它的用途。
  • 使用相关的粗粒度组件显示记录详细信息和相关列表。
  • 使用相关的细粒度组件来替换和定制粗粒度组件。

输出组件简介

Visualforce包含近150个内置组件,您可以在页面上使用它们。请求页面时,组件呈现为HTML,CSS和JavaScript。粗粒度的组件在一个单独的组件中提供了大量的功能,并且可能为它所使用的页面添加了大量的信息和用户界面。细粒度的组件提供了更加专注的功能,并使您能够设计页面,使其看起来和行为符合您的需要。
在这里,我们将重点讨论输出组件,也就是从记录中输出数据的组件,并使您能够设计一个仅供查看的用户界面。


用标准控制器创建一个Visualforce页面

将输出组件与标准控制器一起使用,以便于访问和显示记录详细信息。
您将在此页面中尝试多个不同的输出组件。现在,让我们创建一个大部分空白的页面。

  1. 打开开发者控制台,然后点击 File | New | Visualforce Page 创建一个新的Visualforce页面。输入页面名称的AccountDetail。
  2. 在编辑器中,用以下替换标记。
    <apex:page standardController="Account">
        
        {! Account.Name }
        
    </apex:page>
  3. 点击预览打开您的页面的预览,您可以在进行更改时查看。
    应打开一个新窗口,显示标准的Salesforce页面标题和侧边栏元素,但没有任何内容。
  4. 在预览窗口中,将帐户的ID添加到URL中,然后按回车键。
    该URL应该是这样的:https://SalesforceInstance/apex/AccountDetail?core.apexpages.request.devconsole=1&id=001D000000JRBes
    您现在应该在正文中看到该帐户的名称。这验证你已经有了标准的控制器工作和一个有效的记录ID。

显示记录详情

使用<apex:detail>快速将记录详细信息添加到使用标准控制器的页面。
一些输出组件给聚会带来了很多。这些“粗粒度”组件提供了许多功能,显示许多字段,标签和其他用户界面元素。它们使您可以快速构建内置Salesforce用户界面的变体页面。

  1. 将行替换为{! Account.Name},使用以下标记,并保存您的更改。
    <apex:detail />
    哇,这是一个很大的改变!使用一行标记,您可以复制帐户对象的整个标准视图页面!
    The <apex:detail/> component

<apex:detail>是一个粗粒度输出组件,它只在一行标记中向页面添加许多字段,部分,按钮和其他用户界面元素。还要注意,它添加到页面的所有内容都使用Salesforce Classic样式。定制<apex:detail>的外观有相当多的属性。现在花几分钟,尝试改变几个看看他们做什么。要创建与Lightning Experience的风格更加一致的页面,请参阅了解Visualforce&Lightning Experience模块中的重要视觉设计注意事项。

显示个别字段

使用<apex:outputField>显示记录中的各个字段。
当你需要更多的控制你的页面布局时,你可以单独添加字段。 <apex:outputField>组件是专门为此而设计的。

  1. 用下面的标记替换<apex:detail />行。
    <apex:outputField value="{! Account.Name }"/>
    <apex:outputField value="{! Account.Phone }"/>
    <apex:outputField value="{! Account.Industry }"/>
    <apex:outputField value="{! Account.AnnualRevenue }"/>
    
    这四个字段被添加到页面。但格式化可能不是你所期望的。字段值全部显示在一行中,没有标签,也没有其他格式。这不是我们想要的,与<apex:detail>和<apex:relatedList>组件形成了鲜明的对比,这些组件自动使用平台样式。
    本身,<apex:outputField>只输出字段的值。但是,当您将其封装在<apex:pageBlock>和<apex:pageBlockSection>组件中时,其行为会发生相当大的变化。

  2. 用<apex:pageBlock>和<apex:pageBlockSection>组件包装<apex:outputField>行,以便您的标记看起来像这样。
    <apex:pageBlock title="Account Details">
        <apex:pageBlockSection>
            <apex:outputField value="{! Account.Name }"/>
            <apex:outputField value="{! Account.Phone }"/>
            <apex:outputField value="{! Account.Industry }"/>
            <apex:outputField value="{! Account.AnnualRevenue }"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
    这还差不多!
    Output fields inside a page block

    需要<apex:pageBlock>和<apex:pageBlockSection>组件来激活平台外观。当在<apex:pageBlockSection>中使用<apex:outputField>时,它将采用两列布局,很好地添加字段标签,对齐和样式字段和标签等等。

    尽管<apex:outputField>看起来像一个细粒度的组件,因为它只输出一个字段,但实际上却做了很多。它知道是否在某些其他组件中使用它,并适当地更改其输出和样式。格式和显示也很聪明。请注意,年收入字段被格式化为货币。 <apex:outputField>自动适应正在显示的字段的数据类型。尝试添加一个日期,清单,或选择列表字段到页面,看看会发生什么。

显示一个表

使用<apex:pageBlockTable>将数据表添加到页面。
什么是相关列表?当您将其添加到页面时,<apex:relatedList>会执行什么操作?
  • 它抓取了一个类似数据元素的列表。例如,该帐户的联系人列表。
  • 它为每个字段设置一个列,每个列上面都有标题,等等。
  • 对于列表中的每个项目(对于每个相关联系人),它将向表格添加一行,并使用该记录中的适当字段填充每列。

您可以使用迭代组件在自己的Visualforce标记中执行相同的操作。一个迭代组件与一组相似的项目一起工作,而不是一个单一的值。例如,{!Account.contacts}是一个表达式,用于计算一个帐户的联系人列表。您可以将此表达式与迭代组件一起使用来创建列表或表格,其中包含这些相关联系人的详细信息。

  1. 用下面的标记替换两个<apex:relatedList />行。
    <apex:pageBlock title="Contacts">
       <apex:pageBlockTable value="{!Account.contacts}" var="contact">
          <apex:column value="{!contact.Name}"/>
          <apex:column value="{!contact.Title}"/>
          <apex:column value="{!contact.Phone}"/>
       </apex:pageBlockTable>
    </apex:pageBlock>
    列出帐户联系人的表格会添加到页面中,只有您选择的列。
    Contacts list using pageBlockTable
<apex:pageBlockTable>是一个迭代组件,用于生成一个数据表,并附有平台样式。这是你的标记发生了什么。

  • <apex:pageBlockTable>的值属性被设置为前面提到的表达式{!Account.contacts}。这是<apex:pageBlockTable>将使用的记录列表。
  • 对于该列表中的每个记录,一次一条记录<apex:pageBlockTable>将该记录分配给<apex:pageBlockTable>的var属性中指定的变量。在这种情况下,该变量被命名为contact。
  • 对于每条记录,<apex:pageBlockTable>使用由<apex:pageBlockTable>主体内的<apex:column>组合集定义的行在表中构造一个新行。 <apex:column>组件依次使用表示当前记录的联系变量来提取该记录的字段值。
  • 在循环之外,<apex:pageBlockTable>使用<apex:column>组件中的字段通过查找每个字段的标签来创建列标题。

这是非常重要的,迭代组件是第一次很难理解。你现在可以做的最好的事情是尝试创建你自己的。使用<apex:pageBlockTable>将与机会相关的记录列表添加到页面。选择你想在表格中显示的字段。查找<apex:pageBlockTable>和<apex:column>的不同属性,并进行试验,直到您感觉舒适。

告诉我更多…

粗粒度的组件使您可以快速地为页面添加大量的功能,而精细的组件可以让您更好地控制页面的特定细节。
<apex:enhancedList>和<apex:listViews>是您可能要用于或代替<apex:relatedList>的其他粗粒度组件。还有许多其他组件将很多功能包装到一个标签中。如果你还没有做,请查看标准组件参考,看看可能的范围。

<apex:pageBlockTable>是一个迭代组件,用于获取Salesforce Classic样式。 <apex:dataTable>和<apex:dataList>是用于创建表格和列表的迭代组件,无需创建样式。 <apex:repeat>是一个迭代组件,您可以使用它来为记录集合生成任意标记。

您可能已经注意到,手动创建的相关列表缺少一些添加到由<apex:relatedList>创建的表中的内容。例如,用于编辑和删除单个记录的编辑和删除链接缺失,新联系人按钮也是如此。要创建这些用户界面元素,您需要了解更多的Visualforce,特别是关于表单和操作。你会在其他地方了解到。

Salesforce Visualforce (基础4)标准控制器

学习目标

完成本单元后,您将能够:

  • 解释什么是Visualforce标准控制器,并描述其关键属性。
  • 将标准控制器添加到Visualforce页面。
  • 显示来自页面标准控制器检索的记录的数据。
  • 写一个表达式,使用点符号来访问相关记录上的字段。

Visualforce标准控制器介绍

Visualforce使用传统的模型 – 视图 – 控制器(MVC)范例,并包含复杂的内置控制器来处理标准动作和数据访问,与Force.com数据库提供简单而紧密的集成。这些内置控制器通常被称为标准控制器,甚至标准控制器。
MVC设计模式可以很容易地将视图和样式从底层数据库和逻辑中分离出来。在MVC中,视图(Visualforce页面)与控制器交互,控制器为页面提供功能。例如,控制器可以包含单击按钮时要执行的逻辑。控制器通常还与模型(数据库)进行交互 – 制作视图可能要显示的可用数据,或将更改推送回数据库。

大多数标准和所有自定义对象都具有标准控制器,可用于与对象相关的数据进行交互,因此您无需自己编写控制器的代码。您可以扩展标准控制器以添加新功能,或从头创建自定义控制器。在这里,您将了解到标准控制器。

查找记录ID并将其添加到请求URL

通过将请求URL中的参数添加到标准控制器,为记录提供记录标识。
如果要使用标准控制器来引用特定记录,则需要知道要使用的记录的记录标识符或标识。它使用ID来检索数据,并在记录数据更改时将其保存回数据库。

当您的Visualforce页面与组织中的其他页面进行交互时,您可以自动传入记录的标识符,Visualforce页面可以使用它查找并显示该记录的数据。但是在开发过程中,页面是独立的,所以为了让页面显示数据库记录中的数据,需要手动提供记录ID。最简单的方法是将其作为GET参数添加到请求URL中。

  1. 打开开发者控制台,然后点击 File | New | Visualforce Page 创建一个新的Visualforce页面。输入页面名称的AccountSummary。
  2. 在编辑器中,用以下替换标记。
    <apex:page>
        
        <apex:pageBlock title="Account Summary">
            <apex:pageBlockSection>
            	
                
                
            </apex:pageBlockSection>
        </apex:pageBlock>
        
    </apex:page>
    这个标记创建一个框,为您准备添加一些有用的信息。
  3. 点击预览打开您的页面的预览,您可以在进行更改时查看。
    确保您可以看到预览窗口的URL字段。您将通过几个步骤回到此处。
  4. 在单独的浏览器窗口中,转至组织的主页,然后选择“帐户”选项卡。
    如果“客户”选项卡不可见,请从右上角的应用程序菜单中选择“销售”,切换到“销售”应用程序。
  5. 确保“查看”菜单显示“所有客户”,然后单击“查看”查看所有客户记录。
  6. 在“所有帐户”页面上,单击任何帐户名称。
  7. 帐户详细信息页面加载完成后,查看该页面的URL。

    该URL将如下所示:this:https://SalesforceInstance/one/one.app#/sObject/001D000000JRBes/.

    记录的标识符,它的ID是最后一系列的字母和数字。在这个例子中,它是“001D000000JRBes”(但是在你的组织中它将是不同的)。它在您组织中所有对象类型的所有记录中都是唯一的。

  8. 选择记录ID,并将其复制到剪贴板。

    在您离开帐户详细信息页面之前,请查看整个页面以及显示的信息。

    Account details page

    为了获得一个记录ID,这不是绕道而行的。在您完成之前,您将了解如何在Visualforce代码中构建一个自己显示相同信息的页面。

  9. 切换回您从Developer Console打开的预览页面。点击浏览器窗口的URL字段,在URL的末尾输入&id =,然后粘贴您之前复制的记录ID。
    该URL应该是这样的:https://SalesforceInstance/apex/AccountSummary?core.apexpages.request.devconsole=1&id=001D000000JRBes
  10. 按Return键加载新网址的页面。

尽管加载带有记录ID的预览页面看起来没有什么不同,但是添加ID意味着您现在可以通过加载该记录并使其在页面上显示来请求标准控制器帮助您。

要在Lightning Experience的上下文中预览页面,请打开浏览器的JavaScript控制台并输入以下代码。不要忘记用你的页面名称来替换pageName:

$A.get("e.force:navigateToURL").setParams(
    {"url": "/apex/pageName"}).fire();
您还可以通过以下方式预览带有记录ID的页面:将记录ID参数添加到JavaScript中URL的末尾:
$A.get("e.force:navigateToURL").setParams(
    {"url": "/apex/pageName?&id=00141000004jkU0AAI"}).fire();

显示单个记录中的数据

将帐户的标准控制器添加到页面,然后引用帐户字段以显示记录的数据。

按照以下步骤创建一个显示帐户摘要的页面。

  1. 在页面标记的开始处,在<apex:page>标记内添加以下属性。
    standardController="Account"
    当您现在保存页面时,预览页面将像以前一样重新加载,除了此时用于帐户的标准控制器处于活动状态。当页面加载时,标准控制器解析URL中的参数,找到id参数,并使用它的值来检索记录并使其可用于页面。你还看不到,但它在那里。
  2. 在页面的主体中,添加以下标记。
    Name: {! Account.name }
    繁荣。现在你可以看到记录正在被检索!您应该看到具有您添加到URL的记录ID的帐户的名称。
  3. 用以下标记替换单行与帐户名称。
    Name: {! Account.Name } <br/>
    Phone: {! Account.Phone } <br/>
    Industry: {! Account.Industry } <br/>
    Revenue: {! Account.AnnualRevenue } <br/>
    
    你的完整代码应该是这样的。
    <apex:page standardController="Account">
        
        <apex:pageBlock title="Account Summary">
            <apex:pageBlockSection>
            	
                Name: {! Account.Name } <br/>
                Phone: {! Account.Phone } <br/>
                Industry: {! Account.Industry } <br/>
                Revenue: {! Account.AnnualRevenue } <br/>
                
            </apex:pageBlockSection>
        </apex:pageBlock>
        
    </apex:page>
    结果应该是一个简单的帐户摘要。
    A simple account summary page

那么,这里发生了什么?很多,标准控制器的礼貌!

  1. 当页面被加载,并且<apex:page>组件被激活时,它激活帐户对象的标准控制器。
  2. 标准控制器可以看到URL中有一个ID参数,并搜索并检索匹配的帐户记录。
  3. 标准控制器接受记录并将其放入可供页面使用的变量中。该变量与标准控制器的sObject:Account具有相同的名称。它是一个对象变量,并包含Account sObject上可用的所有字段。
  4. 四个Visualforce表达式都引用了Account变量。他们使用“点符号”访问Account变量中的各个字段。所以,{! Account.Name}获取帐户的名称,依此类推。

但是,收入是多少?它以科学记数法显示。你怎么能把货币显示为货币呢?

数字以科学记数法显示为“原始”值的原因是因为数字是由表达式直接输出的。它将原始值直接放在页面上。要控制值的格式,您需要使用一个组件,并给组件提供值来处理。组件将采取原始值并适当格式化,然后将结果输出到页面上。你会学到如何做到这一点。这里我们只是对访问记录数据感兴趣。

 

告诉我更多…

标准的控制器是相当强大的,我们只是抓了表面。你会在别处学到更多的东西,但是这里有一些亮点。
除了这里所示的简单数据访问之外,标准控制器还提供一组标准操作,例如创建,编辑,保存和删除,您可以使用标准用户界面元素(如按钮和链接)将其添加到您的页面。当您了解有关Visualforce输入表单并将更改保存回数据库时,您将了解有关这些标准操作的更多信息。

要嵌入到对象页面布局中的Visualforce页面,作为对象特定的自定义操作使用,或者在Salesforce应用程序中用作移动卡,必须使用相关对象的标准控制器。

如果您创建了自己的自定义对象(而不是像Account一样使用对象)并且想知道如何引用字段,则必须遵循一个稍微不同的过程。从设置中,在快速查找框中输入对象,然后选择对象,选择您的对象,然后选择该字段。 API名称现在指示您必须在Visualforce页面中使用的字段的名称。例如,如果您的字段名为Foo,则其API名称为Foo__c,并且您将使用该名称引用它 – 如:{! myobject__c.foo__c}。

像标准控制器一样强大,有时你需要做一些不同的事情。这在Visualforce中没有问题。在任何时候,您都可以使用Apex代码替换或扩充它们,并编写自己的控制器或扩展到内置控制器。

Salesforce Visualforce (基础3)使用变量

学习目标

完成本单元后,您将能够:

  • 解释什么是Visualforce表达式,并描述它的用途。
  • 列出可用于Visualforce表达式的三个或更多全局变量。
  • 将Visualforce表达式添加到Visualforce页面。
  • 在Visualforce表达式中使用一个函数。

全局变量和Visualforce表达式简介

Visualforce页面可以显示从数据库或Web服务中检索的数据,根据登录的用户和查看页面而变化的数据等等。这个动态数据是通过使用由页面控制器提供的全局变量,计算和属性在标记中访问的。这些一起被描述为Visualforce表达式。使用表达式将动态输出或值传递给组件,方法是将它们分配给属性。
Visualforce表达式是可以解析为单个值的任何一组字面值,变量,子表达式或运算符。表达式中不允许使用方法调用。

Visualforce中的表达式语法是: {! expression }

任何在{! }分隔符将在页面呈现或使用时动态替换。空白被忽略。

结果值可以是一个原始(整数,字符串等),一个布尔值,一个sObject,一个控制器方法(如一个动作方法)以及其他有用的结果。

全局变量

使用全局变量访问和显示Visualforce标记中的系统值和资源。
例如,Visualforce在名为$ User的全局变量中提供有关登录用户的信息。您可以使用以下形式的表达式来访问$ User全局变量(以及任何其他字段)的字段:{! $ GlobalName.fieldName}。

  1. 打开开发者控制台,然后点击 File | New | Visualforce Page 创建一个新的Visualforce页面。输入UserStatus作为页面名称。
  2. 在编辑器中,用以下替换标记。
    <apex:page>
        
        <apex:pageBlock title="User Status">
            <apex:pageBlockSection columns="1">
            	
                
                
            </apex:pageBlockSection>
        </apex:pageBlock>
        
    </apex:page>
    这个标记创建一个框,为您准备添加一些有用的信息。
  3. 点击 Preview 打开您的页面的预览,您可以在进行更改时查看。
  4. 在<apex:pageBlockSection>标签之间添加以下标记。
    {! $User.FirstName }
    您应该在您创建的用户状态面板中看到您的名字。
  5. 将另外两个使用$ User全局变量的表达式添加到User Status面板的标记中,以使页面如下所示。
    <apex:page>
        
        <apex:pageBlock title="User Status">
            <apex:pageBlockSection columns="1">
                
                {! $User.FirstName } {! $User.LastName } 
               ({! $User.Username })
                
            </apex:pageBlockSection>
        </apex:pageBlock>
        
    </apex:page>

{! …}告诉Visualforce,大括号内的任何内容都是动态的,并以表达式语言编写。它的值是在运行时计算和替换的,当有人查看页面时。

Visualforce表达式不区分大小写,并且{! …}被忽略。所以这些表达式都产生相同的值:

  • {! $User.FirstName}
  • {!$USER.FIRSTNAME}
  • {! $user.firstname }

公式表达式

Visualforce使您可以在表达式语言中使用更多的全局变量。它也支持让你操纵值的公式。
例如,&字符是连接字符串的公式语言运算符。
  1. 在您的UserStatus页面中,使用以下公式表达式替换名字和姓氏的单独表达式。
    {! $User.FirstName & ' ' & $User.LastName }
    这个表达式将登录的用户的名字和姓氏组合在一起,用空格分开。输出应该看起来一样。
  2. 将以下内容添加到用户信息下方的页面标记中。
    <p> Today's Date is {! TODAY() } </p>
    <p> Next week it will be {! TODAY() + 7 } </p>
    这些是使用TODAY()函数的更复杂的公式。函数是内置的计算,您可以通过名称后面的括号来识别。
    第一个表达式简单地计算当前日期,第二个表达式使用加法运算符在日期中添加七天。页面中的输出将如下所示。

    Today's Date is Thu Sep 18 00:00:00 GMT 2014
    Next week it will be Thu Sep 25 00:00:00 GMT 2014
  3. 将以下内容添加到日期表达式下面的页面标记中。
    <p>The year today is {! YEAR(TODAY()) }</p>
    <p>Tomorrow will be day number  {! DAY(TODAY() + 1) }</p>
    <p>Let's find a maximum: {! MAX(1,2,3,4,5,6,5,4,3,2,1) } </p>
    <p>The square root of 49 is {! SQRT(49) }</p>
    <p>Is it true?  {! CONTAINS('salesforce.com', 'force.com') }</p>
    您的网页上的结果将是这样的。

    Visualforce expressions playground

    一些函数,如TODAY(),有一个空括号,但有些函数需要函数用来计算的参数。在这个例子中,YEAR()接受一个由TODAY()函数提供的日期参数,它不带任何参数。 MAX()函数可以使用任意数量的参数。

    CONTAINS()函数特别有趣。它返回一个布尔值:true或者false。它比较文本的两个参数,如果第一个参数包含第二个参数,则返回true。如果不是,则返回false。在这种情况下,字符串“force.com”包含在字符串“salesforce.com”中,所以它返回true。

条件表达式

使用条件表达式根据表达式的值显示不同的信息。
例如,如果发票没有订单项,则可能需要显示单词“none”而不是空白列表。或者,如果某个项目已过期,则可能需要显示“已结束”,而不是显示结束日期和时间。
您可以使用条件公式表达式(如IF())在Visualforce中执行此操作。 IF()表达式有三个参数:

  • 首先是一个布尔值:不管是真还是假。例如,您以前使用的CONTAINS()函数。
  • 第二个参数是第一个参数为true时返回的值。
  • 第三个参数是第一个参数为false时将返回的值。
  1. 在您的UserStatus页面的其他表达式下面,添加以下代码。
    <p>{! IF( CONTAINS('salesforce.com','force.com'), 
         'Yep', 'Nope') }</p>
    <p>{! IF( DAY(TODAY()) < 15, 
         'Before the 15th', 'The 15th or after') }</p>

    在保存更改并查看结果之前,尝试预测它们将会是什么!
    第一个表达式使用与以前相同的CONTAINS()函数计算。 IF()函数将CONTAINS()的布尔结果转换为更有用的显示给用户的文本。同样,第二个表达式在本月上半月显示一条消息,在本月下半月显示另一条消息。

  2. 删除所有的测试表达式,只留下使用$ User全局变量的行。
    换句话说,回到这个页面。

    <apex:page>
        
        <apex:pageBlock title="User Status">
            <apex:pageBlockSection columns="1">
                
                {! $User.FirstName & ' ' & $User.LastName } 
               ({! $User.Username })
                
            </apex:pageBlockSection>
        </apex:pageBlock>
        
    </apex:page>
    让我们使用条件表达式来做一些更有用的事情。
  3. 用以下代码替换$ User.Username表达式的行。
    ({! IF($User.isActive, $User.Username, 'inactive') })
    
    isActive是$ User全局变量上可用的另一个字段。这是一个布尔字段,如果用户处于活动状态,则为true;如果已停用,则为false。现在,“用户状态”面板将显示用户的用户名(如果它们处于活动状态),如果不是,则显示“不活动”(inactive)。

告诉我更多…

在Visualforce表达式中可以使用许多全局变量和函数。
Visualforce中可以使用近二十个全局变量。如您所见,它们对于获取有关当前登录用户的信息非常有用,但也可用于获取有关组织($ Organization),设置($ Setup),有关自定义对象的详细信息($ ObjectType)的详细信息,对象($ Action)等等。请参阅Visualforce全局变量参考。

同样,在Visualforce中可以使用几十个函数。该列表与公式字段中的可用功能类似,但不完全相同。在它们重叠的地方,函数的行为是相同的,所以在编写Visualforce表达式时,可以重复使用大部分关于公式字段的知识。请参阅Visualforce函数参考以获取完整列表。

表达式有许多用途,常常用于为Visualforce组件上的属性提供值。

Salesforce Visualforce (基础2)创建VF Page

学习目标

完成本单元后,您将能够:

  • 解释什么是Visualforce页面,并描述其关键属性。
  • 列出并打开组织中的现有Visualforce页面。
  • 使用开发者控制台创建和编辑Visualforce页面。
  • 在编辑器中识别,添加和自定义Visualforce标签和属性。

创建Visualforce页面简介

Visualforce页面是应用程序开发人员的基本构建块。 Visualforce页面与标准网页类似,但包含访问,显示和更新组织数据的强大功能。页面可以通过一个唯一的URL来引用和调用,就像它们在传统的Web服务器上一样。
Visualforce使用类似于HTML的基于标记的标记语言。每个Visualforce标记对应于一个粗糙或细粒度的用户界面组件,如页面的一部分,列表视图或单个字段。 Visualforce拥有近150个内置组件,并为开发人员创建自己的组件提供了一种方法。 Visualforce标记可以与HTML标记,CSS样式和JavaScript库自由混合,为您实现应用的用户界面提供了相当大的灵活性。

您可以在Salesforce中以多种不同方式查看,创建和编辑Visualforce页面。也可以使用Salesforce API创建和修改Visualforce页面,从而启用各种外部工具。

在开发者控制台中创建Visualforce页面

使用开发者控制台创建和编辑Visualforce页面,访问其他强大的Force.com开发工具。
开发人员控制台具有自动语法高亮显示,标记对匹配,自动建议和自动完成功能,智能缩进功能以及许多其他功能,旨在使其用于编辑标记和代码。这是在同一页面上工作一段时间时使用的最好的内置工具,或者是带有自定义控制器的Visualforce页面,更长,更复杂的代码等等。

按照以下步骤在开发者控制台中创建一个Visualforce页面。

  1. 打开您的名字下的开发者控制台或快速访问菜单(设置齿轮图标Setup gear icon)。
    开发者控制台在新窗口中打开。
  2. 单击 File | New | Visualforce Page.
  3. 输入HelloWorld作为新页面的名称,然后单击确定。
    开发者控制台中会打开一个新的空白Visualforce页面。
  4. 在编辑器中,为页面输入以下标记。
    <apex:page> 
        <h1>Hello World</h1> 
    </apex:page>
  5. 单击 File | Save.
  6. 要查看您的新页面,请单击 Preview.
    呈现的页面在新窗口中打开。请注意,此页面预览会显示没有Salesforce样式的页面。要在Lightning Experience环境中查看您的页面,请打开浏览器的JavaScript控制台并输入以下代码。不要忘记用你的页面名称来替换pageName:

    $A.get("e.force:navigateToURL").setParams(
        {"url": "/apex/pageName"}).fire();

    这个JavaScript触发了Lightning Experience的navigateToURL事件,相当于输入了经典的/ apex / PageName的URL – 你甚至可以在代码中看到这个URL模式。

  7. 在编辑器中,向页面添加一些额外的文本,并保存。
    The Force.com Developer Console
    预览窗口自动刷新以反映您在保存页面时的更改。我们将在以后省略保存说明,但是应该将步骤之间的页面保存起来。

单击 File | Open 以查看现有Visualforce页面的列表。双击一个页面将其打开。您还可以打开其他Salesforce实体,例如Apex类和触发器,Visualforce组件等。

使用自动建议添加属性

在Visualforce组件上设置属性以自定义其行为。使用自动建议快速将属性和值添加到Visualforce组件标签。
按照以下步骤在Visualforce标签上添加和修改属性。

  1. 在您的HelloWorld页面中,在关闭“>”之前,单击打开的<apex:page>标记内部。键入一个空格,然后“s”。
    自动建议提供了您键入的可能完成列表。当您键入其他字符时,建议列表将被简化为只匹配值。

    Auto-suggest for Visualforce attribute values
  2. 按向下箭头键,直到选择“侧边栏”。按回车键。
    侧边栏属性被添加到您的标记中的<apex:page>标记,自动建议为其提供了可能的值。
  3. 使用箭头键或键入“f”选择false,然后按回车键。
    你的代码应该像这样。

    <apex:page sidebar="false"> 
        <h1>Hello World</h1> 
    </apex:page>
  4. 保存您的更改。
  5. 重复上述步骤,将showHeader =“false”添加到<apex:page>标签,并保存更改。
    你的代码应该像这样。

    <apex:page sidebar="false" showHeader="false"> 
        <h1>Hello World</h1> 
    </apex:page>
    当你已经知道你想使用什么组件,以及每个属性是什么和做什么的时候,自动建议是非常棒的。特别是在你还在学习Visualforce的时候,你会经常引用标准组件参考,以了解什么组件存在,它们做什么以及如何使用和定制它们。

超越基础

请注意,sidebar和showHeader属性在Lightning Experience中没有任何效果,并且没有办法抑制Lightning Experience标题。虽然showHeader的默认值是true,但它对Lightning Experience没有任何影响。

该页面仍然包含一些Salesforce样式表,这些表格可以让您匹配Salesforce字体,大小等选项。要禁止所有Salesforce输出,请添加standardStylesheets =“false”以删除样式。

添加和撰写组件以形成页面结构

将组件添加到Visualforce页面,并安排它们构建页面的结构。
按照以下步骤将新的Visualforce标记添加到您的页面,并使用它们为页面创建一个结构。
  1. 在HelloWorld页面中,在文本“Hello World”下添加一个<apex:pageBlock>组件。
    <apex:pageBlock>是一个结构化的用户界面元素,用于对页面上的相关项进行分组。使用自动建议添加它,并将标题属性设置为“块标题”。
  2. 在<apex:pageBlock>组件中添加一个<apex:pageBlockSection>组件。将标题属性设置为“A部分标题”。
    <apex:pageBlockSection>是另一个将结构和层次结构添加到页面的组件。呈现时,用户可以折叠<apex:pageBlockSection>元素以隐藏除标题以外的所有内容。
  3. 在<apex:pageBlockSection>组件中添加一些文本,例如“我是三个深度的组件”。
    你的代码应该像这样。

    <apex:page> 
    
        <h1>Hello World</h1> 
        
        <apex:pageBlock title="A Block Title">
            <apex:pageBlockSection title="A Section Title">
                I'm three components deep!
            </apex:pageBlockSection>
        </apex:pageBlock>
    
    </apex:page>
    您有一个显示一些结构的页面,包含顶级标题,带有标题的可折叠部分以及一些纯文本。

    A simple page with nested components
  4. 在第一个之后添加另一个<apex:pageBlockSection>,并将标题设置为“A New Section”。将一些文本添加到组件正文中,就像您对第一个<apex:pageBlockSection>所做的那样。
    你的代码应该像这样。

    <apex:page> 
    
        <h1>Hello World</h1> 
        
        <apex:pageBlock title="A Block Title">
            <apex:pageBlockSection title="A Section Title">
                I'm three components deep!
            </apex:pageBlockSection>
            
            <apex:pageBlockSection title="A New Section">
                This is another section.
            </apex:pageBlockSection>
        </apex:pageBlock>
    
    </apex:page>
    注意<apex:pageBlockSection>标签是如何嵌套在<apex:pageBlock>标签中的。您不能将小孩<apex:pageBlockSection>标签放在父标签<apex:pageBlock>标签内。
您已经学习了将页面放在一起的所有基本知识,包括创建页面,添加属性和组件,以及将组件组织在一起,为页面提供结构和设计。


告诉我更多…

开发者控制台是您的Salesforce组织内Force.com开发功能最强大,功能最齐全的工具。
另外还有两种内置方法可以在Salesforce中创建和编辑Visualforce页面。
  • 开发模式“快速修复”和页脚是快速创建新页面或对现有页面进行简短编辑的快速方法。对于快速更改或者当你想创建一个简短的页面来测试一些空白页面上的一些新的代码,然后将它们合并到你的应用程序页面,这是非常好的。
  • 在“快速查找”框中输入Visualforce页面,然后选择“Visualforce页面”的“设置”编辑器是最基本的编辑器,但它提供了访问开发者控制台或开发模式页脚中不可用的页面设置的权限。

还有一些可用的外部工具,例如用于Eclipse的Force.com IDE插件和用于SublimeText的MavensMate,它们可以连接到您的Salesforce组织并用于Visualforce开发。

您添加到页面的<apex:pageBlock>和<apex:pageBlockSection>组件将呈现与Salesforce Classic界面元素相匹配的用户界面。还有其他组件也可以让您匹配平台视觉样式,包括<apex:pageBlockSectionItem>和<apex:pageBlockButtons>。你能猜到哪一个嵌套在<apex:pageBlockSection>内?

Visualforce包括近150个内置组件,可提供各种用户界面元素和行为。 Visualforce标准组件参考列出了这些组件,并记录了它们的属性,包括如何使用该组件的示例代码。

Salesforce Visualforce (基础1)介绍

学习目标

完成本单元后,您将能够:

  • 描述什么是Visualforce,以及它的用途。
  • 列出三个或更多可以使用Visualforce的地方。

Visualforce简介

Visualforce是一个Web开发框架,使开发人员能够为可以在Force.com平台上托管的移动和桌面应用程序构建复杂的自定义用户界面。您可以使用Visualforce构建与Lightning Experience风格对应的应用程序,以及您自己的完全自定义界面。
Visualforce使开发人员能够扩展Salesforce的内置功能,将其替换为新功能,并构建全新的应用程序。使用强大的内置标准控制器功能,或在Apex中编写自己的自定义业务逻辑。您可以为自己的组织构建功能,或者在AppExchange中创建出售应用程序。

任何已经构建Web应用程序的人都会熟悉Visualforce应用程序开发。开发人员通过组合组件,HTML和可选的样式元素来创建Visualforce页面。 Visualforce可以与任何标准的Web技术或JavaScript框架进行集成,以实现更多动画和丰富的用户界面。每个页面都可以通过一个唯一的URL访问。当有人访问页面时,服务器执行页面所需的任何数据处理,将页面呈现为HTML,并将结果返回给浏览器进行显示。

Visualforce request processing overview

示例Visualforce页面

以下是Visualforce工作页面的简短示例。
<apex:page standardController="Contact" >
    <apex:form >
        
        <apex:pageBlock title="Edit Contact">

            <apex:pageBlockSection columns="1">
                <apex:inputField value="{!Contact.FirstName}"/>
                <apex:inputField value="{!Contact.LastName}"/>
                <apex:inputField value="{!Contact.Email}"/>
                <apex:inputField value="{!Contact.Birthdate}"/>
            </apex:pageBlockSection>

            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>

        </apex:pageBlock>
        
    </apex:form>
</apex:page>
此页面显示联系人数据输入表单。
Edit contact form
在十几行的标记中,这个页面做了很多。

  • 它连接到Visualforce标准控制器,Visualforce框架的一部分,提供自动数据访问和修改,标准操作等等。
  • 当没有记录ID访问时,页面显示空白数据输入表单。当您单击保存时,从表单数据创建一个新的记录。
  • 当用记录ID访问时,页面将查找该联系人记录的数据,并以可编辑的形式显示。当您单击保存时,对联系人所做的更改将保存回数据库。
  • 每个输入字段都是如何呈现其价值的。
    • 电子邮件字段知道什么是有效的电子邮件地址,如果输入了无效的电子邮件,则显示错误。
    • 日期字段显示一个日期小部件,当你点击字段,使输入日期更容易。
  • 保存按钮调用保存操作方法,这是标准控制器提供的许多标准操作之一。

你可以在哪里使用Visualforce

Salesforce提供了一系列可以在组织中使用Visualforce的方法。您可以扩展Salesforce的内置功能,将其替换为新功能,并构建全新的应用程序。
以下是可以将Visualforce添加到组织的一些方法。

从应用启动器打开一个Visualforce页面

您的Visualforce应用程序和自定义选项卡均可从应用程序启动器获得,您可以通过单击标题中的应用程序启动器图标App Launcher icon来访问该应用程序。
App Launcher apps and tabs

点击一个自定义的应用程序(1)来激活它。应用程序中的项目会显示在导航栏中,包括您添加到应用程序的任何Visualforce选项卡。请注意,您需要将Visualforce页面添加到选项卡,以便在应用启动器中访问它们。所有项目(2)中均可找到不在应用程序中的Visualforce选项卡。

将一个Visualforce页面添加到导航栏

如上例所述,您可以将Visualforce选项卡添加到应用程序,并在应用程序的导航栏中显示为项目。

Navigation bar with Visualforce tab

在标准页面布局中显示Visualforce页面

通过在其上嵌入Visualforce页面来扩展页面布局,以在标准页面上显示完全自定义的内容。除了您需要查看记录的详细信息以查看页面布局之外,此处的行为与Salesforce Classic相同。

Visualforce on a Lightning Experience page layout

在Lightning App Builder中添加Visualforce页面作为组件

在Lightning App Builder中创建自定义应用程序页面时,可以使用Visualforce组件将Visualforce页面添加到页面。

Add a Visualforce page to a Lightning App Builder page

注意

您必须为“闪电体验”,“Salesforce应用”和“闪电社区”启用Visualforce页面才能使其在Lightning App Builder中可用。

启动Visualforce页面作为快速操作

Global action in Lighning Experience
虽然他们在Lightning Experience用户界面中的位置与Salesforce Classic大不相同,但添加快速操作的过程大致相同。将它们添加到对象页面布局上的相应发布者区域。

Adding quick actions to a page layout

通过覆盖标准按钮或链接来显示Visualforce页面

您可以使用Visualforce页面覆盖对象上可用的操作。当用户单击已被覆盖的按钮或链接时,将显示页面而不是标准页面。设置这个与Salesforce Classic非常相似。事实上,在定义一个动作覆盖的时候,你很难说出你正在使用Lightning Experience。

Override the Edit action on Contact object

使用自定义按钮或链接显示Visualforce页面

您可以通过按钮和链接的形式为对象创建新的动作,方法是在对象上定义它们。 Lightning Experience不支持JavaScript按钮和链接,但Visualforce(和URL)项目是。定义Visualforce按钮和链接的过程与Salesforce Classic中的相同,所以我们不打扰在此处显示。